p5.js动态自画像

最新推荐文章于 2019-11-04 21:33:51 发布

Swae.

最新推荐文章于 2019-11-04 21:33:51 发布

阅读量839

点赞数

本文链接：https://blog.csdn.net/luc1d/article/details/102822197

版权

这篇博客展示了作者如何利用p5.js库为自己的自画像添加交互元素，特别是让耳朵跟随鼠标光标在y轴上移动，灵感来源于国产动画片《大耳朵图图》中图图的动耳特异功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

自画像展示

由于本人喜欢看国产动画片《大耳朵图图》，里面图图有一个特异功能就是可以动耳朵，所以本次自画像在本人形象的基础上加入交互元素——耳朵可以跟随鼠标光标的移动而移动。

在这里插入图片描述

以下为静态形象代码

function setup() {
  createCanvas(500, 500);
  rectMode(CENTER);
}


function draw() {
  
  noStroke();
  background(255 ,193 ,193);
  me();
  
  //tools();
}

    

function me(){
  
  fill(245, 245, 220);//脚
  circle(220,460,45);
  circle(280,460,45);
  fill(0,0,0);//pants
  rect(220,400,40,100);
  rect(280,400,40,100);
   

  fill(255, 228, 181);//手
  
  circle(105,285,40);
  circle(420,285,40);
  
  fill(245, 245, 220);//arm
  //rect(170,260,60,40);
  //rect(330,260,60,40);
  quad(118, 300, 118, 270, 236, 230, 220, 263);
  quad(408, 300, 408, 270, 236, 230, 236, 263);
  
  fill(245, 245, 220);//身体
  quad(200,230,300,230,315,350,185,350);
 
      
  fill(255 ,228 ,181);//头
  circle(250,170,120);
  rect(250,130,120,90,40);
 
  //circle(187,150,30)//耳朵
 // circle(312,150,30)

    push();
	fill(0);//刘海
	square(223, 88, 64, 40, 0, 10, 10);
	square(277, 88, 64, 0, 40, 10, 10);
	pop();
  
  //brow
  triangle(200,124,230,126,230,128);
  triangle(300,124,270,126,270,128);
  
  moveEARs();//移动
  
  
   fill(50);   //鼻子
  noStroke();
  circle(250,175,6);
  fill(209,51,26);
  
  //mouth
  fill(209,51,26);
  ellipse(250,200,40,20);


  stroke(0);//sunglasses
  fill(0,0,0); 
   arc(215,138,38,12,PI,0);
   arc(285,138,38,12,PI,0);
   arc(285, 138, 40, 60, 0, PI, OPEN);
   arc(215, 138, 40, 60, 0, PI, OPEN);
   line(210, 145, 265, 145);//middle
   line(191, 138, 195, 138);//LEFT sidepiece
   line(300, 138, 310, 138);//right

 
}

交互部分

///绘制交互动态耳朵
function moveEARs(){
  var deltax=(mouseX-250)/250*7.5;
  var deltay=(mouseY-150)/350*7.5;
  
  fill(255, 228, 181);
  circle(187,150+deltay,30)//耳朵
  circle(312,150+deltay,30)

（只控制在y轴上移动）