Birds of New York




*Final project*

-This project has animations that were made using Jhon Audubon’s illustrations (public domain) and audios from Lang Elliot’s National Audubon Society – Bird Song Collection-


From the beginning, the idea was to be able to call birds, familiarize yourself and to learn about them. Where do they live? how do they look like? how do they sound like? These questions are the building blocks not only of ornithology but also of birding; a recreational activity that encourages people to go outside, listen to birds, observe and get involved with the wildlife around the cities. Because creating a conversation between the possibilities around p5js and scientific illustrations, I decided to go with one renown artist and in the United States.

Jhon Audubon is an icon, his work is not only beautiful but a wonderful exploration of wildlife and his legacy is present and very much alive especially here, in New York City. The National Audubon Society has one of the main offices in NYC; the New York Historical Society has a permanent exhibition of most of Audubon The Birds of America watercolors and the artist himself lived and died in Manhattan. This project is somehow a homage to Audubon and New York City, as an illustrator, a birdwatcher and  a new new yorker.



 I used an Electrect Microphone Amplifier, an Arduino UNO and a wooden Birdhouse. Because of the physical part of the birdhouse this project has serial communication between the Arduino and the p5js sketch. The codes are based on the PCOMP lab examples for serial communication and Adafruit’s microphone example.



On first code test I wanted to focus first on how the code should work rather than what it was showing, so most of the images, videos and sound because came from the marvelous internet. For this sketch, I used this videos: bird1, bird2, and bird3.





Birds of New York City

You could call the birds with mousePressed here



 New York graffiti subculture ft Audubon



Graphic and animation








The final code could be found here


Special thanks to Aarón Montoya, Alejandro Matamala y Daniel Castaño.


Final project proposal / Birding

*Create a proposal for your final project.*


I’ve been interested in ornithology since childhood. Most of my illustrations are scientific illustrations of birds. I’ve followed Audubon’s work; he was an explorer, a scientific and talented artist. I wanted to follow his steps until I understood that in order to illustrate his birds he had to collect the specimens. So, [insert over exaggerated childhood trauma here] the fantasy vanished almost immediately (It gives me a stomach ache to think about it, pretty much the same thing happens whenever I go to the American Museum of Natural History).

Here is were birding came to the rescue, I’m a total amateur and not a good birder at all, it gave me the opportunity of nourish this interest of mine. Unfortunately… I haven’t illustrated in months and all the birding I make these days is a random – magical – tiny -unexpected moment than anything else.



According to Wikipedia, birding is “a form of wildlife observation in which the observation of birds is a recreational activity. It can be done with the naked eye, through a visual enhancement device like binoculars and telescopes, by listening for bird sounds, or by watching public webcams.” And the main idea behind this final project is to watch and listen to the birds, but also to interact with them. Birders say that the best way to detect a bird’s presence is by sound, through their songs and callings. Audubon has an extensive library of birdsong for learning purposes.

I want to create an installation where people would be able to call birds. The idea is that blowing (mimicking whistle gesture) makes a real birdsong to play, depending on how strong the person blows the song gets played and the bird that belongs to that song comes out and say “Hello” to you. It will be an ICM and PCOMP project.


There are some projects that were a great inspiration for this project:

Juan Fontanive creates moving images through physical machines, using natural history illustrations from the 18th and 19th century of birds.

And Céleste Boursier-Mougenot creates sound installation with living birds in controlled environments.






Don’t make a video mirror

*Create a sketch that uses external media. Once you’ve mastered the basics by making prototype sketches that play sounds, draw images to the screen, scrub video, etc., think a bit more deeply about how the data in the media can be used, beyond its most evident affordances. Interpret the media accordingly. BONUS: Don’t make a video mirror or a soundboard.*



Based on Shiffman’s brightness mirror tutorial and Allison’s HUE Mode colour in class example.  The code could be found here.


/\ ^._.^ /\ API

