Midterm Project – Move to the beat

Concept:

For my midterm project, i wanted to create a record player with a character dancing to the music that it played, why? because if there is something that i am interested in, that would be music and i wanted to display my love for music in this code. The experience begins with a record in the middle with two buttons, one is “Play/Stop” and the other is “Restart”and a character on top of the record. When the “Play/Stop” button is pressed the record starts spinning and starts to play the mp3 file of a sample i created by the software “Logic” in the same time the character, lets call him “Joey” starts dancing to the beat. When the “Play/Stop” button is pressed again the mp3 file and the spinning record animation pauses. For the second button  “Restart” , this button restarts the experience to the beginning , the mp3 file is 54 seconds long .

As for research, i searched for spinning record codes on YouTube, i got some results and i liked the way it looked, it was close to the idea i had in my head. As for the simplicity of the code and my current skills, that is the best i could do, but i am very happy with way it turned out.

I began creating sketches on Adobe Illustrator, which led me to my final design.

Logic file:

Sprite sheet website:

https://www.spriters-resource.com/game_boy_gbc/dancedancerevolutiongbjpn/sheet/156290/

extra research :

https://www.easytechjunkie.com/what-is-a-record-player.htm

From class:

• push() and Pop() : push() to save the current drawing style and pop() to restore the previous drawing style
• mouseClicked() : to check if the mouse click is within the boundaries of the Play/Stop button and Restart button.
• preLoad() : “loadSound” and “loadImage”  to check before calling the sound and image to load and run the code

 

My Sketch: “Move To The Beat”

My code :

// Declare a variable to store the button object
let btn;

let btnReplay;

// Variables to control rotation animation
let p = 0; // Flag to control animation playback (0: stopped, 1: playing)
let replay = 0; // Flag to control replay
let angle = 0; // Angle for rotating the shape

let imgs = []; // Array to store images

let mySound; // Sound object

function preload() {
  mySound = loadSound('data/music.mp3'); // Load the music file before running the code

  for (let i = 0; i <= 40; i++) {
    imgs[i] = loadImage('data/part' + i + '.png'); // Load a series of images before runninng the code
  }
}

function setup() {
  createCanvas(500, 500); // Create a 500x500 pixel canvas
  background("#408080"); // Set the background color to a shade of blue-green same as the background of the spritesheet character
  btn = new Button(250, 400, 120, 50, "Play/Stop"); // Create a button object for Play/Stop
  btnReplay = new Button(250, 460, 100, 50, "Restart"); // Create a button object for Restart
}

let f = 0; // Frame counter

function draw() {
  record(250, 250); // Call the record function to draw a rotating shape
  btn.show(); // Display the Play/Stop button
  btnReplay.show(); // Display the Restart button

  // Check if the animation is playing, and update the frame counter
  if (p == 1) {
    if (frameCount % 10 == 0) {
      f = (f + 1) % 40;
    }
  }

  image(imgs[f], 225, 60); // Display the current image frame

  // Check if the music is playing, and update the animation playback flag
  if (mySound.isPlaying()) {
    p = 1;
  } else {
    p = 0;
  }
}

// Function to draw a rotating shape
function record(x, y) {
  push();
  translate(x, y); // Translate the origin to the specified position

  // If p is set to 1, increment the angle for rotation
  if (p == 1) {
    angle += 0.1;
  }
  rotate(angle); // Rotate the subsequent shapes based on the angle

  fill(0); // Fill color for the central ellipse
  ellipse(0, 0, 200, 200); // Draw a central ellipse

  noFill();
  stroke(100); // Set stroke color
  strokeWeight(5); // Set stroke weight

  // Draw four arcs to create a pattern
  arc(0, 0, 150, 150, 0, PI / 4);
  arc(0, 0, 120, 120, PI / 4, PI / 2);
  arc(0, 0, 100, 100, PI, (3 * PI) / 2);
  arc(0, 0, 150, 150, PI / 2, PI);

  pop(); // Restore the previous drawing settings
}

// Function to respond to mouse clicks
function mouseClicked() {
  // Check if the mouse click is within the boundaries of the Play/Stop button
  if (
    mouseX > btn.x - btn.w / 2 &&
    mouseX < btn.x + btn.w / 2 &&
    mouseY > btn.y - btn.h / 2 &&
    mouseY < btn.y + btn.h / 2
  ) {
    // Toggle the value of p to start or stop the rotation animation
    if (p == 1) {
      mySound.pause(); // Pause the music
      p = 0; // Stop the animation
    } else {
      mySound.pause(); // Pause the music
      mySound.play(); // Start playing the music
      p = 1; // Start the animation
    }
  }

  // Check if the mouse click is within the boundaries of the Restart button
  if (
    mouseX > btnReplay.x - btnReplay.w / 2 &&
    mouseX < btnReplay.x + btnReplay.w / 2 &&
    mouseY > btnReplay.y - btnReplay.h / 2 &&
    mouseY < btnReplay.y + btnReplay.h / 2
  ) {
    mySound.stop(); // Stop the music
    mySound.play(); // Start playing the music
    p = 1; // Start the animation
  }
}

