susiek – Page 2 – [OLD FALL 2020] 15-104 • Introduction to Computing for Creative Practice

Looking Outwards 6

After briefly touching on Perlin noise in class, I was curious to explore more and see the applicability of it in a more creative sense and quickly found that it can also be applied as a computationally randomized art design.

To start, Perlin noise was actually originally created to add realistic randomness to visual renderings of elements such as fire, smoke, and water. The inventor, Ken Perlin, created it for use in Tron, and actually won an Academy Award for the discovery and application.

The algorithm itself aims to create smoother transitions between numbers by interpolating and returning random numbers in between them. This “noise” function can also be applied in both 2D and 3D, hence creating applicability with lines and modelled objects.

Some applications of Perlin noise can also go beyond the typical use, such as these 2D line art pieces by Holger Lippman, which simulates various landscape images based off of different Perlin noise-algorithms that are used.

artwork created by Holger Lippman using the Perlin algorithm.

Project 6: Abstract Clock

For this week’s project, I garnered inspiration from my current home desk set up, where you can often find my air pods, succulent, and phone playing music.

sketch Download

// Susie Kim
// susiek@andrew.cmu.edu
// Section A
// Project-06

function setup() {
    createCanvas(480, 380);
    background(244, 212, 212);
}

function draw() {
	// time variables
	var yr = year();
	var h = hour();
	var m = minute();
	var s = second();

	background(244, 212, 212);

	// iphone body
	fill(255);
	noStroke();
	rect(50, 40, 160, 305, 20);
	stroke(0);
	strokeWeight(0.2);
	fill(235);
	rect(57, 75, 147, 230);

	// time of day image
	if (h == 0 || h == 1 || h == 2 || h == 3 || h == 4 || h == 5 || h == 24) {
		// if between the hours of 12am and 5am, show night photo
		noStroke();
		fill(51, 83, 135);
		rect(77, 92, 105, 105);

		// moon
		fill(180);
		ellipse(140, 130, 35, 35);

		fill(130);
		ellipse(150, 132, 7, 7);
		ellipse(130, 130, 5, 5);
		ellipse(143, 121, 6, 6);
		ellipse(137, 139, 3, 3);

		// stars
		fill(255);
		ellipse(100, 110, 2, 10);
		ellipse(100, 110, 10, 2);
		ellipse(115, 150, 2, 8);
		ellipse(115, 150, 8, 2);
		ellipse(90, 160, 2, 12);
		ellipse(90, 160, 12, 2);
		ellipse(160, 100, 1, 7);
		ellipse(160, 100, 7, 1);
		ellipse(170, 155, 1, 7);
		ellipse(170, 155, 7, 1);

		// cloud 1
		ellipse(160, 175, 10, 10);
		ellipse(150, 170, 17, 17);
		ellipse(141, 173, 7, 7);
		ellipse(135, 175, 9, 9);
		rect(130, 171, 35, 10, 5);

		// cloud 2
		ellipse(110, 185, 8, 8);
		ellipse(105, 183, 5, 5);
		ellipse(101, 182, 7, 7);
		ellipse(97, 185, 6, 6);
		rect(93, 183, 20, 7, 4);

	} else if (h == 6 || h == 7 || h == 8 || h == 9 || h == 10 || h == 11) {
		// if between the hours of 6am and 11am, show dawn photo
		noStroke();
	    fill(255, 220, 131);
	    rect(77, 92, 105, 105);

	    // sun
	    fill(247, 167, 107, 100);
	    ellipse(115 , 160, 45, 45);
	    ellipse(115 , 160, 35, 35);
	    fill(247, 167, 107);
	    ellipse(115, 160, 25, 25);

	    // cloud 1
	    fill(255);
	    ellipse(165, 125, 10, 10);
		ellipse(155, 120, 17, 17);
		ellipse(146, 123, 7, 7);
		ellipse(140, 125, 9, 9);
		rect(135, 121, 35, 10, 5);

		// cloud 2
		ellipse(170, 175, 8, 8);
		ellipse(165, 173, 5, 5);
		ellipse(161, 172, 7, 7);
		ellipse(157, 175, 6, 6);
		rect(153, 173, 20, 7, 4);

		// cloud 3
		ellipse(100, 108, 12, 12);
		ellipse(92, 112, 9, 9);
		ellipse(108, 110, 7, 7);
		ellipse(115, 110, 10, 10);
		rect(87, 111, 35, 7, 4);

	} else if (h == 12 || h == 13 || h == 14 || h == 15 || h == 16 || h == 17) {
		// if between the hours of 12pm and 5pm, show day photo
		noStroke();
	    fill(179, 227, 250);
	    rect(77, 92, 105, 105);

	    // sun
	    fill(255, 220, 131, 100);
	    ellipse(130, 120, 45, 45);
	    ellipse(130, 120, 35, 35);
	    fill(255, 220, 131);
	    ellipse(130, 120, 25, 25);

	    // cloud 1
	    fill(255);
	    ellipse(100, 178, 12, 12);
		ellipse(92, 182, 9, 9);
		ellipse(108, 180, 7, 7);
		ellipse(115, 180, 10, 10);
		rect(87, 181, 35, 7, 4);

		// cloud 2
		ellipse(170, 165, 10, 10);
		ellipse(160, 160, 17, 17);
		ellipse(151, 163, 7, 7);
		ellipse(145, 165, 9, 9);
		rect(140, 161, 35, 10, 5);

	} else {
		// if between the hours of 6pm and 11pm, show dusk photo
		noStroke();
	    fill(108, 100, 173);
	    rect(77, 92, 105, 105);

	    // sun
	    fill(221, 216, 114, 100);
	    ellipse(150, 160, 40, 40);
	    ellipse(150, 160, 30, 30);
	    fill(221, 216, 114);
	    ellipse(150, 160, 20, 20);

	    // cloud 1
	    fill(255);
		ellipse(165, 115, 10, 10);
		ellipse(155, 110, 17, 17);
		ellipse(146, 113, 7, 7);
		ellipse(140, 115, 9, 9);
		rect(134, 111, 35, 10, 5);

		// cloud 2
		ellipse(110, 135, 8, 8);
		ellipse(105, 133, 5, 5);
		ellipse(101, 132, 7, 7);
		ellipse(97, 135, 6, 6);
		rect(93, 133, 20, 7, 4);s

		// cloud 3
		ellipse(100, 178, 12, 12);
		ellipse(92, 182, 9, 9);
		ellipse(108, 180, 7, 7);
		ellipse(115, 180, 10, 10);
		rect(87, 181, 35, 7, 4);

		// stars
		ellipse(115, 155, 2, 8);
		ellipse(115, 155, 8, 2);
		ellipse(100, 110, 2, 12);
		ellipse(100, 110, 12, 2);
		ellipse(140, 131, 1, 7);
		ellipse(140, 131, 7, 1);
	} 

	// minute line with marker
	stroke(0);
	strokeWeight(1);
	line(67, 215, 194, 215);
	fill(255);
	var mMapped = map(m, 1, 60, 67, 194);
	strokeWeight(.5);
	ellipse(mMapped, 215, 10, 10); // moving circle

	// seconds line with marker
	strokeWeight(1);
	line(67, 285, 194, 285);
	var sMapped = map(s, 1, 60, 67, 194);
	strokeWeight(.5);
	ellipse(sMapped, 285, 15, 15) // moving circle

	// show name of year on screen
	textSize(10);
	fill(0);
	text(yr + ' ~', 118, 235);

	// buttons and iphone details
	noStroke();
	fill(0);
	rect(125, 250, 3, 13); // pause button
	rect(132, 250, 3, 13);

	triangle(150, 250, 150, 263, 163, 257); // forward buttom
	triangle(156, 250, 156, 263, 168, 257); 

	triangle(104, 250, 104, 263, 92, 257); // backward buttom
	triangle(110, 250, 110, 263, 97, 257); 

	rect(115, 58, 30, 3); // top detail

	ellipse(105, 60, 6, 6); // top cameras
	ellipse(130, 50, 4, 4);

	noFill(); // home button
	stroke(0);
	strokeWeight(.5);
	ellipse(130, 325, 25, 25);

	// succulent pot
	fill(216, 186, 117);
	noStroke();
	circle(360, 285, 125, 125);
	fill(140, 122, 84);
	circle(360, 285, 100, 100);

    // succulent leaf # changes with hour, 12 leaves total
	if (h < 24 & h > 12) {
		h -= 12;
	}

    if (h == 0) {
	    h = 12;
    }
    
    // 8 big exterior leaves change
    for (var i = 0; i < h; i++) {
    	push();
    	translate(360, 285);
    	rotate(radians(45*i));
    	fill(139, 196, 118);
	    ellipse(0, 30, 25, 80);
	    pop();
    }

    // 4 interior leaves change
    for (var i = 8; i < h; i++) {
    	push();
    	translate(360, 285);
    	rotate(radians(90*i));
    	fill(174, 215, 152);
	    ellipse(0, 20, 15, 50);
	    pop();
    }

	// airpods case
	fill(255);
	push();
	rotate(radians(-20));
	rect(230, 160, 100, 107, 20);
	pop();
	strokeWeight(1);
	stroke(175);
	line(280, 100, 375, 65);

    // right airpod
    fill(255);
    noStroke();
	ellipse(435, 60, 30, 30);
	push();
	rotate(radians(30));
	rect(410, -170, 11, 45, 7);
	fill(175);
	ellipse(415, -128, 12, 8);
	fill(0);
	ellipse(404, -165, 10, 4);
	ellipse(396, -165, 3, 4);
	pop();

	// left airpod
	noStroke();
	ellipse(265, 180, 30, 30);
	push();
	rotate(radians(-30));
	rect(125, 285, 11, 45, 7);
	fill(175);
	ellipse(130, 325, 12, 9);
	fill(0);
	ellipse(142, 287, 10, 4);
	ellipse(150, 287, 3, 4);
	pop();
}

