码绘—自我肖像创作

Arzeus

于 2019-11-04 18:53:00 发布

阅读量367

点赞数

分类专栏：互动媒体技术文章标签： p5.js 码绘自我肖像

本文链接：https://blog.csdn.net/Arzeus/article/details/102902535

版权

本文介绍了一位作者使用p5.js编程创作自我肖像的过程，从勾勒脸部轮廓，逐步添加五官、身体、衣物和动态效果，如随机光污染和睁眼动画，最终形成具有个性特色的动态自画像。

摘要由CSDN通过智能技术生成

自我肖像创作

主题：
一件编程创意作品，必须实现动态效果或交互效果；作品录制一段一分钟内的视频；作品可以是具象化地描绘自己的形象，也可以是任何形式表现自己的兴趣、追求、特色、经历等；
编程使用p5.js

结果

在这里插入图片描述
（因为制作gif时有些失误，图片产生晃动，并非代码效果）

制作过程

制作自己的肖像当然要先观察自己，首先把脸给勾出来，

在这里插入图片描述

  noStroke();
  c=color(255,236,220);
  fill(c);
  rect(200, 100, 200, 225,80,80,100,100);

然后加上五官：
在这里插入图片描述

  //大脸
  c=color(255,236,220);
  fill(c);
  rect(200, 100, 200, 225,80,80,100,100);
  //外耳
  c=color(255,236,220);
  fill(c);
  arc(200, 200, 50, 50, HALF_PI,PI+HALF_PI ,OPEN );
  arc(400, 200, 50, 50, PI+HALF_PI,HALF_PI,OPEN );
  //内耳
  c=color(0,0,0);
  fill(c);  
  arc(200, 200, 25, 25, HALF_PI,PI+HALF_PI ,OPEN );
  arc(400, 200, 25, 25, PI+HALF_PI,HALF_PI,OPEN );
  //头发
  triangle(260, 100, 300, 125, 340, 100);
  rect(200, 70, 200, 40);
  triangle(200, 100, 200, 170, 250, 100);
  triangle(400, 100, 400, 170, 350, 100);
  //鼻子
  rect(297, 210, 6, 30);
  //嘴巴
  c=color(255,0,0);
  fill(c);
  beginShape();
  vertex(250, 260);
  vertex(350, 260);
  vertex(300, 290);
  endShape();
  arc(300, 260, 100, 60, HALF_PI , PI,OPEN );
  arc(300, 260, 100, 60, 0 , HALF_PI ,OPEN );
  //眼睛
  c=color(0,0,0);
  fill(c);
  arc(350, 170, 50, 50, 0 , PI,OPEN );
  arc(250, 170, 50, 50, 0 , PI,OPEN );

只有一个头，有点小尴尬，补个脖子
在这里插入图片描述

//脖子
  c=color(255,200,200);
  fill(c);
  rect(255, 300, 90, 50);

看起来，变得些许惊悚，加上衣服：
在这里插入图片描述

  //衣服底子
  c=color(0,0,255);
  fill(c);
  rect(160, 350, 280, 375);
  //两条手臂
  c=color(0,0,255);
  fill(c);
  rect(80, 350, 75, 295);
  rect(445, 350, 75, 295);
  //灰色内衬
  c=color(144,144,144);
  fill(c);
  rect(255, 350, 90, 350);
  //脖子圆领修正
  c=color(255,200,200);
  fill(c);
  arc(300, 350, 90, 90, 0 , PI,OPEN );

再补上两个拳头👊
在这里插入图片描述

//拳头
  c=color(255,200,200);
  fill(c);
  rect(80, 650, 75, 50);
  rect(445, 650, 75, 50);

这个自画像基本完工，发现没有牙齿，补上：

在这里插入图片描述

  //洁白牙齿
  c=color(255,255,255);
  fill(c);
  triangle(250, 260, 260, 260, 255, 270);
  triangle(260, 260, 270, 260, 265, 270);
  triangle(270, 260, 280, 260, 275, 270);
  triangle(280, 260, 290, 260, 285, 270);
  triangle(290, 260, 300, 260, 295, 270);
  triangle(300, 260, 310, 260, 305, 270);
  triangle(310, 260, 320, 260, 315, 270);
  triangle(320, 260, 330, 260, 325, 270);
  triangle(330, 260,