// Define a class called Button
class Button {
    // Constructor that initializes button position (x, y) and dimensions (w, h)
    constructor(x, y, w, h, text) {
        this.x = x; // X-coordinate of the button
        this.y = y; // Y-coordinate of the button
        this.w = w; // Width of the button
        this.h = h; // Height of the button
        this.text = text;   //text inside the button
    }

    // Method to display the button
    show() {
        // Save the current drawing style
        push();

        // Set the rectangle drawing mode to center
        rectMode(CENTER);

        // Set the fill color
        fill(200, 230, 150);

        // Check if the mouse is within the button's boundaries
        if (mouseX > this.x - this.w / 2 && mouseX < this.x + this.w / 2 && mouseY > this.y - this.h / 2 && mouseY < this.y + this.h / 2) {
            // If the mouse is inside, change the fill color to a darker shade
            fill(200, 180, 50);
        }

        // Draw a rectangle with rounded corners at the specified position and dimensions
        rect(this.x, this.y, this.w, this.h, 10);

        fill(255);
        textAlign(CENTER,CENTER);
        textSize(25);
        text(this.text,this.x,this.y);

        // Restore the previous drawing style
        pop();
    }
}

Part of my Code that I am proud of / difficulties:

That would be the variable p, getting it to be controlled with the mouseClicked function. Also variable p controls the animations. this was a journey of trial and error until i made it work. Another is fidgeting with the coordinates of the arc function and the use of increments to make the arcs rotate, i used the help of the reference sheet on the p5js website to figure out the rotation element and angles. That was difficult, sometimes they would just not work, i kept trying over and over again until everything worked cohesively.

This function is activated every time the button is clicked, it checks whether the mouse is on the play/stop button or on restart button  , also variable p decides if the music played or not :

 

// Function to respond to mouse clicks
function mouseClicked() {
  // Check if the mouse click is within the boundaries of the Play/Stop button
  if (
    mouseX > btn.x - btn.w / 2 &&
    mouseX < btn.x + btn.w / 2 &&
    mouseY > btn.y - btn.h / 2 &&
    mouseY < btn.y + btn.h / 2
  ) {
    // Toggle the value of p to start or stop the rotation animation
    if (p == 1) {
      mySound.pause(); // Pause the music
      p = 0; // Stop the animation
    } else {
      mySound.pause(); // Pause the music
      mySound.play(); // Start playing the music
      p = 1; // Start the animation
    }
  }

  // Check if the mouse click is within the boundaries of the Restart button
  if (
    mouseX > btnReplay.x - btnReplay.w / 2 &&
    mouseX < btnReplay.x + btnReplay.w / 2 &&
    mouseY > btnReplay.y - btnReplay.h / 2 &&
    mouseY < btnReplay.y + btnReplay.h / 2
  ) {
    mySound.stop(); // Stop the music
    mySound.play(); // Start playing the music
    p = 1; // Start the animation
  }

 

In this part variable p decides if the angle has to increase :

 

// Function to draw a rotating shape
function record(x, y) {
  push();
  translate(x, y); // Translate the origin to the specified position

  // If p is set to 1, increment the angle for rotation
  if (p == 1) {
    angle += 0.1;
  }
  rotate(angle); // Rotate the subsequent shapes based on the angle

  fill(0); // Fill color for the central ellipse
  ellipse(0, 0, 200, 200); // Draw a central ellipse

  noFill();
  stroke(100); // Set stroke color
  strokeWeight(5); // Set stroke weight

  // Draw four arcs to create a pattern
  arc(0, 0, 150, 150, 0, PI / 4);
  arc(0, 0, 120, 120, PI / 4, PI / 2);
  arc(0, 0, 100, 100, PI, (3 * PI) / 2);
  arc(0, 0, 150, 150, PI / 2, PI);

  pop(); // Restore the previous drawing settings
}

Finally, in this part of the code variable p decides if the animation(sprite sheet character) is good to start/run:

 

let f = 0; // Frame counter

function draw() {
  record(250, 250); // Call the record function to draw a rotating shape
  btn.show(); // Display the Play/Stop button
  btnReplay.show(); // Display the Restart button

  // Check if the animation is playing, and update the frame counter
  if (p == 1) {
    if (frameCount % 10 == 0) {
      f = (f + 1) % 40;
    }
  }

  image(imgs[f], 225, 60); // Display the current image frame

  // Check if the music is playing, and update the animation playback flag
  if (mySound.isPlaying()) {
    p = 1;
  } else {
    p = 0;
  }
}

 

Areas of improvement / future work:

I would like to in the future projects to create something more complex and a bit more creative, also bettering my skills in coding, thank you for viewing my project.

Link  to my code :

https://editor.p5js.org/mka413/sketches/zrBYeGRWy