To view full screen

TITLE:
The Protest Time Machine

DESCRIPTION:
A timeline of selected protest and political songs from the 1960s to present time to remind ourselves of what people have been fighting for then and now. Music brings people together and this small collection of songs are examples of the frustration and disappointment in an event and is a call to bring awareness and challenge in a creative and constructive way.

PROCESS:
1) Inspiration: The concept for this project was inspired by a couple of things. First, the results of the 2016 election were surprising and disappointing to many with anti-Trump marches going on across the country to the protests of the Dakota Access oil pipeline. I also was inspired by what was going on in my part-time job. I’m currently designing a Rock N’ Roll bookazine and after reading the chapter on protest and political songs, I wanted explore this content further and to try to create a p5 sketch that could be an extension of the print form, where you would be able to listen to these songs in one place as you read along.

2) Data Collecting: To help me collect all the content, links to YouTube video links, wikipedia description, songs, I kept track of everything in the this excel document below.

3) Design and Coding: I found it helpful to throw all the elements into a Indesign layout program to figure out my design and how to organize the content. It became my blueprint for when I started coding and also held all the data together, so I could copy and paste data quickly.

4) Next Steps: There is so much more that I want to do with this that I didn’t get to, but I’m very happy to have a base that I can build on. The main thing that I would like to do is to make the design less static and more interactive by highlighting photos, videos and caption description from that particular moment in history. While researching and collecting these songs, I not only learned more about the history of that time period, but discovered all these side stories behind the songs and I want to focus on that part of the sketch next. I also used this concept of the protest time machine for my PCOM project, but kept the projects separate because there so much of coding that I still do not have a good grasp on and this project was a good exercise on implementing what we have been learning or are still trying to grasp. But from the feedback of my PCOM project, I saw the need to compare and contrast songs from a certain year or particular cause, like comparing the songs from the Civil Rights era to what is going on with Black Lives Matters decades later and would like to figure out how to code functions like that. And I need to fix small things like having the text scrolling to be in sync with the song playing and to make the play buttons more visual, along with improving the functionality. Lots to learn (and revisit) over the break till the next semester starts again.

 

CODE

FINAL PROPOSAL:
In wake of the 2016 election results and all the protesting, hate crimes and uncertainty going on around the country, I wanted to take a look at the songs from the past that were written in response to the helplessness of an event with a call for action. I have a selection of iconic protest/political songs that range from anti-war sentiment to a woman’s demand for dignity to a southern man’s response to a song written about his role in slavery and racism. There is even a song that was partially influenced by a 1979 nuclear reactor accident in Pennsylvania that expresses the fear of nuclear war, zombie invasions and food shortages. What I would like to do is to revisit these songs and allow the user to access the history behind them while visualizing the lyrics in p5. I would also try to design a version for a mobile device as well. The act of listening to these songs and understanding it’s intent is a reminder or an introduction of where we’ve been and what is still relevant now.

http://www.metrolyrics.com/for-what-its-worth-lyrics-buffalo-springfield.html
 

http://www.metrolyrics.com/respect-lyrics-aretha-franklin.html
 

http://www.metrolyrics.com/sweet-home-alabama-lyrics-lynyrd-skynyrd.html
 

http://www.azlyrics.com/lyrics/clash/londoncalling.html
 

http://www.metrolyrics.com/blowing-in-the-wind-lyrics-bob-dylan.html

Here’s a little sketch inspired by Film Noir movies. I found this infographic online designed by Melanie Patrick and took it apart to create this scene in p5. I still have things that I’m trying to add to the sketch, like other sounds when the detective comes in contact with the other characters, but I don’t seem to be writing my “if” and “else” statements correctly, which is something I need to work on more.

For this homework assignment, I used the NYTimes API in attempting to create simple data visualization with movie reviews. I wasn’t able to get far in my sketch because I was struggling with attaching the Key to the API JSON string.

Tried the following that didn’t work:
1) var url = ‘https://api.nytimes.com/svc/movies/v2/reviews/search.json’+’&APPID=ADD KEY HERE‘;
2) var url = ‘https://api.nytimes.com/svc/movies/v2/reviews/search.json’
var apikey = ‘?&apikey=ADD KEY HERE‘;

