I frequent a tiny film theater back home. For a while, they were streaming old films from the French New Wave every day, and I would stop in after school to watch Breathless or Children of Paradise and whatnot. But my favorite out of them all was The 400 Blows. I still remember that little yellow text at the bottom of the screen. I guess a lot of people do. That’s why you’ll see film text on nearly every poetry post on Instagram these days. Celebrity photographer @sarahbahbah made a whole career off of it. See below a still from  The 400 Blows:

Karina died. And I don’t know what that means. I don’t know what to do about it. I don’t know what to do about any of it. Fucking Palestine. Allen Iverson never won a championship. Everyone sucks. Even as I write this, you’re not going to understand what I’m saying. And that sucks too. There’s this great Samuel Beckett quote: “You’re on Earth. There’s no cure for that.” And how true that is! The night after Karina died, we went to the ocean. I don’t want to talk about it too much because it’s not really something that can be talked about. But I tried to code what I had seen at the ocean that night. I’ll let what I made speak for itself:

In my last Midterm update, I posted about a morphing mandalas video I had seen on Youtube. It was mesmerizing. I tried to emulate that by coding the pulsating circles. At some points, the project looks like a big eye:

Sometimes, the abyss will creep up on you. That’s why the saying goes, “The abyss stares back,” because it really does. I hope my project conveyed that. I coded the pulsing circle, the changing text, and the sound in separate tabs before combining them together, just to make sure I understood the logic of everything that was going on before overwhelming myself. I’ve posted the links to each here:

https://editor.p5js.org/EloraTrotter/sketches/UtiZG2jDy
https://editor.p5js.org/EloraTrotter/sketches/yKrbaYS2A
https://editor.p5js.org/EloraTrotter/sketches/EMQC92jbz
https://editor.p5js.org/EloraTrotter/sketches/PLBd_2y6e

And while I am, uh, proud, of what I made. I also recognize that my code is very inefficient. For example:

var maxDiameter;
var secondmaxDiameter;
var thirdmaxDiameter;
var fourthmaxDiameter;
var fifthmaxDiameter;
var sixthmaxDiameter;
var seventhmaxDiameter;
var eightmaxDiameter;
var theta;

