58/2305 Application of Shader with Image

var theShader;

var shaderTexture;

var imagee;

​

var numboxes = 50;

var boxes = [];

var sx = sy = sz = 0;

​

​

​

function preload(){

  // load the shader

  theShader = loadShader('texture.vert','texture.frag');

  imagee = loadImage('cat.png');

}

​

function setup() {

  // shaders require WEBGL mode to work

  createCanvas(windowWidth, windowHeight, WEBGL);

  pixelDensity(1);

​

  // initialize the createGraphics layers

  // FBO (frame buffer object):

  shaderTexture = createGraphics(imagee.width, imagee.height, WEBGL);

  shaderTexture.noStroke();

​

  randomize();

}

​

function draw() {

​

  // 1 - set the parameters to the shader:

  theShader.setUniform('uSampler', imagee);

  theShader.setUniform("resolution", [shaderTexture.width, shaderTexture.height]);

  theShader.setUniform("time", millis() / 1000.0);

  theShader.setUniform("mouse", [mouseX/width, mouseY/height]);

  // 2 - run the shader in the FBO

  shaderTexture.noSmooth();

  shaderTexture.shader(theShader); // executes the code

  shaderTexture.rect(0, 0, imagee.width, imagee.height); // draws an output that's gonna have it

  background(255);

​

  // 3 - use the output of the shader as a texture

  texture(shaderTexture);

  // 4 - draw whatever

  for(let i = 0;i<boxes.length;i++)

  {

    push();

    translate(boxes[i].x, boxes[i].y, boxes[i].z);

    rotateX(boxes[i].rx);

    rotateY(boxes[i].ry);

    rotateZ(boxes[i].rz);

    box(50);

    boxes[i].rx+=0.01;

    boxes[i].ry+=0.01;

    boxes[i].rz+=0.01;

    boxes[i].x+=boxes[i].vx;

    boxes[i].y+=boxes[i].vy;

    boxes[i].z+=boxes[i].vz;

    pop();

  }

  sx+=0.01033;

  sy+=0.0234;

  sz+=0.03024;

}

​

function keyPressed()

{

  randomize();

}

​

function randomize() {

  boxes = [];

  for(let i = 0;i<numboxes;i++)

  {

    let b = {};

    b.x = random(-width/2, width/2);

    b.y = random(-height/2, height/2);

    b.z = random(-height/2, height/2);

    b.vx = random(-1, 1);

    b.vy = random(-0.1, 1);

    b.vz = random(-1, 1);

    b.rx = random(100);

    b.ry = random(100);

    b.rz = random(100);

    boxes.push(b);

  }

}

​