Cat Colour Gradient

// Genuary 16: Colour Gradients Gone Wrong

// Sprites by Elthen https://elthen.itch.io/2d-pixel-art-cat-sprites - Thank you!

​

let sprites = [];

let spriteNum = 10;

​

let spriteSheet;

let ssInfo = {

  width: 512,

  height: 32,

  numFrames: 16,

  frameW: 32

}

let pawSheet;

let pawGraphics = [];

​

function preload() {

  spriteSheet = loadImage(`https://deckard.openprocessing.org/user118759/visual1443664/hfae7a82d02aeb02240f7b25ca5dc10d0/elthencat_strip.png`);

  pawSheet = loadImage(`https://deckard.openprocessing.org/user118759/visual1443664/hfae7a82d02aeb02240f7b25ca5dc10d0/elthencat_pawprints2.png`)

}

​

//store the new tinted images in this array

let spriteGraphics = [];

// amount of tinted images to create

let tintNum = 10;

let bg;

​

function setup() {

  for (let i = 0; i < tintNum; i++) {

    let newGraphic = createGraphics(ssInfo.width, ssInfo.height);

    newGraphic.noSmooth();

    newGraphic.colorMode(HSL);

    newGraphic.tint(i * 25, 80, 50);

    newGraphic.image(spriteSheet, 0, 0, ssInfo.width, ssInfo.height);

    spriteGraphics.push(newGraphic);

  }

​

  for (let i = 0; i < tintNum; i++) {

    let newGraphic = createGraphics(ssInfo.width, ssInfo.height);

    newGraphic.noSmooth();

    newGraphic.colorMode(HSL);

    newGraphic.tint(i * 25, 80, 50);

    newGraphic.image(pawSheet, 0, 0, ssInfo.width, ssInfo.height);

    pawGraphics.push(newGraphic);

  }

​

  createCanvas(500, 500);

  noStroke();

  noSmooth();

  frameRate(10);

​

  for (let i = 0; i < spriteNum; i++) {

    sprites.push(new Sprite(10, i*38, i % tintNum));

  }

​

  //sort by "z-index" to always draw the farthest away first

  sprites.sort((a, b) => a.zMarker - b.zMarker);

​

  bg = createGraphics(width, height);

  bg.noSmooth();

  bg.background(150);

}

​

let currentFrame = 0;

let myScale = 2;

​

function draw() {

  // background(`#feebe1`);

​

  image(bg, 0, 0);

  // bg.rect(36, 36, 5, 5);

​

  // let sections = 6;

  // let sectionHeight = height / sections;

  // let from = color(`#feebe1`);

  // let to = color(`#f2b897`);

  // for (let i = 0; i < sections; i++) {

  //   let interA = lerpColor(from, to, i / sections);

  //   fill(interA);

  //   rect(0, i * sectionHeight, width, width);

  // }

​

  sprites.forEach(sprite => {

    sprite.draw();

  });

​

  if (frameCount % 2 == 0) {

    currentFrame += 1;

    if (currentFrame > 5) {

      currentFrame = 0;

    }

  }

  //image(image, destinationX, destinationY, destinationWidth, destinationHeight, sourceX, sourceY, sourceWidth, sourceHeight)

  //destination width is the frame width, not the spritesheet width!! 

​

  //loop of colourful ones

  // for (let i = 0; i < spriteGraphics.length; i++) {

  //   image(spriteGraphics[i], 50, i * 20, ssInfo.frameW, ssInfo.height, (currentFrame * ssInfo.frameW), 0, ssInfo.frameW, ssInfo.height);

  // }

​

}

​

class Sprite {

  constructor(x, y, tint) {

​

    // this.scale = round(random(1, 3));

    this.scale = 3;

    this.width = ssInfo.frameW * this.scale; //frame width, not spritesheet width

    this.height = ssInfo.height * this.scale;

    // this.x = floor(random(width));

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

    this.x = x;

    this.y = y;

    // this.tint = floor(random(tintNum));

    this.tint = tint;

    this.counter = floor(random(ssInfo.numFrames));

    this.zMarker = this.y + this.height; //a value used for the sorting that takes into account the size of the sprite

  }

​

  draw() {

    //drawing based on previous loop's information

    image(spriteGraphics[this.tint], this.x, this.y, this.width, this.height, (this.counter * ssInfo.frameW), 0, ssInfo.frameW, ssInfo.height);

    bg.image(pawGraphics[this.tint], this.x, this.y, this.width, this.height, (this.counter * ssInfo.frameW), 0, ssInfo.frameW, ssInfo.height);

​

    this.x += 2;

    // rect(this.x, this.zMarker, 5, 5);  //debugging

    if (this.counter < ssInfo.numFrames - 1) {

      this.counter++;

      if (this.counter === 2 || this.counter === 6) {

        // bg.ellipse(this.x+this.width, this.y, 4, 4)

        this.x += floor(random(3)) * this.scale; //step for frame 5

      }

if (this.counter === 10 || this.counter === 11 || this.counter === 9) {

  this.x += floor(random(3)) * this.scale; 

}

    }

    else {

      this.counter = 0;

      if (this.x >= width) {

        this.x = -this.width;

      }

      else {

        this.x += 3 * this.scale; //step, condition for the last frame

      }

    }

  }

}

​

//in air frames: 3, 7, 10-11-12 (huge leap),