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

Project 06 – Abstract Clock

For my abstract clock, I chose to create an illustration of chickens in honor of a bunch of chickens I saw sitting in a pine tree the other day. I had a lot of trouble with this project because I’m still not very good at using arrays and loops yet, but I think the end result is pretty cute.

Random pieces of corn sprinkle per second.
The eating chicken moves every second and crosses the screen every minute.
The standing chicken moves every minute and crosses the screen every hour.
The background gets darker/more purple every hour into the night and lighter/more green every hour into the day.

Maggie – Abstract Clock

//Maggie Ma
//Section D

var x=0; //x position of walking chicken
var y=140; //y position of walking chicken
var eaty=40; //y position of eating chicken
var h; //hours
var m; //minutes
var s; //seconds

function setup() {
    createCanvas(480, 480);
    noStroke();
    frameRate(1);
}

function draw() {
	
	h=hour();
	m=minute();
	s=second();

	//background changes color every hour and gets darker at night
	if(h<12) {
		background(80,20*h,50);
	} else {
		background(80,255-20*(h-12),50);
	}
	//corn that don't move
	fill(255,221,21);
	ellipse(115,376,8);
	ellipse(280,421,8);
	ellipse(422,359,8);
	ellipse(138,362,8);
	ellipse(73,301,8);
	ellipse(108,433,8);

	//chicken standing walks across screen every hour
	push();
	translate(map(m,0,60,-80,width+50), y);
	WalkingChicken();
	pop();

	//pieces of corn pop up every second
	fill(255,221,21);
	ellipse(random(3,477),random(250,477),8);
	ellipse(random(3,477),random(250,477),8);
	ellipse(random(3,477),random(250,477),8);
	ellipse(random(3,477),random(250,477),8);
	ellipse(random(3,477),random(250,477),8);

	//chicken eating walks across screen every minute
	push();
	translate(map(-s, 0,20,200,width-70), eaty);
	EatingChicken();
	pop();
}

function EatingChicken(x,y) {
	push();
	translate(x,y);
	//beak
	fill(254,183,20);
	arc(248,354,35.434,36.324,radians(150),radians(310),CHORD);
	arc(245,350,20.866,27.618,radians(-90),radians(100),CHORD);
	//feet
	stroke(254,183,20);
	strokeWeight(4);
	line(362,334,352,361);
	line(379,327,366,361);
	line(331,361,381,361);
	//crown
	noStroke();
	fill(198,56,68);
	arc(228,296,59,59.358,radians(-4),radians(150),CHORD);
	arc(241,295,30.434,33,radians(220),radians(400), CHORD);
	arc(252,290,30.434,33,radians(-90),radians(90),CHORD);
	//back tail wing
	fill(50);
	arc(359,167,101.194,111.382,radians(90),radians(270),CHORD);
	arc(368,311,43.28,42.284,radians(-40),radians(160),CHORD);
	//body
	fill(245); 
	arc(297,247,213,199,radians(320),radians(130),CHORD);
	circle(250,335,40);
	//front wing
	fill(50);
	arc(320,253,110.751,111.427,radians(320),radians(130),CHORD);
	//front tail wing
	fill(245);
	arc(391,176,98.952,95.477, radians(135),radians(-45),CHORD);
	arc(353,320,43.299,45.877,radians(-20),radians(160),CHORD);
	triangle(264,349,264,334,288,341);
	//gobbler thing
	fill(198,56,68);
	ellipse(273,353,15.903,15.903);
	triangle(252,354,271,361,271,345);
	//eye
	fill(0);
	circle(244,347,4.771);
	pop();
}

function WalkingChicken(x,y) {
	push();
	translate(x,y);
	//crown
	fill(198,56,68);
	arc(34,-105,46,43,radians(-4),radians(150),CHORD);
	arc(29,-93,40,36,radians(100),radians(-80), CHORD);
	arc(19,-95,40,37,radians(45),radians(225),CHORD);
	//beak
	fill(254,183,20);
	arc(44,-61,30.1,26.455,radians(180),radians(360),CHORD);
	arc(39,-64,30.1,16,radians(0),radians(180),CHORD);
	//feet
	stroke(254,183,20);
	strokeWeight(4);
	line(0,90,0,134);
	line(-12,134,16,134);
	line(15,78,44,78);
	line(44,78,45,100);
	line(45,100,32,109);
	line(32,109,25,103);
	//back tail
	noStroke();
	fill(231,231,233);
	arc(-65,-19,105,102.244,radians(225),radians(405),CHORD);
	//body
	fill(209,210,212);
	arc(0,0,156,163,radians(0),radians(180),CHORD); //234,229
	arc(2,6,151,150, radians(-90),radians(90),CHORD);
	rect(2,-88,45,30,10);
	arc(0,76,44,40,radians(-20),radians(190),CHORD);
	//tail
	arc(-79,6,95.1,91.244,radians(180),radians(360),CHORD);
	//front wing
	fill(231,231,233);
	arc(-3,12,102,102.244,radians(0), radians(180),CHORD);
	//gobbler
	fill(198,56,68);
	ellipse(44,-44,16,16);
	triangle(36,-43,43,-64,52,-43);
	//eye
	fill(0);
	ellipse(39,-69,4.771,4.771);
	pop();
}

