p5js: JavaScript 创意绘画

p5js是一个免费开源的Javascript创意绘画工具, 通过p5js可以实现代码绘画

01 鼠标变色

鼠标触发绘画区域, 即马上变色, 松开恢复

function setup() {
  createCanvas(400, 400); //设置画布大小
}

function draw() {
  if(mouseIsPressed) // 被鼠标触发
  {background(255, 51, 0); //通过w3school colour picker来选择颜色
}
  else
    
  {background(255, 255, 0)} // 鼠标未被触发
}

预览GIF

02 鼠标显示轨迹

鼠标移动会显示其轨迹, 点击会显示另外的颜色

function setup() {
  createCanvas(400, 400);
}

function draw() {
  //background(220); //move out the background can see the mouse track
  if(mouseIsPressed)
    {
      fill(0)
    }
  else
    {
      fill(51, 204, 51)
    }
  rect(mouseX, mouseY, 100, 80) // ellipse(mouseX, mouseY, 80, 80)
}

预览GIF