p5.js Web Editor | Halloween Coloring Book

xxxxxxxxxx
// Welcome to my halloween coloring book. Stickers consist  of several pngs, set to custom sizes inside functions. I was able to change the colors of the stickers by using tint(). Sticker type is controlled by letters "a-h". Colors are controlled by numbers "1-6", with 6 returning sticker to its orginal tint. 
​
// Sticker Variable Names
let blackCat;
let grayBat;
let orangeCandy
let witchesPot
let meltingCandles
let orangePumpkin
let colorBookCover
let witchesHat
let whiteGhost 
​
// sticker in use variable 
let activeSticker = "stickera";
​
// loading in png's to be stickers 
​
function preload(){
  grayBat =loadImage('grayBat.png')
  
  blackCat =loadImage('blackCat.png')
  
  orangeCandy =loadImage('orangeCandy.png')
  
  witchesPot =loadImage('witchesPot.png')
  
  meltingCandles =loadImage('meltingCandles.png')
  
  orangePumpkin =loadImage('orangePumpkin.png')
  
  colorBookCover =loadImage('colorBookCover.png')
  
  witchesHat =loadImage('witchesHat.png')
  
  whiteGhost =loadImage('whiteGhost.png')
}
​
​
​
// Canvas Set Up
function setup() {
  createCanvas(600,800);
  background("#CDC6AE");
  rectMode(CENTER);
  image(colorBookCover,0, 0, 600,800);
​
}
​
// to make the cover, I added a seperate canvas
​
function flipcover() {
    createCanvas(600,800);
    background("#CDC6AE");
}
​
​
// Drawing Action SetUp
​
function draw() {
  
    
  if(mouseIsPressed) {
    // Check which brush is the sticker one
    // Call the appropriate function for the active sticker
    
    if (activeSticker == "stickera") {
      stickera();
    }
    else if (activeSticker == "stickerb") {
      stickerb();
    }
    else if (activeSticker == "stickerc") {
      stickerc();
    }
    else if (activeSticker == "stickerd"){
      stickerd();
    }
    else if(activeSticker == "stickere") {
      stickere();
    }
    else if (activeSticker == "stickerf") {
      stickerf();
    }
    else if (activeSticker == "stickerg") {
      stickerg();
    }
    else if (activeSticker == "stickerh") {
      stickerh();
    }
   
  
}}
​
function keyPressed() {
  
// Turn Color Book Page 
  
  if (key == "Q"){
    flipcover()
  }
  
// Change Stickers
​
  if (key == "a") {
    activeSticker = "stickera";
  }
  else if (key == "b") {
    activeSticker = "stickerb";
  }
  else if (key == "c") {
    activeSticker = "stickerc";
  }
  else if (key == "d") {
    activeSticker = "stickerd"
  } 
  else if (key == "e") {
    activeSticker = "stickere"
  } 
  else if (key == "f") {
    activeSticker = "stickerf"
  } 
  else if (key == "g") {
    activeSticker = "stickerg"
  } 
  else if (key == "h") {
    activeSticker = "stickerh"
  }
  
  
// Change Colors & Return to Orginal Tint 
  
  //lavendar tint
  if (key == 1){
    tint(156,144,188);
  }
  
  //blackout tint 
  if (key == 2){
    tint(0,128);
    
  }
  
  // orange tint 
  if (key == 3){
    tint(222,145, 81)
  }
  
  // green tint 
  
  if (key == 4){
    tint(141,181,128)
  }
  
  // red tint 
  if (key == 5) {
    tint(255,89,94);
  }
  
  //original 
  if (key == 6) {
    noTint();
    
  }
  
// Save png
  
  if (key == "z"){
    save('output.png')
  }
  
// Reset Canvas
  
  if (key == "x"){
    setup();
  }}
  
// Sticker Functions 
  
function stickera() {
  image(grayBat,mouseX,mouseY,90,120);
}
​
function stickerb() {
  image(blackCat,mouseX,mouseY,100,140);
}
​
function stickerc(){
  image(orangeCandy,mouseX,mouseY,50,50);
}
​
function stickerd(){
  image(witchesPot,mouseX,mouseY,200,240);
}
​
function stickere(){
  image(meltingCandles,mouseX,mouseY,70,90);
}
​
function stickerf(){
  image(orangePumpkin,mouseX,mouseY,300,340);
}
​
function stickerg(){
  image(witchesHat,mouseX,mouseY,70,90);
}
​
function stickerh(){
  image(whiteGhost,mouseX,mouseY,120,140);
}
​
​
Cookies

Sketch Files

Console

Preview