To start, I created some sketches on paper, then created my chickens in Illustrator.

Left: My initial sketches
Right: My vector illustrations in Illustrator

11:30 PM : The background is a dark purple.

10:10 AM: The background is a bright green.

9:42 PM: The background is a muted dark green.

LO 6 – Randomness in Computational Art

Randomness in Time

Daniel Kim (2015)

Daniel Kim’s Randomness in Time is a featured project from RISD’s spring Coding Architecture course taught by Carl Lostritto. The artwork has an array of random numbers on the left side along with a spider web of randomly interconnected lines on the right side. Kim explains that the project examines “data from the running time of a particular algorithm.” This running time data is then stored, placed in a list, then evaluated. As the algorithm continues to run, the values deviate further and further away from the initial starting point, thereby creating more randomness and unpredictability. I found this piece particularly interesting because the idea of using an algorithm to create randomness seems paradoxical, and begs the question if the values generated can truly be considered “random.” It also makes me wonder if it is possible to create truly “random” computational art; it seems as if there always needs to be a set of rules, restrictions, algorithms, etc. to create the starting foundation for the piece.

Project 05 – Wallpaper

For my wallpaper project, I chose to draw a pattern of a hummingbird and a little brown bird. I also included some small flowers as accent designs in between the birds. I had the most difficulty trying to figure out the start and end angles of all the semicircles for the birds’ bodies and wings.

Maggie – Wallpaper

//Maggie Ma
//Section D
var birdWidth = 148; //spacing columns
var birdHeight = 111; //spacing rows

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

function draw() {
	background(246,247,197);

	//first column
	for(var y=-50; y<=height-50; y+=1.25*birdHeight) {
		for(var x=-50; x<=width-50; x+=1.25*birdWidth){
			hummingbird(x,y);
		}
	}

	//second column
	for(var y=25; y<=height; y+=1.25* birdHeight) {
		for(var x=30;x<=width-50;x+=1.25* birdWidth) {
			brownbird(x,y);
		}
	}
}

function hummingbird(x,y) {
	push();
	translate(x,y);
	noStroke();
	//beak
	fill(0);
	triangle(99,56, 99,58, 132,56);
	//tail
	fill(125,173,141);
	quad(24,103,26,106,50,90,45,87);
	//body
	fill(125,173,141);
	arc(65,64,69,67, radians(320),radians(130),CHORD);
	fill(246,247,197);
	rect(72.112,31.473,33.75,25.133);
	//light wing back
	fill(167,195,172);
	arc(64,52, 29,31,radians(270),radians(90));
	//head
	fill(125,173,141);
	ellipse(87,58,23,23);
	//wing light
	fill(167,195,172);
	arc(57,72, 44,46,radians(320),radians(130),CHORD);
	//wing dark
	fill(125,173,141);
	arc(59,70,42,41,radians(320),radians(130),CHORD);
	arc(52,60,29,31,radians(25),radians(205), CHORD);
	//eye
	fill(0);
	stroke(255);
	circle(93,58,2.5);
	//decor
	noStroke();
	fill(255,183,0);
	circle(71,0,6);
	circle(71,4,6);
	circle(76,0,6);
	circle(76,4,6);
	pop();
}