For the hour, I decided to use the number of leaves of the succulent to indicate the hour between 1 and 12. However, since there were only 12 leaves, and not 24, I gave context clues as to whether it was the am or pm of that hour using the picture on the phone.

Additionally, the phone indicates the year in text, and shows passage of minutes using the the top line and circular marker and passage of seconds using the bottom line and circular marker.

Here are some of the visual variations of my clock:

Lastly, here are some of my sketches, both from illustrator and my sketchbook!

illustrator sketch showing all 4 time of day options

Project 5: Wallpaper

For this week’s project, I decided to make a pattern off of 2 animals and the things that they eat! In this case, I chose a rabbit and a bear, and alternated the pattern in between the bigger animal face and smaller food item to create a rhythm both vertically and horizontally that alternates between big and small.

sketch Download

// Susie Kim, Section A
// susiek@andrew.cmu.edu
// Assignment-05-A

function setup() {
    createCanvas(600, 600);
    background(163, 185, 216);
    noLoop();
}

function draw() {
	background(163, 185, 216);

	// bunnies
	for(var x = 25; x <= 600; x+= 150) {
		for(var y = 0; y <= 600; y+= 200){
			push();
			translate(x, y);
			bunny(x,y);
			pop();
		}
	}

    // carrots
	for(var x = -50; x <= 600; x+= 150) {
		for(var y = 0; y <= 600; y+= 200){
			push();
			translate(x, y);
			carrot(x,y);
			pop();
		}
	}

    // bears
	for(var x = -50; x <= 600; x+= 150) {
		for(var y = 100; y <= 600; y+= 200){
			push();
			translate(x, y);
			bear(x,y);
			pop();
		}
	}

    //fishes
	for(var x = 25; x <= 600; x+= 150) {
		for(var y = 100; y <= 600; y+= 200){
			push();
			translate(x, y);
			fish(x,y);
			pop();
		}
	}
}

