Month: September 2023

Concept:

I wanted to challenge myself a bit and do a data visualization sketch. I had to do a lot of research on which type of data I wanted to use since most of the data I found was quite boring. That is why I chose a topic that greatly interested me. I decided to create a data visualization of the most streamed Spotify songs in 2023.  I, like everyone else, enjoy listening to music on Spotify, so this type of data was really exciting to work with!

 

 

fill(50);
      textSize(9);
      text("Lucid Dreams", 5, 575);
      text("Dont Start Now", 50, 550);
      text("Watermelon Sugar", 85, 525);
      text("Lovely", 155, 500);
      text("Say You Wont Let Go", 160, 475);
      text("Se��o", 225, 450);
      text("As It Was", 275, 430);
      text("Heat Waves", 310, 450);
      text("Perfect", 363, 420);
      text("Starboy", 405, 410);
      text("Closer", 450, 400);
      text("Believer", 485, 385);
      text("STAY", 535, 418);
      text("One Dance", 560, 395);
      text("Sunflower", 610, 375);
      text("Dance Monkey", 640, 355);
      text("Shape of you", 685, 180);
      text("Blinding Lights", 725, 130);

This portion of my code was used for placing the text over the bars. I thought that I could maybe create a loop so I wouldn’t have to write the same lines over and over again, but there was so much variation in the placements of the text that I ended up doing it the old fashion way!

I was really amazed that I was able to find the Spotify logo and text for FREE?! It looks so good!

Of course for the design, I included the infamous #1DB954 color and incorporated some blacks and whites to fit the companies branding.

If I had more time, I definitely would make my design a bit more elaborate and maybe even rebrand it (the colors,font,etc..). For this assignment though, I wanted to keep it a bit more straight to the point and simple.

