source bestanden op JSBin https://jsbin.com/dogiper/edit?html,js,output
Last active
April 28, 2020 01:48
-
-
Save davidvandenbor/31ea0b06ad81401fa371230b0dfbff3d to your computer and use it in GitHub Desktop.
Drawing houses with P5.js and javascript nested loops
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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>Huisjes maken met 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> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // 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