function bunny(x,y) {
	// head
	noStroke();
	fill(255);
	ellipse(50, 65, 69, 50); 

	// ears
	ellipse(30, 37, 25, 55); 
	ellipse(70, 33, 23, 55);

	// eyes
	fill(51, 51, 51);
	ellipse(38, 60, 5, 5); 
	ellipse(62, 60, 5, 5);

    //  nose
    ellipse(50, 70, 6, 6) 

	// cheeks
	fill(246, 202, 201);
	ellipse(30, 69, 13, 8); 
	ellipse(70, 69, 13, 8);

	// mouth
	strokeWeight(2);
	noFill();
	stroke(51, 51, 51); 
	curve(50, 30, 50, 70, 40, 75, 40, 60);
	curve(50, 30, 50, 70, 60, 75, 60, 60);
}

function bear(x,y) {
	// head
	noStroke();
	fill(225, 189, 152);
	ellipse(50, 60, 68, 58);

	// ears
	ellipse(25, 35, 24, 24); 
	ellipse(75, 35, 26, 29);

	// cheeks
	fill(239, 163, 163);
	ellipse(30, 65, 13, 8); 
	ellipse(70, 65, 13, 8);

	// eyes
	fill(51, 51, 51);
	ellipse(37, 55, 5, 5); 
	ellipse(63, 55, 5, 5);

    // nose
    ellipse(50, 65, 6, 6); 

    // mouth
    strokeWeight(2);
	noFill();
	stroke(51, 51, 51);
    line(50, 65, 50, 72); 
	curve(45, 60, 45, 71, 55, 71, 55, 60);
}

