p5((s) => {
s.setup = function () {
s.createCanvas(width, height)
};
s.draw = function () {
s.noFill();
s.translate(width / 2, height / 2)
s.strokeWeight(5);
s.background(255);
s.noStroke()
s.fill(255, 255, 0)
s.ellipse(0, 0, 150, 150)
s.noFill();
s.stroke(0)
s.arc(0, 0, 150, 150, 0, s.PI)
s.arc(0, 0, 175, 175, 0, s.frameCount * 0.01)
s.arc(0, 0, 200, 200, (-s.PI / 2) + s.frameCount * 0.01, s.frameCount * 0.01)
};
})
p5((s) => {
s.setup = function () {
s.createCanvas(width, height)
};
s.draw = function () {
s.noFill();
s.strokeWeight(5);
s.background(255);
let start = { x: 50, y: 50 }
let controlPoint1 = { x: s.mouseX, y: s.mouseY }
let controlPoint2 = { x: width - 50, y: 50 }
let end = { x: width - 50, y: height - 50 }
s.stroke(128);
s.line(start.x, start.y, controlPoint1.x, controlPoint1.y)
s.line(end.x, end.y, controlPoint2.x, controlPoint2.y)
s.stroke(255, 80, 0)
s.bezier(start.x, start.y, controlPoint1.x, controlPoint1.y, controlPoint2.x, controlPoint2.y, end.x, end.y);
};
})
p5((s) => {
s.setup = function () {
s.createCanvas(width, height)
};
s.draw = function () {
s.noFill();
s.strokeWeight(5);
s.background(255);
let start = { x: 50, y: 50 }
let controlPoint = { x: s.mouseX, y: s.mouseY }
let end = { x: width - 50, y: height - 50 }
s.stroke(128);
s.line(start.x, start.y, controlPoint.x, controlPoint.y)
s.line(end.x, end.y, controlPoint.x, controlPoint.y)
s.stroke(255, 80, 0)
s.bezier(start.x, start.y, controlPoint.x, controlPoint.y, controlPoint.x, controlPoint.y, end.x, end.y);
};
})
p5((s) => {
s.setup = function () {
s.createCanvas(width, height)
};
s.draw = function () {
s.noFill();
s.strokeWeight(5);
s.background(255);
let controlPoint1 = { x: 50, y: 100 }
let start = { x: width - 200, y: 50 }
let end = { x: s.mouseX, y: s.mouseY }
let controlPoint2 = { x: 50, y: height - 100 }
s.stroke(128);
s.curve(controlPoint1.x, controlPoint1.y, controlPoint1.x, controlPoint1.y, start.x, start.y, end.x, end.y)
s.curve(start.x, start.y, end.x, end.y, controlPoint2.x, controlPoint2.y, controlPoint2.x, controlPoint2.y)
s.stroke(255, 80, 0)
s.curve(controlPoint1.x, controlPoint1.y, start.x, start.y, end.x, end.y, controlPoint2.x, controlPoint2.y);
};
})
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
import {p5} from "@thometnanni/p5";
height = 400
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.
