p5实现一个可交互跟随鼠标的蝴蝶动画效果代码-html代码-BFW代码库

p5实现一个可交互跟随鼠标的蝴蝶动画效果代码

代码语言：html

所属分类：动画

代码描述：p5实现一个可交互跟随鼠标的蝴蝶动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  

  
  



</head>

<body  >

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/p5.1.4.0.js"></script>
  
      <script  >

if(typeof Float32Array != 'undefined') {
        glMatrixArrayType = Float32Array;
} else if(typeof WebGLFloatArray != 'undefined') {
        glMatrixArrayType = WebGLFloatArray; // This is officially deprecated and should dissapear in future revisions.
} else {
        glMatrixArrayType = Array;
}
const colors = [[255,0,255,229],[255,0,255,204],[255,0,255,178],[255,0,255,153]];
let path;
let Width , Height;
let canvas , ctx , time;
let body,left,rigth;
let Butterflys = [];
let trans , angle , scale ,vector, Mouse = {x:0 , y:0};
let stars = [] , stasNumbre = 0;
function preload() {
    let url = 'https://hankuro.org/json/pathdata.json';
    path = loadJSON(url);
}
function setup() {
  canvas = createCanvas(windowWidth, windowHeight);
  Width = windowWidth;
  Height = windowHeight;
  ctx = canvas.drawingContext;
  time = new Date().getTime();
  
  body = new BodyButterfly(path.body,true);
  left = new LeftButterfly(path.left,false);
  rigth = new RigthButterfly(path.rigth,false);
  Butterflys.push(body,left,rigth);
  trans = new Vretex();
  angle = new Vretex();
  scale = new Vretex([1,1,1]);
  
//  star = new Star(sOfEnd);
//  star.setPosition(trans);
}

function draw() {
    applyMatrix(1, 0, 0, 1, Width/2, Height/2);
    clear();
    stroke(0, 0, 0);
    strokeWeight(0.5); 
    fill(0,0,0);
    Mouse.x = mouseX-(width/2) ;
    Mouse.y = mouseY-(height/2) ;
    let m = new Vretex([Mouse.x,Mouse.y,0]);
    
    vector = m.Subtraction(trans);    
    vector = vector.division(200);
    
    let dx = Mouse.x - trans.x;
    let dy = Mouse.y - trans.y;    
    let r = Math.atan2(dy,dx);
   trans = trans.Add(vector) ;
   
   
//   line(trans.x,trans.y,vector.x,vector.y);
//     ellipse(0, 0, 5, 5);
   
//    trans = trans.Add(vector);
//    console.log(trans);
    Butterflys.forEach((b)=>{
//        angle.x = 0 * Math.PI/180 ;
        angle.z = r + 90 * Math.PI / 180;
        trans.multiplication(1000);
        b.postVretex(Mouse,trans);
        b.setMatrix(trans,angle,scale);
        b.draw();
    });
    
    let Flapping = Butterflys[0].Flapping;
    let now = new Date().getTime();
    if(now - time > 1500){
        
        if(Flapping) stars.push(new StarControl(trans,sOfEnd,stasNumbre++));
        time = now;
    }
    stars.forEach((s)=>{
        if(!s.Dead) s.draw();
    });
//    star.draw();
//    rotate(r);
//    line(0,0,100,0);
}

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
  Width = windowWidth;
  Height = windowHeight;
  ctx = .........完整代码请登录后点击上方下载按钮下载查看