function carrot(x,y) {
	//leaf1
	noStroke();
	fill(165, 209, 117); 
	ellipse(50, 38, 9, 20); 
	
	// leaf2
	push();
	translate(57, 38);
	rotate(radians(30));
	ellipse(0, 0, 9, 23);
	pop();

	//leaf3
	push(); 
	translate(43, 38);
	rotate(radians(-30));
	ellipse(0, 0, 9, 23);
	pop();


	// carrot body
	fill(253, 195, 117);
	ellipse(50, 60, 17, 35); 
}

function fish(x,y) {
	// body
	noStroke();
	fill(74, 98, 168); 
	ellipse(46, 50, 38, 18); 
	push();

    // back fin 1
    translate(63, 54); 
    rotate(radians(17));
	ellipse(0, 0, 23, 9);
	pop();

    // back fin 2
	push();
	translate(63, 46); 
    rotate(radians(-17));
	ellipse(0, 0, 23, 9);
	pop();

    // eye
	fill(0); 
	ellipse(37, 47, 3, 3); 

    // side fin
	fill(58, 78, 155); 
	ellipse(48, 53, 15, 7)
}

To start, I “sketched” out each animal, as well as the pattern, in illustrator, and coded from there:

Looking Outwards 5

After further researching Andy Lomas to get a better picture of 3d computer graphics, I came across his project “Cellular Forms”, created around 6 years ago. This project aims to mimic and simulate the visuals of cellular growth through algorithms which act as a rule set for the cell production. For example, one of the parameters that Lomas sets on his simulation is the nutrient level, which triggers production of splitting cells.

While this could be taken very literally as the visuality of how cells are produced, what interested me about this project was the capacity it had to be further applied onto other projects. Since the project leaves the production of cells up to the simulation and parameter set, there is hypothetically an extremely large number of different outputs that can be produced: each in which can be related to other organic forms, such as coral, algae, or organs.

Project 4: String Art

sketch Download

// Susie Kim
// Section A

function setup() {
    createCanvas(300, 400);
    background(235, 215, 192);
}

