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')
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.