【码绘】p5.js自画像

一.结果：

鼠标交互后：

二.过程
1.先大概想一下自己长啥样，明确一下特点：圆脸，短发，爱吃爱睡觉，本来想交互出来一盘肉，但是想了一下感觉好麻烦，交互就直接睡觉了…
2.然后就是把各个部分拆开，一部分一部分来，我画的可能比较简单，都是比较规则的图形。
三.代码

function setup() {createCanvas(400, 400);a=0;i=1;
}function draw()
{background(40,113,62);push();pop();//后面的头发push();fill(0);rect(125, 115, 150, 65);//绘制矩形(x,y,宽,高)pop();//圆脸push();fill(255,250,205);noStroke();ellipse(200, 120, 150, 150);pop();//刘海push();fill(0);arc(200, 120, 150, 150, PI, TWO_PI);pop();//左手臂push();fill(255,250,205);noStroke();translate(122,252);rotate(PI / 6.0);rect(0, 0, 30, 85,0,0,7,0);pop();//右手臂push();fill(255,250,205);noStroke();translate(250,265);rotate(-PI / 6.0);rect(0, 0, 30, 85,0,0,0,7);pop();//衣服push();fill(56,76,112);noStroke();triangle(140,222,135,270,110,270);//袖子triangle(260,222,265,270,290,270);rect(135,210,130,200,30,30,0,0);pop();//衣服图案push();fill(255,215,0);star(240, 265, 7, 13, 5);
//脖子push();fill(255,250,205);noStroke();rect(180,190,40,20);circle(200,200,40);//(x,y,size)pop();//嘴巴push();if(a===0){fill(255,0,0);arc(200, 165, 30, 30,0, PI);}else{fill(255,0,0);ellipse(200,165,20,20);   }pop();
push();if(a===0){  push();fill(0);ellipse(165, 140, 15, 30);ellipse(235, 140, 15, 30);fill(255);ellipse(167, 143, 7, 10);ellipse(233, 143, 7, 10);pop();}else{fill(255,250,205);arc(165,134,30,20,HALF_PI*(0),HALF_PI*(2));//闭眼睛arc(235,134,30,20,HALF_PI*(0),HALF_PI*(2));}pop();push();armybombleft();pop();push();armybombright();pop();push();fill(255,250,205);stroke(123);fill(255,250,205);ellipse(95, 330, 35, 35);//左手掌ellipse(305, 330, 35, 35);//右手掌pop();}function armybombleft()
{let dx1=mouseY;let dy1=mouseX-200;let angle1=atan2(dy1,dx1);if(angle1<-PI/2){angle1=-PI/2;}fill(255,0,0);circle(25,-100,5);}function armybombright()
{let dx2=mouseY;let dy2=mouseX-200;let angle2=atan2(dy2,dx2);if(angle2<-PI/2){angle2=-PI/2;}if(angle2>PI/2){angle2=PI/2;}fill(0);quad(-10,-70,10,-70,5,0,-5,0);fill(255);circle(0,-80,50);push();fill(0);translate(20,-104);rotate(PI/3.0);rect(0,0,15,6);pop();
fill(255,0,0);circle(25,-100,5);
}
function mouseClicked()
{a=1;
}function star(x, y, radius1, radius2, npoints) {let angle = TWO_PI / npoints;let halfAngle = angle / 2.0;beginShape();for (let a = 0; a < TWO_PI; a += angle) {let sx = x + cos(a) * radius2;let sy = y + sin(a) * radius2;vertex(sx, sy);sx = x + cos(a + halfAngle) * radius1;sy = y + sin(a + halfAngle) * radius1;vertex(sx, sy);}endShape(CLOSE);
}

四.总结
p5.js真的好方便，可能因为我画的比较简单，交互也写的简单，所以不是很难，就是找点有些费时间，就我的这个图来说，比手绘费时很多。

【码绘】p5.js自画像相关推荐

第一次码绘——P5.JS实现动态图片临摹
所临摹图片临摹过程首先我们先仔细观察这张图片的静态图片,确定其图案我这张图截的效果并不是很好,但也可以看出它是由不同数量的小圆组成一个大圆,那我们应该怎么处理呢?答案是一个个画就完事了(误), ...
雪梨小白的“码绘”日常——p5.js自画像来喽！
这次需要完成互动媒体课程的第二项作业--利用p5.js绘制一幅表现自我的自画像,(雪梨是谁啊,那可是艺工交融的代表,骄傲的抬起快要睁不开的眼-),用三个字,那就是!!!我可以!!!(来啦!) 我觉得码 ...
【码绘】p5.js画Q版自画像
[码绘]p5.js画Q版自画像来自互动媒体作业的实验二,这次没有采用processing,而选择了p5.js,原因是用p5.js的在线编辑实时浏览比较方便. 先看一下最后的成果吧我的实验过程: 手 ...
码绘：使用p5.js进行简单的作画
使用工具 Visual Studio Code+p5.js 下载地址 Visual Studio Code:https://code.visualstudio.com/Download p5.js:h ...
用p5.js实现的码绘与手绘的比较（动态）
用p5.js实现的码绘与手绘的比较(动态) 上篇:用p5.js实现的码绘与手绘的比较(静态)https://blog.csdn.net/wangyouxu24/article/details/8433 ...
p5.js之数媒logo（码绘1）
一.开发环境: window10.火狐浏览器63.0.3.vs code1.28.2 二.应用框架: p5.js 三.开发背景: 近日学习p5.js稍有所得,想利用此框架绘出一幅自己的作品,便以学院l ...
雪梨小白的“码绘”起步——p5.js实现心形动态图形的绘制
作为一个快乐的程序媛,尤其还是一个快乐的树莓程序媛,当然应该什么都会!所以这学期学院开了很多偏艺术类的课程让我们学习,然后就开始了互动媒体这门课的学习.这一次的作业要利用p5绘制动态图形,我自己还真的 ...
p5.js 我的第一幅码绘——小丑
p5.js 我的第一幅码绘--小丑码绘相比较于手绘肯定是要繁琐,但优势在于可以做一些有意思的动态效果和交互. 效果图小交互--癫狂状态的小丑 DC漫画里,小丑是个癫狂的角色,令人战栗.让我们展现一 ...
P5.js码绘———拉普兰德做得到吗？
用p5.js代码画一个德克萨斯,拉普兰德做得到吗? 图片展示点击可以交互式摇动德克萨斯的尾巴!!! 函数介绍主要的线条都是用贝塞尔曲线画的, vertex(111,238);//顶点 bezier ...

【码绘】p5.js自画像

【码绘】p5.js自画像

【码绘】p5.js自画像相关推荐

最新文章

热门文章