let vs = `

precision highp float;

varying vec4 positions;

attribute vec3 aPosition; 

void main() { 

positions = vec4(aPosition.xyz,1.0);

positions.xy = aPosition.xy*2.0 -1.0;

gl_Position = positions;

}

`

let maxp = 4

// the fragment shader is called for each pixel

let fs = `

precision highp float;

uniform float particle[${maxp}];

uniform vec2 particle2[${maxp/2}];

varying vec4 positions;

void main() {

​

// this doesn't have a color effect?

float test = particle[0];

​

// but for some reason we can use particle this way for color?

vec2 test2 = vec2(particle[0],particle[1]);

​

// why no color? 

//gl_FragColor = vec4(0.0,0.0,test,1.0);

​

// why does this have color then?

//gl_FragColor = vec4(0.0,0.0,test2.x,1.0);

​

// same funkiness, why can't we refer to values in this index? why no value passed in for red?

//gl_FragColor = vec4(particle2[0].x,0.0,0.0,1.0);

​

// and for some reason we can get access to the value for the first vec in the particle2 uniform but only with a loop? as in we will have a red background from this...

vec2 test3 = vec2(0.0);

for (int i = 1; i > -1 ; i--) {

  test3.x = particle2[i].x; 

}

gl_FragColor = vec4(test3.x,0.0,0.0,1.0);

​

​

}`;

​

let ourShader;

​

function setup() {

  createCanvas(windowWidth, windowHeight, WEBGL);

  background(100);

  ourShader = createShader(vs, fs);

  noStroke();

}

​

function draw() {

  ourShader.setUniform("particle", [.5,.5, random(), random()])

  ourShader.setUniform("particle2", [.5,.5, random(), random()])

​

  shader(ourShader);

  rect(0, 0, width, height)

}

​