200615

let sh;

const ballNum = 12;

​

function setup() {

  createCanvas(windowWidth, windowHeight,WEBGL);

  //shader

  sh = createShader(vert,frag);

  this.shader(sh);

  pixelDensity(1);

  sh.setUniform("u_resolution", [width*pixelDensity(),height*pixelDensity()]);

  noStroke(); 

}

​

function draw() {

  randomSeed(0);

  let ratio = 1/(min(width,height)/2);

  let data = [];

  let unit = height/10;

  for(let i = 0 ; i < ballNum; i++){

    let radius = unit * random(0.9,1.2);

    let x = random(-width*0.4, width*0.4) + sin(frameCount/random(70,100))*radius;

    let y = (random(height*2) + frameCount * random(unit/25,unit/8)) % (height*2) -height;

    let z = sin(frameCount/random(15,30))*unit;

    //vec3の多次元配列で入れると受け渡しができないので注意

    data.push(x * ratio, y * ratio, z * ratio, radius * ratio);

  }

  sh.setUniform("u_mataBall",data);

  sh.setUniform("u_time", millis()/1000);

  rect(-width/2,-height/2,width,height);

}