Month: October 2023

https://editor.p5js.org/Saiki/sketches/3jMTkdbOt

CONCEPT 

As mentioned earlier, the concept of my drum machine was inspired by playing around with online drum pads/drum machines on the internet. After discovering p5.Sound, I wanted to challenge myself and gain a better understanding of audio programming while also creating music. It seemed like a fun idea to pursue.

For the artistic vision of the project, I drew inspiration from the minimalist design often used by electronic music producers. The default Helvetica font is popular in this style, and it complemented the minimal CSS I added, making it easier to define the desired aesthetic.

 

CODING TRANSLATION

The biggest challenge in my code was understanding the p5.Sound library. In hindsight, I realized that using the tone.js library might have made my life easier, but that’s a lesson for another day. One of the main aspects of audio programming was figuring out how to convert the beat array into p5.Phrase and p5.Part processes. Think of p5.Phrase as individual tracks in an audio DAW and p5.Part as the master audio track that encompasses all the multiple drum beat tracks.

Once that was accomplished, the challenge shifted to finding a way to change the value of the array based on mouse clicks on the grid and obtaining the index of the clicked cell to modify the array. After that, my focus shifted to styling the canvas and adding fun functions like shuffle beat. I found that my previous experience with if-else statements and for loops in previous classes greatly aided me in defining these functions.

HIGHLIGHT

The part I am most proud of is figuring out how to change the index of the three drum arrays.

// determines whether a beat/note is played when mouse is clicked on the grid
function mousePressed() {
  // let rowClicked = floor(3*mouseY/height)
  let rowClicked = floor((3 * (mouseY - 50)) / (height - 135));

  // let indexClicked = floor (16*mouseX/width)
  let indexClicked = floor((16 * (mouseX - 50)) / (width - 100));

  if (rowClicked === 0) {
    console.log("1st row" + indexClicked);
    hhPat[indexClicked] = +!hhPat[indexClicked];
  }
  if (rowClicked === 1) {
    console.log("2nd row");
    cPat[indexClicked] = +!cPat[indexClicked];
  }
  if (rowClicked === 2) {
    console.log("3rd row");
    bPat[indexClicked] = +!bPat[indexClicked];
  }

  //   updates the matrix with shapes added/removed
  drawMatrix();
}

 

REFLECTION

In my next iteration of the code, I would like to add a button that clears the code. Additionally, I would like to include more diverse drum sounds that can be selected through a menu. It would be a cool function to be able to change the time signature of the beat setup from 4/4 to 3/4 or 7/8. There is ample room for customization, but for now, I am content with establishing the foundation of this project.

CONCEPT:

My midterm project attempts to showcase the beauty of the Indian classical dance of Kathak. The project was ideated based on my experience pursuing the dance form for six years. Living in the UAE, I saw learning Kathak as a way to discover and connect to my cultural roots. The graceful yet swift movements and the jingling of the footbells in Kathak always leave me awestruck.

MAIN IDEA:

The project depicts an interactive book that provides insight into some of the fundamental movements of Kathak. Flipping through the pages, the user encounters interactive animations that add visual detail to the description provided. Below is the basic layout of each page that I had in mind as I began the project.

I wanted to depict the dance movements realistically and decided to adopt the concept of sprite sheets for this task. I began working on the project by collecting all relevant media including images for the spritesheets. It was challenging to create the sprite sheets as I had to ensure that the sizes of the images were all the same. Below are the sprite sheets used in the project.

CODING:

The project has been implemented using object-oriented programming. I have created a separate class for each page. This approach helped me organize the various functions involved. The main highlight of my project is the execution of spritesheets based on the example discussed in class.

Using sprite sheets, I was able to have a layer of interactivity on each page. The animations allow the user to view the demonstration of each dance movement at their own pace using the arrow keys. The functionality of the keys was created using the following code.

function keyPressed() {
  if (currentPage === 1) {
    if (keyCode === RIGHT_ARROW) {
      step1 = (step1 + 1) % sprites1.length; //Determines the frame number
      pages[currentPage].display(); // Redraws the page to update sprite animation
    } 
  }
  if (currentPage === 2) {
    if (keyCode === RIGHT_ARROW) {
      step2 = (step2 + 1) % sprites2.length;
      pages[currentPage].display(); 
    } 
    
  }
  if (currentPage === 3) {
    if (keyCode === LEFT_ARROW) {
      step3 = (step3 + 1) % sprites3.length;
      pages[currentPage].display();
    } 
  }
  if (currentPage === 3) {
    if (keyCode === RIGHT_ARROW) {
      step4 = (step4 + 1) % sprites4.length;
      pages[currentPage].display(); 
    } 
  }
}

