Published
Edited
Mar 28, 2021
Insert cell
Insert cell
md`From https://p5js.org/examples/structure-create-graphics.html`
Insert cell
p5(sketch => {
let system;
let pg;
sketch.setup = function() {
//sketch.createCanvas(width, 320);
sketch.createCanvas(width, 400);
pg = sketch.createGraphics(400, 250);
};
sketch.draw = function() {
//sketch.translate(sketch.width / 2, sketch.height / 2);
//sketch.background(200);
//sketch.rect(-50, -50, 100, 100);
// draw a circle
sketch.fill(0, 12);
sketch.rect(0, 0, sketch.width, sketch.height);
sketch.fill(255);
sketch.noStroke();
sketch.ellipse(sketch.mouseX, sketch.mouseY, 60, 60);

// set up graphic
pg.background(51);
pg.noFill();
pg.stroke(255);
pg.ellipse(sketch.mouseX - 150, sketch.mouseY - 75, 60, 60);

//Draw the offscreen buffer to the screen with image()
sketch.image(pg, 150, 75);
}
})
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