function brownbird(x,y) {
	push();
	translate(x,y);
	noStroke();
	//tail
	fill(210,118,53);
	quad(35,80,51,71,53,75,37,84);
	//beak
	fill(0);
	triangle(104,39,104,42,114,41);
	//feet
	fill(114,74,26);
	rect(79,79,2.3,8.5);
	rect(85,75,2.3,13);
	//body
	fill(220,230,229);
	arc(71,46,71,68,radians(320),radians(130),CHORD);
	fill(246,247,197);
	rect(75.783,11,39.484,29.403);
	//head
	fill(114,74,26);
	arc(91,45,31,34,PI,0,CHORD);
	//wing dark
	triangle(46,70,64,52,77,70);
	circle(77,57,26);
	//wing light
	fill(210,118,53);
	triangle(47,65,71,65,62,51);
	ellipse(72,55,22,19);
	fill(246,247,197);
	quad(31,72,31.196,33.844,76,43,46,72);
	//eye light
	fill(210,118,53);
	ellipse(100,40,7,5.85);
	//eye black
	fill(0);
	ellipse(102,40,2.94);
	//decor
	noStroke();
	fill(62,118,99);
	circle(74,0,6);
	circle(74,4,6);
	circle(79,0,6);
	circle(79,4,6);
	pop();
}

My original bird drawings in Illustrator:

LO 5 – 3D Computer Graphics

https://zigorsamaniego.net/

Amigos Project

Zigor Samaniego

The artist I chose to examine for this week’s Looking Outwards is Zigor Samaniego, specifically the Amigos Project series. I was first drawn to the absolutely adorable monsters and how “real” they looked, especially the texture—some are fuzzy, some are porous, and some have a shiny gleam as if made of glossy plastic. Samaniego also creates short animations and films of these monsters, and has amassed a large Instagram following for his vibrant and fun characters. My favorite monster is the little red ball wrapped in a jelly coating. I’m really fascinated by how 3D renderers create textures, shadows, and highlights in software such as Cinema 4D to make objects seem as if they exist in the real world.

My favorite monster—it reminds me of a little jelly donut.

Project 4 – String Art

I had a lot of fun changing the colors and locations of the lines based on mouse movement. It was also cool to see the strings and colors overlap and interact together.

Maggie String Art

//Maggie Ma
//Section D

var dx1;
var dy1;
var dx2;
var dy2;
var numLines =100;

function setup() {
    createCanvas(400, 500);
    background(200);
    line(0, 0, 0, 400);
    line(0, 400, 0, 500);
    dx1 = (0)/numLines;
    dy1 = (500-0)/numLines;
    dx2 = (400-0)/numLines;
    dy2 = (500-500)/numLines;
}

function draw() {
	background(mouseX,mouseY,100); //colorful background changes w/ mouse
	strokeWeight(.75);

    var x1 = 0;
    var y1 = 0;
    var x2 = 400;
    var y2 = 400;
    for (var i = 0; i <= numLines; i += 1) {

    	stroke(0,0,255) //bottom left lines (blue)
        line(x1, y1, x2+mouseX, y2);

        stroke(255,0,0); //top right lines (red)
        line(x1+400+mouseX, y1+500, x2-400, y2-400);

        stroke(0,255,0); //top left green lines
        line(x1,y1, x2-400+mouseX, mouseY);

        stroke(mouseY); //moving lines black to white
        line(width/2*(i/20), height/2*(i/20), mouseX*20, mouseY*20);
        line(mouseX,400,i*5,mouseY);
        line(i*5, mouseY, mouseX, 500);
        line(mouseX,i*5, 400, mouseY);

        stroke(mouseX,100,mouseY); //moving lines colorful
        line(0,i*5, mouseX, 0);
        line(0,mouseY, 0, i*10);
     	line(mouseX, i*5, 0, 500);


        x1 += dx1;
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;
    }

}

LO 4 – Sound Art

Images of Ikeda’s Test Pattern sound and light display.

Test Pattern 100m Version

Ryoji Ikeda (2013)

The piece of sound art that I chose to study this week is Ryoji Ikeda’s Test Pattern 100m Version. Ikeda is known for using datasets to create visceral and overwhelming displays of sound and light. The Test Pattern series uses a real-time programming system that converts data such as text, photos, movies, and sounds in barcode patterns of binary 0s and 1s. The purpose of the project is to “examine the relationship between critical points of device performance and the threshold of human perception” (Ryoji Ikeda) by visually displaying intense flickering panels of black and white (which correspond with the barcode patterns) that synchronise perfectly with the audio. The velocity of the moving images is extremely fast, to the point that it’s almost epileptic; viewers stand on the huge flashing screen in a dark room and are enveloped by sound and light.

Project 03 – Dynamic Drawing

~click your mouse!~

This project was extremely intimidating because I didn’t even know where to begin, but after becoming more comfortable with implementing mouseX/mouseY and min/max, it was actually pretty fun. My composition consists of simple geometric shapes, however, the various changes in scale, angle of rotation, position, and color create different compositions depending on your mouse movement.

Maggie – Dynamic Drawing