function draw() {
	background(235, 215, 192);
	for (var i = 0; i <= 100; i+= 5) {

		// back mountain range lines
		strokeWeight(1);
		stroke(173, 178, 185);
		line(0, 100 + i*2, i*5, 120 + i*4); // left set
		line(300, 120 + i, i*3, 200 + i*3); // right set

		// water lines
		stroke(81, 99, 174);
		line(300, 220 + i*4, i*3, 220 + i*4);

		// water lines darker
		strokeWeight(0.5);
		stroke(27, 50, 148);
		line(300, 265 + i*5, i*4, 265 + i*5);

        // black forefront lines
		stroke(0);
		strokeWeight(1);
		line(0, 260 + i*2, i*9, 280 + i*4); // left set
		strokeWeight(1.5);
		line(300, 330 + i*2, i*0.1, 360 + i*3); // darker right set

        // sun reflection
		stroke(255, 133, 71);
		strokeWeight(1);
		noFill();
		ellipse(100, 100 + i*2, 60-i, 60-i);

		// birbs
		stroke(50);
		strokeWeight(0.5);
		ellipse(200+i*2, 100 - i*3, 30-i, 30-i);
		ellipse(200+i*2, 40 - i*4, 20-i, 20-i);

	}
}

For this week’s project, I tried to take the painting pictured below and convert it into an abstract string art design. I had a lot of fun playing with the shapes both lines and ellipses could create!

Looking Outwards 4

Project Name: Sorting

Created by Ren Yuan in 2018, Sorting attempts to transform data into an auditory system through various algorithmic methods of sorting the set. Yuan has created 7 different sorting algorithms, which allows the production of a different set of sounds each time even though the same data set could be run through each sorting system. The auditory and sorting output is also visualized through circular webs and shaded sectors that fluctuate depending on how the data is sorted, compared, swapped, and historically related to other data sets. Yuan describes 7 different algorithms that he uses to sort a data set: “insertion sort, shell sort, bubble sort, quick sort, selection sort, heap sort, [and] merge sort”. Each visual and auditory output created depends on the data inputted, the algorithm used, as well as the random initial condition that is created. However, Yuan does create an initial color palette and web base through the use of the aforementioned circular shape, which helps to define some visual boundaries in which the final piece is limited to.

Project 3: Dynamic Drawing

