第二幅“码绘”——创意自画像

主题：

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

工具：

p5.js

准备阶段：

将图像导入画板中，便于计算坐标以及绘制
具体步骤：
1、上传图片
2、加载图片

var img; //定义图像
function preload(){ 
 //加载图片文件 
 img=loadImage("图像名.格式"); 
} 
  
function setup() {  
 createCanvas(400, 400); 
}  
  
function draw() {  
 background(220); 
 //坐标原点设为图片中心 
 imageMode(CENTER); 
 //绘制图片 
 image(img,200,200); 
}

两个主要函数：
mageMode()：设置图片中心，常用的有CENTER、CORNER，CENTER为中心，CORNER为左上角
image()：绘制图片，image(“图片地址”,x,y,length,width)
第四、五个参数为图片长与宽，若不填的话则使用原图片长宽

基本绘图函数

arc(x, y, width, height, start, stop, [mode], [detail])

用于绘制弧形，mode可以不填写，也可以填写CHORD, PIE or OPEN

quad(x1, y1, x2, y2, x3, y3, x4, y4)//绘制四边形
ellipse(x, y, w, [h])//绘制椭圆or圆
rect(x, y, w, h, [tl], [tr], [br], [bl])//绘制（圆角）矩形
vertex(x, y)
beginShape([kind])

vertex(x, y)可以画点、线、自定义多边形，但是必须包括在 beginShape()和endShape()之间

自画像效果图

交互功能

1、动态眼睛

 //动态眼睛交互，随鼠标而动
function eyes(){
  var deltax=(mouseX-250)/250*7.5;
  var deltay=(mouseY-150)/350*7.5;
  fill(255);

  circle(150,160,38);
  circle(260,160,38);
  fill(0);
  circle(150+deltax,160+deltay,20);
  circle(260+deltax,160+deltay,20);
}

效果图：

2、头发变色

function keyPressed()//按下了键盘
{
	 if (keyCode === 66) {//B（bule）
       R=30;
       G=144;
       B=255; 
  } 
  else if (keyCode ===71 ) { //G (green)
    haircolor = 42;
    R=152
    G=251
    B=152 
  }
   else if (keyCode === 89) { //Y YELLOW
    R=255
     G=185
     B=15 
  } else if (keyCode === 79) { //O orange
   R=244
    G=164
    B=96 
  }
  else if (keyCode === 80) { //P pink
    R=255
    G=228
    B=225 
  }
   else if (keyCode === 86) { //V O
   R=139 
   G=101
   B=8 
  } 
  else if (keyCode === 82) { //R Red
   R=255 
    G=48 
    B=48 
  } 
  return false; // prevent default
}

功能:不同键盘对应发色。
键盘对应ASCII码查看：http://keycode.info/

全部代码

var R=33
var G=33
var B=33  

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

