For this assignment I was keen to experiment with data and data visualization. There are so many ways data can be visualized and presented – I wanted to explore this. I began by looking up ways data can be visualized such as bar charts, pie charts, maps,  etc. I liked the look of bubble charts.

By using data found on trends.google.com about the number of types of flowers in different regions in the US, I decided to make a bubble chart. By using the preload function I loaded the data. Then within my for loop I drew the bubbles which had sizes according to their frequencies – bigger bubbles have a larger amount of types of flowers in their assigned region and smaller bubbles have less number of different types of flowers in their designated region. I wanted to visualize these at random locations thus used ‘const x = random(0, width);’ and ‘const y = random(0, height)’. However this caused an issue of overlapping bubbles – which is one of the biggest challenges I had. As shown below, the bubbles’ sizes to respond to their frequencies however there are many overlapping bubbles and many are cutting cut off of the canvas.

I wasn’t able to grasp how to solve this issue on my own hence watched many tutorials online such as Shiffman’s YouTube tutorials as well as used the p5.js references to help. Although I couldn’t completely apply the code Shiffman demonstrated, I was able to implement the logic. I had to make a bubbles array.  Also, I was able to avoid the bubbles getting cut off by declaring width and height and then implementing it into the code. Here it seems like the bubbles are getting cut off however on my canvas all the bubbles are within the frame of the canvas – https://editor.p5js.org/zainaiqbal/sketches/8jXV8InrS

In the future, I would like to work on reducing the spacing between the bubbles as well as increase their sizes so that the differences are more obvious – like they were in my code earlier (shown above). Every time I attempt to do this, my code crashes. Also, I would like to include a function where every time the mouse is pressed on the canvas, the canvas refreshes and so the arrangement of the bubbles change.

This is the final outcome –

 

 

I took a very beautiful picture of the sunset a few days ago, and when looking for inspiration for this assignment I decided to make this the theme of my artwork. I planned to have two lines of text, one with the word “Sunshine”, and another with its definition. That way, I would get to explore with different styles and dynamics.

Before writing any code, I decided to browse through the in-class examples a few more times. I really liked the circles example, and decided to do something similar with my main line of text. I struggled to understand its elements and, thus, had to watch a tutorial to fully grasp textToPoints. With this, I built my first draft. I included it as a picture given that it has no interactivity or other component to it. My next step was to figure out if I could include images and add my second line of text.

This is how it began to take shape:

After investigating, asking my friends, and Monday’s class, I figured out how to add an image and alter its transparency. I initially played arround with tint, and got the piece to a very beautiful aesthetic. Nevertheless, it made my computer very very slow and ruined the experience. I fixed this problem by adding the image and drawing a black rectangle in front of it, which I gave a low opacity, to increase the transparency  of the image.

For the interactivity, since I was using a picture of a sunset, I thought it would be really cool to alter the size of the ellipses forming the letters only on the x-axis, as to create an arch-like path that would imitate the sun rising and setting. In the final piece, move the cursor from left to right and see how it resembles this natural movement.

I am very very happy with the overall look and feel of this piece. Working with text was very interesting to me, and I am very curious to see what else can be done with textToPoints. Furthermore, I would like to include object oriented programming to perhaps, give each ellipse  its own identity. Could I get the ellipses shaping the word to make the shape of a sun upon a click?

For this week, there we many different ideas that came to mind, but at some point, I thought about the saying, “This Is Water”, that David Foster Wallace refers to in a commencement speech. The first image that came to mind was of fish, and when I googled it, this came up:

I then thought about how I could recreate this in some way while focusing on the text, originally I wanted to recreate the entire image, with the words “This is Water” using circle packing to recreate water. So I began by looking at different videos,

random circles with no overlap
animated circle packing 
animates circle packing image 

While these videos were very helpful in understanding the concept, they weren’t in psj5 so while I could understand the components, I still needed help recreating the idea in psj5, which is when I was able to find examples like the ones in the videos but in psj5, none of them had all of the components of what I wanted to do, so I added a component that would make the circles stop filling in empty spots,  and another that from a black and white image, would fill in the spots where there is a white pixel.

