Month: February 2022

Inspiration

For this project, i wanted to showcase some data from my childhood: Pokémon. I found a dataset on Kaggle which showed all pokemon and their typings, battle statistics, amongst other details.

I decided to create a pie chart that showcased the distribution of primary pokemon typings in P5js.

Implementation

I imported the dataset into p5js and began collecting information on each pokemon by creating a map, and assigning the keys to each type, and accumulated as I went through. I then pushed this to an array so I could create the pie chart.

pokemonMap = new Map();
numRows = table.getRowCount();
for (let r = 0; r < numRows; r++){
    let type = table.getString(r, 'type1');
    if(!pokemonMap.get(type)){
      pokemonMap.set(type, {val: 1});
    }else{
      pokemonMap.get(type).val+=1;
    }
}
anglearr = [];
for(let [type,obj] of pokemonMap){
  anglearr.push({type,val:obj.val})
}

I standardized each value by dividing by the total number of rows then multiplying by 360 to get the arc of each type by degrees. I increased the currangle variable so I could slowly build towards 360 degrees.

background(255);
  let currangle = 0;
  for(let i=0; i < anglearr.length; i++){
    fill(random(255),random(255),random(255));
    let nextdeg = anglearr[i].val/numRows*360;
    arc(width/2, height/2, width/2, height/2, currangle, nextdeg, PIE);
    currangle+=nextdeg;
  }

It wasn’t possible to tell which type belonged to which slice, so I added some trigonometry to add text that was offset by a radius to display each type next to their slice, with the same background color.

let midangle = (2*currangle+nextdeg)/2
let y = textrad * sin(midangle)
let x = textrad * cos(midangle)
text(anglearr[i].type, width/2+x, height/2+y)

The completed pie chart looks like this:

Reflection

I think there are some issues surrounding some of the sizes of the slices, but I am happy with the result. Most of my time writing the code for this comprised of figuring out the operations to use to standardize the angles and where to place the text. I know that pokemon was a part of many of our childhoods, and I find that looking back with an analytical lens is pretty interesting.

Manipulating Characters:

Circle Letters:

