Weather API

In attempt to create a weather map API system, I put together a map illustration, text, and used the weather API to create code that varied in output as the temperature, wind speed and humidity changed from city to city.

You can try the code, here

Obama Slider

In learning how to use the slider, I created an Obama face slider. It took some quick math to figure out how to get Obama's face within his own eyes, and move so that they cross each other. I wanted to make the faces within the eyes just get larger, and once they are larger to put new Obama's within the four new eyes - but I wasn't able to figure out how. In a future iteration of this project, I'll attempt to do so.

You can try it, here

Newspaper (functions)

In learning how to use functions, I created a sketch that would change colors upon each click, as well as change text. The text was sourced from the day's New York Times, grabbing headings I saw on the website. My classmates and I were pretty appalled by some on the headlines.

You can try the code, here

Create a button (with a partner) & create an algorithmic design & combine the two

This week, we were assigned to partner up and create a button. The idea of creating a button on javascript, after a couple weeks of making sound interactive programs with shapes that move at the position of your curser, sounded very easy. But, it actually wasn't it all. After a couple days of playing with numbers and looking at examples, we finally got it and were able to get a bit more creative.

We made ellipses that flashed black and white on the inside, changed the background's color and made the stroke weight increase with every other click, when they were pressed.


Here's our collaborated project:

[Try it]


After we collaborated, I played even more with our project and made it sound interactive. Now, the buttons change in diameter to the amplitude of the music.


Clicking on the buttons continued to change the background to different colors. The diameter continued to interact with the amplitude of the music, and you could also draw dots all over the screen. [Try it]

And after a while, I just continued to add and take out different elements to make it more or less sonically interactive.

Then, I added this similar techniques to my algorithmic design and made it mouse cursor/press and sonic interactive.

[try this one & my other like it]

Sound Interactive Visual

After the second class, and learning how to manipulate my code with mouse movements, I became incredibly intrigued with other possible ways of making my code interactive. So, I decided that maybe the next level of interaction should be with sound. I had no idea how to make it sound interactive and wasn't finding much help online. I resorted to asking for help on the ITP Facebook page and was grateful for the resources people contributed to me. After studying and observing other sound interactive code, I was able to make mine sound interactive as well.

This project was very exciting for me as I have so many future projects I want to create that continue this sound interaction method. Next, I would like to learn how to load sound into my code as opposed to using my mic to interact with sound that I play, live.

I especially enjoyed how the beat in this song, interacted with the visual.


One Circle Sound Interaction

These are screenshots of the code while in the midst of it interacting with sound entering the mic. The color changes both as you move your cursor over the screen and as the amplitude of the sound increases and decreases.

[Try it]

Circle + Triangle Sound Interaction

I also made a much more complicated visual that continues the color changing via mouse cursor location and the sound interaction. This one was created by placing ellipses in the center of the canvas, all of different sizes and color opacities. I also added a few triangles with programing that "blink" as it hears harder beats. It was very interesting to create this and see how the shapes interacting with the different levels of amplitude.

Here are screen shots of the code in the midst of sound interaction.

Introduction to ps.j5

Directions: Create another screen drawing: self-portrait, alien, monster, etc. Use 2D primitive shapes.

Below is my first assignment - as I explored ps.j5 for one of the first times. I focused on repetition of 2D elements with slight variance in their grid location or thickness of stroke.


I used this assignment to get more familiar with computation and how different numbers create different scenarios. I'm very excited to get a lot more comfortable with computation so much so that I can predict where a shape will form when inserting certain numbers. 

As far as my personal hobbies, being comfortable enough with computing will allow me to be able to create much more intentional art as opposed to the abstract and limited experimentation I was able to do in this assignment.

I am very interesting in making interactive visuals that utilize sound and look forward to eventually being able to program computations that will allow the user to manipulate their sonic outputs in an intentional and highly aesthetic driven manner.

During this assignment, I didn't get to figure out how to make the interactive "mouse events" to work within my program, leaving my submission stagnant.

I enjoyed the experience of using the web editor and am excited about the possibilities of the rest of the semester.