//   img = loadImage("images/fruits.png");

// }

/* EX 1

function setup() {

  let pink = color(255, 102, 204);

  pink.setAlpha(120);

  createCanvas(400, 400);

  image(photo, 0, 0, 400, 400);

  loadPixels();

  let d = pixelDensity();

  //each pixel is 4 entries in the array hence the length of array

  let halfImage = 4 * (width * d) * ((height / 2) * d);

  for (let i = 0; i < halfImage; i += 4) {

    pixels[i] = red(pink);

    pixels[i + 1] = green(pink);

    pixels[i + 2] = blue(pink);

    pixels[i + 3] = alpha(pink);

  }

  updatePixels();

}

*/

/* EX 2

function setup() {

  createCanvas(400, 400)

  pixelDensity(1);

​

  // blue background 

  // makes it easier to see the pink

  background(0, 102, 204);

​

  loadPixels();

​

  // Here is the equation 

  // for the start (red value) 

  // of a pixel 

  // at a particular coordinate (x,y)

  // (x + y*width) * 4

​

  // Change most of the fiftieth row to pink

  // instead of the whole line, 

  // only do from x = 10 to x = 90

  let startX = 50;

  let endX = 350;

  let row = 200;

​

  for (let i = (startX + row * width) * 4;

       i < (endX + row * width) * 4;

       i += 4) {

    // pink

    pixels[i + 0] = 255;

    pixels[i + 1] = 102;

    pixels[i + 2] = 204;

    pixels[i + 3] = 100;

  }

  row = 300

  for (let i = (startX + row * width) * 4;

       i < (endX + row * width) * 4;

       i += 4) {

    // pink

    pixels[i + 0] = 255;

    pixels[i + 1] = 102;

    pixels[i + 2] = 204;

    pixels[i + 3] = 100;

  }

​

  // this puts the array back on the screen

  updatePixels();

}

*/

/* EX 3

function setup() {

  pixelDensity(1);

  background(0, 102, 204);

}

​

let redValue = 0; 

let rx = 1;

​

function draw() {

​

  loadPixels();

  for (let i = 0; i < width * height * 4 ; i+=4) {

    pixels[i] = redValue;

  } 

  updatePixels();

​

  if(redValue == 0){

    rx = 1

  }

  else if(redValue == 255){

    rx = -1

  }

  redValue += rx

  print(redValue)

  updatePixels();

​

}

*/

​

/*EX4

function setup() {

  createCanvas(256,256);

  pixelDensity(1);

}

​

function draw() {

  loadPixels();

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

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

      var index = (x + y * width) * 4;

​

      pixels[index + 0] = x;

      // red value changes horizontally

​

      pixels[index + 1] = random(255)

      // green value random

​

      pixels[index + 2] = y;

      // blue value changes vertically

​

      pixels[index + 3] = 255;

      // no transparency

    }

  }

  updatePixels();

}

*/

/* example 2

let tiles = [];

let tileSize = 200;

​

function setup() {

  createCanvas(400, 400);

  let numTiles = 10;

  while (numTiles > 0) {

    tiles.push(

      img.get(int(random(img.width - tileSize)),int(random(img.height - tileSize)),tileSize,tileSize));

    numTiles--;

  }

  imageMode(CENTER);

}

​

function draw() { }

​

function keyPressed() {

  image(tiles[int(random(10))], 0, 0);

}

*/

​

let spritesheet;

let sprites = [];

let direction = 1; // 0 up

let step = 0;

let x;

let y;

let mspeed = 3;

​

function preload() {

  spritesheet = loadImage("images/walking.png");

}

​

function setup() {

  // fullscreen(true);

  createCanvas(500, 450);

​

  // 12 images across, 4 down, in the spritesheet

​

  let w = int(spritesheet.width / 12);

  let h = int(spritesheet.height / 4);

​

  for (let y = 0; y < 4; y++) {

    sprites[y] = [];

    for (let x = 0; x < 12; x++) {

      sprites[y][x] =

        spritesheet.get(x * w, y * h, w, h);

    } // iterate over rows

  } // iterate over columns

​

  x = width / 2;

  y = height / 2;

​

  imageMode(CENTER);

​

    // Display first sprite

  image(sprites[direction][step], x, y);

}

​

// nothing to do here because all the action

// happens in the keyPressed() callback

function draw() {}

​

function keyPressed() {

  // look at sprite sheet to determine 

  // which direction is which row

​

  if (keyCode === DOWN_ARROW) {

    direction = 0;

    y += mspeed;

    step = (step + 1) % 12;

  }else if (keyCode === LEFT_ARROW) {

    direction = 1;

    x -= mspeed;

    step = (step + 1) % 12;

  }else if (keyCode === RIGHT_ARROW) {

    direction = 2;

    x += mspeed;

    step = (step + 1) % 12;

  }else if (keyCode === UP_ARROW) {

    direction = 3;

    y -= mspeed;

    step = (step + 1) % 12;

  }

    // Finally draw paint the sprite

  background(255);

  image(sprites[direction][step], x, y);

}

​