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

主题：

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

工具：

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=152G=251B=152 }else if (keyCode === 89) { //Y YELLOWR=255G=185B=15 } else if (keyCode === 79) { //O orangeR=244G=164B=96 }else if (keyCode === 80) { //P pinkR=255G=228B=225 }else if (keyCode === 86) { //V OR=139 G=101B=8 } else if (keyCode === 82) { //R RedR=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=152G=251B=152 }else if (keyCode === 89) { //Y YELLOWR=255G=185B=15 } else if (keyCode === 79) { //O orangeR=244G=164B=96 }else if (keyCode === 80) { //P pinkR=255G=228B=225 }else if (keyCode === 86) { //V OR=139 G=101B=8 } else if (keyCode === 82) { //R RedR=255 G=48 B=48 } return false; // prevent default
}

总结

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

第二幅“码绘”——创意自画像相关推荐

码绘与手绘——表达动态
一.手绘表现动态: 这个题目一开始看来 ,手绘是处于非常劣势的地位的,因为电脑上可以实现动态的过程,就是用动画的原理,每秒绘制60帧,不断进行重绘图形,来达到运动的效果的. 而本身来讲,手绘的图片本质 ...
当“手绘”遇上“码绘”——静态绘作分析
手绘与码绘在我们的生活中,经常可以看到许多非常漂亮的绘画作品.其中有些是由画家用手绘制,有些却有可能是由一行行编写在电脑上的代码生成的.让我们看看这两者的具体步骤有什么不同. 手绘首先,是手绘作品 ...
对比码绘与手绘——静态篇
按照实验要求画了一幅码绘,使用p5.js完成. 手绘图星空下的大巴--手绘手绘图是用数位板涂的,比较简陋,大概花了半小时左右,为什么要特地提一下时间呢,因为比起手绘,下面那张码绘真的是花了很长时间 ...
对比码绘与手绘——静态
博主的老师这学期布置了一些作业,其中之一就是分别用代码和双手作一幅静态图,从思路.技术.创作体验.创作偏好等方面来比较二者,讨论异同.于是这篇博客就应运而生了. 首先,展示一下作品: 参考图参考的图 ...
雪梨小白的“码绘”日常——p5.js自画像来喽！
这次需要完成互动媒体课程的第二项作业--利用p5.js绘制一幅表现自我的自画像,(雪梨是谁啊,那可是艺工交融的代表,骄傲的抬起快要睁不开的眼-),用三个字,那就是!!!我可以!!!(来啦!) 我觉得码 ...
使用p5.js画一幅创意自画像
使用p5.js画一幅创意自画像使用p5.js画一幅创意自画像用编程方式创作一幅介绍自己的图片,因为我很喜欢五月天,所以我的自画像就是展示我去看演唱会的样子,穿着五月天Logo的stayrealT恤 ...
【码绘】p5.js画Q版自画像
[码绘]p5.js画Q版自画像来自互动媒体作业的实验二,这次没有采用processing,而选择了p5.js,原因是用p5.js的在线编辑实时浏览比较方便. 先看一下最后的成果吧我的实验过程: 手 ...
“码绘”第二集————编程创意作品
"码绘"第二集--编程创意作品<罗小黑> 一.概述: 实验工具:P5.js 创意作品结果: {主体罗小黑,背景的星星[借鉴学习的他人代码], 点击生成花,键盘控制改变表 ...
【码绘】p5.js自画像
[码绘]p5.js自画像一.结果: 鼠标交互后: 二.过程 1.先大概想一下自己长啥样,明确一下特点:圆脸,短发,爱吃爱睡觉,本来想交互出来一盘肉,但是想了一下感觉好麻烦,交互就直接睡觉了- 2.然 ...