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

主题：

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

工具：

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 }

总结

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