Final Project – Jo McAllister – Mosaic Maker

My Mosaic Maker is a Photo-Booth-like program that creates image mosaics out of images or videos taken from your computer. There are different modes so you can control what the image mosaic is made up of. After struggling to code this in python using openCV and Numpy, I’ve come to better appreciate those who have developed P5.js, Processing, OpenFrameworks, and other tools that ease the creation of quality graphics and image manipulation. Just the simple task of displaying an image needs so much thought to be executed in the most convenient way.

This first video shows image mosaics created with a simple tint function to change the colors of the pixel-images.

This second video shows a mode that uses an algorithm that sorts recorded images by their average grayscale color, and then finds the most appropriate pixel-picture to place at each pixel of the mosaic.


The rest of these are screenshots from my friends and  I playing with the Mosaic Maker.



imgImg2CopyScreen Shot 2015-12-12 at 12.26.50 AM Screen Shot 2015-12-12 at 12.54.11 AM

Screen Shot 2015-12-06 at 9.57.39 PMScreen Shot 2015-12-12 at 1.46.40 AM



Sharon Yu Final Project

For this project, I wanted really badly for keys to correspond to body parts and create “creatures” with it. I had alot of fun drawing out everything on illustrator but I had a hard time trying to make everything not overlap. The scale and the way the creature would be presented was also a problem at times. However, I am quite happy with what it looks in the end. The code doesn’t work because all the images are local.

Screen Shot 2015-12-12 at 12.42.16 AM Screen Shot 2015-12-12 at 12.42.03 AM Screen Shot 2015-12-12 at 12.41.42 AM


Microphone Visualizations, RogerSectionE

104FinalVideo from Jessica Headrick on Vimeo.

For my final project in this class I wanted to take this opportunity to explore generative art using input from my microphone. I began by researching p5js sound library, but ultimately had to do some external research to collect aspects of the microphone input such as pitch. I used inspiration form Jer Thorp’s work, which includes radial graphic imaging. I really wanted to take the typical linear visualization of sound to another form in creating a spiral like design. In my program I visualize several aspects of sound, the amplitude(volume), pitch, and peaks (the beat).

Here is a picture of one of my earlier iterations when I had only one segment of my code working. Every fifth frame a rectangle is drawn, the color is depending on the pitch (red is high, blue is low), and the length is dependent on the volume of the microphone input at that moment. The fill is slightly transparent in order to see layering as time progresses.

Screen Shot 2015-11-30 at 11.51.04 AM
Screen Shot 2015-12-11 at 7.22.33 PM

After this iteration I realized I had to create an array of each rectangle if I wanted to have the fading beat affect, so that required some back-tracking in my code. Once I had all the object created, however the program still preforms rather quickly, and the beat visualizations definitely add to the playfulness. As a Final part to my visualization, I created a way to toggle the color visualization of my program. In the top right hand corner the user can select a any of hte four color choices to view the visualization.


Final Project – NF

For my final project, I wanted to explore music interaction through the use of user controlled and visual elements. My submission is an interactive canvas on which the participant can use certain keys to move my drawn instruments and “shoot” or play the music notes. I used particles to create parts of perpetual movement that also make sounds when they collide with other elements or boundaries of the screen.  In addition, if the user chooses to drag the mouse instead of click, boxes are created rather than particles, allowing for more control by the user and further exploring the elements of animation and movement through p5.js. Along with my theme of music, the project allows for players to initiate scrolling music notes, which they can follow on screen with the controlled ‘note’ objects to simulate a song. Depending on their location on the screen, the music notes play varying pitches.

I had trouble executing all of what I intended in this project, however, am overall satisfied with what I was able to create from the techniques we learned in class and assignments. If I were to continue with this project, I would focus on creating more precise and varying interactions depending on the different objects that collide, and make a larger range of differing sounds. I would also like to explore changing the movement of the elements to be more intricate/interesting instead of the current format(similar to the space invaders example). Lastly, I would want to try and implement more of an interaction with the scrolling music notes and make the canvas pitches more accurate so to allow for a better/more enjoyable experience and display of music through my project.



Maggie Mertz: Final Project: Bound

So for my final project, I wanted to create a place to put my writing up on in the future. I did NaNoWriMo, and this is the story I created in a month. It still needs editing, and so does this code, but I enjoyed making both.

It uses an iframe to put the randomly generated circuit board in the back, while the front canvas uses mouseWheel and translate instead of a scroll bar. I tried to incorporate my own writing, art, and ideas into this project.  There are several responsive buttons and features, such as the responsive text at the top, the buttons, the arrows that click through, and the map. I don’t have really much to say about me as an author yet, hence the blank author space. But one day when I come up with an intriguing enough description of myself… I will fill it in. Thank you so much.

Here is the website:


It wouldn’t allow me to upload the video capture, so here are some Screen Shots:

Screen Shot 2015-12-10 at 11.53.50 PM Screen Shot 2015-12-10 at 11.54.18 PM

Omar Cheikh-Ali – Final Project

This is my final product. Inspired by popular rhythm games, like DDR, and Guitar Hero, the beats drop from the top along paths to the buttons corresponding to QWER respectively. Points are awarded for accuracy of the beats, while points are deducted for misses (no points are deducted for letting a beat go however). In addition to this, I wanted to add an “Undertale” theme to the game. Undertale – the massively popular indie game that came out this past October by Toby Fox. If you’ve played Undertale, you might recognize the characters in the background and some of the color references. Wait till the end of the game if you want to see the end screen! (it’s a treat!)