PROJECT SKETCH:

Throughout the project, I paid attention to details such as the fonts and choice of images which helped make the project visually appealing. The background music is a classical composition involving the Tabla and Sitar, two instruments that form an integral part of any Kathak performance.

CHALLENGES:

The first major challenge that I faced was in trying to change the screen for each page. I overcame this challenge by creating separate classes for each page. Also, I had initially imagined an animation to depict the page flip, however due to my limited knowledge of the use of videos in p5, I was unable to implement it.

IMPROVEMENT:

An improvement that I would like to bring about in this project would be to include the corresponding sound of footbells for each  movement on the page about footwork. I tried implementing this idea but was not able to achieve the desired result.

Overall, I believe the project is simple yet unique and involves most of the concepts covered in class. It was a great learning experience which enabled me to tackle all concepts at once.

 

 

Concept:

In one of Daniel’s-“The Funny Guy” videos he created something like a buzzing bee effect and I really liked his reaction to it so I thought of making a game that uses the idea of a buzzing bee. For my midterm project, I created a game that mimics the behavior of a bee.

I decided to create a game with a bee theme to immerse the user into the game by making them swerve falling blocks.  This is a simple game with 8 different levels that increase in difficulty as you progress. this is to prevent the user from getting bored early.

Design:

Initially, I thought of drawing the background for each level and then uploading the picture onto p5 but then that did not look so good.

But then this was not nice so I decided to go with a different design. I decided to just use a simple design and add a cool background with the bee theme. something like a honey comb. The rest of the design was mainly thoughts of how to structure the whole game into classes and what each class would end up doing.

Challenging Parts of this project:

The most challenging part of this project was preloading the different files that I imported into the project. This took me h0urs to figure out and a piece of advice is to always preload all the imports in one class and not various classes.

function preload(){
  //in this preload function we will load all the uploads we need before we even start the game. The folder name is always mentioned before the file name to help the compiler to know the location of the file we want to add.
  B1=loadImage("Background/B1.jpg");//these sets are for the background
  B2=loadImage("Background/B2.jpg");
  B3=loadImage("Background/B3.jpg");
  B4=loadImage("Background/B4.jpg");
  B5=loadImage("Background/B5.jpg");
  B6=loadImage("Background/B6.jpg");
  B7=loadImage("Background/B7.jpg");
  B8=loadImage("Background/B8.jpg");
  IB=loadImage("Background/IB.jpg");
  GB=loadImage("Background/GB.jpg");
  F1=loadFont("Fonts/Font1.ttf");//these sets are for the fonts 
  F2=loadFont("Fonts/Font2.ttf");
  S1=loadSound("Sounds/unplay.mp3");//these sets are for the sounds 
  S2=loadSound("Sounds/select.mp3");
  S3=loadSound("Sounds/hover.mp3");
  S4=loadSound("Sounds/hit.mp3");
  S5=loadSound("Sounds/play.mp3");
  P1=loadImage("Players/bee.png");// this one is to load the player png
}

Another recent challenge was the implementation of the sounds. I learnt something new with this challenge that to pass a variable by reference we do not need to create a variable in class as in “this.variablename” we just have to pass the variable and use it in the class by reference. In that case, the main variable is affected by what ever we do. This helps prevent creating duplicates of the same sound.

S4.play();//play the hit sound
       S1.play();//play the sound played when not playing. In this case I use S4 and not this,S4 because i want to access an object by reference to have control of the object that was initially playing in the game regardless of the objects location. creating this.S4 will create a copy and we would either start the sound or end up playing over another preexisting sound 
       S5.pause();//pause the in game sound... yeah the annoying one

