artist
container = container_from(canvas);
Select a data source…
Type Table, then Shift-Enter. Ctrl-space for more options.
sketch = function( p ) {
// Adapted from The Nature of Code by Daniel Shiffman
// http://natureofcode.com
let walker;
let stepSize = 20;
p.setup = function() {
p.createCanvas(p.windowWidth, 800);
walker = new Walker();
p.background(0);
}
p.draw = function() {
walker.step();
walker.render();
}
class Walker {
constructor() {
console.log("created new walker");
this.x = p.width / 2;
this.y = p.height / 2;
}
render() {
let d = p.dist(p.width/2, p.height/2, this.x, this.y);
let c = p.map(d, 0, p.width/2, 255, 0);
p.stroke(0);
p.fill(c);
p.ellipse(this.x, this.y, stepSize, stepSize);
}
step() {
var choice = p.floor(p.random(4));
if (choice === 0) {
this.x+=stepSize;
} else if (choice == 1) {
this.x-=stepSize;
} else if (choice == 2) {
this.y+=stepSize;
} else {
this.y-=stepSize;
}
this.x = p.constrain(this.x, 0, p.width - 1);
this.y = p.constrain(this.y, 0, p.height - 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.
