import {p5} from "@thometnanni/p5";
p5((s) => {
let image;
let height;
let width = 500;
s.preload = function () {
image = s.loadImage(imageURL);
};
s.setup = function () {
let ratio = width / image.width;
height = image.height * ratio;
s.createCanvas(width, height);
image.resize(width, height);
};
s.draw = function () {
s.image(image, 0, 0);
};
})
p5((s) => {
let image;
let height;
// let width = 500;
s.preload = function () {
image = s.loadImage(imageURL);
};
s.setup = function () {
let ratio = width / image.width;
height = image.height * ratio;
s.createCanvas(width, height);
image.resize(width, height);
};
s.draw = function () {
for (let i = 0; i < 50; i++) {
let x1 = s.random(image.width);
let y1 = s.random(image.height);
let x2 = x1;
let y2 = y1 + s.random(-50, 50);
let fragmentWidth = 1;
let fragmentHeight = 100;
let source = [x1, y1, fragmentWidth, fragmentHeight];
let target = [x2, y2, fragmentWidth, fragmentHeight];
image.copy(image, ...source, ...target);
}
s.image(image, 0, 0);
};
})
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
p5((s) => {
s.preload = function () {};
s.setup = function () {};
s.draw = function () {};
})
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.
