davidvandenbor/Drawing-tiny-houses-with-P5.js.md

## Drawing-tiny-houses-with-P5.js.md

      
    Raw
  

              Drawing-tiny-houses-with-P5.js.md
            
          
    Drawing tiny houses with P5.js and javascript nested loops

Using P5.js in combination with nested javascript loops to draw a grid of tiny houses. Preview: at bl.ocks.org
Edit / Play around with it for yourself in Plunker! > See link below:
https://plnkr.co/edit/gist:31ea0b06ad81401fa371230b0dfbff3d

  
## index.html
<!DOCTYPE html>
<html lang="en">

<head>
  <meta name="description" content="Huisjes tekenen met P5.js">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Drawing houses with p5.js</title>

  <!-- Links to P5.js libraries -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/p5.js" crossorigin=""></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/addons/p5.dom.min.js" crossorigin=""></script>
</head>

<body>
  <script src="index.js"></script>
</body>

</html>

## index.js
// The p5.js push() function allows you to create a new state and pop() function restores the state to the previous conditions. This allows you to have completely different settings applied to individual objects without worrying those settings to affect the shapes that come after as long as you do everything in between a push() and a pop() call. Here is how it works:

function setup() {
  createCanvas(900, 900);
}

function draw() {
  background(240);
  for (var x = 5; x < 600; x = x + 50) {
    for (var y = 5; y < 600; y = y + 50) {
      push();
      translate(x, y);
      drawHouse();
      pop();
    }
  }
}

function drawHouse() {
  triangle(15, 0, 0, 15, 30, 15);
  rect(0, 15, 30, 25);
  rect(12, 30, 10, 10);
}
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta name="description" content="Huisjes tekenen met P5.js">
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Drawing houses with p5.js</title>

	<!-- Links to P5.js libraries -->
	<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/p5.js" crossorigin=""></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/addons/p5.dom.min.js" crossorigin=""></script>
	</head>

	<body>
	<script src="index.js"></script>
	</body>

	</html>
	// The p5.js push() function allows you to create a new state and pop() function restores the state to the previous conditions. This allows you to have completely different settings applied to individual objects without worrying those settings to affect the shapes that come after as long as you do everything in between a push() and a pop() call. Here is how it works:

	function setup() {
	createCanvas(900, 900);
	}

	function draw() {
	background(240);
	for (var x = 5; x < 600; x = x + 50) {
	for (var y = 5; y < 600; y = y + 50) {
	push();
	translate(x, y);
	drawHouse();
	pop();
	}
	}
	}

	function drawHouse() {
	triangle(15, 0, 0, 15, 30, 15);
	rect(0, 15, 30, 25);
	rect(12, 30, 10, 10);
	}