p5.js自画像
**
设计思路
设计思路其实花了我最长的时间 ,因为期间我有过好多思路,有俩做到一半放弃了。其实老师布置这项任务还蛮有趣的,刚开始也是花的好长时间来自己设计构思符合我本人的任务形象,但是在观察到这么多同学的作品后,我感觉我的设计没有特别突出亮眼的地方,很多同学的都跟二次元,所以我把我第一次 做的给扔掉了,我想来一种风格不一样的,其实第二次那种特别抽象的,很多相同或者简单的数学图形堆叠在一起的构成抽象的人形,但是 ,我发现,我越堆叠他就越不是人,还是缺乏这种抽象构图能力。在最后就是现在做的这个。不是太过于抽象的那种。
这张图片我放在PS里考虑了好久,应在怎么画她,因为他的难点在于都是曲线,而且颜色把控方面我也不太清楚改怎么画,她既不是渐变的颜色,也不是那种叠加的颜色,完完全全就是油画颜色。
设计过程
- 采取图层设计 ,和PS一样,我采用了图层的设计,将同一种颜色的作为同一图层;
- 大量运用贝赛尔曲线,不过就是曲线的控制点不好找,我是靠感觉,不过我在找点的时候 我用print(mouseX+" "+mouseY)来找曲线的上的点,其实有些平滑的全曲线控制点就在曲线上;
- 我提前把图片 加载 在画布上,所以画起来可以简单点。
画黑色脸型
function black(){
smooth();
//stroke(123);
fill(6,2,1);
beginShape();
//fill(0,0,0);
vertex(126,376);
vertex(65,376);
bezierVertex(42,388,21,404,0,428);
vertex(0,500);
vertex(10,500);
bezierVertex(30,456,42,434,62,423);
vertex(62,423);
bezierVertex(87,413,94,410,117,416);
vertex(117,416);
bezierVertex(138,427,151,431,165,459);
vertex(165,459);
bezierVertex(171,471,182,487,196,500);
endShape();
beginShape();
//fill(204,102,0);
vertex(125,376);
bezierVertex(130,382,134,387,140,393);
vertex(140,393);
bezierVertex(152,403,162,411,171,421);
vertex(171,421);
bezierVertex(180,428,191,438,219,426);
vertex(218,426);
bezierVertex(245,410,262,398,280,380);
vertex(304,380);
vertex(275,455);
bezierVertex(272,472,270,488,270,500);
vertex(196,500);
endShape();
beginShape();
vertex(279,381);
bezierVertex(306,363,330,326,335,280);
vertex(332,271);
vertex(336,259);
vertex(362,270);
bezierVertex(355,284,355,294,354,311);
vertex(354,311);
bezierVertex(359,326,320,370,310,382);
vertex(303,382);
endShape();
beginShape();
vertex(65,376);
bezierVertex(76,355,72,327,73,291);
bezierVertex(85,252,58,238,28,194);
bezierVertex(17,175,18,156,25,139);
bezierVertex(32,122,31,90,34,73);
bezierVertex(48,45,68,15,100,0);
vertex(295,0);
vertex(285,21);
bezierVertex(286,54,267,86,234,67);
bezierVertex(216,66,198,88,175,82);
bezierVertex(165,89,135,90,124,102);
bezierVertex(154,100,198,120,225,151);
bezierVertex(228,162,215,171,203,163);
bezierVertex(160,128,109,150,98,141);
bezierVertex(90,161,102,185,92,203);
bezierVertex(103,239,82,327,126,377);
endShape();
beginShape();
vertex(212,333);
bezierVertex(215,288,221,223,261,178);
bezierVertex(286,141,326,168,358,170);
bezierVertex(344,148,320,113,305,103);
bezierVertex(294,95,290,79,290,62);
bezierVertex(284,33,298,15,297,0);
vertex(392,0);
vertex(414,23);
bezierVertex(438,118,411,181,407,215);
bezierVertex(409,229,388,253,370,271);
vertex(362,270);
vertex(335,280);
bezierVertex(301,289,259,274,245,254);
bezierVertex(245,270,220,285,224,340);
vertex(201,343);
bezierVertex(198,342,198,338,200,335);
vertex(212,333);
endShape();
beginShape();
vertex(102,197);
bezierVertex(102,197,103,203,109,204);
bezierVertex(108,252,148,242,167,253);
bezierVertex(224,246,208,210,198,198);
bezierVertex(182,160,163,161,153,157);
bezierVertex(137,170,112,150,107,191);
vertex(102,197);
endShape();
beginShape();
vertex(171,371);
bezierVertex(178,405,218,415,235,377);
bezierVertex(218,358,225,358,206,359);
bezierVertex(192,350,188,355,171,371);
endShape();
smooth();
}
至于交互来说,这种油画,我实在想不出该怎么交互,所以我就简单的做到了鼠标点击来实现画图的过程,这个也是我看到了同学的博客有的,所以特别谢谢 。
function draw() {
background(254,245,230);
//坐标原点设为图片中心
imageMode(CENTER);
//图片染色
//tint(0,255,255);
//绘制图片,后两个参数调整长宽
//image(img,250,250,500,500);
smooth();
//print(mouseX+" "+mouseY);
noStroke();
noFill();
if (mouseIsPressed) {
if (frameCount%300<60)
{
black();
} else if (frameCount%300<120) {
blue1();
black();
} else if (frameCount%300<180 ) {
blue1();
black();
hair();
}else if (frameCount%300<240 ) {
blue1();
black();
hair();
eye();
}else if (frameCount%300<300 ) {
image(img,250,250,500,500);
}}else{
blue1();
push();
black();
pop();
eye();
hair();![在这里插入图片描述](https://img-blog.csdnimg.cn/20191103151839481.gif)
}
}