Project 1: Personal Intro - OpenProcessing

mySketch
xxxxxxxxxx
 
/*ARTG 2260 - Programming Basics: Project 1 
  Tanya Kler
  
  Pseudocode:
  1. User starts program
  2. Welcoming text is displayed on screen
  3. User clicks mouse
  4. First fact is displayed
  5. User clicks mouse again
  6. Next fact is displayed
  7. Steps 5 and 6 are repeated (user continues to click to progress to next fact) until final fact (fact 10)
  8. On next mouse click, facts loop back to the welcoming text and process repeats
  
  Variables:
  - Integer representing interesting fact
    - 0 represents welcoming text
    - 1 through 10 represeents 10 different interesting facts
  - text strings for interesting facts
  - text size
  - text position (both x and y)
  
  INSTRUCTIONS:
  - click mouse to go forward
  - left arrow key goes back one slide
  - type out "t a n y a" (in any order) to unlock a special feature
    - press backspace to reset
  - space bar will display a random fact (not the next one in order)
  - slides without any stars have secrt images you can find by hovering over them
  - when image is found, click on it to get a point
  
*/
​
//variables
let clickNum = 0;  //number of clicks in program wich corresponds to a fact
let sizeText = 52;  //text size of facts
let small = 36; //text size for score
var textX;  // x position of text variable declaration (will be initialized after canvas is created in setup)
var textY;  // y position of text variable declaration (will be initialized after canvas is created in setup)
let t = false;  // t boolean indicating whether t should be shown
let a1 = false;  // a1 boolean indicating whether first a should be shown
let n = false;  // n boolean indicating whether n should be shown
let y = false;  // y boolean indicating whether y should be shown
let a2 = false;  // a2 boolean indicating whether second a should be shown
var timg;  // t letter image (will be initialized after canvas is created in setup)
var aimg;  // a letter image (will be initialized after canvas is created in setup)
var nimg;  // n letter image (will be initialized after canvas is created in setup)
var yimg;  // y letter image (will be initialized after canvas is created in setup)
var nameImg;  // image of name for welcoming screen (will be initialized after canvas is created in setup)
var star; //image of star (will be initialized after canvas is created in setup)
var bg; //background color
let facts = [];  //array of facts (including welcome and ty screen text)
var orange;  // orange color
var pink;  // pink color
var lavender;  // lavnder color
var purple;  // purple color
var bl;  // blue color
var gr;  // green color
let colors = [];  //array of colors
var lalaland;  //image of lalaland
var rings;  //image of olympic rings
var barcelona;  // image of barclona
var cherry;  //image of cherry jolly rancher
var taylor;  //image of taylor swift
var philly;  //image of philly
var directions; //image of directions/instructions
var smiley; //image of smiley face
let found1 = false;  //boolean indicating if first image has been found
let found2 = false;  //boolean indicating if second image has been found
let found3 = false;  //boolean indicating if third image has been found
let found4 = false;  //boolean indicating if fourth image has been found
let found5 = false;  //boolean indicating if fifth image has been found
let found6 = false;  //boolean indicating if sixth image has been found
let score = 0;  //variable which keeps track of how many secret images were found
​
//loads images
function preload() {
  timg = loadImage("t.png"); //initialization of t image
  aimg = loadImage("a.png"); //initialization of a image
  nimg = loadImage("n.png"); //initialization of n image
  yimg = loadImage("y.png"); //initialization of y image
  
  nameImg = loadImage("tanya.png"); //initialization of name image
  
  star = loadImage("star.png"); //initalization of star image
  
  lalaland = loadImage("lala.jpg"); //initalization of lalaland image
  
  rings = loadImage("rings.png"); //initalization of rings image
  
  barcelona = loadImage("barcelona.jpg"); //initalization of barcelona image
  
  cherry = loadImage("cherry.png"); //initalization of cherry jolly rancher image
  
  taylor = loadImage("swift.png"); //initalization of taylor image
  
  philly = loadImage("philly.jpg"); //initalization of philly image
  
  directions = loadImage("instructions2-01.png"); //initalization of instructions image
  
  smiley = loadImage("smile.png"); //initalization of smiley face image
​
}
​
// sets up program
function setup() {
  createCanvas(windowWidth, windowHeight); //sets size of display to the size of the window (full screen)
  
  textX = width/2  //initialization of textX to position the text in the center
  textY = height/2  //initialization of textY to position the text in the center
  
  orange = color(255, 145, 66);  //initializes orange variable
  pink = color(255, 0, 191);   //initializes pink variable
  lavender = color(227, 191, 255);   //initializes lavender variable
  purple = color(166, 107, 255);   //initializes purple variable
  bl = color(140, 211, 255);   //initializes bl variable
  gr = color(17, 166, 104);   //initializes gr variable
  
  textAlign(CENTER);  //centers text in center of text box
  textFont('Didot');  //sets font to Didot
  fill(255);  //sets text color to white
  bg = lavender; //initial bg color, initialization of bg variable to orange
  
  facts.push("start");  //add welcoming text to array
  facts.push("hi!");  //add welcoming text to array
  facts.push("I'm Tanya!");  //add fact 1 to arrray
  facts.push("I was born on November 10th, 2000 \n in Philadelphia and have lived in \n the Philly suburbs ever since");  //add fact 2 to arrray
  facts.push("My favorite color is lavender");  //add fact 3 to arrray
  facts.push("I'm a combined computer science and design major \n with a minor in global fashion studies");  //add fact 4 to arrray
  facts.push("My favorite movie is La La Land");  //add fact 5 to arrray
  facts.push("In my free time I like to bake and sew");  //add fact 6 to arrray
  facts.push("I love Taylor Swift");  //add fact 7 to arrray
  facts.push("My favorite place is Vancouver");  //add fact 8 to arrray
  facts.push("I love the Olympics");  //add fact 9 to arrray
  facts.push("In high school I planned school dances \n and got Shaun White to announce our \n Winter Olympics Winter Ball theme");  //add fact 10 to arrray
  facts.push("I've always wanted to go to Barcelona");  //add fact 11 to arrray
  facts.push("I played the drums in middle and high school");  //add fact 12 to arrray
  facts.push("My favorite jolly rancher flavor is cherry");  //add fact 13 to arrray
  facts.push("Thanks!");  //add fact 14 to arrray
  
  
  
  colors[0] = orange;  //adds orange to colors array
  colors[1] = pink;  //adds pink to colors array 
  colors[2] = lavender;  //adds lavender to colors array
  colors[3] = purple;  //adds purple to colors array
  colors[4] = bl;  //adds blue to colors array
  colors[5] = gr;  //adds green to colors array
}
​
// draws display each time
function draw() {
  background(bg); //sets background color
  textSize(sizeText);  //sets text size to variable we initialized earlier
  let currFact = facts[clickNum];  //current fact based on clickNum
  text(currFact, textX, textY);  //displays current fact as text at correct position
  image(smiley, mouseX + 3, mouseY + 3, smiley.height/ 6, smiley.width / 6); //creates smiley face cursor 
  noStroke(); //creates rectangle with no outline
  fill(255, 116, 151); //makes score box light pink color
  textSize(small);  //makes following text (for score) small
  if(score === 6) {  //if user has found all images
    rect(30, 37, 170, 110, 15);  //box for score and win statement
    fill(255);  //sets fill to white so test will be white
    text(" score: " + score + "\n you won!", 110, 75);  //displays score with "you won!"
  } else {  //not all images have been found
    rect(30, 38, 170, 60, 15);  //box for score
    fill(255); //sets fill to white so test will be white
    text("score: " + score, 110, 75);//displays score
  }
//switch statement to display images that corresponds to facts
switch(clickNum){
    case 0:  //welcoming slide images
      image(directions, (23 * width) / 100, (2 * height) / 100, directions.width / 3, directions.height / 3); //displays instructions
      image(star, (5 * width) /6, height / 7, star.height / 4, star.width / 4); //displays star on top right
      image(star, (6 * width) /8, height / 4, star.height / 6, star.width / 6); //displays another star near the first
      image(star,  width / 16, (5 * height) / 7, star.height / 4, star.width / 4); //displays star on bottom left
      image(star, (7 * width) / 36, (14 * height) / 20, star.height / 6, star.width / 6); //displays another star near the bottom one
      break;  //break to end case
    case 2:  //name image
      image(nameImg, 0, height / 12, nameImg.width / 4, nameImg.height / 4); //displays name image on left 
      image(star, (5 * width) /6, height / 7, star.height / 4, star.width / 4); //displays star on top right
      image(star, (6 * width) /8, height / 4, star.height / 6, star.width / 6); //displays another star near the first
      break;  //break to end case
    case 3:  //philly image
      if (mouseY < philly.height) {
        image(philly, (3 * width) / 20, 0, philly.width, philly.height); //displays philly image on top if hovered over 
      }
      break;  //break to end case
    case 6:  //lalaland image
      if (mouseX > (56 * width) / 100 ) { //if mouse is on right of screen
        image(lalaland, (56 * width) / 100 , (22 * height) / 90, lalaland.width / 1.5, lalaland.height / 1.5); //displays lalaland image on right if hovered over 
      }
      break;  //break to end case
    case 8:  //taylor swift image
      if (mouseY > (3 * height) / 5 && mouseX < width / 3) { //if mouse is hovering over image
        image(taylor, width / 20 , height - taylor.height, taylor.width, taylor.height); //displays taylor image on left if hovered over 
      }
      break;  //break to end case
    case 10:  //olympic rings image
      if (mouseY > height - ((rings.height / 2) + (rings.height / 6)) 
          && mouseX > ((2 * width) - rings.width) / 4 
          && mouseX <  ((2 * width) / 3) + 50 ) { //if mouse is over image (roughly)
        image(rings, (25 * width) / 80, height - ((rings.height / 2) + (rings.height / 6)), rings.width / 2, rings.height / 2); //displays rings image if hovered over 
      }
      break;  //break to end case
    case 12:  //barcelona image
      if (mouseX > (62 * width) / 100 ) { //if mouse is on right of screen
        image(barcelona, (62 * width) / 100 , (22 * height) / 90, barcelona.width / 2, barcelona.height / 2); //displays barcelona image on left if hovered over 
      }
      break;  //break to end case
    case 14:  //jolly rancher image
      if (mouseY > height - ((cherry.height) + 45) 
          && mouseX > ((2 * width) - cherry.width) / 4 
          && mouseX <  ((2 * width) / 3) + 50 ) { //if mouse is over image (roughly)
        image(cherry, (25 * width) / 80, height - ((cherry.height) + 45), cherry.width, cherry.height); //displays jolly rancher image if hovered over 
      }
      break;  //break to end case
    default:  //default case displays stars
      image(star, (5 * width) /6, height / 7, star.height / 4, star.width / 4); //displays star on top right
      image(star, (6 * width) /8, height / 4, star.height / 6, star.width / 6); //displays another star near the first
      image(star,  width / 16, (5 * height) / 7, star.height / 4, star.width / 4); //displays star on bottom left
      image(star, (7 * width) / 36, (14 * height) / 20, star.height / 6, star.width / 6); //displays another star near the bottom one
} 
  
  if (t) {  //checks if t is true and t image should be shown
    image(timg, (3 * width) / 14, height / 9, timg.width / 2, timg.height / 2); //displays t image at top 
  }
  if (a1) {  //checks if a1 is true and first a image should be shown
    image(aimg, (5 * width) / 14, height / 9, aimg.width / 2, aimg.height / 2);  //displays first a image at top 
  }
  if (n) {  //checks if n is true and n image should be shown
    image(nimg, (7 * width) / 14, height / 9, nimg.width / 2, nimg.height / 2);  //displays n image at top 
  }
  if (y) {  //checks if y is true and y image should be shown
    image(yimg, (9 * width) / 14, height / 9, yimg.width / 2, yimg.height / 2);  //displays y image at top 
  }
  if (a2) {  //checks if a2 is true and second a image should be shown
    image(aimg, (11 * width) / 14, height / 9, aimg.width / 2, aimg.height / 2);  //displays second a image at top 
  }
  
  if(t && a1 && n && y && a2) { //checks if every letter of my name has been typed
    bg = random(colors); //creates strobing background !!
  }
}
​
//key typing function which handles key presses (used for name feature)
//I used keyTyped instead of keyPressed so I could compare the key to the actual letter and not a code for the letters
function keyTyped() { 
  if (key === 't') {  //if t is typed
    t = true;  //set t to true so that t image can be shown
  } else if(key === 'a' && !a1) { //if a is typed for the first time
    a1 = true;  //set a1 to true so that first a image can be shown
  } else if(key === 'a' && a1) {  //if a is typed for the second time
    a2 = true;   //set a2 to true so that second a image can be shown
  } else if (key === 'n') {  //if n is typed
    n = true;   //set n to true so that n image can be shown
  } else if(key === 'y') {  //if y is typed
    y = true;   //set y to true so that y image can be shown
  }
}
​
//used for other keys ssuch as left arrow, space, and backspace
function keyPressed() {
  if (keyCode === LEFT_ARROW) {  // check if key presssed is left arrow
    if (clickNum > 0) {  //if not on starting slide
      clickNum--;  //go backwards one slide by decreasing clickNum
    }
  } else if (keyCode === RIGHT_ARROW) {  // check if key presssed is right arrow
    if (clickNum < 15) {  //if not on final slide
      clickNum++;  //go forwards one slide by increasing clickNum
    } else {  //if on final slide
      clickNum = 0; //resets clickNum to 0 to reset the program and go back to the welcome display
    }
  } else if (keyCode === 32) {  //check if space bar is presssed
    
    // display a random fact
    let nums = []  //initialized nums array
    for (let i = 0; i < 14; i++) {  //for loop to create array
      nums[i] = i + 1;  //add num to array. Only facts are randomized so bounds are [1, 13]
    }
    clickNum = random(nums); //set clickNum to random num from array to go to the random slide
  } else if (keyCode === 8) {  //check if backspace key is pressed
    
    //set all name letter booleans to false to restart name functionality
    t = false;  //set t to false
    a1 = false;  //set a1 to false
    n = false;  //set n to false
    y = false;  //set y to false
    a2 = false;  //set a2 to false
  }
}
​
// mouse clicking function which handles the mouse events for moving through slideshow
function mouseClicked() {
  if (clickNum < 15) {  //checks if clickNum is less than 10 to make sure there is another fact to progress to
    clickNum++;  //increases clickNum by 1 to progress to next fact
  } else {
    clickNum = 0;  //resets clickNum to 0 to reset the program and go back to the welcome display
  }
}
​
//handles mouse presses when finding images
function mousePressed(){
  
  //switch statement to handle allocating points only once per image
  switch(clickNum){
    case 3:  // philly image
      if (mouseY < philly.height) {  //image boundaries
        if(!found1) {   //if not already found (to ensure no duplicate points)
          score++;  //increase score
          found1 = true;  //set found to true so we know it has been found already
        }
      }
      break;
    case 6:  // lalaland image
      if (mouseX > (56 * width) / 100 ) {  //image boundaries
        if(!found2) {  //if not already found (to ensure no duplicate points)
          score++;  //increase score
          found2 = true;  //set found to true so we know it has been found already
        }
      }
      break;
    case 8:  // taylor swift image
      if (mouseY > (3 * height) / 5 && mouseX < width / 3  ) {  //image boundaries
        if(!found3) {  //if not already found (to ensure no duplicate points)
          score++;  //increase score
          found3 = true;  //set found to true so we know it has been found already
        }
      }
      break;
    case 10:  // olympic rings image
      if (mouseY > height - ((rings.height / 2) + (rings.height / 6))) {  //image boundaries
        if(!found4) {  //if not already found (to ensure no duplicate points)
          score++;  //increase score
          found4 = true;  //set found to true so we know it has been found already
        }
      }
      break;
    case 12:  // barcelona image
      if (mouseX > (62 * width) / 100 ) {  //image boundaries
        if(!found5) {  //if not already found (to ensure no duplicate points)
          score++;  //increase score
          found5 = true;  //set found to true so we know it has been found already
        }
      }
      break;
    case 14:  // jolly rancher image
      if (mouseY > height - ((cherry.height) + 45)) {  //image boundaries
        if(!found6) {  //if not already found (to ensure no duplicate points)
          score++;  //increase score
          found6 = true;  //set found to true so we know it has been found already
        }
      }
      break;
    default: //in default case nothing happens. I know it isn't necessary but I kept it for my own peace of mind.
  }
      
}
​
​
​