let fx;

let SIZE = 4;

let values = [125, 45.,240,200];

let pg;

​

function setup() {

  let canvas = createCanvas(500, 300, WEBGL);

  pg  = createGraphics(255,2500,WEBGL);

  fx = pg.createShader(`

    precision highp float; 

    attribute vec3 aPosition;

    void main() { 

      gl_Position = vec4(aPosition, 1.0); 

    }`, `

​

    precision highp float;

    uniform sampler2D tex1;

​

    void main() {

    float index = 1.;

    float c = (1.0/${SIZE}.*index);

​

    vec4 data = texture2D(tex1, vec2(index,0.));

​

// necesito agarrar los valores del array values

// float p1 = values[0]; ---> deberia ser 125

// float p2 = values[1]; ---> deberia ser 45

​

    gl_FragColor = vec4(data.rrr, 1.0);

    }`);

  noStroke();

  pg.shader(fx);

  img = createImage(SIZE, 1);

​

}

​

​

function draw() {

    img.loadPixels();

  for (let x = 0; x < img.width; x++) {   

    img.pixels[x*4+0] = values[x]; // R

    img.pixels[x*4+1] = 0.; // G

    img.pixels[x*4+2] = 0.;//0.; // B

    img.pixels[x*4+3] = 255; 

  }

  img.updatePixels();

  fx.setUniform('tex1', img);

  quad(-1, -1, 1, -1, 1, 1, -1, 1);

  pg.shader(fx);

  pg.rect(0, 0, 300, 300);

  texture(pg);

  rectMode(CENTER);

  rect(0,0,300,300);

  noLoop(); 

}