[创意编码p5]魔法水环

https://www.openprocessing.org/sketch/989004

圆的参数方程

x= radius * sin(i)
y= radius * cos(i)

椭圆的参数方程

x= radius * sin(i)
y= radius-90*cos(i);

画一个底盘的椭圆

function setup() {
createCanvas(600, 600);
// 设为 度数
angleMode(DEGREES)
stroke("#f4f1de");
background(51);
let radius = 200; //半径
for (let i = 0; i < 360; i += 1) {
let ex = radius * sin(i);
let ey = radius-90 * cos(i);

ellipse(ex,ey,random(1,6))
}
}

现在我们开始编写点向上移动,造成一个有魔方氛围的感觉

let ude=[];

function setup() {
createCanvas(600, 600);
// 设为 度数
angleMode(DEGREES)

let radius = 200; //半径
for (let i = 0; i < 360; i += 1) {
let ex = radius * sin(i);  //1 => -1 =>1
let ey = radius-90 * cos(i);//
ude[i] = new Ude(ex, ey);
}
}

function draw() {
background(51);
stroke("#f4f1de");
translate(width/2,height/2);

for (let i = 0,len = ude.length; i < len; i += 1) {
ude[i].update();
ude[i].show();
}
}
class Ude{
constructor(ex,ey){
// 当前向量
this.pos = createVector(ex, ey);
// 移动的向量
this.acc = createVector(0,-0.01);
// 算出差值的向量
this.vel = createVector(0, 0);
// limit 限制速度
this.topspeed = 1;
// 随机的小椭圆直径
this.ellipsesize = random(1,6);
}
update(){

// y -0.01 * 向量random(2) 限制速度1 ,
// 最后的值加上差值
this.acc.mult(random(2));
this.vel.add(this.acc);
this.vel.limit(this.topspeed);
this.pos.add(this.vel)
}
show(){
ellipse(this.pos.x, this.pos.y, this.ellipsesize)
noStroke();
}
}

核心点, 定义一个空的向量,让一个上升的变量赋值给这个空的向量,然后限制这个向量的值,用当前的向量加上变量后的值,等于运动的值