展示成果
静态:
gif:
创作灵感
这次题目是自画像、自己喜欢的事物,所以我选取了自己喜欢的一个q版形象进行模仿。以下是原图:
因为要加上动态和交互,于是我给人物的眼睛、手脚加上动态效果,鼠标点击改变衣服颜色进行交互。
交互代码
// When the user clicks the mouse
let angle1 = 0;
let angle2 = 0;
let scalar = 70;
function mousePressed() {
// Check if mouse is inside the circle
let d = dist(mouseX, mouseY, 110,85);
if (d < 25) {
// Pick new random color values
r = random(255);
g = random(255);
b = random(255);
}
let d1 = dist(mouseX, mouseY, 110,150);
if (d1 < 25) {
// Pick new random color values
r1 = random(255);
g1 = random(125);
b1 = random(255);
}
let d2 = dist(mouseX, mouseY, 110,215);
if (d2 < 25) {
// Pick new random color values
r2 = random(255);
g2 = random(255);
b2 = random(255);
}
let d3 = dist(mouseX, mouseY, 110,280);
if (d3 < 25) {
// Pick new random color values
r3 = random(255);
g3 = random(255);
b3 = random(100);
}
let d4 = dist(mouseX, mouseY, 800,800);
if(d4<800)
{
// Pick new random color values
r = 58;
g = 46;
b = 57;
r1 = 106;
g1 = 82;
b1 = 77;
r2= 210;
g2 =188;
b2= 230;
r3 = 13;
g3 = 27;
b3 = 44;
}
}
function setup() {
createCanvas(800,800);
r = random(255);
g = random(255);
b = random(255);
r1 = random(255);
g1 = random(255);
b1= random(255);
r2 = random(255);
g2 = random(255);
b2= random(255);
r3 = random(255);
g3 = random(255);
b3= random(255);
}
生成动态代码
let ang1 = radians(angle1);
let ang2 = radians(angle2);
let x1 =3*cos(ang1);
let x2=cos(ang1);
let x4=sin(ang1);
let x3 =3*sin(ang1+100);
所有代码
// When the user clicks the mouse
let angle1 = 0;
let angle2 = 0;
let scalar = 70;
function mousePressed() {
// Check if mouse is inside the circle
let d = dist(mouseX, mouseY, 110,85);
if (d < 25) {
// Pick new random color values
r = random(255);
g = random(255);
b = random(255);
}
let d1 = dist(mouseX, mouseY, 110,150);
if (d1 < 25) {
// Pick new random color values
r1 = random(255);
g1 = random(125);
b1 = random(255);
}
let d2 = dist(mouseX, mouseY, 110,215);
if (d2 < 25) {
// Pick new random color values
r2 = random(255);
g2 = random(255);
b2 = random(255);
}
let d3 = dist(mouseX, mouseY, 110,280);
if (d3 < 25) {
// Pick new random color values
r3 = random(255);
g3 = random(255);
b3 = random(100);
}
let d4 = dist(mouseX, mouseY, 800,800);
if(d4<800)
{
// Pick new random color values
r = 58;
g = 46;
b = 57;
r1 = 106;
g1 = 82;
b1 = 77;
r2= 210;
g2 =188;
b2= 230;
r3 = 13;
g3 = 27;
b3 = 44;
}
}
function setup() {
createCanvas(800,800);
r = random(255);
g = random(255);
b = random(255);
r1 = random(255);
g1 = random(255);
b1= random(255);
r2 = random(255);
g2 = random(255);
b2= random(255);
r3 = random(255);
g3 = random(255);
b3= random(255);
}
function draw() {
background(255);
/帽子/
beginShape();
textSize(20);
fill(r, g, b);
text('帽子:',30,90);
ellipse(110, 85, 50, 50);
stroke(0,0,0);
strokeWeight(6);
vertex(209,262);
bezierVertex(239,12,534,37,557,258);
bezierVertex(453,144,279,167,209,262);
endShape();
beginShape();
fill(r, g, b);vertex(210,259);
bezierVertex(298,145,497,156,560,271);
bezierVertex(559,317,561,294,545,350);
bezierVertex(467,243,311,232,228,339);
bezierVertex(216,317,205,292,208,270);
endShape();
noFill();
beginShape();
vertex(264,214);
bezierVertex(255,187,253,169,260,139);
endShape();
beginShape();
vertex(310,193);
bezierVertex(300,161,300,