p5.js 绘制创意自画像（互动媒体技术作业）

作品展示

代码寄存在—>CodePen<—点击体验交互！

灵感来源于小王子B612星球，于是乎绘制了一个自己在星球上吹风欣赏夜景的绝美场景嘿嘿

代码&创意点分析

使用p5.js官方Web Editor上手编程，代码保存在CodePen

！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！

1.设置工具类以获取坐标点：本次实验最有用的东西就是这个了

为什么说最有用呢？看图：
指哪打哪，坐标速得
有了这种方法再也不用死算坐标吃苦啦！超好用有木有

///工具函数，便于读取坐标
function tools(){
   
   for(var i=10;i<500;i=i+10){
   
    stroke(250,170,240,100);
    line(0,i,500,i);
    line(i,0,i,500);
  }
  
  fill(0,0,0);
  text(mouseY,mouseX+25,mouseY);
  text(mouseX,mouseX,mouseY);
}

2.眼睛跟随鼠标运动：

• 设置两个个delta变量关联MouseX和MouseY，做过试验一之后这些应该都很简单了

function moveeyes(){
   
  var deltax=(mouseX-250)/250*7.5;
  var deltay=(mouseY-150)/350*7.5;
  
  fill(255);          //眼睛
  circle(215,150,35);
  circle(285,150,35);
  fill(0);
  circle(215+deltax,150+deltay,20);
  circle(285+deltax,150+deltay,20);
}

3.披风跟随鼠标飘动：

• 原理同上

function cloth(){
    
  var deltax=(mouseX-250)/250*7.5;
  var deltay=(mouseY-150)/350*7.5;
  fill(241,162,26);//披风
  quad(120+deltax,370+deltay,250,360,310,230,190,230);
}

4.背景动态星球：

• 背景的动态星星其实就是大量绘制具有不同相位差，不同大小的黄色圆球,使用millis()即可

function stars(){
   
  var cycle =millis()/5;
  fill(254,231,138);
  circle(cycle%500,cycle%500,20);
  circle((cycle-100)%500+200,(cycle-100)%500,20);
  circle((cycle-200)%500,(cycle-100)%500