zeekay/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    an iteration on a procedural art project from @randylubin
Built with blockbuilder.org
forked from micahstubbs's block: bezier curve iterations with p5js

  
## index.html
<html>
<head>
  <meta charset="UTF-8">
  <script language="javascript" type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/p5.min.js"></script>
  <!-- uncomment lines below to include extra p5 libraries -->
  <!--<script language="javascript" src="libraries/p5.dom.js"></script>-->
  <!--<script language="javascript" src="libraries/p5.sound.js"></script>-->
  <script language="javascript" type="text/javascript" src="sketch.js"></script>
  <!-- this line removes any default padding and style. you might only need one of these values set. -->
  <style> body {padding: 0; margin: 0;} </style>
</head>

<body>
</body>
</html>

## sketch.js
function setup() {
  //Use the sizeMultiplier to adjust the size of the image. The multiplier 5.76 creates a 20 inch X 20 inch picture
  sizeMultiplier = 1; // 5.76;
  createCanvas(1000 * sizeMultiplier, 1000 * sizeMultiplier);

  //change the background color if you want to see the size of the canvas
  background(250)

  //Use random seeds to generate different versions of the art, then pick the one you like best and lock it in

  ourSeed = round(random(10000)) //Final Choice: 7337
  randomSeed(ourSeed);
  noiseSeed(ourSeed);

/*
  //Uncomment the following line to display the seed number on the canvas
 fill(0)
 textSize(30)
 text(ourSeed, 10, 10, 300, 300)
*/

  //If you want to see the art grow over time, play with the frameRate otherwise give an iteration number
  animated = true;

  //Final choice: 476, 747, 1657
  iterationNumber = 100; // 1657
  strokeWeight(3); // 3
  increment = .005;  //.005
  bezierMagnifier = 1; // 1

  frameRate(60)

  if(animated) {
    iterationNumber = 0;
  }
  else {
      noLoop();
  }


  stroke(0, 25); // 0, 18

  noFill();
  t = 0;

// Loops if not animated
  for (i=0; i<iterationNumber; i++) {
    loop();
    noLoop();
  }

}

function draw() {

  redValue = map(noise(t),0,0.44,0,255)
  greenValue = map(noise(t+35),0,0.73,0,255)
  blueValue = map(noise(t+60),0,0.9,0,255)

  stroke(redValue, greenValue, blueValue, 18);

  var x1 = width * noise(t + 15);
  var x2 = width * noise(t + 25);
  var x3 = width * noise(t + 35);
  var x4 = width * noise(t + 45);
  var y1 = height * noise(t + 55);
  var y2 = height * noise(t + 65);
  var y3 = height * noise(t + 75);
  var y4 = height * noise(t + 85);

  bezier(x1, y1, x2, y2, x3, y3, x4, y4);

  t += increment;

/*
  if (frameCount == iterationNumber){
    saveCanvas('aandm' + iterationNumber, 'png');
  }
*/
/*
  //Frame Count

  noStroke()
  fill(250)
  rect(10,50,300,50)

  fill(0)
  text(frameCount, 10, 50, 300, 300)
  stroke(0,18)
  noFill()
*/
}


//Saves the output as a png when you click the mouse
/*
function mouseClicked() {
  saveCanvas('aandm476', 'png');
};*/
	<html>
	<head>
	<meta charset="UTF-8">
	<script language="javascript" type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/p5.min.js"></script>
	<!-- uncomment lines below to include extra p5 libraries -->
	<!--<script language="javascript" src="libraries/p5.dom.js"></script>-->
	<!--<script language="javascript" src="libraries/p5.sound.js"></script>-->
	<script language="javascript" type="text/javascript" src="sketch.js"></script>
	<!-- this line removes any default padding and style. you might only need one of these values set. -->
	<style> body {padding: 0; margin: 0;} </style>
	</head>

	<body>
	</body>
	</html>
	function setup() {
	//Use the sizeMultiplier to adjust the size of the image. The multiplier 5.76 creates a 20 inch X 20 inch picture
	sizeMultiplier = 1; // 5.76;
	createCanvas(1000 * sizeMultiplier, 1000 * sizeMultiplier);

	//change the background color if you want to see the size of the canvas
	background(250)

	//Use random seeds to generate different versions of the art, then pick the one you like best and lock it in

	ourSeed = round(random(10000)) //Final Choice: 7337
	randomSeed(ourSeed);
	noiseSeed(ourSeed);

	/*
	//Uncomment the following line to display the seed number on the canvas
	fill(0)
	textSize(30)
	text(ourSeed, 10, 10, 300, 300)
	*/

	//If you want to see the art grow over time, play with the frameRate otherwise give an iteration number
	animated = true;

	//Final choice: 476, 747, 1657
	iterationNumber = 100; // 1657
	strokeWeight(3); // 3
	increment = .005; //.005
	bezierMagnifier = 1; // 1

	frameRate(60)

	if(animated) {
	iterationNumber = 0;
	}
	else {
	noLoop();
	}


	stroke(0, 25); // 0, 18

	noFill();
	t = 0;

	// Loops if not animated
	for (i=0; i<iterationNumber; i++) {
	loop();
	noLoop();
	}

	}

	function draw() {

	redValue = map(noise(t),0,0.44,0,255)
	greenValue = map(noise(t+35),0,0.73,0,255)
	blueValue = map(noise(t+60),0,0.9,0,255)

	stroke(redValue, greenValue, blueValue, 18);

	var x1 = width * noise(t + 15);
	var x2 = width * noise(t + 25);
	var x3 = width * noise(t + 35);
	var x4 = width * noise(t + 45);
	var y1 = height * noise(t + 55);
	var y2 = height * noise(t + 65);
	var y3 = height * noise(t + 75);
	var y4 = height * noise(t + 85);

	bezier(x1, y1, x2, y2, x3, y3, x4, y4);

	t += increment;

	/*
	if (frameCount == iterationNumber){
	saveCanvas('aandm' + iterationNumber, 'png');
	}
	*/
	/*
	//Frame Count

	noStroke()
	fill(250)
	rect(10,50,300,50)

	fill(0)
	text(frameCount, 10, 50, 300, 300)
	stroke(0,18)
	noFill()
	*/
	}


	//Saves the output as a png when you click the mouse
	/*
	function mouseClicked() {
	saveCanvas('aandm476', 'png');
	};*/