p5.js+创意编程-自画像

最新推荐文章于 2024-11-20 16:35:34 发布

原创最新推荐文章于 2024-11-20 16:35:34 发布 · 1.3k 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#p5.js

绘制自画像

确定样式
网格纸对于确定图案的坐标点有很大作用，初步在网格纸上手绘Q版人物，只进行轮廓的勾画和变形，对于一些细节不进行处理。
编程实现
使用p5.js对手绘进行还原，主要使用的方法：

beginShape();
vertex(30, 20);
bezierVertex(80, 0, 80, 75, 30, 75);
bezierVertex(50, 80, 60, 25, 30, 20);
endShape();

解释：beginShape（）、endShape（）是填充开始和结束的声明，vertex(x1,y1)定义起始顶点坐标，bezierVertex(x2, y2, x3, y3, x4, y4)中(x2,y2)（x3,y3）定义到下一锚点的两个控制点，（x4，y4）为下一锚点位置，可以绘制多个连续贝塞尔曲线构成封闭区域，实现填充。
在程序实现时，主要通过绘制贝塞尔曲线，获取bezierVertex，实现区域填充。

具体实现代码（部分）：

//自画像
function drawmyself()
{
  stroke(0);
  strokeWeight(4);
  drawcloth();
  drawhair();
  drawface();
  stroke(0);
  line(100,360,300,360);
}

//画头发
function drawhair()
{  
  //颜色
  fill(50,20,20);
  beginShape();
  vertex(160,95);
  bezierVertex(100, 100, 101, 240, 102, 198);
  bezierVertex(105, 240, 80, 280, 100, 295);
  bezierVertex(108, 292, 118, 280, 130,285);
  bezierVertex(130,260,135,240,125,190);
  bezierVertex(130,160,140,140,160,140);
  bezierVertex(220,100,300,200,250,310);
  bezierVertex(280,320,320,280,300,260);
  bezierVertex(305,260,315,285,325,290);
  bezierVertex(302,200,310,160,290,130);
  bezierVertex(260,80,200,60,160,95);
  endShape();
}

实现效果：
在这里插入图片描述

添加动态背景

通过循环添加方格背景
rect(i, j, 10, 10,3)前两个参数为矩形左上角坐标位置，第三四个参数为矩形的宽和高，第五个参数控制圆角矩形的角度。
添加动态颜色效果
通过变量控制每个圆角矩形的颜色，实现周期性颜色变化。

var y=1;
function draw() {   
  background(255);
  drawbkg();
  drawmyself();
  y++;
}
function drawbkg()
{
  noStroke();
  for (var i = 0; i < height; i += 20) 
    for (var j = 0; j < height; j += 20) 
    {
      if(y%10<=5)fill(129, 206, 15);  // 填充
      else fill(72,209,204);
      rect(i, j, 10, 10,3);
    }
}

在这里插入图片描述

添加鼠标交互效果

鼠标点击改变眼睛状态
每次鼠标点击都可以改变眼睛的形态。

var value=0;
function mousePressed() 
{
  if (value == 0) 
  {
    value = 1;
  } else 
  {
    value = 0;
  }
}
function drawface()
{  
  //……其他部分省略
  if(value==0)
  {
    line(138,205,160,210);
    line(138,222,160,210);
  }
  if(value==1)
    ellipse(150,213,28,25);
  //……其他部分省略
}

鼠标心形粒子跟随特效

使用数组记录最近时刻鼠标经过的点，并且在这些点上绘制心形，更新数组的值，使得数组最后一个值为鼠标坐标，依次向前更新。通过贝塞尔曲线绘制心形，并添加一定颜色变化效果。

var px =new Array(20);//声明数组存储鼠标坐标的x值
var py=new Array(20);//声明数组存储鼠标坐标的y值
function setup()
{
  createCanvas(400, 400);
  //初始化
  for(var i=0;i<px.length;i++){
    px[i]=0;
    py[i]=0;
  }
}
function draw() {   
  background(255);
  drawbkg();
  drawmyself();
  //每次将新的鼠标值放置于数组的最后，前面的值不断挪出去
  for(var i=0;i<px.length-1;i++)
  {
    px[i]=px[i+1];
    py[i]=py[i+1];
  }
  //最后一个数组位置更新为鼠标的值
  px[px.length-1]=mouseX;
  py[px.length-1]=mouseY;
  //绘制心形
  for(var i=0;i<px.length-1;i++){
    if(i%3==0)
      fill(255,192,203);
    if(i%3==1)
      fill(255,0,203);
    else fill(255,192,203);
    drawheart(px[i],py[i]);
  }
  y++; 
}
function drawheart(i,j) 
{
  noStroke();
  beginShape();
  vertex(i,j);
  bezierVertex(i-10,j-10,i-10,j+10,i,j+18);
  bezierVertex(i+10,j+10,i+10,j-10,i,j);
  endShape(); 
  beginShape();
  fill(123,104,238);
  vertex(mouseX-30,mouseY-30);
  bezierVertex(mouseX-40,mouseY-40,mouseX-40,mouseY-20,mouseX-30,mouseY-20);
  bezierVertex(mouseX-20,mouseY-20,mouseX-20,mouseY-40,mouseX-30,mouseY-30);
  endShape(); 
  beginShape();
  fill(255,255,0);
  vertex(mouseX+30,mouseY+20);
  bezierVertex(mouseX+20,mouseY+10,mouseX+20,mouseY+30,mouseX+30,mouseY+32);
  bezierVertex(mouseX+40,mouseY+30,mouseX+40,mouseY+10,mouseX+30,mouseY+20);
  endShape(); 
}