For this project, I wanted to portray the vibrancy and health of a flower depending on the amount of water that is in a vase. The more water there is in the vase (controlled by your mouse’s Y value, the bigger and more colorful the flower appears to be!

sketch Download

// Susie Kim
// Section A


function setup() {
    createCanvas(450, 600);
	background(255, 218, 185);
}

function draw() {
	// define variables
	var setVal = mouseY/6;
	var waterOpacity = mouseY/13;
	var leafVal = mouseY/15;
	var flowerVal = mouseY/20;
	if (setVal >= 150) {
		setVal = 150;
	}
	background(255, 218, 185);
	//table
	fill(255, 178, 102);
	rect(0, 525, 500, 100);
	// vase water
	fill(102, 178, 255, 150 - waterOpacity);
	noStroke();
	rect(150, 350 + setVal, 150, 175 - setVal, 20, 20);
	// flower stem that changes color
	stroke(0, 204- setVal, 0);
	strokeWeight(6);
	line(225, 200, 225, 520);
	// vase itself
	strokeWeight(4);
	stroke(51);
	noFill();
	rect(150, 275, 150, 250, 20, 20);
	// flower!
		// flower petals
    noStroke()
	fill(255 - setVal, 153 - setVal, 204 - setVal);
	ellipse(185, 170, 55, 55);
	ellipse(265, 170, 55, 55);
	ellipse(225, 140, 55, 55);
	ellipse(205, 215, 55, 55);
	ellipse(245, 215, 55, 55);
	    // flower center that expands
	fill(255 - setVal, 255 - setVal, 0);
	if(flowerVal >= 25) {
		flowerVal = 25;
	}
	ellipse(225, 180, 65 - flowerVal, 65 - flowerVal);
	    // leaves that grow
	fill(0, 204- setVal,0);
	if (leafVal >= 25) {
	    leafVal = 25;
	}
	ellipse(250, 325, 70 - leafVal, 40 - leafVal);
	ellipse(200, 325, 70 - leafVal, 40 - leafVal);
}

Looking Outwards 3

Project: Cloud Village

Creator: Philip F. Yuan and team

Year of Creation: 2018 for the Venice Architecture Biennale

Cloud Village is an abstract architectural piece aimed at representing the metaphor between private and public spaces/realms in China. The project itself contains four separate open room-like spaces, with a twisting roof connecting the spaces to create a curved u-shaped form from top-down. The materiality itself is a permeable recycled plastic structure, with robotic fabrication being used at every step to pre-fabricate each part before it was assembled on site. The architect also used a “topological optimization algorithm” to calculate structural performances within the curved roof. What I admire about this project is that each part of it–from the material choice, to the form or method of fabrication, all tied back to the architect’s intention and theme of the project. While the recycled plastic material allowed for the creation of a permeable material in the fabrication process, it also tied back to the environmental issues surrounding China and approached architectural building materials from a critical standpoint.

Project 2: Variable Face

For this project, I was inspired by a cute sketch of a tomato (reference at bottom) that I found, and wanted to replicate the same idea onto an apple/tomato that looks more like one or the other depending on the random regeneration after clicking.

sketch Download

// Susie Kim
// Section A
var BodyHeight = 265;
var BodyWidth = 175;
var leafLength = 30;
var leafWidth = 60;
var pupilSize = 35;
var mouthLength = 20;
var stemLength = 150;
var stemThickness = 15;
var nose = 10;
var eyebrowHeight = 300
function setup() {
    createCanvas(480,640);
}

function draw() {
	background(255,218,185);
	// draw  stem
	stroke(0, 139, 0);
	strokeWeight(stemThickness);
	line(230, 320, 230, stemLength);
	// cheeks
	noStroke();
	fill(255,8,0);
	// draw left cheek
	ellipse(180, 320, BodyWidth, BodyHeight);
	// draw right cheek
	ellipse(270, 320, BodyWidth, BodyHeight);
	// leaves
	fill(0,139,0);
	ellipse(200,170, leafWidth, leafLength);
	ellipse(260,160, leafWidth, leafLength);
	// eyes, outer
	fill(255);
	ellipse(170,330,55);
	ellipse(280,330,55);
	// eyes, pupil
	fill (0);
	ellipse(170,335, pupilSize);
	ellipse(280,335, pupilSize);
	// nose:
	fill (230,230,250)
	ellipse(225,365,nose)
	// mouth:
	strokeWeight(3);
	stroke(0);
	line(215, 390, 235, 390);
	// eyebrows
	line(160,eyebrowHeight, 180, eyebrowHeight);
	line(270,eyebrowHeight, 290, eyebrowHeight);
}


function mousePressed() {
    // when the user clicks, the following variables are reassigned
    // randomly depending on the assigned paramenets.
    BodyHeight = random(265, 305);
    BodyWidth = random(175, 225);
    pupilSize = random(25, 45);
    stemLength = random(90, 140);
    stemThickness = random(8, 21);
    leafLength = random(25, 50);
    leafWidth = random(70, 80);
    nose = random(9,20);
    eyebrowHeight = random(250,300)
}

Looking Outwards: 2

Artist: LIA

Project: Four Seasons – Spring

While LIA is typically known for her monochromatic works, she created this ‘Spring’ work as a part of her 4 part seasons series, and uses colors and generative forms to simulate abstract buds that bloom into new growth in the Spring. As her most colorful work created in over a decade, the artist transforms her ideas and themes of spring into a computationally produced work containing repeating and moving forms. These abstract buds are produced randomly all across the “canvas”, with the color gradients and buds also randomly overlapping on top of each other. Each bud appears on the page, then goes through the movement of “budding”, which eventually ends and triggers another bud to appear somewhere else on the page, forming a never ending loop of randomly produced colors and shapes on the canvas.