P5.js 鼠标互动:五彩线条和闪烁星星
以下是一个使用 P5.js 实现的代码,通过鼠标滑动绘制五颜六色的线,并在点击鼠标时显示一颗星星。
// 设置画布大小
function setup() {
createCanvas(800, 600);
}
// 绘制画布
function draw() {
background(255); // 设置背景色为白色
// 每次绘制鼠标的当前位置
stroke(random(255), random(255), random(255)); // 随机设置线条颜色
line(mouseX, mouseY, pmouseX, pmouseY); // 绘制线条
// 当鼠标点击时绘制一颗星星
if (mouseIsPressed) {
fill(random(255), random(255), random(255)); // 随机设置星星的填充色
noStroke(); // 不绘制边框
star(mouseX, mouseY, 30, 70, 5); // 绘制星星
}
}
// 绘制星星的函数
function star(x, y, radius1, radius2, npoints) {
let angle = TWO_PI / npoints;
let halfAngle = angle / 2.0;
beginShape();
for (let a = 0; a < TWO_PI; a += angle) {
let sx = x + cos(a) * radius2;
let sy = y + sin(a) * radius2;
vertex(sx, sy);
sx = x + cos(a + halfAngle) * radius1;
sy = y + sin(a + halfAngle) * radius1;
vertex(sx, sy);
}
endShape(CLOSE);
}
将以上代码复制到 P5.js 的编辑器中,运行后,你就可以通过鼠标滑动绘制五颜六色的线,并在点击鼠标时显示一颗星星。
原文地址: https://www.cveoy.top/t/topic/ngCD 著作权归作者所有。请勿转载和采集!