PhD student at the University of Edinburgh
Published
Edited
Apr 30, 2020
1 star
test
.map(d => d * -1)
.reverse()
.concat(test.slice(1))
test = d3.range(0, 200 * 2, 10)
sketch = function(s) {
var step = 0;
var gap = 6;
var r = 125;
// circle maths: x^2 + y^2 = r^2 ==> y = sqrt(r^2 - x^2)
var x = d3.range(-r, r, gap);
var y = x.map(d => Math.sqrt(Math.pow(r, 2) - Math.pow(d, 2)));
// non moving circles
var c1 = [{ x: 150, y: 150 }, { x: 25 + 250 + 125 * 2, y: 150 }];
// moving circles
var m1 = { x: 25 + 250, y: 150 };
var m2 = { x: 25 + 250 + 125, y: 150 };
s.setup = function() {
s.createCanvas(container.width, container.height);
};
s.draw = function() {
s.background('#eee9e2'); // beige
// permanent circles w/ vertical lines
c1.forEach(function(c) {
for (var i = 0; i < x.length; i++) {
s.stroke('#000');
// line(x1, y1, x2, y2)
s.line(c.x + x[i], c.y + y[i], c.x + x[i], c.y - y[i]);
}
});
// moving semicircles w/ horizontal lines
// lazy so I'm just swapping x and y to make the lines go horizontally rather than vertically
var p = step % (x.length * 2);
for (var i = 0; i < x.length; i++) {
// iterate through all lines
s.stroke('#00f');
// line(x1, y1, x2, y2)
if (
(p < x.length && i < p) ||
(p >= x.length && x.length - i > p - x.length)
) {
s.line(m1.x + y[i], m1.y + x[i], m1.x - y[i], m1.y + x[i]);
} else {
s.line(m2.x + y[i], m2.y + x[i], m2.x - y[i], m2.y + x[i]);
}
}
step += .25;
};
}
container = ({ width: 675, height: 300, id: "p5-container" })
myP5 = {
// Resets div container
display.innerHTML = "";
// Reinstantiate the p5 with the sketch
return new p5(sketch, display);
}
d3 = require("d3@5")
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.
