以下是一个使用 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 的编辑器中,运行后,你就可以通过鼠标滑动绘制五颜六色的线,并在点击鼠标时显示一颗星星。

P5.js 鼠标互动:五彩线条和闪烁星星

原文地址: https://www.cveoy.top/t/topic/ngCD 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录