One of my first attempts I began with this:

But then I tried a bunch of different images and styles,

These were the final images, that allowed me to get this result:

Moving forward, I would want to combine the idea of letters coming back to a home location so that the bubbles can go from random positions to form a word.

credit to:

https://editor.p5js.org/aryan.chharia@gmail.com/sketches/RdVQUoMEJ

https://editor.p5js.org/AmritAmar/sketches/oL0gKBOyS

Inspiration
I found a media outlet on Instagram, which is called We The Urbans. As far as I understand, this is the community that empowers people through art, music, fashion and other creative ways. I enjoyed their works on Instagram, which may serve as a constant source of inspiration and motivation. Being impressed by their ways of delivering important messages, I got inspired to create something similar.
https://www.instagram.com/wetheurban/

Design
I made a quick sketch of my work. Also, to be honest, I make the same mistakes of sticking to the design rather than thoroughly thinking about the ways of programming it. Yet, thanks to Professor Aaron, the idea could be put into action, and the professor demonstrated to me how to put a text into a circle. Then, thinking about making my work more interactive, I decided to use the mousePressed() function to make appearing words when you move a mouse. Also, I used frameCount to create a sort of flashlight effect. However, the facing issue was that I did not know how to rotate the text. After searching the web, I found that there is an explanation presented on the p5js website. The information presented there was quite useful, so I used it as a reference.
https://p5js.org/examples/typography-text-rotation.html

Result
Generally, I am satisfied with the result. That was a nice practice of self-love and working with a text in p5js 🙂 Yet I still need to clarify some details regarding the text inside a circle.

For this assignment I decided to make a clock. I was inspired by my wallpaper which has a pretty cool moving clock.

Then I looked for a cool font online and found one called Roboto on Font Squirrel. I then added the .ttf file to my sketch and loaded the font using loadFont.

I used the hour(), minute() and second() functions inside the text() function with textAlign(CENTER) to print out the time on the screen. I also messed around with if statements to gradually change the color of the time and give it a breathing effect.

Then I used the textBounds() and textToPoints functions to create the points using the font and store it in an array to display the word Clock on the screen similarly to the Circles example we looked at in class.
My final product was pretty simple and didn’t come out nearly as cool as my wallpaper but I had fun working with text.

When the Professor shared the “dispersing circles” sketch in class, I immediately thought of an explosion. With this assignment, I decided to implement a similar concept using text instead of those circles.

I created a class Mover for the moving objects, characters in this case. All the characters in the parent string are instances of this class in the program. Upon pressing the mouse button, these characters scatter in random directions and the colors change to mimic an explosion. When the characters slow (speeds less than 0.1 – update()) down significantly to the point of not moving, they come back to their original place in the center of the screen.

I decided to integrate most of the concepts I have learned in class in this assignment. For example, when the characters are aligned in the center of the screen, I add noise to them to make it seem like they are unstable and reading to go flying in different directions. Perhaps the most technical part of my implementation was to ensure that they return to the center after the explosion. I did this by the subtraction method the Professor has pointed out in class numerous times. Each character has a position element associated with it which indicates its position within the word. Based on that, the offset from the starting of the word is calculated and then every character is positioned in the right order in the word.

I have also made sure not to hardcode the string being used so anything can be used in place of the “BOOM!” in the code. Here is what I got:

For this assignment I wanted to use data visualization and how I could use simple data to create an artwork or something interactive. After watching few videos and searching for possible data that I could use I came across this Visual Data Analysis lab that had used this flights dataset to create a data visualization.

After looking at this i was inspired to use the same dataset but to create an interactive world map using this dataset which could allow the user to enter a country as input and the sketch would show all the destinations they flights have gone to and what the number of flights are.

Initially, the downloaded flights.csv file was more than 5mb and P5.js did not allow me to upload the file. Hence I filtered the data as per the things I would need for this assignment. Since I was focusing on countries alone I removed the airport names along with the cities the flights were coming and going to.