function setup() {
  createCanvas(900, 500);
  
// establish the parameters for the max diameter of each circle
  maxDiameter = 1000;
  secondmaxDiameter = 700;
  thirdmaxDiameter = 600;
  fourthmaxDiameter = 300;
  fifthmaxDiameter = 150;
  sixthmaxDiameter = 90;
  seventhmaxDiameter = 50;
  eighthmaxDiameter = 20;

And:

// calculate the diameter of the circle
//height/2 + sin(theta) * amplitude
  var diam = 100 + sin(theta) * maxDiameter;
  var seconddiam = 100 + sin(theta) * secondmaxDiameter;
  var thirddiam = 100 + sin(theta) * thirdmaxDiameter;
  var fourthdiam = 100 + sin(theta) * fourthmaxDiameter;
  var fifthdiam = 100 + sin(theta) * fifthmaxDiameter;
  var sixthdiam = 100 + sin(theta) * sixthmaxDiameter;
  var seventhdiam = 100 + sin(theta) * seventhmaxDiameter;
  var eighthdiam = 100 + sin(theta) * eighthmaxDiameter;

// draw the circles
  stroke(0);
  strokeWeight(0);
  fill(40);
  ellipse(width / 2, height / 2, diam, diam);
  fill(35);
  ellipse(width / 2, height / 2, seconddiam, seconddiam);
  fill(30);
  ellipse(width / 2, height / 2, thirddiam, thirddiam);
  fill(25);
  ellipse(width / 2, height / 2, fourthdiam, fourthdiam);
  fill(20);
  ellipse(width / 2, height / 2, fifthdiam, fifthdiam);
  fill(15);
  ellipse(width / 2, height / 2, sixthdiam, sixthdiam);
  fill(10);
  ellipse(width / 2, height / 2, seventhdiam, seventhdiam);
  fill(2);
  ellipse(width / 2, height / 2, eighthdiam, eighthdiam);

See how I list everything out one by one when I could sort it into different classes, etc. To be honest, even though I bare-bones know what I should do to make the code cleaner, I have no idea how. And the idea of not having every single line of code cut clear in front me line by line, one by one, was quite overwhelming.

I guess I’m proud that I was able to do any of this. This life is a weird one. There’s this great Emil Cioran quote that goes: “If your hardships do not make you grow, and do not put you in a state of energetic euphoria, but rather depress and embitter you, know that you have no spiritual vocation.” Kawhi Leonard still played basketball the night his dad died. I was watching a playoff game last summer, and the commentator said about Kevin Durant or someone else, “He never gets tired!” And isn’t that exactly what we demand from each other? If you, for a moment, expose your exhaustion, we know: You have no spiritual vocation. That’s our judgment anyways. And why humans are so compelled towards judgement rather than understanding, I don’t understand that either. Every man must decide for himself whether he has a spiritual vocation. Lord, that’s something I’m figuring out these days.

MIDTERM

Metaportal : The brain spa

Concept

The Metaportal stands out as more than just your average project – it’s a creative endeavor that goes far beyond merely combining different artworks. This undertaking pays meticulous attention to every single component, ensuring that no detail is left to chance. From the welcoming and user-friendly interface to the delightful surprises cleverly hidden within each project, it’s clear that this is a labor of love.

Imagine it as a portal, leading you into a fresh realm of art, focus, and entertainment. As you explore, you’ll find yourself captivated by the fusion of creativity and functionality, where every aspect has been carefully tailored to enhance your experience. So, it’s not just a project; it’s a journey into an entirely new dimension of artistic expression, concentration, and sheer enjoyment.

The project’s concept revolved around the creation of an immersive gateway to showcase various distinct visual designs. It all began with the development of numerous visual art pieces employing tools like sine, cosine, angles, orbitControl, rotateX, and rotateY. After a prolific phase of crafting diverse visual designs, the objective shifted towards elevating the presentation. The aim was to construct a unified platform where each artwork could be elegantly exhibited, much like individual pieces of art.

the work of art

After extensive brainstorming and numerous iterations, I devised a captivating and aesthetic solution: a dynamically rotating “space” themed background, which I chose as the project’s main page. With the background in place, my next challenge was to create the entry points or “buttons” for users to explore and view the different art pieces. Given the uniqueness of each artwork, a conventional side-by-side display was not suitable. Instead, I opted to craft distinct 3D spherical structures using the same elements as the background. This choice lent a cohesive and consistent appearance to the main page. Notably, there were no previews of the artwork; instead, I incorporated question marks within these spheres, which, upon clicking, would transition users to the respective art pieces, enticing users to delve further into the virtual space.

After successfully creating the main page and investing countless hours in debugging, the next step was to introduce audio to the project. I decided to use a no-copyright interstellar-themed instrumental track to complement the visuals. The real challenge arose when I aimed to link the spheres with question marks to other art pieces, each presenting its own unique set of visuals. It was a daunting task, and I spent hours searching for a suitable function within p5.js that would allow me to create hyperlinks for transitioning between these projects. While I did find the “CreateA” function, which was helpful for establishing links from the main page to the intended sketch, I encountered a significant roadblock: p5.js did not support the ability to navigate back to the main page seamlessly. This limitation posed a considerable obstacle, particularly because I had opted not to use separate pages due to the project’s rendering-intensive nature. Combining all the visual projects in a single file was not a viable solution, as it would overwhelm p5.js and result in crashes. After enduring hours of stress and frustration, I finally discovered that the only viable approach was to circumvent the p5.js terminal entirely. In a determined effort to overcome this challenge, I downloaded all the p5.js project files I had and imported them into Visual Studio Code. While I continued to work with the p5.js language, I was no longer reliant on their terminal. In this new environment, I successfully managed to establish the desired interconnections between all the projects.

Afterwards, I focused on incorporating audio into the visual art pieces, which added an even more artistic dimension to the project. Given the uniqueness of each artwork, it necessitated selecting audio that harmonized with the colors, tempo, and patterns of each piece. As someone who enjoys instrumental music, particularly the saxophone, I began exploring a variety of non-copyrighted pieces for use in the project. Once I had gathered a selection, I aimed not only to create a visually appealing and aesthetically pleasing experience for users but also to infuse a bit of my personality into it, making it truly my own. To achieve this, I handpicked a few songs that I personally love, such as “Sway” by Michael Bublé and some tracks by Amr Diab, like “Tamally Maak,” in their instrumental versions. I opted for this approach to ensure that users could be fully immersed in the experience, regardless of their familiarity with the songs being played. For those who recognized the selected pieces, it would also serve as a delightful easter egg! Since I found the visual art to be highly enjoyable and calming, I also incorporated some lofi music into a few of my projects for the user to relax and have it as a background music.

The Main page – (p5 Incomplete)

click this link to open the p5 project on github

https://zuett.github.io/Intro-midterm/

Reflection

I’m thrilled about the prospect of advancing this project, as I envision it evolving into a captivating immersive visual experience. The idea is to create an application that users can seamlessly run in the background on a secondary screen, enabling them to enhance their focus on work and find moments to unwind in the midst of their daily tasks.

Imagine users being able to effortlessly integrate this immersive experience into their work environment. As they navigate their tasks and responsibilities on their primary screen, this secondary visual journey would serve as a calming and engaging companion. It will not only elevate their concentration but also provide an escape into a world of soothing illusions, offering a mental retreat right at their fingertips. This concept is a fusion of work and relaxation, a unique blend of productivity and serenity. Users can toggle their attention between their primary work and this immersive backdrop as needed, seamlessly transitioning from deep concentration to brief mental respites. It’s all about creating a harmonious balance, where work and relaxation coexist in perfect synergy. As I continue working on this project, the goal is to develop an extensive array of visually captivating scenes and experiences, each carefully designed to induce a sense of calm, creativity, and inspiration. These scenes will be more than just eye candy; they will be crafted to promote mental well-being, helping users recharge and refocus whenever they need it. In essence, this immersive background experience is not just a tool but a companion, a portal to a world of tranquility and aesthetic delight, ready to aid users on their journey towards enhanced productivity and a balanced, focused mind.

The name of my project originated from a saying back home used to describe the sounds of the steelpan being played, or the steel pan being tuned.

My project aimed to introduce users to the steelpan, the national instrument of Trinidad and Tobago, and provide them with an immersive experience of this unique musical creation. The steelpan’s distinct melodic, tonal, and rhythmic qualities have garnered global fascination and serve as a prominent cultural symbol of Trinidad and Tobago. Originally crafted from items like frying pans, dustbin lids, and oil drums in the 1930s, the steelpan has evolved into finely tuned sheet metal instruments.

Listening to the steelpan evokes a childlike sense of wonder, in me, and I think every other Trinbagonian. While it may sound like a cliché description of the emotional connection to music, it holds a profound truth, especially for Trinbagonians. The steelpan’s significance extends beyond its musical charm, intertwining with the cultural heritage and historical resistance against slavery in Trinidad and Tobago.

The vibrant chaos witnessed at events like Panorama captures the essence of steelpan music. It’s a beautiful chaos where everyone, regardless of age, is in motion. Steelpan is an integral part of the Trinbagonian identity, and I sought to convey this dynamic energy through the moving background, creating an immersive feeling that aligns with the live performances involving this extraordinary instrument.

The sketch revolves around a steelpan instrument and is divided into an introduction screen, instructions screen and a game screen. The introduction screen offers options to start, end, or view instructions. Transitions between these states are controlled through flags (isIntroduction, isInstructions, isPlaying). In the game screen, there’s a scrolling background, and users can click on different segments of the steelpan to produce sounds. The instrument comprises three rows, and each row, represents the pitch, with the outer row, being the lowest, and the inner row, being the highest as these notes are smaller. The code checks the mouse’s proximity to trigger sound playback, and this is essentially how the user utilizes the sketch.

The part I’m most proud of is the Steelpan class in the p5.js sketch. It plays a vital role in managing and rendering the steelpan instrument, handling data about rows, labels, angles, and radii. The draw method takes care of the visual representation, managing row iteration, position calculation, and segment colour changes upon mouse hover. This class adheres to object-oriented principles, ensuring well-structured and maintainable code for the steelpan instrument.

class SteelPan {
  constructor(outerCount, middleCount, coreCount, outerRadius, middleRadius, coreRadius) {
    this.outerCount = outerCount;
    this.middleCount = middleCount;
    this.coreCount = coreCount;
    this.totalNotes = outerCount + middleCount + coreCount;
    this.outerLabels = ["A", "D", "G", "C", "F", "B♭", "E♭", "G#", "C#", "F#", "B", "E"];
    this.middleLabels = ["Am", "Dm", "Gm", "Cm", "Fm", "B♭m", "E♭m", "G#m", "C#m", "F#m", "Bm", "Em"];
    this.coreLabels = ["e", "d", "c", "e♭", "c#"];
    this.angleIncrementOuter = TWO_PI / outerCount;
    this.angleIncrementMiddle = TWO_PI / middleCount;
    this.angleIncrementCore = TWO_PI / coreCount;
    this.outerRadius = outerRadius;
    this.middleRadius = middleRadius;
    this.coreRadius = coreRadius;
  }

  draw() {
    fill(100, 100, 100);
    stroke(10);
    ellipse(width / 2, height / 2, 400, 400);

    // Draw the outer row
    for (let i = 0; i < this.outerCount; i++) {
      let angleOuter = i * this.angleIncrementOuter;
      let x = width / 2 + cos(angleOuter) * this.outerRadius;
      let y = height / 2 + sin(angleOuter) * this.outerRadius;
      let circleSize = 50;

      if (dist(mouseX, mouseY, x, y) < circleSize / 2) {
        fill('grey'); // Change to a darker color when hovering
      } else {
        fill('white'); // Default color
      }

      ellipse(x, y, circleSize, 70);
      fill(255);
      textSize(14);
      textAlign(CENTER, CENTER);
      text(this.outerLabels[i], x, y);
    }

    // Draw the middle row
    for (let i = 0; i < this.middleCount; i++) {
      let angleMiddle = i * this.angleIncrementMiddle;
      let x = width / 2 + cos(angleMiddle) * this.middleRadius;
      let y = height / 2 + sin(angleMiddle) * this.middleRadius;
      let circleSize = 50;

      if (dist(mouseX, mouseY, x, y) < circleSize / 2) {
        fill('darkgrey'); // Change to a darker color when hovering
      } else {
        fill('black'); // Default color
      }

      ellipse(x, y, circleSize, 40);
      fill(255);
      textSize(14);
      textAlign(CENTER, CENTER);
      text(this.middleLabels[i], x, y);
    }

    // Draw the core row
    for (let i = 0; i < this.coreCount; i++) {
      let angleCore = i * this.angleIncrementCore;
      let x = width / 2 + cos(angleCore) * this.coreRadius;
      let y = height / 2 + sin(angleCore) * this.coreRadius;
      let circleSize = 30;

      if (dist(mouseX, mouseY, x, y) < circleSize / 2) {
        fill('darkred'); // Change to a darker color when hovering
      } else {
        fill(255, 0, 0); // Default color
      }

      ellipse(x, y, circleSize, circleSize);
      fill(255);
      textSize(14);
      textAlign(CENTER, CENTER);
      text(this.coreLabels[i], x, y);
    }
  }
}

Moreover, I take pride in successfully managing the specific sounds assigned to each note in the steelpan. Proper labelling and space allocation were crucial, and the effort put into uploading each note and linking it to the sketch brought the project to life, achieving the desired outcome. This, however, was by far the most tedious process, and the most challenging, because my initial plan to source the notes via an online website failed. So instead, I had a family member play each individual note on the steelpan, record it and send it to me.

To enhance this project, I have several goals in mind. Firstly, I aim to refine the note playing functionality to allow for overlapping sounds, ensuring a seamless musical experience. This will enable me to capture the authentic rhythm and intricacies of the steelpan, encompassing elements like melody, rhythm, and harmony. Additionally, I want to introduce a multiplayer aspect by using the steelpan class to create multiple pans. This would provide users with a glimpse into the dynamics of a real Steelpan band.

Despite the challenges, I take pride in the outcome of this project. It served as a combination of the knowledge I’ve acquired over the past seven week, plus some. It highlights my integration of various concepts and techniques and reflects my dedication to my home, Trinidad, and Tobago. Below is the embedded sketch.

https://editor.p5js.org/dianadonatella/sketches/0Rv4DeXZ_

Concept:

My project was inspired by a series of paintings that I created over the last couple of weeks. I am not sure why exactly, but this style of painting really speaks to me.  It allows me to freely paint using as many colors as my heart desires. It was once stated to me that my pieces reminded people of energies, specifically auras. This idea became the foundation of my midterm project. My initial goal was to create a sketch that allowed for user input to type in an initial of their name and generate a unique interpretation of their aura both visually and sonically. Unfortunately due to the amount of errors and complications I faced during this process the idea has slightly shifted.  Now the user can actually build their own depiction of their aura by typing in single letters to generate a concoction of colors and sounds. Though this wasn’t the initial idea, I actually think this process is much more interactive for the user, giving the user more control of how they want their “aura” to look or sound.

The program starts with the following opening image:

I made this image in Canva with their free gradient backgrounds and added the butterfly and text as well!

The user then has access to the user input when they click generate, which generates the base color of their sketch. In the box directly next to it, the user can input ONE capitalized letter at a time, creating a wall of color and sound to build what their aura looks and sounds like.

What I have implemented into my code from class!

Within my code I have made use of CSV files and images:

function preload() {
  bg = loadImage('gradient.png')
  initials = loadTable("initials.csv", "csv", "header");

I used sound (specifically .wav files):

 
//continuation of the preload section
songA = loadSound("A.wav");
  songB = loadSound("B.wav");
  songC = loadSound("C.wav");
  songD = loadSound("D.wav");
  songE = loadSound("E.wav");
  songF = loadSound("F.wav");
  songG = loadSound("G.wav");
  songH = loadSound("H.wav");
  songI = loadSound("I.wav");
  songJ = loadSound("J.wav");
  songK = loadSound("K.wav");
  songL = loadSound("L.wav");
  songM = loadSound("M.wav");
  songN = loadSound("N.wav");
  songO = loadSound("O.wav");
  songP = loadSound("P.wav");
  songQ = loadSound("Q.wav");
  songR = loadSound("R.wav");
  songS = loadSound("S.wav");
  songT = loadSound("T.wav");
  songU = loadSound("U.wav");
  songV = loadSound("V.wav");
  songW = loadSound("W.wav");
  songX = loadSound("X.wav");
  songY = loadSound("Y.wav");
  songZ = loadSound("Z.wav");

I used functions:

//function for main page (SIMPLE EXAMPLE
function main_page() {
  // sets up variables to get the alphabet and color columns
  alphabet = initials.getColumn("alphabet");
  color1 = initials.getColumn("color1");
  color2 = initials.getColumn("color2");
  color3 = initials.getColumn("color3");

I used conditional statements:

if (initial === "A") {
   songA.playMode("untilDone");
   songA.play();

 }
 if (initial === "B") {
   songB.playMode("untilDone");
   songB.play();
   
 }

 if (initial === "C") {
   songC.playMode("untilDone");
   songC.play();
 }

 if (initial === "D") {
   songD.playMode("untilDone");
   songD.play();
 }

 if (initial === "E") {
   songE.playMode("untilDone");
   songE.play();
 }

 if (initial === "F") {
   songF.playMode("untilDone");
   songF.play();
 }

 if (initial === "G") {
   songG.playMode("untilDone");
   songG.play();
 }

 if (initial === "H") {
   songH.playMode("untilDone");
   songH.play();
 }

 if (initial === "I") {
   songI.playMode("untilDone");
   songI.play();
 }

 if (initial === "J") {
   songJ.playMode("untilDone");
   songJ.play();
 }

 if (initial === "K") {
   songK.playMode("untilDone");
   songK.play();
 }

I used User input/buttons/text:

//function for homescreen 
function homescreen() {
  fill("white");
  square(0, 0, width);
  background(bg);

  fill(0);
 
  text("Click generate & type in a letter!", width/7.5, 20);
  textAlign(CENTER);
  textSize(14);
  
  input = createInput();
  input.position(20, 30);
  button = createButton("generate");

I used arrays:

// an arrray to store the Particles
let particles = []; // variable for the particles
const num = 3500; // how many particles will be displayed

An extra step! (USING LOGIC PRO X and PLUGINS)

This is the DAW that I used to create the Sounds/Chords for my project. They are all synthesizers!

Parts you are proud of or challenges you have overcome:

I am really happy that I was able to achieve a similar interpretation of my painted pieces. I feel that not including a background and letting the perlin noise loop really brought the stroke affect and colors out of my paintings.

for (let i = 0; i < num; i++) {
    let p = particles[i];
    square(p.x, p.y, 2);

    color1 = color(colors_for_sample[0]);
    color2 = color(colors_for_sample[1]);

    fill(lerpColor(color1, color2, noise(p.x * noiseScale, p.y * noiseScale))); // lerpColor() function is used to interpolate two colors to find a third color between them.
    noStroke();

    let n = noise(p.x * noiseScale, p.y * noiseScale); //Multiplies the x-coordinate of the point p by a value noiseScale.... Multiplies the y-coordinate of the point p by the same value noiseScale. X and y coordinates are mutiplied by the noise scale before passed onto the noise. Basically generates random-like values based on the input coordinates and maps out the coordinates before the noise is generated
    let a = TAU * n; //TAU = 2PI & n = value calculated in previous line
    p.x += cos(a); // incrementing the x and y coordinates of a point based on the cosine and sine of angle (a)
    p.y += sin(a);
  }

I really wish that my code didn’t have to be so redundant when including the sound files. Having lines like these:

if (initial === "A") {
    songA.playMode("untilDone");
    songA.play();

  }
  if (initial === "B") {
    songB.playMode("untilDone");
    songB.play();
    
  }

  if (initial === "C") {
    songC.playMode("untilDone");
    songC.play();
  }

  if (initial === "D") {
    songD.playMode("untilDone");
    songD.play();
  }

  if (initial === "E") {
    songE.playMode("untilDone");
    songE.play();
  }

  if (initial === "F") {
    songF.playMode("untilDone");
    songF.play();
  }

really stunted my mobility within the code, made figuring out errors 1,000,o00 times harder, was very overwhelming to look at, and took so much extra time to write out, (even if copy and pasted).

In the future, I would really like to work on expanding on this project and creating a better set up around the user input, since it’s a bit plain and doesn’t really contain a means of restarting the sketch. My sketch overall is really lacking user input which is such a key aspect of any interactive piece, so for that I am a bit disappointed with my project.

                                                                  PuzzlePlay

This project idea sprang from something personal and relatable – my sister’s love for solving puzzles. It always fascinates me yet triggers me how she has the patience and dedication to tackle intricate puzzles. It got me thinking, why not bring that captivating experience into the digital realm? I want to create a digital puzzle game that captures the essence of those satisfying moments when you piece together the final part of a puzzle.

The concept of the game is to offer players an engaging and mentally stimulating experience. We’ve all experienced the satisfaction of solving a puzzle, and it’s this joy that served as our inspiration. The game is designed to provide players with a series of puzzles that vary in complexity. It’s a journey through creativity and problem-solving.

Coding, Logic, and Planning:
My journey in developing this puzzle game involved a bit of trial and error. It commenced with two drafts, each aimed at refining and enhancing the user experience. Initially, I allowed users to adjust the number of columns and rows within the puzzle, providing them with a sense of control over the challenge level. It was a good start, but I soon realized I could infuse more excitement into the gameplay.

That’s when the concept of progressive difficulty levels took shape. Instead of sticking with static user-defined settings, I decided to make the game more engaging. By adjusting the number of puzzle pieces, I introduced a system where each level offered a fresh challenge, making the game more exhilarating as players advanced. This change not only improved the game’s overall flow but also elevated the overall gaming experience.

In the initial stages, the game featured a flower image, a mere placeholder. However, as the project evolved, I decided to swap it out for images that resonate with me on a personal level. Drawing from my passions for photography, art, and horseriding.

As I developed this puzzle game, I planned the logic to offer players a compelling and progressively challenging experience. The heart of this game lies in its puzzles and how users engage with them as they progress through different levels. Each level presents a unique grid size and time frame, with Level 1 granting players 5 minutes, Level 2 extending the challenge to 10  minutes, and Level 3 pushing their limits with 15 minutes to solve the puzzle. This escalating difficulty curve keeps players engaged and motivated to sharpen their puzzle-solving skills.

To accommodate these time limits and provide feedback to the player, I incorporated an intelligent system of game states. When players successfully solve a puzzle within the given time, they are rewarded with a “Congratulations” page. However, if they run out of time or fail to complete the puzzle, a “You Lost” page is displayed. I further enhanced the player experience by allowing them to restart the game by pressing “R” or returning to the home screen by hitting the space bar. These features allow players to navigate the game according to their preferences, ensuring an enjoyable and engaging gaming experience.

I’ve created all my backgrounds through Canva and then uploaded them into my code here are some examples:

Challenges:

Image Manipulation and Sizing was the most challenging part for me when I was working on the code. I struggled with it because resizing images while maintaining their aspect ratios and making sure they fit the game’s grid properly required a good deal of trial and error. It was a bit tricky to get the images to display correctly without distortion or going beyond the bounds of the grid. However, through experimentation and some research, I was able to overcome this challenge and get the images to work as intended in my game.

// Preload all the images and sounds
function preload() {
  bg_main_Page = loadImage("/images/Main_Page1.png");
  bg_instructions_Page = loadImage("/images/Instructions_Page1.png");
  bg_Congrats_Page = loadImage("/images/Congrats_Page1.png");
  bg_Lost_Page = loadImage("/images/Lost_Page1.png");

  levels.level1.image = loadImage("/images/paint.jpg", () => {
    levels.level1.image.resize(400, 400);
  });

  levels.level2.image = loadImage("/images/horse.jpeg", () => {
    levels.level2.image.resize(450, 450);
  });

  levels.level3.image = loadImage("/images/carpet.jpg", () => {
    levels.level3.image.resize(400, 400);
  });
}

In this part of the code, I loaded different images using the loadImage function and then used the .resize() method on these images to adjust their dimensions. Image resizing is done to fit these images into specific dimensions before using them in the game.

In terms of areas for improvement and future work, I’d like to focus more on enhancing the visual aspect of the game. Currently, the game uses a black background for the puzzle grid, which is rather plain. To make the game more visually appealing, I would consider creating unique and visually engaging backgrounds for each level. For instance, I could design backgrounds that complement the theme of the puzzle, creating a more immersive experience for the players. Additionally, I’d extend this effort to the main screen as well, making it more captivating and visually appealing to draw players into the game right from the start. Improving the visual elements would not only enhance the game’s aesthetics but also contribute to a more enjoyable and engaging gaming experience.

References:

https://observablehq.com/@kjhollen/loading-data-and-images-in-p5-js-with-observable

Concept: 

Whenever I step into an art gallery, I am captivated by the stories each artwork tells, the vibrant strokes on the canvas, and the interplay of light and shadow. Inspired by these immersive experiences, I wanted to recreate a similar atmosphere, merging the tranquility of a gallery with the excitement of interaction. My vision for the p5.js Art Gallery centered around creating a dynamic and immersive digital space that embodies the essence of generative art. Influenced by the interplay of light and space, I aimed to design an environment that encourages exploration and creative expression. Extensive research into contemporary digital art installations and interactive galleries inspired the overall concept, guiding me in the creation of an engaging and visually captivating experience for visitors.

The central idea behind my project is to encourage users to explore the art at their own pace and immerse themselves in the diverse creations on display. To achieve this, I plan to incorporate interactive elements such as virtual paintings that users can admire, virtual sculptures they can examine from all angles, and informational pop-ups that offer insights into each artwork. By subtly integrating these interactive features, I aim to evoke curiosity and invite users to engage with the art, thereby fostering a unique and personalized gallery experience for each visitor.

Wireframes I drew for my project:

In planning the sketch, my approach involved meticulous consideration of user experience and interaction design.. By integrating logical operations, including conditional statements, loops, and rendering functions, I aimed to ensure a seamless and engaging user journey within the gallery. Hand sketches and diagrams were instrumental in mapping out the flow of user interactions and visualizing the logical structure of the coding process, facilitating a more systematic development approach.

The pictures of the art gallery are all drawn by me using online tools. I carefully made the inside and outside parts, paying close attention to the lights, light switch, floor, and the way out. Using my creativity and computer skills, I worked hard to create a detailed and accurate representation of the gallery.

Parts I’m Proud of and Challenges Overcome:

• Figuring out when the mouse touches the artwork:

I’m proud of this code because it lets the artwork respond when I click the mouse near it. This part specifically deals with showing the spiral artwork on the screen and checking if I’m clicking near it.

// Function to render the spiral
function renderSpiral(x, y, r) {
  push(); // Save the current drawing style settings and transformations
  translate(x + sposX, y); // Move the origin to the specified position
  image(frameIMG[1], -r / 1.8, -r / 1.8, r * 1.1, r * 1.1); // Display the image with the specified dimensions
  pop(); // Restore the previous drawing style settings and transformations

  // If mouse pressed
  if (mouseX < x + sposX + r/2 && // Check if the mouse's X position is within the specified range
      mouseX > x + sposX - r/2 && // Check if the mouse's X position is within the specified range
      mouseY < y + r/2 && // Check if the mouse's Y position is within the specified range
      mouseY > y - r/2 && // Check if the mouse's Y position is within the specified range
      mouse) { // Check if the mouse is pressed
      rect(0, 0, width, height); // Draw a rectangle covering the entire canvas
      for (var i = 0; i < spiral.length; i++) {
        push(); // Save the current drawing style settings and transformations
          spiral[i].render(width / 2.5, height / 3, r / 5); // Call the render function for the spiral object
        pop(); // Restore the previous drawing style settings and transformations
      }

This code checks if I’m clicking near the artwork by looking at where I click and comparing it with the artwork’s position and size. If I click close to the artwork, it shows more spirals on the screen, giving a cool effect that changes when I interact. Making this work well was a bit tough. I had to make sure the program could understand where I’m clicking and when it’s close to the artwork. Getting the right balance between showing the spirals and detecting my clicks accurately was important to make sure the interaction feels smooth and fun.

• Switching the user perspective from scene-to-scene.

I’m proud of this code because it helps smoothly switch what I see in the program, going from one scene to another without any sudden jumps. This part, called ‘Screen,’ takes care of showing different pictures and managing the sounds in the background.

// Check if the screen is outside or inside
if (screen == 0) {
  push(); // Save the current drawing style settings and transformations
  // Display image outside screen
  image(sIMG[0], 0, 0, width, height);
  pop(); // Restore the previous drawing style settings and transformations

  // Display principal text
  push();
  translate(width / 2, height / 1.1);
  image(sIMG[2], -100, -15, 200, 30); // Display the image with specified dimensions and position
  pop();

  // Render Art Gallery
  agRender(); // Call function to render the art gallery
} else {
  push(); // Save the current drawing style settings and transformations
  // Display image inside the screen with dynamic x-position
  image(sIMG[1], sposX, 0, width * 2.5, height);
  pop(); // Restore the previous drawing style settings and transformations
}

The above codeIt makes sure that the sound keeps playing smoothly in the background while I move between scenes, making the whole experience more immersive and enjoyable.When I’m outside in the program (screen = 0), it shows the right picture and puts the main text in the correct place, making it look nice and organized. Making this work well was a bit tricky. I had to make sure that the images changed in a way that didn’t feel sudden or strange, and that the background sound kept playing without any interruptions. Finding the right balance between the pictures and the sound was important to make the whole experience feel smooth and natural.

• I made sure to focus on small details. For instance, when you hover over the door, it creates a knocking sound, but it won’t keep making that sound repeatedly as long as you hover over it. The knocking will only happen again if you move your cursor out of the door and then back onto it. Also, I made sure that the initial music only plays the first time the door is opened, and it doesn’t play every time after that. This way, the music doesn’t overlap with itself. Also I added a sound effects for the light switch, moving to the right and left etc.

Areas for Improvement and Future Work:

Moving forward, there are several areas in my project that I recognize could be refined to enhance the overall user experience and elevate the sophistication of the artworks. One key aspect for improvement lies in enriching the interactive elements within the gallery. For instance, I plan to incorporate more diverse and dynamic interactions with the displayed artworks, enabling users to manipulate shapes, colors, and other visual elements to create a more engaging and immersive experience. By introducing additional interactive features like the ability for users to leave virtual notes or comments on specific art pieces.

Looking ahead, my future work on the project will revolve around integrating advanced generative art techniques to create more intricate and visually captivating artworks. I am particularly interested in exploring the application of complex algorithms and procedural generation methods to produce intricate patterns, textures, and visual effects, thereby adding depth and sophistication to the displayed artworks. I am also keen on delving into the use of machine learning algorithms to develop art that dynamically adapts and evolves in response to user interactions or external stimuli, thereby creating a highly immersive and personalized art experience.

Final Project:

References:

• https://editor.p5js.org/mk7592/sketches/Q3_SYFuO6

Concept and Artistic Vision

I’ve always been captivated by the world of arcade games, especially those that revolve around cars and racing. My love for these games and my fascination with car races reached a peak this year when I watched the exhilarating “Gran Turismo” movie. When it came time to choose a topic for my midterm project, my passion for cars led me to one clear path: creating a car-related game.

Drawing from my experience in an “Introduction to Computer Science” course during my freshman year, where I had to create a game using Python’s Processing library, I decided to explore the world of programming languages more deeply. However, I quickly realized that working with JavaScript, especially in the context of p5.js, was a different ballgame altogether. My quest for inspiration led me to various online car racing codes, but none of them truly excited me. This realization prompted me to embark on a journey to create something truly unique and personal, drawing on my own ideas and designs. Below is an image of my old car game project using Python:

Coding Translation, Logic, and Planning

As I delved into writing the code for my car game, I drew on the knowledge I gained in my class. I leveraged concepts such as shapes, loops, functions, arrays, generative text, loading images, and audio, and even delved into computer vision using the webcam. The experience was a blend of creativity and coding, and I began by sketching my final draft to visualize each aspect of the game. Here’s a glimpse of my sketch:

To truly make my game unique, I decided to create my own designs for every element. I used a familiar tool, “Scratch,” which I had used during my high school years, to sketch my own cars, roads, titles, and more. Here are some of my sketches and how they look in the game:

With all the designs in place, I embedded them into the code and used arrays to store them efficiently. One feature I’m incredibly proud of is the ability to take a picture of the player and place it in the top left corner of the game. This concept was inspired by my experience with arcade games that would capture a photo of the player’s face and display it in the game, making it clear who was in control. This added an engaging and visually fascinating element to the game.

Gameplay and Features

The game starts with a set of basic instructions on how to play. Players use the arrow keys to control their car. The objective is to avoid collisions, as any contact with another object or car leads to a game over. Additionally, players must manage their fuel levels, as running out of fuel also results in a game over.

There are three exciting levels to the game, each offering a unique experience:

1. Easy Mode: This is the regular mode where the game is a continuous loop, and it doesn’t end until the player loses.
2. Hard Mode: In this mode, I’ve introduced a unique twist. The car moves backward, and the gameplay occurs in the dark, adding an extra layer of challenge and excitement.
3. Race Mode: This is a newly added feature where players have a target to reach. It’s not an infinite or continuous loop; instead, the goal is to reach a score of 100 to win the game. It’s an engaging mode that introduces a winning target to the gameplay.

Here is my Final Project Embedded Sketch

Edit Link

Parts to be Proud Of and Overcoming Challenges

One element of my code that I’m particularly proud of is the intricate logic for bot generation, movement, and collision detection. The player’s car movement and its interactions with the street and gasoline collection also added a layer of excitement to the project. Here’s a snippet of the code that demonstrates this achievement:

//Cars
function bots() {
  // Set the initial position of the bot randomly within the canvas.
  this.pos = createVector(random(0, width), random(-size * 10, -size * 100));
  // Set the size of the bot (width and height).
  this.r = createVector(size * 5, size * 8.5);
  // Set the initial sprite for animation.
  this.sprite = 0;
  // Set a timer for sprite animation.
  this.time = 0;
  // Set a random color for the car.
  this.c = createVector(
    floor(random(0, 2) * 175),
    floor(random(0, 2) * 175),
    floor(random(0, 2) * 175)
  );

...

    // Check for collision with the player.
    if (
      p.pos.x - p.r.x / 2 < this.pos.x + this.r.x / 2 &&
      p.pos.x + p.r.x / 2 > this.pos.x - this.r.x / 2 &&
      p.pos.y - p.r.y / 2 < this.pos.y + this.r.y / 2 &&
      p.pos.y + p.r.y / 2 > this.pos.y - this.r.y / 2
    ) {
      // Play a sound when a collision occurs and set the screen to 2.

      songs[1].play();
      screen = 2;
    }
  };
}

...

// Gasoline object constructor function.
function Gas() {
  // Set the initial position of the gasoline randomly within the canvas.
  this.pos = createVector(random(0, width), random(-100, -2000));
  // Set the size of the gasoline (width and height).
  this.r = createVector(30, 40);

  // Render function for drawing the gasoline on the canvas.
  this.render = function () {
    push();
    translate(this.pos.x, this.pos.y);
    image(botsIMG[2], -this.r.x / 2, -this.r.y / 2, this.r.x, this.r.y);
    pop();
  };

  // Update function for updating the gasoline's position and behavior.
  this.update = function () {
    //Mode = 1
    if (mode == 1) {
      //Move
      this.pos.y -= vel / 100;
      if (this.pos.y + this.r.y / 2 < 0) {
        this.pos = createVector(
          random(0, width),
          random(width + 100, width + 2000)
        );
      }
    } else {
      //Mode = 0
      //Move
      this.pos.y += vel / 100;
    // Reset the gasoline's position if it goes off the screen vertically.
      if (this.pos.y - this.r.y / 2 > width) {
        this.pos = createVector(random(0, width), random(-100, -2000));
      }
    }

    // Check for collision with the player.
    if (
      p.pos.x - p.r.x / 2 < this.pos.x + this.r.x / 2 &&
      p.pos.x + p.r.x / 2 > this.pos.x - this.r.x / 2 &&
      p.pos.y - p.r.y / 2 < this.pos.y + this.r.y / 2 &&
      p.pos.y + p.r.y / 2 > this.pos.y - this.r.y / 2
    ) {
            // Play a sound, increase the gas, and reset the gasoline's position.

      songs[0].play();
      gas += 100;
      this.pos = createVector(random(0, width), random(-100, -2000));
    }

// Declare global variables to hold video capture and image data
let video;
var img;

//Picture setup
function pictureSetup() {
  video = createCapture(VIDEO); // Create a video capture element and assign it to the 'video' variable

  video.size(size *40, size *40);
  video.hide();
}
// Capture a snapshot from the webcam and assign it to the 'img' variable
function picture() {
  //Set image webcam
  img = video.get();
}