Month: September 2023

For this week’s assignment I wanted to create a sketch that would be responsive to audio. From the beginning, I knew that I wanted to use a piece of classical music and utilize amplitude to visualize the music. I wanted to recreate a low-fidelity feeling of something like this:

Here is my sketch (open in a separate tab for the sound):

 The p5.js library is used in this project to build an audio-driven visual representation. The Particle class is in charge of creating particles with certain properties such as position, angle, speed, and radius. The amplitude of the Orchestral Suite by Johann Sebastian Bach is utilized to modify the speed and angle of the particle. When the audio amplitude exceeds a predetermined threshold, the particles vary their angle and radius, resulting in visually unique behavior. Furthermore, boundary checks are used to verify that particles do not bounce off the canvas’s edges. The primary program generates a grid of tiny particles and dynamically draws lines between them, resulting in a complicated, developing visual pattern.

This project was a good opportunity to learn about the sound library. Here some crucial lines:

this.amp = new p5.Amplitude();
// and
let vol = this.amp.getLevel();

The p5.Amplitude class is part of the p5.js sound package and allows to measure the amplitude or loudness of audio in real-time. By creating this instance, the sketch has the capacity to evaluate and respond to the dynamics of the audio. The getLevel() function of the p5.Amplitude object (this.amp) gets the current audio amplitude level.  This value changes while the audio plays, offering a dynamic indicator of the intensity of the song.

Another part of the code that I was proud of was the drawing of the lines between particles:

  // looping through all the particles
  for (let i = 0; i < particles.length; i++) {
    let particleA = particles[i];
    particleA.update();
    particleA.display();

    // initializing an inner loop to compare the current particle to other particles and calculating distances
    for (let j = i + 1; j < particles.length; j++) {
      let particleB = particles[j];
      let distance = dist(
        particleA.position.x,
        particleA.position.y,
        particleB.position.x,
        particleB.position.y
      );

      // drawing a line between particles that are closer than 100 pixels
      if (distance < 100) {
        line(
          particleA.position.x,
          particleA.position.y,
          particleB.position.x,
          particleB.position.y
        );
      }
    }
  }
}

This is a very simple principle, where basically every particle in the outer loop is compared to all the other particles by looping through them in the inner loop. It was quite a basic structure but it allowed for of the main effects in the sketch.

Ideas for future improvements would be performance optimization, especially when dealing with a large number of particles. The audio tended to become messy once I would initialize more particles (sometimes it can be heard even in the current sketch). I would also like to introduce different types of particles with varying behaviors, for example, some particles could respond to bass frequencies, while others react to treble.

Overview:

I have an unhealthy obsessions with Postcards, specially those that carry a very Edgy-vintage design that looks like they were made using Paint 🙂 and since the 1st of October coincides with the World Postcard day I have decided to create a non commissioned postcards to my favorited museum ever the MoMA (Museum of Modern Arts). 

I went on Kaggle and found a dataset of with LITERALLY ( 67695 ) of MoMa artist so thought first of distinguishing the non American artist with the color grey to emphasize on the global domain of the MoMa and the scattered the name of the artist all over the screen, and then I printed at the Middle of the screen postcards from MoMA.

So the Data Visualization part is that this code distinguishes the American from the Non American Artist visually by color. which If I would have thought of creating this postcards by hand would have been a nightmare for me as a designer wen I have a dataset of 67695 artists 🙂

Embedded sketch:

Mockup Rendering:

Highlight of the code I am proud of:

This was my first time I work with Dataset and it wasn’t easy at all. So I guess I am proud of my logic of distinguishing the artists Nationality.

// Define the box parameters
 let boxX = 50;
 let boxY = 50;
 let boxWidth = width - 2 * boxX;
 let boxHeight = height - 2 * boxY;

 // Extract artist data from the CSV
 for (let i = 0; i < table.getRowCount(); i++) {
   let row = table.getRow(i);
   let artistName = row.get('Name');
   let nationality = row.get('Nationality');
   let status = row.get('Status');

   if (artistName && nationality) {
     artistData.push({ name: artistName, nationality, status, x: 0, y: 0 });
   }
 }

The above code defines the parameters for a rectangular “box” on a canvas, specifying its position and dimensions. It then iterates through rows of a CSV file, extracting artist data such as name, nationality, and status. If both the name and nationality exist, this data is stored in an object and added to the artistData array. This process prepares the artist data for subsequent display within the specified box on the canvas.

