Published
Edited
Sep 16, 2020
1 star
Insert cell
Insert cell
p5 = new P5(sketch)
Insert cell
Insert cell
sketch = ( p ) => {
let x = 100;
let y = 100;
let px = 0;
let py = 0;
p.setup = function() {
p.createCanvas(width, 300);
p.background(0);
p.fill(255);
p.textSize(32);
p.smooth();
};

p.draw = function() {
x= p.mouseX
y= p.mouseY
px= p.pmouseX
py= p.pmouseY
let speed = p.abs(x - px) + p.abs(y - py);
p.stroke(speed,0,0); // red to black colouring
p.ellipse(x, y, speed, speed);
// display frame counter
p.push();
p.fill(0)
p.stroke(0)
p.rect(p.width-(32*5),2, 150,36, 10);
p.fill('#F3C98B')
p.text(`${p.frameCount}`, p.width-(32*4),32);
p.pop();
};
// other functions can go here
};

Insert cell
display = html`${p5._curElement.elt}`
Insert cell
Insert cell
P5 = require("https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/p5.min.js").catch(
() => window.P5
)
Insert cell
Insert cell

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.
Learn more