使用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;
}
}
pop();
基本形象绘制