Texture Shader Example

let img;

let shdr;

​

const spacing = 2;

const spriteW = 70;

const spriteH = 70;

​

let sprite = [1, 2];

// Bounds of the sprite in normalized coordinates (0..1)

// [ left, top, right, bottom ];

// [ x1, y1, x2, y2 ];

let spriteBounds;

​

function preload() {

  img = loadImage('spritesheet.png');

}

​

function setup() {

  createCanvas(windowWidth, windowHeight, WEBGL);

  textureMode(NORMAL);

  shdr = createShader(vert, frag);

  // There's a bug in p5.Shader._loadUniforms where samplerIndex never gets initialized

  shdr.samplerIndex = 1;

  spriteBounds = [

    sprite[0] * (spriteW + spacing) / img.width,

    sprite[1] * (spriteH + spacing) / img.height,

    (sprite[0] * (spriteW + spacing) + spriteW) / img.width,

    (sprite[1] * (spriteH + spacing) + spriteH) / img.height,

  ];

}

​

function draw() {

  orbitControl(2, 1, 0.1);

  background(100);

  texture(img);

  shader(shdr);

  beginShape();

  // clockwise winding quad

  vertex(-50, -50, 0, spriteBounds[0], spriteBounds[1]);

  vertex(50, -50, 0, spriteBounds[2], spriteBounds[1]);

  vertex(50, 50, 0, spriteBounds[2], spriteBounds[3]);

  vertex(-50, 50, 0, spriteBounds[0], spriteBounds[3]);

  endShape();

}