Code voor een rooster
var u = 20; // change to make grid bigger
function setup() {
createCanvas(400, 400);
}
function draw() {
grid();
displayMousePosition();
// YOUR DRAWING HERE!
}
function grid() {
background(200);
stroke(220);
strokeWeight(1);
for (let x = 0; x <= width; x += u) {
for (let y = 0; y <= height; y += u) {
line(x, 0, x, height);
line(0, y, width, y);
}
}
stroke('black');
}
function displayMousePosition() {
textFont('menlo');
textSize(14);
text("x:" + mouseX, 10, 20);
text("y:" + mouseY, 10, 40);
}
var u = 25;
function setup() {
createCanvas(400, 400);
}
function draw() {
background(220);
grid();
rect(0, 0, 50, 50); //links boven
rect(0, 350, 50, 50); // links onder
rect(350, 0, 50, 50); //rechts boven
rect(350, 350, 50, 50); //rechts onder
rect(200, 200, 50, 50); //midden rechts onder
rect(150, 200, 50, 50); //midden links onder
rect(150, 150, 50, 50); //midden links boven
rect(200, 150, 50, 50); //midden rechts boven
ellipse(25, 25, 50, 50); //links boven
ellipse(25, 375, 50, 50); //links onder
ellipse(375, 375, 50, 50); //rechts onder
ellipse(375, 25, 50, 50); //recht boven
}
function grid() {
background(200);
stroke(220);
strokeWeight(1);
for (let x = 0; x <= width; x += u) {
for (let y = 0; y <= height; y += u) {
line(x, 0, x, height);
line(0, y, width, y);
}
}
stroke('black'); // reset stroke
}