Author: kades@andrew.cmu.edu

KadeStewart-Project-07-Curves

sketch

//Kade Stewart
//Section B
//kades@andrew.cmu.edu
//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.

KadeStewart-LookingOutwards-07

Examples of the image that The Rhythm of Food can generate (Moritz Stefaner)

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

KadeStewart-Project-06-AbstractClock


sketch

//Kade Stewart
//Section B
//kades
//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.

KadeStewart-LookingOutwards-06

A graphic before (bottom) and after (top) random edits; Guillermo Daldovo, Bernard Arce, Sonia Figuera (2014)

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

KadeStewart-Project05-Wallpaper

sketch

//Kade Stewart
//Section B
//kades
//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.

KadeStewart-LookingOutwards-05

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.

Nuria Madrid

KadeStewart-Project04-StringArt

sketch

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.

KadeStewart-LookingOutwards-04

 

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

KadeStewart-Project03-DynamicDrawing

sketch

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);


	//head
	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);
	// //head
	// 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.

KadeStewart-LookingOutwards-03

Physical representations of different data sets by the Mediated Matter group

One of the projects being completed by the Mediated Matter group at MIT involves converting data sets into physical, 3-dimensional forms. This allows a person to utilize both visual and spatial perception skills to better understand the data being represented. Data visualization can be both interesting and informative in 2D, but bringing it to life via a new type of 3D printing is impressive and possibly a big leap forward for academics.

The special “algorithm” here is not as much digital as it is physical – the printing process involves different materials that are printed in “expected” places. This means that the physical manifestations of the data can have high accuracy of detail, especially in the color. This data-centered focus is important in that it makes us think about data in unique ways, something that I addressed in my last looking outwards post as both forward-thinking and effective.

Making Data Matter