3D Confetti

p5.disableFriendlyErrors = true;

var balls= []

var camx=0

var camy=0

var camz=0

var colors=['#a864fd','#29cdff','#78ff44','#ff718d','#fdff6a'] //https://www.color-hex.com/color-palette/11374

var r=0

var speed=0

var ry=0

var s=-1

var camr=-700

function setup() {

  createCanvas(windowWidth, windowHeight,WEBGL);

  background(999);

  frameRate(60)

  angleMode(DEGREES)

}

​

​

​

​

function draw() {noStroke()

  if (cos(ry)>0){

    s=1} else {

      s=-1}

camera(camx-camr*sin(r-180)*cos(ry),camy+camr*sin(ry),camz-camr*cos(r-180)*cos(ry), 0,0,0, 0, s, 0);

 //camera(100,100,-500, 0,0,0, 0, s, 0);

    background(999);

​

for (var i=0; i< balls.length;i++){

balls[i].move();

if (balls[i].d==1) {balls.splice(i,1);i--}

}

​

​

  if (keyIsDown(38)){ry+=1*60/frameRate();}

  if (keyIsDown(40)){ry-=1*60/frameRate();}

  if (keyIsDown(37)){r-=1*60/frameRate()}

  if (keyIsDown(39)){r+=1*60/frameRate()}

  //ellipse(0,0,20,20)

   balls.push(new Ball(0,200,0))

}

​

​

​

function Ball (xx,yy,zz)  {

  this.x=xx

  this.y=yy

  this.z=zz

  this.d=0

  this.r=round(random(0,12))

  this.rx=random(-90,90)

  this.ry=random(-90,90)

  this.rz=random(-90,90)

  this.yspeed=random(-17,-20)

  this.xspeed=random(-5,5)

  this.zspeed=random(-5,5)

 /// this.size=random(50)

  this.f=random(colors)

​

  this.move=function(){

push()

translate(this.x,this.y,this.z)

rotateX(this.rx)

rotateY(this.ry)

rotateZ(this.rz)

fill(this.f)

this.y+=this.yspeed

this.x+=this.xspeed

this.z+=this.zspeed

if(this.xspeed>0) {this.xspeed-=0.05}

if(this.xspeed<0) {this.xspeed+=0.05}

    this.ry+=this.yspeed

    this.rz+=this.zspeed

    this.rx+=this.xspeed

    if(this.zspeed>0) {this.zspeed-=0.05}

if(this.zspeed<0) {this.zspeed+=0.05}

this.yspeed+=0.5

if (this.y>200){this.y=200;this.yspeed=0;this.rx=90;this.ry=0;}

if (this.y>=200&&this.yspeed==0&&this.r!==1){if(this.z==0||this.x==0) {this.d=1}}

    if (balls.length>150&&this.y>=200) {this.d=1}

// this.rx++

// this.ry++

// this.rz++

rect(0,0,20,30)

    pop()

}}

​

function mouseWheel(event) {

  camr-=event.delta

}

​