3d texture from array

/* 

​

  code to demonstrate how to:

  1. create an image out of numbers,

  2. map this image as a texture to a 3-d shape

​

*/

​

var img;

var counter = 0;

​

function setup() {

  // create a WEBGL canvas

  createCanvas(800, 600, WEBGL);

  // create empty image and fill pixel by pixel

  img = createImage(400, 100);

  img.loadPixels();

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

    for(var y = 0; y < img.height; y++) {

      // use noise() values 0-255 to create greyscale pixels

      img.set(x, y, noise(x/40,y/10)*255); 

    }

  }

  img.updatePixels();

}

​

function draw() {

  background('white');

  // animate a 3-d box

  push();

  rotateZ(counter * 0.1);

  rotateX(counter * 0.1);

  rotateY(counter * 0.1);

  texture(img);

  box(200, 200, 200);

  pop();

  // increase counter which determines rotation of box

  counter += 0.05;

}