Let's build a better world, together.
Published
Edited
Feb 19, 2022
1 star
{
if (window.p_shape !== undefined) {
window.p_shape.remove();
}
window.p_shape = new P5(
(p) => {
p.setup = () => {
p.createCanvas(640, 640);
p.pixelDensity(1);
};
p.draw = () => {
// 绘制背景色
p.background(p.color(120, 120, 120));
// 设置轮廓线条宽度
p.strokeWeight(2);
// 设置轮廓线条颜色
p.stroke(0, 0, 255);
// 绘制直线
p.line(0, 0, p.width, p.height);
// 绘制圆
p.circle(200, 200, 60);
// 绘制矩形（长方形）
p.rect(220, 240, 60, 120);
// 绘制三角形
p.triangle(150, 60, 120, 120, 180, 120);
};
},
document.querySelector("#shape"),
true
);
return "Shapes";
}
{
{
if (window.p_animation !== undefined) {
window.p_animation.remove();
}
window.p_animation = new P5(
(p) => {
p.setup = () => {
p.createCanvas(640, 640);
p.pixelDensity(1);
};
p.draw = () => {
p.background(p.color(120, 120, 120));
p.strokeWeight(2);
p.stroke(0, 0, 255);
p.circle(100, p.frameCount, 20); // p.frameCount 执行动画效果
};
},
document.querySelector("#animation"),
true
);
return "Succeed";
}
}
{
if (window.p_trajectory !== undefined) {
window.p_trajectory.remove();
}
window.p_trajectory = new P5(
(p) => {
p.setup = () => {
p.createCanvas(640, 320);
p.pixelDensity(1);
};
p.draw = () => {
p.background(p.color(120, 120, 120));
const ratio = 0.0002;
for (let x = 0; x < p.width; x = x + 1) {
p.point(x, 60 + ratio * x * x);
}
};
},
document.querySelector("#trajectory"),
true
);
return "Bullet";
}
{
if (window.p_noise !== undefined) {
window.p_noise.remove();
}
window.p_noise = new P5(
(p) => {
p.setup = () => {
p.createCanvas(640, 480);
p.pixelDensity(1);
};
p.draw = () => {
p.background(0);
const noiseScale = 0.02;
for (let x = 0; x < p.width; x++) {
let noiseVal = p.noise(
(p.mouseX + x) * noiseScale,
p.mouseY * noiseScale
);
p.stroke(noiseVal * 255);
p.line(x, p.mouseY + noiseVal * 80, x, p.height);
}
};
},
document.querySelector("#noise"),
true
);
return "Noise";
}
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.