Another tricky aspect was the collision and the deletion of the blocks after they cross the end of the canvas. In my case, each level has its own threshold that needs to be attained before the level is incremented. Silly me, I wanted to incorporate this in another class which wasted a lot of my time all for nothing. I realized that in as much as you want your work to look clean and separated you should know that you can utilize a class as much as you want and that there is nothing wrong with having a large class. Also about the collision, The “png” was resized to be a square so in order to get the collision effect, I had to use the “dist” function in my case to aid me to draw the circle that would be used to detect the intersection

  collision(){//this method is the one that checks if the play has collided with the falling blocks. It does this by going through the array and checking if the arrays height and width in accordance to the x and y coordinate intersect with the players circular dimensions.
    for(let i=0;i<this.lvl;i++){
      if(
        mouseX+10>this.blockArray[i].x&&mouseX-10<this.blockArray[i].x+this.blockArray[i].w&&
        mouseY+10>this.blockArray[i].y+5&&mouseY-10<this.blockArray[i].y+this.blockArray[i].h-5){//if there is an intersection,



deleteBlock(){//this method deletes blocks...used to delete blocks when they cross the height of the canvas.
    for(let i=0;i<(this.lvl);i++){
      if(this.blockArray[i].getY()>height){//if the top of the object for each object in the array has passed the height of the canvas
        this.score++;//increment the score by one.
        //for every level there is a score boundary that one is suppose to reach to move to the next level the if else code block below sets every level's boundary and increments the number of blocks for each level while increasing the level.
        if(this.lvl==1&&(this.score%3)==0){//if the score is 3, and we are on level one, increase the level and add one block object to the array
          this.blockArray[this.lvl]=new Block(this.lvl);//add the block
          this.blockArray[this.lvl].setBlock();//setting the new block that has been added
          this.blockArray[this.lvl].drawBlock();//draw the block that was jusr added
          this.lvl++//increment the lvl
        }
        else if(this.lvl==2&&(this.score%13)==0){//similar to above and below but each statement has its own treshold
          this.blockArray[this.lvl]=new Block(this.lvl);
          this.blockArray[this.lvl].setBlock();
          this.blockArray[this.lvl].drawBlock();
          this.lvl++
        }
        else if(this.lvl==3&&(this.score%23)==0){
          this.blockArray[this.lvl]=new Block(this.lvl);
          this.blockArray[this.lvl].setBlock();
          this.blockArray[this.lvl].drawBlock();
          this.lvl++
        }
        else if(this.lvl==4&&(this.score%33)==0){
          this.blockArray[this.lvl]=new Block(this.lvl);
          this.blockArray[this.lvl].setBlock();
          this.blockArray[this.lvl].drawBlock();
          this.lvl++
        }
        else if(this.lvl==5&&(this.score%45)==0){
          this.blockArray[this.lvl]=new Block(this.lvl);
          this.blockArray[this.lvl].setBlock();
          this.blockArray[this.lvl].drawBlock();
          this.lvl++
        }
        else if(this.lvl==6&&(this.score%60)==0){
          this.blockArray[this.lvl]=new Block(this.lvl);
          this.blockArray[this.lvl].setBlock();
          this.blockArray[this.lvl].drawBlock();
          this.lvl++
        }
        else if(this.lvl==7&&(this.score%80)==0){
          this.blockArray[this.lvl]=new Block(this.lvl);
          this.blockArray[this.lvl].setBlock();
          this.blockArray[this.lvl].drawBlock();
          this.lvl++
        }
        else if(this.lvl==8&&(this.score%100)==0){
          this.blockArray[this.lvl]=new Block(this.lvl);
          this.blockArray[this.lvl].setBlock();
          this.blockArray[this.lvl].drawBlock();
          this.lvl++
          if(this.lvl==9){//since level 8 is the last level, if, the level goes to level 9, decrement the level back to level 8.
            this.lvl--;//decrement the level
        }
         }
        delete this.blockArray[i];//if the block has passed the height, delete the block object,
        this.blockArray[i]=new Block(this.lvl);//create a new object and replace it with the old one that was deleted
        this.blockArray[i].setBlock();//set block to give it a new x coordinate and y coordinate and size etc. we donot draw the block because we need to draw it just once 
       }
   }
  }

Another major challenge was figuring out how the background moves which also took a lot of time to understand but it was cool after implementing it. However I realized that at the page_end and the page_front, the distinction is visible so next time I will look for Images that have this incorporated.

image(this.BG,0,this.y1,width,height);//create image at this.y1
   image(this.BG,0,this.y2,width,height);//create image at this.y2
   this.y1 -= this.scrollspeed;//decrement the speedd for both
   this.y2 -= this.scrollspeed;

   if (this.y1 < -height){//if the top of this background is at -height reset it to height
     this.y1 = height;
   }
   if (this.y2 < -height){//repeat the above for this y2 too
     this.y2 = height;
   }
 }

Project Snapshots:

Thoughts for the Future:

I hope that in future I can fix or get Backgrounds that do not have visible transitions. And also I hope to be able to incorporate motion detecting to allow the user to control the player by just moving their head.

Final work:

 

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

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Link to edit

Images from Sketch

 

Concept

ArtfulMotion is an innovative fusion of interactive art creation and musical immersion, designed as a captivating digital canvas for users to unleash their creativity. Grounded in the p5.js framework, the program offers a dynamic platform where art and music coalesce seamlessly. A richly textured backdrop, comprising the fifth print from Casey Reas’s Tissue prints, sets the visual stage, creating an aesthetic foundation for users to craft their masterpieces. The harmonious integration of various audio tracks and intuitive music controls allows users to select a musical score that perfectly complements their artistic journey, cultivating a multi-sensory and immersive experience.

The project pushes the boundaries of interaction with the implementation of machine learning through ml5.js. Leveraging the handpose model, users can shape their art through real-time hand gestures, offering a tangible link between the digital canvas and the physical world. A diverse array of artistic modes empowers users to explore varied styles and tools, encouraging experimentation and artistic expression. The user-friendly interface facilitates smooth navigation through different sections, while responsive design ensures the project adapts flawlessly to different screen sizes and resolutions. This program aspires to inspire creativity, fostering an environment where art and music converge to create a captivating and enjoyable artistic experience.

 

Implementation

In developing this project, I adopted a systematic approach that involved several key steps. First, I conducted an initial assessment to distinguish between frames containing a hand and those without. Subsequently, I delved into verifying the accuracy of the model’s key points. To ensure that these points corresponded correctly to the hand’s landmarks, I employed green ellipses as visual indicators. During this process, I identified a mirroring issue, which arose from my attempt to mirror the webcam feed. To address this, I placed the drawing function for the points within the push() and pop() functions, effectively correcting the mirroring problem.

A pivotal element of my approach was the creation of a dedicated Point class, designed to render the model’s points onto the screen with precision. I seamlessly integrated this class into the existing sketch responsible for drawing the hand’s landmarks. I also fine-tuned the drawKeyPoint() function to generate points that were stored in an array, allowing for streamlined rendering on the canvas.

For the project’s second mode, I took a different artistic approach by implementing curveVertex() in the draw function of the Point class. This choice lent a unique aesthetic to this mode, differentiating it from the first. Furthermore, I embarked on the design of the program’s landing page and other sub-interfaces. These elements were connected through functions I defined in separate JavaScript files. The collective result of these steps was a visually engaging project, which not only translated logic into code but also integrated modularity, object-oriented programming, event-driven programming, and image handling.

[Sketch of planning phase]

Highlight of Code

 The draw() function plays a pivotal role in the code, as it manages the application’s state and navigation. It renders different pages, such as the menu, instructions, color selection, mode selection, and the art creation canvas, by utilizing a switch statement to determine the current state. It also incorporates a back button for easy navigation between pages, excluding the menu and art creation canvas. Additionally, the function is responsible for rendering music control buttons, allowing users to adjust the soundtrack as they create art. The code’s modularity and clear separation of rendering logic for distinct states contribute to improved code organization and maintenance.

function draw() {
  
  // determines which page to display
  switch (state) {
    case "menu":
      drawMenu();
      break;

    case "instructions":
      drawInstructions();
      break;
      
    case "select_colors":
      drawSelectColors();
      break;

    case "select_mode":
      drawSelectMode();
      break;
      
    case "create_art":
      drawArt();
      break;      
  }
  
  // adds back button if on any other page except menu and main sketch
  if (state != "menu" && state != "create_art") {
    drawBackButton();
  }
  
  // draws music control buttons
  drawMusicControls();
}

One of the primary technical challenges encountered in the project was related to resizing the video feed within the drawArt() function while preserving its original aspect ratio and ensuring it was correctly positioned. The challenge involved intricate mathematical calculations to determine the new dimensions and position for the scaled video feed. Additionally, it required addressing the mirroring of the feed to ensure that user interactions remained intuitive and natural. The process demanded rigorous testing and iterative adjustments to strike the right balance and achieve the desired outcome, ensuring that the video feed displayed in the intended location on the canvas while preserving its correct proportions.

function drawArt() {
  
  // scaling video to avoid distortion
  let aspectRatio = video_feed.height/video_feed.width;
  
  // mirroring feed from the webcam
  // -- beginning of transformation
  push();
  translate(width, 0);
  scale(-1, 1);
  if (drawing_flag) {
    loadKeyPoints();
    drawKeyPoints();
  }
  image(video_feed, width - ( width / videoScale ), 0,  
        width / videoScale , (width /videoScale) * aspectRatio);
  pop();
  // -- ending of transformation
  
  // print button
  updatePrintButton();
  
  // end button
  createEndButton();

}

 

Areas for Improvement

In future iterations of ArtfulMotion, key considerations include implementing real-time collaboration, providing an intuitive and secure environment for multiple users to collectively create art; incorporating interactive art elements, enabling users to seamlessly add animations, dynamic effects, or physics simulations, with a focus on user-friendliness and real-time previewing; and achieving music and art synchronization, allowing users to link music parameters to visual elements for a multimedia experience. Furthermore, the project could offer customizable brushes and visual effects, giving users the tools to add unique artistic touches to their creations through an accessible interface that balances customization and usability. These enhancements have the potential to expand the project’s creative horizons and provide users with a more versatile and engaging platform for artistic expression.