But this line worked:
loadJSON(“https://api.nytimes.com/svc/movies/v2/reviews/search.json?api-key=ADD KEY HERE“, gotData);

Now that I was finally able to attach the data to the sketch, it now displays 1 ‘film title’ of the movie review in the console. I tried following Shiffman’s NYTimes & API video to create variables (eg: createElements and createP) but the results doesn’t run, so I’m stuck at that point for now.

 

function setup() {
  createCanvas(200,200);
  loadJSON("https://api.nytimes.com/svc/movies/v2/reviews/search.json?api-key=ADD KEY HERE", gotData);
} 

function gotData(data) { 
    //var articles = data.results;
    //for (var i = 0; i < articles.length; i++) {
        //createP(articles[i].display_title);
  /*background(0);
    for (var i = 0; i < data.number; i++) {
      fill(255);
      ellipse(random(width), random(height), 16, 16);*/
  //println(data);
    println(data.results[0].display_title);
}

https://alpha.editor.p5js.org/projects/rk2yBtyle

 

I’ve been thinking about using maps and Sherlock Holmes as a project for awhile. I originally planned on building a map of London in p5, but when we had class last week and learned to use jpgs from websites, it made it quicker to build this because it would of taken me the rest of the semester to actually built it. There’s a lot more that I would do with this idea. On the top header, there is a Sherlock quote. I gathered some other Sherlock quotes and collected them in an excel file, so it would be great to be able to press a button and generate the different Sherlock quotes. And for the mousePress, I would like to be able to hover over the map, press a key location and then have a magnifying glass appear with a closeup of the building inside of the circle of the glass for places like Scotland Yard, Baker Street and some other Sherlock haunts of London.

In honor of October 9th’s Second Presidential Debate of 2016 between Hillary Clinton and Donald Trump, click the mouse to make Hillary appear and keep Trump at his wall.

Eventually, I’d like to keep adding on to this sketch by making the bricks fall when Trump’s head bounces on it like the Atari game, Breakout. My attempt to make the individual bricks with arrays wasn’t quite successful, so for now, the blocks in this sketch are drawn with a for loop (with the ‘work-in-progress’ commands to make arrays of the individual blocks commented out in the code). I also want to toggle between using Hillary as the bouncy ball with a key press of “H” for all the Hillary supporters and a key press of “T” for Trump supporters. Another thing that I came across that was a little complicated was drawing stars. Drawing stars from scratch requires lots of math, but in following one of the virtues of a lazy programmer, I was able to copy the star-making code from the p5.js reference library. I also kept the code from the synthesis in the sketch, so Hillary can turn into a potentiometer paddle to bounce Trump’s head on when connected to a sensor.

Photos of Clinton and Trump’s bouncy heads were taken from The New York Times‘ Presidential Polls Forecast

https://alpha.editor.p5js.org/full/ryVsv270http://

For this assignment, I wanted to work on a new sketch to implement more data art into my P5.js homework, instead of continuing on previous projects that I’ve done. I recently got a book called Dear Data by Giorgia Lupi and Stefanie Posavec for inspiration. The artwork in the book, showcases the year-long, analog data drawing correspondence between the two information designers.

What I originally intended was to make a single clock that bounced around a background partly filled with ‘red hands of a clock’, similar to the spread above from the Dear Data book. I thought that I could use a random command and fade the cluster of red clock hands in and out of view. But since this idea is too challenging for me right now and the fact that I’m really slow in the execution, my sketch has morphed into something more simple, orderly and less exciting.

I did experiment using Example 11-3: Arrays, Not Variables from Getting Started with p5.js with arrays to try and scatter the ‘red clocks hands,’ but I couldn’t figure out how to change the 1 simple shape into the 2 line objects that I made into a function. I also played around with inserting the clock face and hands into the ‘bouncing ball with functions example’ and it turned into a yo-yo with the hands not staying within the circle constraints. This led to an obstacle that I’m now having with my current sketch. The hands have different positions based on the row that they are in, which corresponds to one of three functions that I created. Ideally, I want one point of the hand to move independently around like a clock. and it still needs more work to get the hands to move around and stay within the circle constraint. Since I’m still trying to figure this out, the sketch is pretty static but does have functions. I do plan on continuing this sketch and hopefully get it to my original intention.

Worked with Steven Simon on this interactive sketch that implements the concept of repetition with variation and a button. When we collaborated, we worked on our own at first and came together to show each other our ideas. I had the idea of repeating triangles in different colors after being inspired by 10PRINT sketch of randomizing slanted lines.

Steven had this fantastic concept of repeating windows and using the rollover button to make the shade go up and down. With Steven’s sketch, I got a clearer picture on the differences between arrays and objects and learned some techniques he uses for debugging lines. This sketch is also a great base for adding more things, like a little yellow bird flying around (which is TK) using the ‘bouncing ball’ idea and pieces like snow falling to put the wall of windows in the context of seasons and maybe even giving a watcher a peep into what’s in a window.


For this week’s assignment, I was inspired by Gene Wilder in Willy Wonka and the Chocolate Factory, which I watched twice this past week after introducing the movie to my two year old son. This sketch contains an element controlled by the mouse (the Golden Ticket and the color changing background), and an element that changes over time and is independent of the mouse (the changing little circles in the background). What I would like to do to take this further is to decorate it more with the candy trees and oompa loompas. And I would also like to take a complex object, like the everlasting gobstoppers (made up of 4 different colored rectangles) and have those objects multiply and be random in the background instead of the circles. Trying to figure out how to uses arrays and maybe can use that to grab multiple shapes to group them and multiply.

I had a bit of a slow start with my ICM homework assignments the first few weeks, but I’m finding my ways to balance out the workload of all the classes. For last week’s ICM assignment, I started my drawing, but didn’t present it in class since it still needed time and work. Although it looks simple, it took me much longer to do than this week’s freer assignment. I think navigating the space without rulers on the side and figuring out the coordinates with all the little details of connecting each line precisely needed more time. I attempted to draw one of Sol LeWitt’s pieces, called Isometric Projection with code. I like how he takes simple shapes and lines and makes it complex and it took me so long to plot out the diagonal lines on top of the geometric shape and it’s not equality distant from one another on top. After this exercise, I now have a better feel for the x, y, width, height coordinates, which made it much easier for tackling the 2nd assignment. One thing that really saved some time from last week to this week was using variables with all the repeating lines.

INSPIRATION

BEFORE (without VARIABLES)

AFTER (with use of VARIABLES)
https://alpha.editor.p5js.org/full/ByxLCRqgT