【创意编程作业】《代码本色》第1章——向量

最新推荐文章于 2021-03-29 07:36:28 发布

原创最新推荐文章于 2021-03-29 07:36:28 发布 · 309 阅读

0 ·

CC 4.0 BY-SA版权

p5.js 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一种使用p5.js实现跟随鼠标移动并逐渐消亡的气泡效果，详细讲解了向量操作、气泡生命周期设计及代码实现过程。

Part1 实现效果以及扩展

在这里插入图片描述

Part2 向量

《代码本色》参考实例：
1、向量的减法（用于计算鼠标点和气泡位置的差值，得出加速度）
在这里插入图片描述
2、朝鼠标位置移动

Part3 跟随鼠标的消亡气泡

设计思路：
①在画布范围随机位置生成气泡，初速度一定范围内随机，加速度为0；
②气泡跟随鼠标位置移动，即新加速度=鼠标位置-气泡原本位置；
③给气泡生命周期，即让气泡颜色随帧数淡化；

Part4 代码展示

var movers = [];

function setup() {
    createCanvas(windowWidth, windowHeight);
    colorMode(HSB, 360, 100, 100, 300);
}

function draw() {
    background(0);

    movers.push(new Mover(createVector(random(width), random(height))));  
    
    for (var i = 0; i <movers.length; i++) { 
        movers[i].update();
        movers[i].display();
        if (movers[i].isDead()) {
            movers.splice(i, 1);         //如果气泡死亡，则从数组里移除该气泡
        }
    }
}

function Mover(pos) {
    var position = pos.copy();
    var velocity = createVector(random(-10, 10), random(-2, 2));
    var acceleration = createVector(0,0);
    var lifespan = 255;
    var H = random(360);
    var size = random(25, 50);
    var maxspeed=2.5;

    this.update = function() {
     	var mouse = createVector(mouseX,mouseY);
        acceleration = p5.Vector.sub(mouse,position);
        //acceleration.setMag(1);
        acceleration.normalize();
        acceleration.mult(0.2);
        velocity.add(acceleration);
        velocity.limit(maxspeed);
        position.add(velocity);
        lifespan -= 2;
    }

    this.display = function() {
        stroke(H, 90, 60, lifespan);
        strokeWeight(1);
        fill(H, 90, 50, lifespan);
        ellipse(position.x, position.y, size, size);
    }

    this.isDead = function() {
        if (lifespan < 0) {
            return true;
        } else {
            return false;
        }
    }
}