p5.js动态自画像

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

Swae.

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

阅读量794

点赞数

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

版权

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

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

自画像展示

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

在这里插入图片描述

以下为静态形象代码

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,