Me sucking at my own game: (hey it’s hard to use the gif capture software at the same time as playing)
Click to view:

Click to view:

My process started through rough sketches as seen in my proposal sketches. My first step was to create two distinct classes, Beats, and SweetSpots. This would allow me to create objects for both to get them to interact with each other and allow me to assign them unique traits (timers for example).


The second step, after creating these objects was to get them to interact with each other; I needed my beat objects to register when they were off the screen, and when they were “hit” by the sweetspot buttons – basically when they were no longer needed in the canvas. Originally I had used the filter() function similar to the space invaders code, however it was easier in the end to utilize the shift() method to remove the beginning of each beat array. In addition to this, I had originally added a “pitch” value to the Beat objects, however that method proved to be too broad of a way to correspond beats to sweetspots – I later sorted beats into four separate arrays based on their corresponding sweetspot.


I had previously also used a massive hit-detection function that ran through every beat in the beat array, checked which sweetspot button was hit, and then checked if the beat was the right pitch as well as how close it was to the sweetspot (sounds complicated right? It was.). I eventually streamlined it into a switch statement with counters for each beat array so as to only move up an index when necessary, and I also took the distance functionality and put it in it’s own separate function to further optimize the code.

Finally, I went through the song in an audio editor and manually input each beat’s corresponding time, as well as what I thought the button mapping should be (created the beatmap by hand). There is likely software out there that could analyze audio and create beatmaps, but I have not found it yet, nor did I want to make the beatmapping process overly complicated with a software that may or may not meet my needs. (Ugh, there must be at least 100 lines of code that are just the beatmap.)

All in all, I’m pretty satisfied with the finished product. There are a few kinks in there, such as the “Q” and “W” buttons losing functionality until you intentionally miss a beat with them (then they start working again mysteriously), and the fact that I have been unable to get the timing of the music matched with the beat spawning (despite the beat timings being pulled directly from the audio that is used – I think it may be a problem with how the program loads???), but it runs fairly smoothly and works as intended otherwise.


Final Project Snowman x Terrain – imartins


For my final project I focused on using object interaction to create a game. The game play aspect of the game is simple, the snowman has to jump over its obstacles and continue walking throughout the terrain drawn.
Visually, I tried to make a 2d game that would be visually appealing but also clear to the user. To draw the background I mapped the noise to create 3 different mountain depths, giving the game a sense of 3 dimensional aesthetic. The colors chosen were simple and used to re-create winter and a cold aspect to the game.


In order to make the game more user friendly I created a simple homepage button with instructions of how to start the game and how to actually play it. A gameover page was also created within the code and is triggered once the snowman attempts to jump the obstacle but hits it. Once the player loses and the gameover screen appears, player has to press SHIFT in order to start the game again, exactly like he did when he was on the homepage and was starting the game.

zislamha RogerSectionB Final Project: Save the World – One Drop at a Time

Working from my original idea, this project was a redemption of my failure of an assignment for the Landscapes week. This game was inspired by that, and also by the recent development in revamping the world’s outlook on climate change and conserving resources. The game is simple: collect water drops before time runs out. As you do, the earth in the center becomes greener and greener, becoming a way of data visualization. However, watch out— if time runs out, so does the planet. It is a simple game, but there are intricacies in there I did not even know I would have to pay attention to, and is something I am still really proud of. Of course I wish i had time to do things, like making a home screen, a replay, enemy water, but I still think this is fun to play. Even my friends got stressed from it because they didn’t know if they would make it in time. Enjoy, thanks for an interesting semester.

**Sorry for the typo in the autolab submission TA’s, Golan, and Roger!


Screen Shot 2015-12-11 at 12.17.52 AM

Screen Shot 2015-12-11 at 12.19.21 AM

Screen Shot 2015-12-11 at 12.18.39 AM


Matthew Lin – Final Project: METRONOME

For my final project, I created a metronome, a useful tool for musicians when keeping time in their recordings. For a metronome to be effective, there must be both a visual stimulation and a sound simulation. In this example, the flashing yellow circles dictate the beginning of each measure, which is a group of beats. The moving cyan circles dictate the subdivisions of each measure, which are equal divisions of time within each measure. The number in the middle of the canvas dictate the number of beats per measure.

Music varies in speed and tempo, and like all metronomes, there must be interaction to determine the speed and subdivisions to match the music. The arrow keys control the settings for the metronome. The up and down arrow keys increase or decrease the number of beats per minute, and the left and right arrow keys change the number of subdivisions within a measure.

Music is cyclical, and I showed that in how my metronome appears. The circles rotate about the middle circle, showing the repetition that occurs with a metronome.

Unfortunately, I was unable to load the sound properly into this embedded file, but I did upload a complete file via Autolab.


FINAL- shoot clouds with sheep

The premise of the game is to launch the sheep into the clouds to collect cloud fluff as wool for the sheep. Normal rules of physics still applies, though in my final version I had to exclude air friction in the x direction because of the occasional bugs it brought up – if I had more time I would make sure to work it back in and use it as ‘wind’ to make the levels harder. Unfortunately, time ran out. But overall I am very pleased with the project. It looks nicely put together, has sound effects and displays the number of clouds collected. The clouds disappear when the sheep crosses it with a popping sound, and every time you launch the sheep, it bleats. When the sheep falls, it clanks onto the ground.

I am glad I was finally able to apply physics to my program! I had originally thought it would be the easiest aspect…but incorporating the equations took a little sideways thinking.

The next level up would deal with wind and weather. More air friction.

And possibly predators in the form of turtles following the sheep in the next next level.