Public
Edited
Oct 27, 2023
import { p5 } from '@thometnanni/p5'
p5((s) => {
s.setup = function () {
s.createCanvas(900, 300);
s.frameRate(24);
};
s.draw = function () {
s.background(255,15);
s.text('Mac N Cheese', s.random(50,800), s.random(50,250))
}
})
p5((s) => {
let song = ["I", "want", "Mac", "N", "Cheese"];
let i = 0;
s.setup = function () {
s.createCanvas(900, 300);
s.frameRate(2);
s.textSize(100);
};
s.draw = function () {
s.background(255);
s.text(song[i], 150, 150)
i++;
if (i >= 5){i=0}
}
})
p5((s) => {
s.setup = function () {
s.createCanvas(width, 300,s.WEBGL);
s.frameRate(50);
pg = createGraphics(200, 200);
pg.textSize(20);
};
s.draw = function () {
s.background(0);
s.rotateY(s.frameCount * 0.01);
s.scale(1);
s.box(100);
}
})
p5((s) => {
let pg;
s.setup = function () {
s.createCanvas(width, 300,s.WEBGL);
s.frameRate(50);
pg = s.createGraphics(200, 200);
pg.textSize(20);
pg.textAlign(3);
};
s.draw = function () {
s.background(0);
pg.background(255);
pg.text('MAC N CHEESE', 20, 50, 50, 150);
s.rotateY(s.frameCount * 0.01);
s.scale(1);
s.texture(pg);
s.box(100);
}
})
p5((s) => {
s.setup = function () {
s.createCanvas(width, 250);
s.colorMode(s.HSL, 360, 100, 100); // Set color mode to HSL
s.background(250);
s.textSize(30);
};
s.draw = function () {
s.background(s.frameCount*1 % 360, 100, 50);
s.text('Mac N Cheese', width*2/5, 250/2);
s.fill(s.frameCount*10 % 360,100,50);
};
})
Select a data source…
Type Chart, then Shift-Enter. Ctrl-space for more options.
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.