Reflection:

This was my hardest Assignment yet as that finding a dataset and thinking of an idea to model the dataset was not easy at all however, I am very happy with the end result as that If I found that on the shelf of the MoMA I would love to have that postcards that keeps all the names of the artist I was impressed by their work closer to me, so that I would take the opportunity to google the artist that my eye falls into. And I am writing an email to MoMA perhaps they are interested to take this into their postcards collection :0.

Future improvements: 

If I would have attempted this assignment once again I would:

• Enhanced User Interaction: The inclusion of interactive elements, such as mouse-based actions or keyboard input, can empower users to explore the artist data interactively. This might involve enabling users to filter artists based on specific criteria or offering additional information upon clicking an artist’s name.
• Responsive Design: Implementing a responsive design approach ensures that the project can adapt seamlessly to various screen dimensions and orientations, guaranteeing an optimal user experience across different devices.
• Informational Overlays: Providing informative overlays or tooltips that furnish users with supplementary details about each artist when they hover over or click on an artist’s name can enhance the user’s understanding of the data.
• Dynamic Animations: The addition of fluid animations for transitions, color alterations, and text movements injects dynamism into the visualization, thereby engaging users more effectively.
• Search Functionality: Incorporating a search feature empowers users to search for particular artists or filter data based on various attributes, thereby enhancing usability.
• Sorting Mechanisms: Offering sorting options for the artist list, permitting users to sort by attributes such as name, nationality, or status, enhances the user’s ability to explore and comprehend the data.
• Data Updates: By enabling real-time data updates through either connecting to a live dataset or facilitating the upload of new CSV files, the project can remain current and relevant.

code:

//Batool Al Tameemi, Intro To Im 
//Assignment 5: Datasets and visualization 
let table; // Declare a variable to hold the CSV data
let artistData = []; // Initialize an array to store artist data

function preload() {
  // Load your CSV file
  table = loadTable('artists.csv', 'csv', 'header');
}

function setup() {
  createCanvas(800, 600);
  noLoop();

  // Define the box parameters
  let boxX = 50;
  let boxY = 50;
  let boxWidth = width - 2 * boxX;
  let boxHeight = height - 2 * boxY;

  // Extract artist data from the CSV
  for (let i = 0; i < table.getRowCount(); i++) {
    let row = table.getRow(i);
    let artistName = row.get('Name');
    let nationality = row.get('Nationality');
    let status = row.get('Status');

    if (artistName && nationality) {
      artistData.push({ name: artistName, nationality, status, x: 0, y: 0 });
    }
  }

  // Draw a box
  noFill();
  stroke(0);
  rect(boxX, boxY, boxWidth, boxHeight);

  // Display artist names with the specified conditions
  textSize(12);
  textAlign(LEFT, TOP);

  for (let artist of artistData) {
    let x = random(boxX, boxX + boxWidth - textWidth(artist.name));
    let y = random(boxY, boxY + boxHeight - textAscent());

    // Check for overlap with existing text
    let overlapping = false;
    for (let existing of artistData) {
      if (artist !== existing) {
        let d = dist(x, y, existing.x, existing.y);
        if (d < 20) {
          overlapping = true;
          break;
        }
      }
    }

    // Set text color based on conditions
    if (artist.nationality !== 'American') {
      fill(192, 192, 192); // Silver
    } else if (artist.status === 'Dead') {
      fill(255, 215, 0); // Gold
    } else {
      fill(0); // Default text color
    }

    // If not overlapping, display the text
    if (!overlapping) {
      text(artist.name, x, y);
      artist.x = x;
      artist.y = y;
    }
  }

}



function draw() {
 textSize(30);
  textAlign(CENTER, CENTER);
  fill(random(0,255)); // Set text color to black

  // Set the built-in font
  textFont("Georgia"); 
  stroke(color(255));
  // Calculate the center of the canvas
 let centerX = width / 2;
  let centerY = height / 2;

  // Use frameCount to create a continuously changing color
  let hue = (frameCount * 2) % 360; // Adjust the factor for color speed
  let textColor = color(0);
  fill(textColor);

  // Display the text at the center of the screen
  text("Postcards from ", centerX, centerY - 90);
  textSize(160);
  text("MoMA", centerX, centerY);


}

The World’s Best Countries For Women, 2021