For loading the data into my sketch i used the loadTable() function in P5.js that allowed me to read the data from my file and store it into my table.

After loading the table I set up a function call process where each line of the data would be fed in as a row. Then I’m using a get info function which gets the longitude and latitude from the row of the departure and destination location. It also maps out the longitude and latitude coordinates onto the dimensions of the sketch which is later used to draw circles at each location. This initial mapping and drawing of ellipses allows the green dots to create a rough outline of the world map onto the sketch. 

Then I’m using a get flights detail function that matches the input from the user to the row data and to avoid case sensitivity issues a converted both strings to uppercase and check if they are the same.  If so, and I am using the row’s departure and destination mapped coordinates to draw a line between them by pushing and popping each one. I’m also using a flight counter variable which allows me to keep track of the number of flights and displayed to the user as output.

Click here to view the sketch in fullscreen mode.

 

Ideation

I wanted to do something with falling letters, like those movie openings where they have 3D letter blocks falling from the sky but I quickly found that doing 3D stuff can get really complicated especially with letters so I decided to implement the 2D version of it.

First iteration

Initially, I wanted to mimic a pull of the letters with my mouse, so I recreated some of the code that we saw in class (seekHome) to have the letters seek the mouse pointer if it got close enough. (With some help from professor Aaron, I was able to figure out how to make the pull smoother, thanks!) This was working fine and so I decided to move on to the next part which is the falling letters.

Falling!

For this part, I had to dig up some high school physics and figure out how I would simulate gravity! I decided to give each letter a random mass (each letter is an object) and a random resistance to mimic air resistance. I also kept a time counter once gravity is turned on so that the falling speed increases with time.

I think it turned out pretty okay but I would like to figure out how to make the falling smoother as it seems quite jittery at the start.

Inspiration

I wanted to make a typography that imitates the shaky nature of jello. I want the boundaries of the letters to move haphazardly while maintaining a their general features.

Implementation

I preloaded a font called Aquino for to its thick,blocky appearance. This was so the word at least stays loosely legible even when it wobbles. The array of boundary objects is made using the textToPoints function in line 19 and 22. This is the basis of my topography. For the wobbly jello effect, I used the noise function in line 35 to make each point fluctuate.

The two texts have the same jello behavior, but differ in their points’ appearance. I like both designs, so I left them both on. They interact with the mouse position, by increasing pointer diameter when the mouse is close. When this happens the top text gets more bubbly, while the bottom text looks like a torch is being pointed at it. This is done using the using the dist() function.

Sometimes, the typography appears too disfigured, in which case please reload the page.

Conclusion

I leant a lot from this assignment, one of which being that one’s creativity is the only limit. My assignment, although farly simple, opened my eyes to countless other alterations I could implement in future assignments.

As soon as I found out what the assignment was and learning how the professor was able to make the letters seek home and float around the screen, I knew I wanted to play around with it. I immediately took out my notebook and sketched my idea, which can be seen below (excuse the roughness of the sketch):

I then started to look for monospaced fonts that I liked. Since the messaging was personal, I wanted a font that could express that, instead of the common blocky, cold monospaced fonts. It took me hours, because preload would often not work, and sometimes I came across the error of not having any space to upload my fonts (even though I only uploaded 2 font files). The other problem I kept coming across is that the font was not actually monospaced, so that ruined the spacing of the individual letters when I put them in an array.

After finally deciding on a font, I then needed to figure out how to make several strings and arrays to make my idea work – I needed to separate out the three sentences in order to control how they seeked home. At one point, it did not allow me to use my class because it had not been initialized and guess what the problem was? I forgot a } somewhere in the code. One simple mistake stopped the entire code from running. It drove me insane. Now though, whenever my code doesn’t run, my first instinct is to check my brackets, and {}.

Credit to https://openprocessing.org/sketch/1351086 for the heart function <3 It is a little busy, but overall I'm really proud at how long I kept trying to make my idea happen and the amount of times I felt the urge to throw my laptop but didn't 🙂 Here it is: