Estimation statistics, craft beer, data visualization, web scraping, poetry
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
p5(sketch => {
let system;
const c = sketch.color('#DC3F74');
sketch.setup = function() {
sketch.createCanvas(640, 300);
sketch.textAlign(sketch.CENTER);
sketch.textFont('sans-serif');
sketch.textStyle(sketch.BOLD);
};
sketch.draw = function() {
sketch.translate(sketch.millis() / 10 % sketch.width, sketch.height / 2);
sketch.background(viewof background.valueAsNumber);
sketch.fill(c).textSize(100);
sketch.text('p5.js', 0, 0);
};
})
viewof background = html`<input type='range' min=0 max=255 value=255 />`
function* p5(sketch) {
const element = DOM.element('div');
// p5.js really likes its target element to already be in the DOM, not just
// floating around detached. So, before we call P5, we yield it, which puts
// in the DOM.
yield element;
// This is ‘instance mode’ in p5 jargon: instead of relying on lots of
// globals, we create a sketch that has its own copy of everything under p5.
const instance = new P5(sketch, element, true);
// This is the tricky part: when you run P5(sketch, element), it starts a
// loop that updates the drawing a bunch of times a second. If we were just
// to call P5 repeatedly with different arguments, the loops would all keep
// running, one on top of the other. So what we do is we use this cell
// as a generator, and then when that generator is interrupted, like
// when you update the code in the sketch() method, then we call instance.remove()
// to clean it up.
try {
while (true) {
yield element;
}
} finally {
instance.remove();
}
}
p5(sketch => {
let system;
sketch.setup = function() {
sketch.createCanvas(400, 300);
system = new ParticleSystem(sketch, sketch.createVector(sketch.width/2, 50));
};
sketch.draw = function() {
sketch.background(51);
system.addParticle();
system.run();
}
})
// A simple Particle class
class Particle {
constructor(p5, position) {
this.p5 = p5;
this.acceleration = this.p5.createVector(0, 0.05);
this.velocity = this.p5.createVector(this.p5.random(-1, 1), this.p5.random(-1, 0));
this.position = position.copy();
this.lifespan = 255;
}
run() {
this.update();
this.display();
}
// Method to update position
update() {
this.velocity.add(this.acceleration);
this.position.add(this.velocity);
this.lifespan -= 2;
}
// Method to display
display() {
this.p5.stroke(200, this.lifespan);
this.p5.strokeWeight(2);
this.p5.fill(127, this.lifespan);
this.p5.ellipse(this.position.x, this.position.y, 12, 12);
}
// Is the particle still useful?
isDead() {
return this.lifespan < 0;
}
}
class ParticleSystem {
constructor(p5, position) {
this.p5 = p5;
this.origin = position.copy();
this.particles = [];
}
addParticle() {
this.particles.push(new Particle(this.p5, this.origin));
}
run() {
this.particles = this.particles.filter(particle => {
particle.run();
return !particle.isDead();
});
}
}
P5 = require('https://unpkg.com/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.