//Maggie Ma
//Section D

//top left shapes
var blueSqSmall = {
	x: 31,
	y: 51,
	w: 39,
	h: 39
};
var greenSqSmall = {
	x: 70,
	y: 51,
	w: 39,
	h: 39
};
var yellowCircle = {
	x: 50,
	y: 130,
	w: 39,
	h: 39
};
var pinkCircle = {
	x: 89,
	y: 130,
	w: 39,
	w: 39
};


function setup() {
    createCanvas(370, 500);
    background(220);
    text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {
	background(255,255,255);
	strokeWeight(3.5);
	//noStroke();

	if (mouseIsPressed) {
		background(0);
	}

	//red rect top left
	fill(248, 64,0);
	rect(31, 51, 78 + mouseX*.08, 224 + mouseY/80);

	if (mouseX > width/2) {
		fill(255,209,0);
		rect(31, 51, 78 + mouseX*.08, 224 + mouseY/80);
	}

	//blue square top left
	bottombound = min(mouseY, 236);
	fill(40,44,147);
	rect(31, bottombound, 39, 39);

	//yellow circle top left
	fill(255,209,0);
	ellipse(yellowCircle.x, bottombound, yellowCircle.w, yellowCircle.h);

	if (mouseX > width/2) {
		fill(248, 64,0);
		ellipse(yellowCircle.x, bottombound, yellowCircle.w, yellowCircle.h);
	}

	//green square top left
	fill(0,164,82);
	rect(greenSqSmall.x, bottombound, greenSqSmall.w, greenSqSmall.h);

	//pink circle top left
	fill(255,185,200);
	ellipse(pinkCircle.x, bottombound, pinkCircle.w, pinkCircle.h);

	//pink rect bottom left
	fill(255,185,200);
	rect(31,275, 136,184);

	//blue rect bottom left
	fill(40,44,147);
	rect (31,343,68,116 + mouseY/4);

	//yellow circle bottom left
	fill(255,209,0);
	ellipse(99,343,136,136);

	if (mouseX > width/2) {
		fill(248, 64,0);
		ellipse(99,343,136,136);

	}

	//green semicircle bottom left
	fill(0,164,82);
	push();
	translate(99,343);
	rotate(radians(mouseY));
	arc(0,0,136,136, PI, 0, CHORD);
	pop();	

	//green circle middle
	fill(0, 164, 82);
	ellipse(139, 184, 60,60);

	//blue rect nub
	fill(255,209,0);
	rect(108, 215, 60, 60, 80, 0, 0, 0);

	//blue rect top right
	fill(40,44,147);
	rect(168, 138, 171, 137);

	//blue circle top right
	ellipse(253,136,171,171);

	if (mouseY>height/2) {
		fill(255,185,200);
		ellipse(253,136,171,171);
	}

	//yellow semicircle top right
	fill(255,209,0);
	push();
	translate(253,136);
	rotate(radians(mouseY));
	arc(0,0,172,172, PI+2, 2, CHORD);
	pop();	

	//line 1
	line(31, 134, 339, 134);

	//pink circle top right
	fill(255, 185,200);
	ellipse(255, 136, 84, 84);

	if (mouseY>height/2) {
		fill(40,44,147);
		ellipse(255, 136, 84, 84);
	}

	//red semi top right
	fill(248, 64,0);
	push();
	translate(255,136);
	rotate(radians(-mouseX));
	arc(0,0,84,84, 0, PI, CHORD);
	pop();	

	//line 2
	line(340, 459, 340, 275);

	//red circle bottom right
	fill(248,64,0);
	ellipse(262,370, min(mouseX,188), min(mouseX,188));

	//line 3
	line(167, 275,341,459);

	//white circle bottom left
	fill(255,255,255);
	ellipse(65 + mouseX, 459, 70, 70);

	//small rect pink
	fill(255,185,200);
	quad(226, 328, 217, 337, 262, 385, 271, 376);

	//small rect yellow
	fill(255,209,0);
	quad(277,382, 268, 391, 286, 410, 295, 401);

}

Below is my base sketch/composition done in Illustrator:

LO 3 – Computational Fabrication

Silk Pavilion II

Neri Oxman (2020)

For this week’s Looking Outward post, I studied Silk Pavilion II (https://www.media.mit.edu/projects/silk-pavilion-ii/overview/) by Neri Oxman—a delicately woven silk structure examining the relationship between digital and biological fabrication. I was initially intrigued by the grand architectural scale and intricacies of the sculpture. The Pavilion is composed of three interconnected layers—the first layer is a web of steel-rope wires, the second layer contains fabric on which silkworms are positioned, and the third layer contains the visible Pavilion structure that is biologically spun by the 17,532 silkworms. After I studied the mechanics of the structure more, I was fascinated by the order and sequencing of the silkworms’ upward spinning motion, created by a mechanical top-down kinetic manipulation, which generates the spiral pattern. More importantly, I found the message and purpose of The Pavilion particularly interesting. In the textile industry today, silkworms are killed in their cocoon, dissolving the adhesive that connects one strand of silk to the below layers. This allows the silk strand to be extracted from the cocoon, but also harms the life cycle of the silkworm. The Silk Pavilion, however, demonstrates that artificial structures can influence silkworms to construct sheets instead of cocoons, and celebrates silkworms as designers of their own. Especially when guided by a human-made base structure and mechanism, the silkworms can weave beautifully elaborate forms and patterns.

Project 2 – Variable Faces

For my variable face project, I chose to randomize chicken faces! This project seemed difficult at first, but after studying the sample code template, I had a better understanding of how and where to assign and use variables. My biggest challenge was figuring out how to randomize the chicken beak, since the code for a triangle consists of six coordinates; I had to figure out which coordinates to randomize and which coordinates to stay constant (so the beak doesn’t fly around the canvas). Overall, however, this project was quite fun and I think my chicken turned out reallyyyy cute 😀

Maggie-Variable Faces

var eyeSize = 15;
var faceWidth = 200;
var faceHeight = 300;
var beakWidth = 18;
var beakHeight = 30;
var cheekSize = 20;
var crown1Size = 40;
var crown2Size = 30;
var r=133;
var g=217;
var b=92;
function setup() {
    createCanvas(500, 500);
}
 
function draw() {
    background(r,g,b);
    noStroke();
    //face
    fill(255,255,255);
    ellipse(width / 2, height / 2, faceWidth,  faceHeight);
    //eyes
    fill(0, 0 ,0);
    var eyeLX = width / 2 - faceWidth * 0.25;
    var eyeRX = width / 2 + faceWidth * 0.25;
    ellipse(eyeLX, height / 2, eyeSize, eyeSize);
    ellipse(eyeRX, height / 2, eyeSize, eyeSize);
    //beak
    fill (239,128,9);
    triangle((width/2) - (beakWidth/2),height/2, width/2, height/2 + beakHeight,(width/2) + (beakWidth/2), height/2);
    //cheek
    fill (243,187,200);
    var cheekLX = width/2 - faceWidth/3;
    var cheekRX = width/2 + faceWidth/3;
    ellipse(cheekLX, height /2 + 25, cheekSize, cheekSize);
    ellipse(cheekRX, height/2 +25, cheekSize, cheekSize);
    //crown 1
    fill(247,86,79);
    var crownLX = width/2 - 10;
    var crownRX = width/2 + 10;
    ellipse(crownLX, height/2 - 70, crown1Size, crown1Size);
    ellipse(crownRX, height/2 - 70, crown2Size, crown2Size);


}
 
function mousePressed() {
    r = random(110, 200);
    g = random(50,217);
    b = random(50, 200);
    faceWidth = random(130, 320);
    faceHeight = random(120, 350);
    eyeSize = random(6, 22);
    beakWidth =random(15, 40);
    beakHeight = random(15,20);
    cheekSize = random (15, 30);
    crown1Size = random(40,65);
    crown2Size = random(30, 70);
}

LO 2 – Generative Art

Galápagos

Karl Sims (1997)

http://www.karlsims.com/galapagos/

The piece of generative art that I find fascinating is Galápagos by Karl Sims—an interactive evolution of virtual “organisms.” Viewers participate by selecting an organism they find the most aesthetically interesting out of 12 organisms displayed on TV screens. They then stand on sensors in front of the display, and the chosen organism mates, mutates, and reproduces to form new offspring. Organisms not selected are transformed into new offspring from the chosen organism. Gradually, increasingly interesting and creative organisms are produced and emerge on the TV displays.

I was first drawn to this piece because I thought the organisms looked extremely cool—one had multicolored spikes and tentacles, another had globular yellow “feet” protruding from a mushroom shaped “body,” and another one seemed fluorescent with its glowing “legs” that resembled butterfly wings. To create this piece, I assume that Sims would use the randomize function that we used in class to continuously create refreshing and new designs. The parameters, however, would become more constricting as the evolutionary line becomes more specific with each participant selection to create a family of organisms that are visually related.