Public
Edited
Dec 28, 2023
(await visibility(),
p5((sketch) => {
sketch.setup = () => {
sketch.createCanvas(450, 450);
};
sketch.draw = () => {
sketch.background(255);
[...Array(45).keys()].forEach((x, i) => {
sketch.stroke(0);
sketch.noFill();
sketch.strokeWeight(0.5);
sketch.line(10*x, 0, 10*x, 450);
sketch.line(0, 10*x, 450, 10*x);
});
sketch.stroke("red");
sketch.strokeWeight(2);
var k = 2;
var x_curr = 200;
var y_curr = 200;
sketch.beginShape();
sketch.vertex(x_curr, y_curr);
[...Array(50).keys()].forEach((x, i) => {
x_curr += k*get_diff(x,i)
y_curr += k*get_diff(x-2,i)
sketch.vertex(x_curr, y_curr)
});
sketch.endShape();
sketch.stroke("green");
var x_curr2 = 200;
var y_curr2 = 200;
sketch.beginShape();
sketch.vertex(x_curr2, y_curr2);
[...Array(50).keys()].forEach((x, i) => {
x_curr2 += k*get_diff(x+1,i)
y_curr2 += k*get_diff(x-1,i)
sketch.vertex(x_curr2, y_curr2)
});
sketch.endShape();
sketch.stroke("blue");
var x_curr2 = 200;
var y_curr2 = 200;
sketch.beginShape();
sketch.vertex(x_curr2, y_curr2);
[...Array(50).keys()].forEach((x, i) => {
x_curr2 += k*get_diff(x+2,i)
y_curr2 += k*get_diff(x,i)
sketch.vertex(x_curr2, y_curr2)
});
sketch.endShape();
sketch.stroke("orange");
var x_curr2 = 200;
var y_curr2 = 200;
sketch.beginShape();
sketch.vertex(x_curr2, y_curr2);
[...Array(50).keys()].forEach((x, i) => {
x_curr2 += k*get_diff(x+3,i)
y_curr2 += k*get_diff(x+1,i)
sketch.vertex(x_curr2, y_curr2)
});
sketch.endShape();
sketch.stroke("purple");
var x_curr2 = 200;
var y_curr2 = 200;
sketch.beginShape();
sketch.vertex(x_curr2, y_curr2);
[...Array(50).keys()].forEach((x, i) => {
x_curr2 += k*get_diff(x+4,i)
y_curr2 += k*get_diff(x+2,i)
sketch.vertex(x_curr2, y_curr2)
});
sketch.endShape(); };
}))
import {p5} from '@makio135/p5'
[...Array(10).keys()].map((x, i) => [get_diff(x,i), get_diff(x-2,i)])
function get_diff(x,i) {return (x % 4 != 0) * (2 * (Math.ceil(x / 4) % 2) - 1) * (i+1)}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