*Create a sketch that loads external data (whether from an existing file or through a web API). Interpret this data visually or interactively.*



I decided to use the Giphy API and follow Shiffman’s tutorial about it. It started with the idea of always using cat gifs whenever you clicked the button, then that changed to puppies, pandas and bats, BATS!! BATS!!!… Obviously, I went for a Halloween/bat approach.

You could play with my bat giphy maker and see the code in this link (I added some changes in HTML and the CSS as well). HAPPY HALLOWEEN!!


Dislexia monster

*Arrays and objects,the sketch should allow the user to use clicks, keypresses, etc. to add new elements to the scene (and potentially to remove them later). // Create a sketch that it uses HTML controls (like buttons, sliders, text input fields) as a means of modifying the sketch’s behavior in real time*



This little RGB monster loves having conversations with people, but whenever he talks his dyslexia gets in the way. His speech impediment leaves him so frustrated that sometimes he just cries.

Between Allison’s Browser controls tutorial and Shiffman’s HTML videos, I was able to understand better and create this little monster his assignment. Here is the code.




*Create an interactive artwork that implements the concept of repetition with variation.*

– Setareh and Nathier-

This piece is a collaboration with Setareh, our main idea was to combine our graphic design (or little obsessions) and programming skills. Setareh was into tropical vibes while I was more interested in playing with C,M,Y,K colours and simple forms.



We started with the C,M,Y,K part of the code, because including variation in colour through movement was the main structure of our piece.

Although our initial idea was to show one graphics part and then run the sketch to show the other. We struggled a bit in the mixing of the images, the for and callings on setup were a little too much for our functionsdrawimage or functiondrawcolor to work the way we wanted



At the end, we embraced the idea of our two worlds mixed in a single image. This is our piece.


Ps: We got our inspiration from Bees & Booms, a tumbler full of beautiful processing GIFs.




Floral symmetry

*One element controlled by the mouse, one element that changes over time, one element that is different every time you run the sketch*


I used examples of perlin noise from Gene Kogan and from the examples page on the p5*js site for this exercise.

You will the animation here, and the code in this link.

Each time the sketch runs a new colour is set.

The figure is controlled by the mouse as is the background colour.

The colour of the figures change of colour and fade with time.

Maneki-neko monster

* ICM – first-week assignment – Screen drawing*

I’m a designer, I like to have a more generalistic approach to design and I’m somehow proud of not being over specialized in one particular field (but, how really possible is that?) If anything I keep finding myself attracted by everything. I’ll go from ornithology to Japanese folktales, or from biology to Verdi’s operas. Just trying to keep Humboldt proud, one of the last polymaths who ever lived. Maybe, is that, the idea of a polymath what makes ITP so attractive, or at least to me. It’s the possibility of being one that’s so exciting, as Nancy called us recently, we are “unicorns in the making”.

A hybrid state among fields is possible, that’s what I believe in and, want to do at ITP. Most of my experience as a designer comes from working in the field of performative arts, and there is where I want to start experimenting with different media, create new interactions with the audience.

Back to the assignment; several options were given (alien, monster, other) and I choose a subject that recently has me obsessing about. The Maneki-Neko, which is a Japanese lucky charm that resembles the form of a calico cat (I have a calico cat called Ische), and… It’s inspired by a real cat!

This gave me the opportunity to draw my own lucky cat for the first time and to mix it up a little, reimagining it as a new spirit, similar to a Kitsune (Fox spirit) which has nine tails and transforms into a woman. My Maneki-neko is also a demon/spirit, but a cute p5.js mischievous one.

I had some very basic knowledge of processing which helped, but even so, I got stuck a little, some functions are more complex than others, like curveVertex or arc in this particular case.

For the colours, I used photoshop to see the RGB.

But I started with a doodle of my cat and continued to use it as a reference for colour or for the position of X and Y.



The link for the evil Neko image and the sketch (with code) link