function draw() {
 
  background(255, 114, 86 );//背景
   //头发
  fill(R,G,B);
 // noFill();
  stroke(0);
  strokeWeight(2);
  arc(205,180,270,300,-PI*5/4,PI/4,OPEN);
  strokeWeight(3);
  line(187,99,186,132);
 line(157,95,156,132);
  line(217,99,216,132);
  line(247,95,248,132);
  //脖子
  beginShape();
  fill(255 ,250 ,240 );
  //noFill();
  strokeWeight(2);
  stroke(0); 
  vertex(185,239);
  vertex(185,289);
  vertex(228,289);
  vertex(228,239);
  endShape()；
  //衣服
  beginShape();
  fill(230, 230, 250 );
  //noFill();
  strokeWeight(2);
  stroke(0); 
  vertex(88,400);
  vertex(100,384);
   vertex(112,351);
  vertex(129,314);
  vertex(138,300);
  vertex(186,291);
  vertex(208,287);
  vertex(224,288);
  vertex(229,291);
  vertex(269,300);
  vertex(272,303);
  vertex(280,324);
  vertex(305,399);
 endShape();  
  //衣褶
 noFill();
  stroke(0);
  curve(129,307,137,308,139,366,120,376);
  curve(136,367, 139, 372, 130, 400, 125, 400);
  curve(287,317,277,317,268,368,264,396);
  curve(277,317,269,374,276,399,279,279);
  //领结
   beginShape();
  fill(255, 248, 220 );
  strokeWeight(2);
  stroke(0); 
  vertex(151,298);
  vertex(267,298);
  vertex(247,334);
  vertex(236,346);
  vertex(205,345);
  vertex(174,348);
  vertex(159,320);
  endShape();
  fill(241,236,233);//衣服
  noStroke();
  triangle(205,343,161,294, 240,294);  
  //衣领
  beginShape();
  fill(255, 228, 225 );
  strokeWeight(2);
  stroke(0); 
  vertex(182, 259);
  vertex(193,319);
  vertex(194,324);
  vertex(197, 334);
  vertex(205,342);
  vertex(185, 337);
  vertex(163,324);
  vertex(147,308);
  vertex(136, 297);
  vertex(148,282);
  vertex(170,267);
  vertex(182, 259);
  endShape();
   beginShape();
  noFill();
  strokeWeight(2);
  stroke(0); 
  vertex(229,260);
  vertex(229,288);
  vertex(226,304);
  vertex(209,342);
  vertex(245,324);
  vertex(262,310);
  vertex(273,294);
  vertex(259,283);
  vertex(244,270);
  vertex(229,260);
  endShape();  
  //领结
   beginShape();
  fill(255, 228, 225 );
  strokeWeight(2);
  stroke(0); 
  vertex(229,260);
  vertex(229,288);
  vertex(226,304);
  vertex(209,342);
  vertex(245,324);
  vertex(262,310);
  vertex(273,294);
  vertex(259,283);
  vertex(244,270);
  vertex(229,260);
  endShape();  
   beginShape();
  fill(205, 85, 85 );
  //noFill();
  strokeWeight(2);
  stroke(0); 
  vertex(199,345);
  vertex(201,350);
  vertex(211,350);
  vertex(211,346);
  endShape();
  quad(205,350, 205,380, 179,398,176,362);
  quad(206,350, 211,386, 238,399,241,373); 
  //脸
  fill(255 ,250 ,240 );
  bezier(100,135, 100,135, 60, 250, 210, 250);
  bezier(305,135, 305,135, 355,250,205, 250);
  //noStroke();
  //fill(253,245,230);
  noStroke();
  triangle(100, 135, 305, 135,209, 250);  
  //眼睛
  eyes(); 
  //腮红
   stroke(255,47,47);
    strokeWeight(1);
    line(160,187,153,200);
    line(153,187,145,200);
    line(145,187,136,200);

    line(250,187,257,200);
    line(257,187,265,200);
    line(265,187,274,200);
  //嘴
  fill(243,185,180);
  arc(205, 208,45,35, 0, PI);
}
  //动态眼睛交互，随鼠标而动
function eyes(){
  var deltax=(mouseX-250)/250*7.5;
  var deltay=(mouseY-150)/350*7.5;
  fill(255);

  circle(150,160,38);
  circle(260,160,38);
  fill(0);
  circle(150+deltax,160+deltay,20);
  circle(260+deltax,160+deltay,20);
}

function keyPressed()//按下了键盘
{
	 if (keyCode === 66) {//B（bule）
       R=30;
       G=144;
       B=255; 
  } 
  else if (keyCode ===71 ) { //G (green)
    haircolor = 42;
    R=152
    G=251
    B=152 
  }
   else if (keyCode === 89) { //Y YELLOW
    R=255
     G=185
     B=15 
  } else if (keyCode === 79) { //O orange
   R=244
    G=164
    B=96 
  }
  else if (keyCode === 80) { //P pink
    R=255
    G=228
    B=225 
  }
   else if (keyCode === 86) { //V O
   R=139 
   G=101
   B=8 
  } 
  else if (keyCode === 82) { //R Red
   R=255 
    G=48 
    B=48 
  } 
  return false; // prevent default
}

总结

总的来说，还是很有意思的！做完挺有成就感的。