Distance field blobs

var nspheresSlider,spheresradSlider,spheresaltSlider;//Gui elements

var spheres,spherespos;

var nmaxspheres,nspheres,spheresrad,spheresalt;

var repeat=false,scaleFactor=1.0,gl;//variables to pass to the frag shader

function setup() {

  createCanvas(windowWidth, windowHeight,WEBGL);

  gl=this.canvas.getContext('webgl');

  background(0);

  nmaxspheres=100;

  setGui();//initiate controls

  noStroke();

  test=new p5.Shader(this._renderer,vert,frag);//shaders are loaded

  shader(test);//shaders are applied

  initSpheres();

}

function draw() {  

  test.setUniform("resolution", [width,height]);//pass some values to the shader

  test.setUniform("time", millis()*.001);

  test.setUniform('scaleFactor',scaleFactor);

  test.setUniform('spheresrad',spheresrad); 

  test.setUniform('nshapes',nspheres);  

  var renderingradius;

  for(var i=0;i<nspheres;i++){

    spheres[i].update();

    spherespos[3*i]=spheres[i].pos.x;

    spherespos[3*i+1]=spheres[i].pos.y;

    spherespos[3*i+2]=spheres[i].pos.z;

  }

  renderingradius=((spheresalt+spheresrad+nspheres/20)*scaleFactor)/17;

  test.setUniform('renderingradius',renderingradius);

  test.setUniform('spherespos',spherespos);

  rect(-width/2,-height/2, width, height); //draw the canvas to use our shaders

}

​

function setGui(){

  scaleSlider=new CompleteSlider("Scale",.1,1.0,.7,0,50,110,true);

  scaleSlider.slider.input(function(){

  scaleFactor=scaleSlider.value();

  scaleSlider.setValue(scaleSlider.value());});

  scaleFactor=.7;

  spheresradSlider=new CompleteSlider("Spheres radius",.1,4.0,1.5,0,50,150,true);

  spheresrad=1.5;

  spheresradSlider.slider.input(function(){

  spheresrad=spheresradSlider.value();

  spheresradSlider.setValue(spheresradSlider.value());});

  spheresaltSlider=new CompleteSlider("Spheres altitude",1.0,8.0,4.0,0,50,230,true);

  spheresalt=4.0;

  spheresaltSlider.slider.input(function(){

  spheresalt=spheresaltSlider.value();

  spheresaltSlider.setValue(spheresaltSlider.value());});

  nspheresSlider=new CompleteSlider("Number of spheres",1,nmaxspheres,10,1,50,190,true);

  nspheres=10;

  nspheresSlider.slider.input(function(){

  nspheres=nspheresSlider.value();

  nspheresSlider.setintValue(nspheresSlider.value());

  nspheres=nspheresSlider.value();});

}

function CompleteSlider(label, minValue, maxValue, defaultValue,steps, x, y,visible) {

  this.label = label;

  this.x=x;

  this.y=y;

  this.visible=visible;

  this.slider = createSlider(minValue, maxValue, defaultValue, steps).position(x, y);

  this.labelDiv=createDiv(this.label).position(this.x, this.y-15).style('color', 'white');

  this.valueDiv=createDiv(this.slider.value()).position(this.x+this.slider.width+10, this.y+10).style('color', 'white');  

  this.show=function(){   

    this.slider.style('visibility','visible');

    this.labelDiv.style('visibility','visible');

    this.valueDiv.style('visibility','visible');

  }

  this.hide=function(){

    this.slider.style('visibility','hidden');

    this.labelDiv.style('visibility','hidden');

    this.valueDiv.style('visibility','hidden');

  }

  if(this.visible)this.show();

  else this.hide();

  this.value = function() {

    return this.slider.value();

  }

  this.setLabel=function(mytext){

    this.labelDiv.html(mytext);

  }

  this.setValue=function(val){

    this.valueDiv.html(val.toFixed(2));

  }

  this.setintValue=function(val){

    this.valueDiv.html(val.toFixed(0));

  }

}

function initSpheres(){

  spheres=[];

  for(var i=0;i<nmaxspheres;i++){

    spheres[i]=new Sphere();

  }

  spherespos=[];

  console.log(nspheres);

}

function Sphere(){

  this.theta=random(TWO_PI);

  this.phi=random(TWO_PI);

  this.ro=random(TWO_PI);

  this.dt=random(-.01,.01);

  this.dp=random(-.01,.01);

  this.dr=random(-.01,.01);

  this.pos=anglesrot(createVector(0,spheresalt,0),this.theta,this.phi,this.ro);

}

Sphere.prototype.update=function(){

  this.theta+=this.dt;

  this.phi+=this.dp;

  this.ro+=this.dr;

  this.pos=anglesrot(createVector(0,spheresalt,0),this.theta,this.phi,this.ro);

}

function anglesrot(u,a,b,c){

  var v=createVector(u.x,u.y*cos(a)-u.z*sin(a),u.y*sin(a)+u.z*cos(a));

  w=createVector(v.x*cos(b)+v.z*sin(b),v.y,-v.x*sin(b)+v.z*cos(b));

  //v=createVector(w.x*cos(c)-w.y*sin(c),w.x*sin(c)+w.y*cos(c),w.z);

  return w;

}