Finding The Way Back…

https://editor.p5js.org/mc5859/sketches/l0Y55pKcs

I wanted to create a slideshow-driven game based off of the beautiful self-portraits that our classmates had already created.

Xueyu started by creating a stunning landscape with beautiful trees using for loops, a feat that made my head spin.

Adventure Tree

I started by sketching out roughly how I wanted the choices to go. I got a real kick out of putting myself as the only sort of useless dead end.

I had a question last week about functions, and doing this assignment helped answer it. Are having separate functions that are called upon a type of encapsulation? In the context of object oriented programming?

Once I figured out how to create the different “scenes” by putting them in separate functions and calling on them, creating the rest of the game was sort of easy. I love that this was able to showcase my classmates great work.

Some people’s interactive sketches did not upload properly when put into the function, I surmise because the function does not have a setup type of function that only runs once? I believe we could have eventually made all of people’s sketches work if we looked into the code a little longer and edited a few variables n things.

Creating The Slider

I started creating the sliding by drawing a line, but quickly realized it would be really difficult for the user to click exactly onto the line, so instead changed it to a rectangle. I eventually got help from a classmate that created his slider

let lineX = 100;
let counter = 1;

function setup() {
createCanvas(400, 400);
background(220);
line(50, 50, lineX, 50);
}

function draw() {}

function mousePressed() {
//Detect if end of slider is being pressed
if (mouseX == lineX && mouseY == 50) {

//Match mouseX with the line
lineX = mouseX;
line(50, 50, lineX, 50);
}
}

let slide = 150;
let circleStarting = 0;
let heat = 0;
let heatNew;

function setup() {
  createCanvas(600, 400);

  textFont("Impact");
  textSize(30);
}

function draw() {
  background(5, 180, 200);

  heatNew = map(mouseX, 150, 450, 0, 100);

  text(heat, 300, 100);

  //Rectangle Underneath
  rect(width / 4, height / 2, 300, 20);

  //Sliding Rectangle Inside
  push();
  fill(0, 0, 255);
  rect(width / 4, height / 2, slide - 150, 20);
  pop();

  //Accompanying Circle
  circle(slide, 210, 30);

  //If MousePressed within Rectangle, then set Slide = MouseX
  if (
    mouseIsPressed &&
    mouseX > width / 4 && //150
    mouseX < (3 * width) / 4 && //450
    mouseY < 217 && //
    mouseY > 199
  ) {
    slide = mouseX;
    console.log("WE IN");

    if (heat >= 0 && heat <= 100) {
      heat = heatNew;
    }
  }
  console.log(mouseX, mouseY);
}