互动媒体

互动媒体 作业2-创意自画像

主题：用编程方式创作一幅介绍自己的作品

一、成果展示


二、说明
因为本人比较胖，而且黑，所以脸部设计得比较圆，肤色用的晒黑色
上衣，裤子，鞋子均使用了自己比较喜欢的颜色。
帽子是设计成毕业生戴的那种帽子。
还有本人眼睛较小，上图也能体现出来。
交互的部分在眼睛，随鼠标而动。

三、完整代码
function setup() {
createCanvas(500, 500);
rectMode(CENTER);
}

function draw() {

noStroke();
background(135,206,235);
human();
eye();
}

function human(){

fill(0);//脚
circle(220,460,25);
circle(280,460,25);
fill(128,128,128);
rect(220,400,30,120);
rect(280,400,30,120);

fill( 210,180,140);//手和手臂
circle(130,300,25);
circle(370,300,25);
fill(210,105,30);
quad(190,240,120,290,140,310,190,280);
quad(310,240,310,280,360,310,380,290);

fill(210,105,30);//上半身
quad(190,240,310,240,310,390,190,390);

fill( 210,180,140);//头
circle(250,170,160);

circle(175,160,30)//耳朵
circle(325,160,30)

fill(0) //眉毛
triangle(200,130,230,130,200,135);
triangle(270,130,300,130,300,135);

fill(139,69,19); //鼻子
circle(250,185,5);

fill( 128,0,0);//嘴巴
ellipse(250,220,20,10);

fill(23,18,12);//帽子
triangle(165,110,335,110,250,40);
circle(160,120,20);
circle(340,120,20);
}

///动态眼睛交互，随鼠标而动
function eye(){
var deltax=(mouseX-250)/2507.5;
var deltay=(mouseY-150)/3507.5;

fill(255);
circle(215,150,20);
circle(285,150,20);
fill(0);
circle(215+deltax,150+deltay,10);
circle(285+deltax,150+deltay,10);
}

四、实验心得

这次自画像的实验做起来蛮有趣的。
通过一个个三角形，圆形，椭圆，四边形等，以及各种颜色的搭配，组成了一个人物形象，体会到了码绘的乐趣。

不足的地方是在交互以及动态效果方面做得比较少，感觉还得继续努力学习。