Skip to content

Instantly share code, notes, and snippets.

@davidvandenbor

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

Last active April 28, 2020 01:48
Show Gist options
  • Save davidvandenbor/31ea0b06ad81401fa371230b0dfbff3d to your computer and use it in GitHub Desktop.
Save davidvandenbor/31ea0b06ad81401fa371230b0dfbff3d to your computer and use it in GitHub Desktop.
Download ZIP
Drawing houses with P5.js and javascript nested loops
Raw
Drawing-tiny-houses-with-P5.js.md
Raw
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>
Raw
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);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment