``````//Kade Stewart
//Section B
//Project-07

function setup() {
createCanvas(480, 480);
}

var t = 10;
var x;
var y;
var col = 0;

function mouseClicked() {
//when the mouse is clicked, change the color scheme to 1 of 2 options
col = (1 + col) % 2;
}

function draw() {

//fills the background a diff color depending on the state
if (col == 0) {
background(0, 59, 26);
} else {
background(18, 0, 58);
}

//sets variables in the equations to the mouseX and mouseY
var a = mouseX;

noStroke();
fill(0);

//this makes the coordinate reference frame in the middle of the screen
push();
translate(width/2, height/2);

for (j = 0; j < 40; j++) {
beginShape();
noFill();

if (col == 0) {
//uses the green color scheme
if (j % 2 == 0) {
stroke(255, 255, 255);
} else {
stroke(190, 249, 156);
}
} else {
//uses the blue and orange color scheme
if (j % 2 == 0) {
stroke(245, 134, 124);
} else {
stroke(253, 218, 183);
}
}

//draws each astroid curve with a number of points determined by the mouseY
for (i = 0; i < mouseY; i++) {
x = (a - (width/2)*j) * cos(i) * cos(i) * cos(i);
y = (a - (width/2)*j) * sin(i) * sin(i) * sin(i);
//places the point to be drawn to
vertex(x,y);
}
endShape();
}
pop();

}``````

I drew the astroid curve multiple times so that they could seemingly fold in and out of each other. This is manipulated by where the mouse is on the horizontal axis. I initially had the mouse’s y-height affecting the center of the curves, but it gave the user too much to vary in the curves. Now the mouse’s y-height affects the fidelity of each curve. Furthermore, clicking changes the color scheme between 2 options, just for some extra fun.

This project, The Rhythm of Food, is a visualization of google searches of food. The circle, going 360 degrees, maps to each month of the year, the color of the block represents a specific year, and the radius of the block is the number of google searches. So the farther the block is, the larger the number of google searches of that particular food in that month of the specified year. This leads to patterns that are easy to spot – for example, summer fruits are more often searched in, you guessed it, the summer.

This project is clean, beautiful, and informative. It also captures big patterns and small idiosyncrasies. “Sour Cherry” is not only a fruit, but also a song by The Kills that was popular in February of 2008. This small detail is captured by this visualization, illustrating how the project does an amazing job of capturing both the large and the small, and does so in a way that is easy to understand.

The Rhythm of Food

``````//Kade Stewart
//Section B
//Project-05

function setup() {
createCanvas(480, 480);
background(255);

noStroke();
}

var m;
var sec;
var hr;
var min;

function draw() {
background(255,255,153);
sec = second();
min = minute();
if ((min / 10) < 1) {
min = "0" + min;
}
hr = hour() % 12;
if (hr == 0) {
hr = 12;
}

noStroke();
fill(30,144,255);
textSize(45);
text(min, width/2 - 25, height - 5);
fill(255,255,153);
noStroke();
rect(width/2 - 30, height - 60 - ((height/60)*sec), 60, (hr * 20) + 40);

//draw the waterlines for each hour
for (y=0; y < hr; y++) {
//this draws the entire length of the window
for (i=0; i < width; i++) {
noStroke();
if (y % 2 == 0) {
fill(255); 			//draw in white and blue, alternating every line
} else {
fill(230, 230, 255);
}
//the line is composed of circles
ellipse(i, ((height + (y*20)) - (height/60)*sec) + sin(i/6), 6, 6);
}
}

//draw the lines of the face
noFill();
stroke(0);
strokeWeight(3);
arc(width/2, height/2 + 60, 30, 20, PI/2, (5/4) * PI);
arc(width/2, height/2 + 40, 30, 30, (3/4) * PI, PI);
line(width/2 - 8, height/2 + 52, width/2 + 2, height/2 + 56);
arc(width/2, height/2 + 64, 16, 16, (3/2) * PI, (7/4) * PI);
arc(width/2 - 15, height/2 + 25, 30, 30, 0, PI/2);
arc(width/2, height/2, 50, 50, PI/2, (3/2) * PI);
arc(width/2, height/2 - 55, 10, 60, (3/2) * PI, PI/2);

//draw the tear
push();
translate(width/2, height/2 - 25);

m = floor(millis()) % 1000;
m = map(m, 0, 1000, 0, height - (height/2 - 25));

fill(30,144,255);
ellipse(0, m, 12, 12 + m * .025);

pop();

}``````

I was listening to my sad song playlist, and to me it seemed that tears were pretty rhythmic. I used them to create the second “hand”, while creating the illusion that the tears were filling up the page with the waterlines. Each line (technically a sine wave) represents an hour on the clock. The minutes are simply show, but only when the water rises above the bottom of the page.

This is a project created for the REYKJAVIK VISUAL MUSIC PUNTOy RAYA FESTIVAL 2014, meant to capture the visual identity of the festival. The dot and line graphics were processed with graphical glitches, filmed as they were projected on the wall, printed and then re-scanned to distort the images that make up the motion graphics. The description mentions that this distortion created color and texture.

I love this project because the resulting message of the project is that randomness can create a better product, basically that it can help the whole be greater than the sum of its parts. Deterministic methods are nice because we can reliably get a product we want, but randomness allows us to explore beyond what we expect.

VILLA by Malevo

``````//Kade Stewart
//Section B
//Project-05

function setup() {
createCanvas(480, 480);
background(128);

noStroke();
}

function draw() {

var dim = 8;
for (x = 0; x < dim; x++) {
for (y = 0; y < dim; y++) {
tile(x * width/dim, y * height/dim, width/dim, height/dim);
}
}

}

function tile(x, y, w, h) {
fill(14,174,158); //light blue
triangle(x, y, x, y + h, x + w/2, y + h/2);

fill(255,209,80); //orange
triangle(x + w, y, x + w, y + h, x + w/2, y + h/2);

fill(12,18,111); //dark blue
triangle(x, y, x + w, y, x + w/2, y + h/2);

fill(240,240,240); //off-white
triangle(x, y + h, x + w, y + h, x + w/2, y + h/2);

}``````

My wallpaper is meant to be viewed in a number of different ways. The tiles could be seen as squares of four triangles, as triangles made up of other triangles, or as a pyramid dark blue sky, yellow-orange side in the light, lighter blue in the shade, white ground). I was inspired by my favorite elementary school playtime activity – mosaic tiles.

The Barcelona-based artist Nuria creates 3d graphics for various publications and organizations. The top graphic was created for Ueno (a design company), and the bottom graphic was created for a workshop on Domestika, a website that hosts courses for creative practices. Their work utilizes a computer program that can arrange what appears to be glossy, “sticky” objects on a plane.

I love that the illustrations are always so lifelike. The pieces that Nuria creates always look like they are photos taken in a studio, even though they are really just virtual objects. The attention to detail to make the illustrations feel cohesive and real makes the 2d art feel 3d.

``````function setup() {
createCanvas(400, 300);
background(255);
}

var x1 = 0;
var y1 = 0;
var x2 = 0;
var y2 = 300;
var lim = 101;
var quality = 1;

function draw() {

background(255);

//change the number of lines (the quality of the curves)
lim += quality;
if (lim == 100) {
quality = -quality;
} else if (lim == 150) {
quality = -quality;
}
//draw 8 curves
for (c = 1; c <= 8; c++) {
//draw "lim" number of lines in each curve
for (i=0; i<=lim; i++) {
x1 = (width/lim) * i;
x2 = (width/lim) * (lim - i);
y1 = x2;
y2 = 50 * c;
//make the curves different shades of gray
stroke( (255/9) * c );
line(x1,y1,x2,y2);
}

}
}``````

String art is really hard, I literally could not figure out how my curves were going to look. I ended up choosing this one because it was visually appealing and seemed interesting.

Apparatum, a project created by panGenerator, is an “apparatus” that allows a user to create analog sounds via a digital interface. It’s a callback to one of the first studios to create analog sound, the Polish Radio Experimental Studio. With a description in words, the machine sounds completely unattractive; however, seeing Apparatum and hearing the sounds it produces will give you a completely different sense. The appearance is interesting, the interface is simple (albeit a little abstract), and the sounds are amazingly diverse.

The generation of the sounds, or rather, the movement of the parts in the apparatus are controlled in length by choosing the corresponding widget and elongating its width. The algorithms for this would probably track the width of the widget and translate that to a certain length of time to move the part associated with the widget. While not the most advanced, even useful, application, there is a clear and close relationship between the user’s digital input and Apparatum’s analog output.

Apparatum Project

``````function setup() {
createCanvas(640, 480);
angleMode(DEGREES);
rectMode(CENTER);
}

function draw() {
background(64, 85, 147);

arrow();

cupid();

love();

animation();

}

function arrow() {
noStroke();

//this makes the arrow move as you drag your mouse to the left
if (mouseX <= 500) {
push();
var pty = 480;
var ptx = 100;
translate(ptx, pty);
var arrowX = mouseX - 167;
if (mouseX < 167) {
arrowX = 0; 	//only move the arrow when the cursor is beyond the bow
} else if (mouseX > 500) {
arrowX = 500 - 167; //don't move the arrow after it's landed
}
rotate(arrowX/5);
fill(255); //arrow color
rect(167 - ptx, 137 - pty, 55, 5, 2);

//arrowhead (or a sideways heart 😉
fill(217, 158, 196);
push();
translate(167 + 55/2 - ptx, 140 - pty);
rotate(90 - 25.74);
ellipse(0, 0, 13, 23);
pop();

push();
translate(167 + 55/2 - ptx, 134 - pty);
rotate(90 + 25.74);
ellipse(0, 0, 13, 23);
pop();

pop();
}

}

//draws cupid in the top left corner
function cupid() {
//wings
noStroke();
fill(254, 245, 231); //wing color
ellipse(73, 153, 39, 39);

push();
translate(48, 160);
rotate(-320.6);
ellipse(0, 0, 16, 47);
pop();

push();
translate(60, 170);
rotate(-334.96);
ellipse(0, 0, 16, 47);
pop();

push();
translate(74, 172);
rotate(-347.38);
ellipse(0, 0, 16, 47);
pop();

//bow
stroke(169, 124, 80);
strokeWeight(4);
noFill();
curve(0, 0, 160, 106, 160, 168, 160, 168);

noStroke();
fill(255, 224, 189); //skin color
ellipse(99, 101, 88, 88);

//body
ellipse(110, 160, 59, 59);

//hand
ellipse(167, 137, 19, 19);

//cheeks
fill(249, 191, 203); //cheek color
ellipse(103, 124, 8, 8);
ellipse(139, 96, 8, 8);

//diaper
fill(254, 245, 231); //diaper color
arc(110, 160, 59, 59, 0, 180);
}

//draws the two love birds
function love() {
fill(0)
noStroke();
ellipse(440, 440, 31, 31);
triangle(475, 450, 507, 460, 495, 423);
fill(255, 224, 189);
ellipse(430, 411, 38, 38);
ellipse(501, 411, 38, 38);

//uncomment for a surprise!
// noStroke();
// fill(255, 255, 0);
// //body
// rect(width/2, height/2, 75, 45, 5, 20, 35, 35);
// //neck
// rect(width/2 + 25, height/2 - 60/2, 25, 45);
// rect(width/2 + 40, height/2 - 60, 55, 40, 20, 30, 5, 10);

// //eyes
// fill(0);
// rect(width/2 + 50, height/2 - 60, 5, 5, 5)

// //mouth
// fill(255, 165, 0);
// rect(width/2 + 75, height/2 - 47, 30, 15, 5, 10, 15, 5)
// //legs
// rect(width/2, height/2 + 35, 8, 25, 10);
// rect(width/2 + 3, height/2 + 45, 15, 8, 10);

//draws the hearts as you move your mouse to the right
for (i = 540; i <= mouseX; i += 10) {
if (mouseX < width) {
//alternates which side the hearts are drawn on
if ((i/10)%2 == 0) {
x = 433;
} else {
x = 506;
}

fill(217, 158, 196);
noStroke();
push();
translate(x - 4, 370 - 2*(i - 540));
rotate(150);
ellipse(0, 0, 13, 23);
pop();

push();
translate(x + 4, 370 - 2*(i - 540));
rotate(30);
ellipse(0, 0, 13, 23);
pop();
}

}

}

//controller of the animation that happens when the arrow makes the two fall in love
function animation() {
var lineLength = 1
//the first part grows the burst lines, the second part shrinks the burst lines
if (mouseX > 500 & mouseX <= 520) {
lineLength = (mouseX - 500) * 2;
noFill();
stroke(253, 253, 150);
strokeWeight(4);
for (i = 1; i <= 16; i++) {
line(460 + (lineLength * cos((360/16)*i)),
440 + (lineLength * sin((360/16)*i)),
460, 440);
}
} else if (mouseX > 520 & mouseX < 540) {
lineLength = (540 - mouseX) * 2;
noFill();
stroke(253, 253, 150);
strokeWeight(4);
for (i = 1; i <= 16; i++) {
line(460 + (lineLength * cos((360/16)*i)),
440 + (lineLength * sin((360/16)*i)),
460, 440);
}
}
}``````

Love is cute and I didn’t have great ideas for my project, so I decided to show how love REALLY works.