//Natalie Schmidt
//Section D

function setup() {
    createCanvas(640, 480);
    background(126, 204, 213);

//variables for the color of the fish
var r = 222
var g = 157
var b = 207
//variables for tail and eye size
var tail1 = 60
var tail2 = 130
var eyeB = 20 //for black part of eye
var eyeW1 = 8 //for large white part of eye
var eyeW2 = 5 //for small white part of eye

function draw() {
    fill(170, 220, 234);
    ellipse(480, 20, 40, 40);
    ellipse(450, 100, 50, 50);
    ellipse(480, 165, 30, 30);
    ellipse(440, 200, 10, 10);
//fish body
    fill(r, g ,b);
    ellipse(width/2, height/2, 160, 120);
//fish black eye
    ellipse(380, 240, eyeB, eyeB);
//fish white eye
    ellipse(377, 235, eyeW1, eyeW1); // large
    ellipse(385, 245, eyeW2, eyeW2); //small
    fill(r, g, b);
    ellipse(403, 238, 12, 12); //top
    ellipse(403, 249, 12, 12); //bottom
//fish tails
    translate(-210, -40);
    ellipse(width/3, 320, tail1, tail2); //top
    translate(170, -400);
    ellipse(width/3, 250, tail1, tail2); //bottom

function mousePressed() {
//when the mouse is pressed, the color changes
    r = random(0, 255);
    g = random(0, 255);
    b = random(0, 255);
//when mouse is pressed, tail and eye size changes
    tail1 = random(35, 125);
    tail2 = random(90, 175);
    eyeB = random(10, 35);
    eyeW1 = random(3, 20);
    eyeW2 = random(1, 15);
    background(126, 204, 213);


For this project, the first thing that came to mind was a fish. I knew I wanted the color, eyes, and tail size to change, but the difficult part was getting the right proportions and the right angles. The initial shapes were pretty simple, because I figured experimenting with curves and rotate at the same time would be a little too complicated for me right now. I didn’t do any initial sketches, since the fish was only going to be a couple of ellipses. The image of the fish kept overlapping each other instead of replacing when I clicked my mouse, so I had to use the clear function to fix the problem; however, after THAT a chunk of the background was getting cleared too, so I filled in the background again at the very end to make it the way I wanted it to appear. I’m not sure if there was any other (better?) way to fix that problem, but this way seemed to work. All in all, I’m pretty proud of the final product!


Created in 2002 by Jared Tarbell, Lola Brine, Corey Barton, and Wesley Venable, Moonlight is an interactive visualization of Beethoven’s No. 14 Sonata. As the audience member walked through the installation, colored blocks of varying opacity would display the sonata, allowing one to both see and hear the music being played. What I really admire about this project was not only the combination of computer generated colors and shapes, but also the fact that the user could modify these aspects of the installation as well. It really displays the power of computer science in art, as well as combing user experience and interactivity to create something truly musical. The creators had taken a MIDI file of the sonata, which was then compressed into an MP3 as well as converted in XML with the use of C++.  By using an actual recorded performance, the creator’s ensure that, although the installation itself was generated, the integrity of the intial performance was maintained.

 The first movement of the sonata, rendered into four sections.

The full sonata, displayed by using the varying degrees of opacity and color.



//Natalie Schmidt
//Section D

function setup() { //background
    createCanvas(500, 500);

function draw() {
//background design
    fill(255, 186, 22);
    triangle(0, 0, width/2, 0, 0, height/2);
    fill(232, 17, 77);
    triangle(500, 0, width/2, 0, 500, height/2);
    fill(20, 179, 177);
    triangle(0, 500, 250, 500, 0, 250);
    fill(255, 132, 0);
    triangle(500, 500, 500, 250, 250, 500);
    fill(126, 45, 0);
    ellipse(250, 285, 250 , 300);
//head shape
    fill(239, 189, 118);
    ellipse(250, 250, 200, 200);
    ellipse(220, 240, 25, 25);
    ellipse(width-220, 240, 25, 25);
    curve(185, 0, 205, 215, 220, 215, 220, 0);
    curve(width-185, 0, width-205, 215, width-220, 215, width-220, 0);
    line(250, 235, 250, 260);
    line(250, 260, 265, 275);
    line(265, 275, 250, 280);
    fill(167, 121, 55);
    ellipse(200, 275, 3, 3);
    ellipse(180, 280, 3, 3);
    ellipse(170, 260, 3, 3);
    ellipse(190, 260, 3, 3);
    ellipse(215, 265, 3, 3);
    ellipse(230, 275, 3, 3);
    ellipse(width-200, 275, 3, 3);
    ellipse(width-180, 280, 3, 3);
    ellipse(width-170, 260, 3, 3);
    ellipse(width-190, 260, 3, 3);
    ellipse(width-215, 265, 3, 3);
    ellipse(width-225, 275, 3 ,3);
    curve(210, 0, 210, 285, width-210, 285, 310, 0);
    fill(126, 45, 0);
    translate(495, 210);
    ellipse(220, 180, 150, 60);

While creating this project, I really just wanted to jump in head-first and try all kinds of different functions; however, having never coded before, this proved to be pretty difficult. I got the hang of ellipses, rectangles, color, etc., but I realized that many of the things I wanted to do were too advanced to attempt for now. Despite that, I’m very proud of what I created, seeing as how I had never done anything like this before. It was fun and incredibly satisfying to actually edit and type code and see that reflected on the image itself. I’m looking forward to learning more advanced material and learning how to incorporate more detail into future projects.


Patatap-ping to a New Beat

Awhile back, I discovered Patatap, an online sound board that generates pieces of music in conjunction with animated shapes, all by tapping the keys on your keyboard. Patatap was created by Jono Brandel (developer/designer), and the Lullatone, who provided the musical sounds for the site. Brandel had initially created the animations separately, (it’s unclear whether he developed his own software or not), but contact with Lullatone, who specializes in innocent, childlike sounds, inspired him to redevelop the idea into a musical sound board instead. Within six months, the trio had composed the sounds and put them together with the animations, creating Patatap.

What I love most about this site is how it connects visual arts with music through user interaction. Without even realizing it, one can create a beautiful animation and simultaneously compose an equally beautiful song, all while happily tapping away on the keyboard. I really admire how they approached this intersection by focusing on user experience, aiming to create something that is easy-to-use and enjoyable. By creating a fun game for the general population to play, Patatap is able to bring art into a population that might not have otherwise been reached, suggesting a step towards familiarizing the general public with fine arts.

Above is one of the many musical creations that users of Patatap have created.

This video of the band Lullatone demonstrates their style, which heavily influenced Brandel when establishing the music for Patatap.