final project proposal

  12.17.2022

​

  I'm going to start a new project somehow similar to my sound sampler assingment. I'm recreating a "Chirstmas living room" using images and shapes. The user will be able to turn on and off the christmas lights from the christmas tree. They will also be able to control the speed of the snow falling outside the window. I want to add an option for them to add the gifts under the tree for christmas.

*/

​

var slideNumber = 0;

var totalSlides = 4;

​

var description = " I'm going to start a new project somehow similar to my sound sampler assingment. This project will be based on Christmas. I'm recreating a 'Chirstmas living room' using images and p5 shapes.";

​

var interaction = "The user will type keys on the keyboard to turn on and of the christmas lights. Also, they will be able to add christmas gifts under the chirstmas tree and make them dissaper. I'm adding a slider so they can control the snowfall.";

​

var visuals = "I will be using different images to recreate the living room, like the christmas tree, the gifts, and the empty living room in the background. The mat will be created with p5 shapes, same as the christmas lights.";

​

var designImg, gifts, livingR, tree;

​

var nextButtonX = 700;

var nextButtonY = 550;

var prevButtonX = 100;

var prevButtonY = 550;

var buttonWidth = 60;

var buttonHeight = 30;

​

function preload() {

  designImg = loadImage("comp.png");

  gifts = loadImage("gifts.png");

  livingR = loadImage("livingR2.png");

  tree = loadImage("tree.png");

}

​

function setup() {

  createCanvas(800, 600);

}

​

function draw() {

  background('#BFE5C0');

  fill(0);

  if (slideNumber === 0) {

    // project pitch intro

    textSize(60);

    textAlign(CENTER, CENTER);

    text("My Final Project", width / 2, height / 2);

    textSize(20);

    text("by Alina Perdomo", width / 2, height / 2 + 100);

  } else if (slideNumber === 1) {

    // description

    textAlign(LEFT);

    textSize(40);

    text("Description", 50, 100);

    textSize(30);

    text(description, 50, 200, 600);

  } else if (slideNumber === 2) {

    // description

    textAlign(LEFT);

    textSize(40);

    text("Interaction", 50, 100);

    textSize(30);

    text(interaction, 50, 200, 600);

  } else if (slideNumber === 3) {

    // description

    textAlign(LEFT);

    textSize(40);

    text("Visuals", 50, 100);

    textSize(30);

    text(visuals, 50, 200, 600);

    // living room comp

    //full comp

    image(designImg, 50, 380);

    designImg.resize (210,150);

    //gifts

    image(gifts, 500, 510);

    gifts.resize (160,80);

    //living room

    image(livingR, 500, 390);

    livingR.resize (160,100);

    //christmas tree

    image(tree, 300, 420);

    tree.resize (150,150);

  }

  // draw buttons

  button("Next", nextButtonX, nextButtonY);

  button("Prev", prevButtonX, prevButtonY);

}

​

function button(buttonText, x, y) {

  stroke(0);

  strokeWeight(2);

​

  if (mouseX > x && mouseX < x + buttonWidth &&

      mouseY > y && mouseY < y + buttonHeight) {

    fill('orange');

  } else {

    fill('lightblue');

  }

  rect(x, y, buttonWidth, buttonHeight, 5);

​

  noStroke();

  fill(0);

  textAlign(LEFT, TOP);

  textSize(20);

  text(buttonText, x + 10, y + 5);

}

​

function mousePressed() {

  // check if mouse is inside button

  // next

  if (mouseX > nextButtonX && 

      mouseX < nextButtonX + buttonWidth &&

      mouseY > nextButtonY && 

      mouseY < nextButtonY + buttonHeight &&

     slideNumber < totalSlides - 1) {

    slideNumber++;

  }

  // prev

  if (mouseX > prevButtonX && 

      mouseX < prevButtonX + buttonWidth &&

      mouseY > prevButtonY && 

      mouseY < prevButtonY + buttonHeight &&

     slideNumber > 0) {

    slideNumber--;

  }

}

​

​

​