My concept: While scrolling through Kaggle, I found an article with an interesting title “The World’s Best Countries For Women”. I wanted to know the ranking of the countries and on which categories they were assessed such as women’s employability, women’s rights, women’s literacy rate, etc. Although the article doesn’t exhaustively describe these aspects, the visualization of this data was particularly interesting for me. I have been inspired by the image attached below in Fig. 1, meaning that the circles representing the countries needed to align on a circular path. Additionally, the circles should demonstrate a visible differentiation of the score of the overall assessment of each country’s performance, which could be achieved by the different radius of circles corresponding to the specific countries: the higher the score, the bigger the radius. During the coding, I decided to give a more interesting shape for the data visualization, so the circles would be in a more spiral path. Last but not least, the array of the shades of the purple colors was created because it is believed that purple is a color of feminism. I wanted to raise awareness of women’s conditions and opportunities in different countries through this data visualization. 

Fig 1. The data visualization I was inspired by.

A highlight of the code I am proud of is the for loop because it incorporates many functions and steps such as naming each variable in the data set, giving the size of circles to corresponding countries based on score, and the path of the spiral path according to the ranking. More specifically, I am proud of the function of the x and y coordinates of each circle because the formula used for that creates a perfectly drawn 2D spiral path I was looking for. 

 for(let r=0; r<table.getRowCount();r++) {
    const name = table.getString(r, "Country");
    const rank= table.getNum(r, "Rank");
    const score = table.getNum(r, "Score");
//calculating the positions x, y of the ellipses based on the rank of each country.
    const x = 2*(180-rank)*cos(rank*5)+width/2;
    const y = 2*(180-rank)*sin(rank*5)+height/2;
//scaling the score range of (0,100) to fit the range of (0, 30) to control the size of the ellipses, so they could fit the canva.
    const scoremap = map(score, 0, 100, 0, 30);
    ellipse(x, y, scoremap);
    fill(0);

//calculating the positions of x, y of the names of the countries  based on the rank of each country.
    let xtext=2.5*(180-rank)*cos(rank*5)+width/2-19;
    let ytext=2.5*(180-rank)*sin(rank*5)+height/2;
//changing the x position of the names of the countries to specific countries in order to avoid overlapping of the names with the ellipses.
    if (rank>=97 && rank<=116){
      xtext = 2.5*(180-rank)*cos(rank*5)+width/2-35; 
    }
    if (rank>=136) {
      xtext = 2.5*(180-rank)*cos(rank*5)+width/2+5;
    }
//checking the distance between the mouse and the ellipse. 
    let d = dist(mouseX, mouseY, x, y);
//if the mouse is on the ellipse, the name of the country and the ellipse corresponding to that country is filled is orange color. 
  if (d < scoremap/2) {
    fill(255, 95, 31);
    text(name, xtext, ytext);
    ellipse(x, y, scoremap);
  } else {
    fill(0);
    text(name, xtext, ytext);
    fill(random(colors));
    ellipse(x, y, scoremap);
    }
  }

Embedded sketch

MOVE YOUR MOUSE OVER ANY CIRCLE TO SEE WHICH COUNTRY IS REPRESENTED

Reflection and ideas for future work or improvements: Because of the small distance between the countries, some of the names overlap. Hence, it is better to resize the canvas or make the changes in a space for each of the country names so that one is closer to the circle, while the other is a bit in a distance. Additionally, for aesthetic purposes, it would be great to add more details to the sketch such as Perlin noise which appears when the mouse is clicked, or the line of the small circles going from the country circles to the center.

The Concept:
For this assignment, I want to do a data visualization sketch. After looking for various data sets and APIs, I decided to choose some data that relates to a personal interest. I decided to create a data visualization of 2016 world’s top 100 football players voting that chooses the best player of the world. It was really interesting to read some of this data as I never know these variations in voting and what makes it more interesting is that Ronaldo, my favorite player, was the best player in that year.

Code Highlight:
I am proud of this part of the code, mapping the voting values to the width o the bar corresponding to the value and increasing the width of the bar at the begging of the sketch display. The concept of mapping is very useful in many ways I have tried while figuring out how to draw the bars.

Sketch:
Reflection and ideas for future work or improvements:
I liked that he sketch effectively introduces a dynamic bar expansion effect, engaging viewers from the start. However, further improvements could involve adding smooth animations for a more visual transition. Additionally, considering user interactivity, such as mouse interactions for control, could enhance user engagement and exploration of the data.