Simple Data Viz: (data from https://trends.google.com/)

Word made with Circles:

Circle Word (with interaction):

For this week’s assignment, I first struggled to come up with an idea, I didn’t want to keep the same idea from last week, or I didn’t really see how it would benefit from an OOP, so instead, I thought about different games I like to play. Wild Wild Taxi has been (as “childish” as it may be) one of my favorite games since I was in maybe 1st grade.

Recently I haven’t been able to play it because it requires Flashplayer, which is not longer available. So, I began with the activity we did in class,

I then wanted to change the speeds of the car and control the Y position of the red car, but with this I wasn’t able to control the car so I tried added if loops in different places.

Still, even when I added an if statement to update the car, it was updating the position of all of the cars, I could control the Y position, but again, of all the cars. I had to figure out a way to control the Y position of just the red car.

Finally, I figured out that in order to control just one car that was created through the class, I would have to run it separately so that I could update its position, I also flipped the cars because moving side to side isn’t very realistic for cars. I also played around with other components and added a few other things, like changing the speed and color, so it would appear to be different cars that are passing.

Since I chose this project for me to be able to play the game, I would like to continue adding components, like a score, and the position of the car being changed by the keys being pressed, but for now, here is what I have! You can move the car to a different lane so it doesn’t get rear-ended by other cars.

Overall this was quite difficult for me – organizing it into functions and classes made it all the more confusing to understand the structure of how the code is being read and displayed.

I knew that I wanted to recreate my childhood toy, the bouncy smiley ball – as shown here:

But I couldn’t figure out how to make the smiley face as part of the Ball class – nonetheless I wanted to make sure I incorporated the colorful aspect of the balls and play around with the gravity and speed to get the bounciness that I know. So I made sure to make my Ball class and in the draw() section push a new ball into my array so that it would create many balls on screen –

Here is what the final product looks like – it looks really fun when you spam click the canvas and place the balls at different heights.

For this assignment, we specifically had to use OOP and create a generative art piece. I drew inspiration from Professor’s code here and a generative spiral code online.

Professor’s example:

Generative Spiral:

I wanted to have circles moving in a spiral way around the screen. I initially planned to do have it circle spirals randomly across the screen, however, one issue that I faced was that the circles just randomly moved across the not in a spiral manner (something like the Professor’s example).

So I had to set the positions and size of the circles by myself.

The design is such that circles rotate in a spiral manner and their positions expand across the screen. Each circle comprises 20 circles, I used a for loop here to store these circles(objects) in an array and then pop them out of the array i.e. run them later.

This is what it finally looked like:

Some pictures of the design:

I manipulated a code a little when we are supposed to draw the ellipse/circle and this is how it looked:

Overall, it was fun to do it! What I found difficult was to come up with an idea but I am glad it worked in the end!

Nicholas Feltron – Report

Jer Thorp – NY Times

Reza Ali – Generative Typography

 

For this assignment, I took inspiration from the shape and motion of the slime block in Minecraft.

The main features I wanted to replicate were the bouncing motions, the size change, and the transparency. I also added click input just to make the art more interactive within the p5js context. My first iteration did not have any class or array and just had the basic idea laid out, starting with transparent squares that are random in size, being placed in repetition following the mouse xy location while pressed.
Going from there, I had to make a class for my rectangle which would have a constructor that holds all the features I want to attribute to my rectangles such as: size, color, speed, location and gravity.

To recreate the bouncing motion, I incorporated the loop from this code. I then arranged each function within my class (display and move) to instantiate the bouncing movement and rectangle display within each rectangle that is created going through my array rectangles [].
After understanding the basics of organizing my class and functions to create the bouncing outcome I was looking for, I decided to play with the gravity variable and see what would happen if I used noise instead.

For my last iteration, I replaced gravity with noise which visually doesn’t make much of a difference. However, at a closer look, the bounce of the rectangles in relation to each other look much more organic in comparison to using gravity, whilst still being random as well.

I decided to make something related to one of my favourite shows of all time, Avatar the Last Airbender. I wanted to show the character Appa soaring through the sky past clouds. I thought the code that the professor showed us in class would aid me in making the clouds pass by at random speeds so I took inspiration from what the professor showed us in class. I also tried to use the image() function to add a png of Appa and I am happy with the result.

I was very excited to go to the Coldplay concert next Tuesday, and I did not get tickets because of an error page. Despite being very disappointed, I decided to turn this feeling into inspiration for this week’s assignment of generative art. Basing myself on the class activities and A Sky Full of Stars, one of my favorite song from the band, I decided to portray a sky where the stars were falling into the ground. This scene would represent the crumbling dreams of seeing my favorite band on stage. Unlike previous assignments, I did not have a clear vision of what I wanted to obtain at the beginning, and thus, experienced a very different creative process.

I began by drawing a simple circle moving through the screen from left to right as a shooting stars would. I then, created a class for “Star” and an array of stars in order to give them all a random position. This is the point where the art became generative, as every frame was determined by the random parameters of height.

 

 

 

 

At this point, I spent a long time making sure elements fit together in a nice aesthetic. I didn’t like how things looked so I attempted for a while to replace the circle for a star shape. Nevertheless this implied having a for function inside a class, and I am unsure if this is possible, but I could not make it work. After few hours of frustration, I gave up on the idea of star shapes & decided to add interactivity to the piece. This would allow me to use different functions within the class, make my artwork more interesting, and provide an outlet for me and the user to express their frustration through the click of the mouse. I also decided to alter the movement of the objects from top to bottom, in order to create the sensation of falling stars.

For the interactivity I created another array of orange stars. The original array would shift slightly to the right or left upon clicking, and the orange array would vary sizes randomly. This created a much more cohesive artwork with a chaotic feeling that I also intended to convey.

Albeit a bit confusing at the beginning, working with OOP forced me to further organize my code, my approach to it, and opened a wide array of possibilities. I really appreciate not having to copy and paste code multiple times for multiple objects, and how I was forced to used only variables for the code to work.

This is my final result. Make sure to click multiple times 🙂

Here’s the failed attempt from class’ activity. Sorry for the inconvenience.

I am very happy with the result, especially because of the power the user has in determining the output. The more clicked, the more chaotic the piece is. Nevertheless, I spent more time than I would have liked figuring out the star shape (which did not work). In the future I would like to figure out how to do this, and include interaction in between particles.

 

 

For this Assignment i wanted to create something simple but dynamic as well so I came up with the idea of particles interacting and creating a network.

I started by creating an array to hold particles as each objects and then pushed each new particle instance inside the array. The class for particle stored the position of each particle as coordinates inside a vector which would be initialized by random spawn positions on the canvas. It also had a random velocity so that some particles would move faster.

The class had an update method that allowed the position to be updates according to its respective velocity. It also called another method called the edges method which did all the error checking to ensure that the particle stayed on the canvas and bounced off the edge.

The draw class was simple a circle with a fill and random color with no stroke. My most important method was the check particle which uses the distance dist() function to check if there are any other particles within a certain distance and if so a line is drawn.

The concept of this was to visualize how gas particles would be able to behave in a certain container. A thing that i wanted to achieve was to somehow incorporate collision detection to show how they would be able to collide with each other and bounce off.

I also tried to use the map feature by following Dan Shiffman’s video but I couldn’t figure out how differently i could make use of it in my sketch.