使用p5.js画一幅创意自画像

使用p5.js画一幅创意自画像

使用p5.js画一幅创意自画像

用编程方式创作一幅介绍自己的图片，因为我很喜欢五月天，所以我的自画像就是展示我去看演唱会的样子，穿着五月天Logo的stayrealT恤，摇着荧光棒，快乐追星!!

工具

网页版p5.js ( https://editor.p5js.org）

预期效果

能实现交互效果，鼠标移到荧光棒开关时，荧光棒可以打开，并且随时间变换不同的颜色，鼠标点击任意位置时，背景可以切换到五月天LOGO的皇冠亮起。
但是我试了一下，我想像的东西要实现的话，过程会很繁琐，以我的能力和耐心，我觉得不行。(dbq五月天）

最终效果

链接：https://editor.p5js.org/couchpotatooo/full/W8HeSmo9C
图片：


荧光棒可以变色，但是过程很短只能在刚运行的时候看到变色过程。
鼠标点击任意位置时，可以进行背景的简单切换，切换的背景可以动态变换（虽然图形很简单）

步骤及代码

首先，预设背景：

function setup() {
   
  createCanvas(600, 400);
  happy=0;
  i=1;
}

happy=0；i=1；是为了后面两种不同情况的背景变换。
背景变换：

push();
    if(happy===0){
   
    background(194,158,199);
 fill(189,125,181);
 noStroke();
    rect(0,50,600,100);
 rect(0,200,600,100);
    rect(0,350,600,100);
    }
  else{
   
    background(238,180,180);
    fill(205,155,155);
    noStroke();
    y1=50*(i-3); 
    rect(0,y1,600,100);
    rect(0,y1+150,600,100);
    rect(0,y1+300,600,100);  
    rect(0,y1+450,600,100);
    i+=0.03;
    if(y1>50)
    {
   
      i=1