Blinding lights continues to lead the way with (as of today) 3.76 billion streams!! GO ABEL (:::::

This week, we explored the concepts of generative text and data visualization. I particularly enjoyed working with data and finding ways to represent the data visually. For the assignment, I decided to map the airports of the world using points.

I began by importing a data set containing the airport code, country, latitudes, and longitudes. Three arrays have been created to extract the Longitude, Latitude, and Code columns. Using a for loop to iterate through the range of possible values, the longitude and latitude values have been used as the x and y coordinates of the points.

The points have been given a randomized color through stroke(). Further, to add an element of interactivity, the screen displays the airport codes when the mouse is pressed.

for (let i=0; i<=rowNum; i++){
    stroke(random(255),random(255),random(255))
    strokeWeight(6)
    x=map(latitude[i],90,-70,0,width) //Mapping the latitude to the width of the canvas
    y=map(longitude[i],-130,170,0,height) //Mapping the longitude to the height of the canvas
    point(y,x)
    
    
    if (mouseIsPressed) { //Executes when the mouse is pressed
      strokeWeight(2)
      stroke(255)
      text(code[i],y,x) //Displays the corresponding airport code for each i value
      textSize(10)
      
    }
  }

This was an interesting assignment that allowed us to map existing data and produce beautiful artwork. I would like to extend my learning by exploring the different ways in which data can be represented to make it better understood by the viewer.

Concept: 

I wanted to come up with a concept that accomplishes both the display of text and the loading of data. During the weekend, I saw my cousin’s daughter listening to the nursery rhyme “Rain Rain Go Away.” The objective of the code is to generate a visual representation featuring clouds and animated falling text, drawing inspiration from the lyrics of the nursery rhyme “Rain Rain Go Away.

 

Highlight of Code:

function createClouds() {
  // Create cloud objects based on CSV data
  for (let i = 0; i < cloudData.getRowCount(); i++) {
    let x = float(cloudData.getString(i, 'x')); // Get x-coordinate from CSV
    let y = float(cloudData.getString(i, 'y')); // Get y-coordinate from CSV

    let textToShow = "";
    // Assign different text to each cloud based on its position
    if (i === 0) {
      textToShow = "rain";
    } else if (i === 1) {
      textToShow = "rain";
    } else if (i === 2) {
      textToShow = "go";
    } else if (i === 3) {
      textToShow = "awayyy";
    }

    // Create a new cloud object and add it to the clouds array
    clouds.push(new Cloud(x, y, textToShow));
  }
}

 

for (let i = 0; i < cloudData.getRowCount(); i++) {: This line initiates a for loop. It will iterate through each row of data in a CSV file, and the loop variable i is used to keep track of the current row number.

let x = float(cloudData.getString(i, ‘x’));: This line extracts the x-coordinate for a cloud from the CSV data. It uses the cloudData.getString(i, ‘x’) function to get the value of the ‘x’ column in the current row and converts it to a floating-point number using float().

let y = float(cloudData.getString(i, ‘y’));: Similar to the previous line, this extracts the y-coordinate for a cloud from the CSV data. It gets the value of the ‘y’ column in the current row and converts it to a floating-point number.

let textToShow = “”;: This line initializes a variable textToShow as an empty string. This variable will be used to determine what text should be displayed by each cloud.

The following if-else statements are used to assign different values to textToShow based on the value of i, which corresponds to the current row in the CSV data. Depending on the value of i, different text values are assigned:

If i is 0 or 1, textToShow is assigned the value “rain.”
If i is 2, textToShow is assigned the value “go.”
If i is 3, textToShow is assigned the value “awayyy.”

clouds.push(new Cloud(x, y, textToShow));: This line creates a new Cloud object with the extracted x and y coordinates and the assigned text value (textToShow). The new cloud object is then added to an array called clouds. This array will store all the cloud objects that will be displayed and animated later in the sketch.

 

Reflection:

Reflecting on the code, I can identify both positive aspects and areas where improvement is needed:

I’m pleased with how I’ve integrated external data from a CSV file. This allows for dynamic positioning of clouds based on the data. I’ve used conditional statements (such as if-else) effectively to assign different text values to each cloud based on its position. I’m following an object-oriented programming (OOP) approach by creating cloud objects.

While the code currently assigns text values based on specific conditions, I recognize that it could be made more scalable. A more flexible approach would enable it to handle a variable number of clouds and text assignments based on the CSV data itself, making it adaptable to different datasets.

Norman provides several illustrations of what works and why, how even seemingly straightforward and uninteresting objects contain complex ideas about all potential outcomes, and how products develop. I was interisted by how effortlessly we use items thanks to product design and how rapidly we pick up new features as a result of technological advancements. I hardly ever claim that something has altered my perspective on the world, but ever since I became aware of the importance of thoughtful product praise, I have a tendency to view all designs through this lens.

The value of design in our day-to-day existence and how it affects our experiences. Underlines how important it is to create products and systems using user-centered design principles in order to lessen annoyance and increase usability.

Concpet:

I got inspired by one of the given examples that we got the chance of looking through. My idea was very simply just let the letters “W” and “E” have a little fun swirling around the canvas.

 

inspo:https://www.lyceelecorbusier.eu/p5js/?p=2653#more-2653

Highlight of Code: 

As shown in the set of codes below, I was able to control how the letters appeared on screen depending on its position. As well as the distance between each letter and their angle. You can smoothly draw around the canvus as it displays the letters. After displaying them all the code repeats.

function draw() {
  if (mouseIsPressed) {
    // Calculate the distance between current and previous mouse positions
    let d = dist(x, y, mouseX, mouseY); 
    textFont('impact'); 
    textSize(fontSizeMin + d / 2); // Set text size based on the distance
    let newLetter = letters.charAt(counter); // Get the next letter from the letters string
    stepSize = textWidth(newLetter); // Calculate the step size based on text width

    if (d > stepSize) {
      let angle = atan2(mouseY - y, mouseX - x); // Calculate the angle between current and previous mouse positions

      push(); 
      translate(x, y); // Translate the origin to the previous mouse position
      rotate(angle + random(angleDistortion)); // Rotate the text randomly
      text(newLetter, 0, 0); // Draw the text at the translated and rotated position
      pop(); // Restore the previous transformation state

      counter++; // Move to the next letter
      if (counter > letters.length - 1) {
        counter = 0; // Reset the counter when all letters have been used
        clearCanvas(); // Clear the canvas when the cycle is complete
      }
//moving according to coordinates
      x = x + cos(angle) * stepSize; 
      y = y + sin(angle) * stepSize; 
    }
  }
}

Reflection and Ideas for Future Work:

I wanted to take more inspotations and combine them in order to come up with an idea that refelcts my own work rather than someone else.

Edit: https://editor.p5js.org/mariamalkhoori/sketches/SpcDmSs92

 

Chapter 1 of “The Design of Everyday Things” by Don Norman, analyzes the importance of design in our daily interactions in a way that will make you stop and think. I was compelled to reflect on my interactions with everyday processes and objects while reading this chapter. The fundamental idea that design is essential in determining how we experience and interact with ordinary objects is introduced in this chapter, which also serves as the book’s introduction.

The idea that good design is essential for reducing frustration and improving usability is one of the main issues covered in this chapter. Several instances of badly designed products that aggravate users are provided by Norman, including doors with ambiguous push-and-pull instructions, phone systems with complicated user interfaces, and stovetops with perplexing burner controls. These examples speak to me since I’ve experienced frustrations like these in my own life. Amazingly, seemingly basic items can become annoyances if their design needs to be better considered.

Another principle Norman mentions is the idea of “natural mapping,” which relates to the notion that the link between controls and their functions should be intuitive and conform to the user’s mental model. In the context of user-centered design, this idea is extremely crucial. This idea appealed to me greatly because I frequently come across gadgets or user interfaces with controls that need to be organized or labeled sensibly.

“affordances” is a major concept covered in this chapter. According to Norman, an object’s perceived and actual qualities affect how it can be used. To demonstrate this idea, he used the illustration of a door. He contends that a well-designed door should have distinct affordances that make it obvious whether it should be pulled or pushed. This idea of affordances opened my eyes. It made me aware of how frequently I come across doors, faucets, or buttons without signs of their intended usage, resulting in unpleasant and confusing situations.

The notion that when users experience problems, it is the fault of the design they are having rather than the user is particularly thought-provoking in this chapter. This viewpoint is a welcome change from the usual tendency to criticize customers for not comprehending or using a product properly. It emphasizes how designers must make things that are simple to use and intuitive.

In conclusion, Chapter 1 of Don Norman’s book “The Design of Everyday Things” addresses the importance of design in our daily lives and its influence on our experiences. It emphasizes the significance of developing goods and systems with user-centered design concepts to reduce frustration and improve usability. After reading this chapter, I became more aware of how the design of commonplace items affects how we interact with the environment. It emphasized that excellent design is crucial for enhancing the caliber of our daily experiences, not just a nice-to-have.

 

 

 

 

 

This weeks assignment asked us to either do a data visualization or generative text, i thought data visualization was interesting and i wanted to see what i could create using the vast amount of data sets available.

I first found a data set on kaggle called spotify charts, i completed all of the codes necessary but for some reason the bar chart that i created kept giving me an error and its size did not change according to the data took from the spotify csv file. therefore, i searched for more data sets and i came upon a data set that shows Cats and Dogs household dataset which kind of worked but still was not flawless as it did not display the data that i chose.

Finally, as i was running out of time , i made a very simple chart on excel, which worked perfectly, which had name ,age , and how tall the seven people are.  I would still rather use the other data sets mentioned above, as it will give me better visuals and maybe change the course and look of the charts i create.

 

My code:

I wouldn’t say im proud of some parts of the code, as i wish i had done a better one with more complexity and creativeness, until next time.

let table;

function preload() { //it makes sure that everythings checks out before the other functions execute
  
  table = loadTable('information.csv', 'csv', 'header');
 
}

function setup() {
  createCanvas(400, 400);
  noLoop();
}

function draw() {
  background(255,200,204);
  
  //this makes sure there is content in the data
  if (table) {

    //get the amount of rows in the CSV
    let numRows = table.getRowCount();

    //get the column titled age and how_tall
    let age = table.getColumn('age');
    let how_tall = table.getColumn("how_tall");
     
    
    //iterate over the number of rows
    for (let i = 0; i < numRows; i++) {
      noStroke()
      let x = 100;
      let y = 100+(i*25); //i*25 will increment by 20 each time the loop runs
      let w = age[i]*5;  //age by itself was small, so * to get bigger 
      let h = 10;
       
         if (name[i] =='dana'){
           
           h=5;
         }   
      rect(x,y,w,h);
     
      
      
    }
  }
}

Editable link :

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

Concept

I just recently got back into F1. I have a sporadic relationship with it, sometimes not watching at all, and then for 3-4 races straight, I’ll be checking out all the different reports about the new Ferrari engine or whatnot. But basically, my data visualization came out of wanting to show a graphic representation of the points table at the end of the 2021 F1 Season which what got me into it as the final race also happened in Abu Dhabi.

I decided to create a bar table that shows the points tally for Formula 1, while incorporating elements that represent the essence of the sport. I obtained the data for the drivers, teams, and points tally from a Wikipedia table, which I extracted into a CSV file using a free online web tool. I cleaned up the data as necessary. Additionally, I wanted to include the team colors and the cars used by the 10 teams in the 2021 season. To add a dynamic element, I incorporated a smoke effect, giving the impression that the cars are revving.

 

Highlight

Besides loading the images next to the tally bar, the highlight of my code was definitely the smoke effect which was relatively easy using a Smoke class and put the instances of the object through an array to display them as they widdle out and get removed.

// smoke class!
class Smoke {
  
    //Constructor will take 2 parameters: x and y position
    constructor (x ,y ) {
        this.x = x;
        this.y = y;
      
        //Smoke radius
        this.r = 3;
      
        //Smoke velocity (for some motion)
        this.vx = random(-3,-2); 
        this.vy = -1; //Up
        this.color = 190;
        this.alpha = 235;
    }
    show() {
        noStroke(); //No borders on smoke
        fill(this.color, this.alpha); //Fill Ellipses
        ellipse(this.x, this.y, this.r); //Create Ellipses
    }
    update() {
        //Move smokes
        this.x += this.vx;
        this.y += this.vy;
      
        //Make smoke disappear slowly
        this.alpha -= 15; 
      
        //Make smokes bigger
        if (this.r != 5) {
          this.r += 1;
        }
    }
    delete() {
        return (this.alpha <= 0); //If smoke disappears, return true and remove it from smokes array.
    }
}

 

Reflection

This project was enjoyable for me, as it involved analyzing fascinating data and reflecting on Ferrari’s unfortunate performance this season, which is disheartening as I am a supporter. However, it was still an exciting season overall, especially since the championship title was decided in the final race.

As an additional feature, I would like to include an initial loading screen where the cars start moving from the driver name area and stop at specific x distances corresponding to the driver’s points.