Public
Edited
Apr 18
(await visibility(),
p5((sketch) => {
sketch.setup = function () {
sketch.createCanvas(500, 500);
};
sketch.draw = function () {
sketch.background(255);
drawTriangle(sketch);
if (sketch.keyIsDown(sketch.LEFT_ARROW)) {
vars.angle -= 0.1;
}
if (sketch.keyIsDown(sketch.RIGHT_ARROW)) {
vars.angle += 0.1;
}
vars.pos = vecmath.trans(vars.pos, vars.angle, vars.velocity);
};
}))
function drawTriangle(sketch) {
sketch.push();
sketch.noStroke();
sketch.fill("steelblue");
sketch.translate(...vars.pos);
sketch.rotate(vars.angle);
sketch.triangle(-15, -5, 0, 0, -15, 5);
sketch.pop();
}
vars = ({
angle: 0,
velocity: 0.1,
pos: [100, 100]
})
p5
x = 100
y = 100
import {p5} from "@tmcw/p5"
import { vecmath } from "@harrystevens/vector-math@254"
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.
