PhD student at the University of Edinburgh
Published
Edited
Mar 29, 2019
6 stars
// display the p5 container
display = {
let el = document.createElement("div");
el.id = container.id;
el.style.width = `${container.width}px`;
el.style.height = `${container.height}px`;
return el;
}
sketch = function(s) {
var x = -130;
var y = 30;
var xspeed = 4.5;
var yspeed = 1.5;
s.setup = function() {
s.createCanvas(container.width, container.height);
};
s.draw = function() {
s.background(215, 235, 255);
x += xspeed;
y += yspeed;
for (var i = 0; i < 5; i++) {
var xx = x + i * 200;
var yy = y + (i * 200) / 3;
s.triangle(xx + 35, yy + 10, xx + 25, yy + 20, xx + 120, yy + 70);
s.triangle(xx + 25, yy + 20, xx + 25, yy + 35, xx + 120, yy + 70);
s.triangle(xx + 20, yy + 60, xx + 20, yy + 70, xx + 120, yy + 70);
s.triangle(xx + 20, yy + 30, xx + 0, yy + 60, xx + 120, yy + 70);
}
if (x > 70) {
x -= 200;
y -= 200 / 3;
}
};
}
container = ({ width: 800, height: 500, id: "p5-container" })
myP5 = {
// Resets div container
display.innerHTML = "";
// Reinstantiate the p5 with the sketch
return new p5(sketch, display);
}
p5 = require("p5")
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.
