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

Project 6 – Abstract Clock


var w = 100; //color change
var h; //hour
var m; //minute
var s; //second
var c = []; //color gradient setup

function setup() {
    createCanvas(480, 480);
    for (var i = 0; i < 12; i++) {
    	c[i] = color(w, mouseY, 200);
    	if (i > 6) {
    		w -= 20;
    	} else {
    		w += 20;	
    	}
    }
    background(220);
    strokeWeight(0);
    frameRate(10);
}

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

	//hours
	if(h<12) {
		background(0, 50*h,50 );
	} else {
		background(0,255-50*(h-12),50);

	//setup
	translate(240, 240);
	circles();

	//minutes
	rotate(radians(6));
		fill(mouseY, m * 5, 200);
		push();
		ellipse(0, 0, 100, m);
		pop();
		}

	//seconds
	rotate(radians(6));
		fill(mouseX, 100 - s * 5, 200);
		push();
		rotate(radians(s * 6));
		ellipse(0, 0, 100, 2 * s);
		pop();
		}


function circles() {
	for (var i = 0; i < 12; i++ ) {
		fill(c[i] - 200);
		circle(300, 0, 100);
		rotate(radians(30));
	}
	for (var i = 0; i < 12; i++ ) {
		fill(c[i] - 100);
		circle(200, 0, 100);
		rotate(radians(30));
	}
	for (var i = 0; i < 12; i++ ) {
		fill(c[i]);
		circle(150, 0, 100);
		rotate(radians(30));
	}
}

You can move the mouse around to change the color. This design was inspired by the loading buttons on websites. Loading buttons often remind me of how slowly time passses, so I used the circles in loading buttons as inspiration for my clock.

By the hour, the background gets darker or lighter. By the minute, the shade of the circle in the center background changes gets lighter. By the second, the circle in the middle grows wider, and resets after one minute.

LO – 6 – Randomness

Tree Growth by Her Thorp, 2006

Tree Growth is a piece of computer generated art that uses randomness to generate realistic looking trees of all shapes and sizes. It uses various leaf shapes and different species of trees, and the leaf color can also change based on the different seasons. I find this artwork really fascinating because the algorithm makes the trees look almost photo-realistic, which sets it apart from other computer-generated tree art. Its use of randomness is what makes the trees look very realistic. As a painter, I know that creating leaves on trees is a very random process, and the program accurately mimics this random process.

To create this art, Thorp used the Lindenmayer Systems. In 2006, the artwork was featured in the “Into the Woods” collection in London at the Digital Well Being Labs.

Project 5: Wallpaper

sketch Download

var s = 100
var x = 50
var y = 50
function setup() {
    createCanvas(600, 600);
    background(60, 0, 33); //mauve 4, background color
    strokeWeight(0);
    rectMode(CENTER);
}

function draw() {
	for (let r = 0; r <=5; r += 1) {
		for (let c = 0; c <= 5; c += 1) {
			tile(); //tile pattern
			y += 100;
			//s += 100;
		}
		y = 50;
		tile();
		x += 100;
	}
}

function tile() {
	push();
	translate(x, y);

	//random dots
	fill(235, 181, 211);
	circle(random(-50, 0), random(-50, 0), random(2,7));
	circle(random(0, 50), random(0, 50), random(2,7));
	fill(193, 99, 151);
	circle(random(-50, 0), random(0, 50), random(2,7));
	circle(random(0, 50), random(-50, 0), random(2,7));
	fill(120, 26, 78);
	circle(random(-50, 0), random(-50, 0), random(2,7));
	circle(random(0, 50), random(0, 50), random(2,7));

	//lines
	fill(120, 26, 78); // mauve 3
	push();
	rotate(radians(45));
	rect(0, 0, s/2 + 10, s/2 + 10);
	pop();
	push();
	fill(60, 0, 33); //mauve 4
	rotate(radians(45));
	rect(0, 0, s/2, s/2);
	pop();

	//circles
	fill(120, 26, 78); // mauve 3
	circle(-25, -25, 30);
	circle(25, -25, 30);
	circle(25, 25, 30);
	circle(-25, 25, 30);

	fill(60, 0, 33); //mauve 4
	circle(-25, -25, 20);
	circle(25, -25, 20);
	circle(25, 25, 20);
	circle(-25, 25, 20);

	//flower
	fill(193, 99, 151); //mauve 2
	push();
	for(let x=0; x < 8; x += 1) {
		ellipse(10, 10, s/2, 10);
		rotate(radians(45));
	}
	pop();

	//inner flower
	push();
	fill(235, 181, 222); //mauve 1
	for(let x=0; x < 8; x += 1) {
		ellipse(5, 2, s/2, 10);
		rotate(radians(45));
	}
	pop();

	//flower center
	fill(193, 99, 151); //mauve 2
	circle(0, 0, 15);

	pop();

}

I drew inspiration from my sketch. However, I decided to add more flower patterns in my code than the flower petals in my original sketch.

Looking Outwards 05

Omar Aqil - Picasso — Seated Women, Omar Aqil

One 3D computer graphics artist I find interesting is Omar Aqil, who creates 3D abstract portraits inspired by Picasso’s work. My favorite work that he created is his “Figurative Portraits” collection, which is inspired by Picasso’s artwork. He uses different 3D textures and forms inspired by Salvador Dali’s work to emulate facial expressions. I find it really cool how he can make the shadows and forms look so realistic. For example, some objects in his pieces are shiny and can reflect other objects in the piece. The way Agil uses light in his work is really interesting because it reflects and absorbs in different textures and surfaces.

Looking Outwards 4

Weather Thingy, Adrien Kaeser, 2018

Weather Thingy – Real time climate sound controller / Adrien Kaeser — Weather Thingy created by Adrien Kaeser, 2018

The Weather Thingy is a custom made sound controller that uses climate events to control the settings of the musical instrument. The piece has 2 parts,
one being a weather station on a tripod microphone, and one being a sound controller connected to the weather station. The station senses wind with an anemometer, rain, and brightness. The station turns this data into “midi data” which can be understood by instruments.

Adrian wanted to make the instrument play live based on the current climate, and have the weather affect the melodies. For example, if the weather station measures rain, the chorus of the melody will change. If the weather station measures wind, the pan of the music will change.

The project used hardware including environmental sensors, weather meters, SparkFun MIDI Shield, encoder rotary knobs, Arduino mega, and Arduino Ienardo. Software that was used in the creation included C++. MIDI protocol, and Arduino.

Project 4: String Art

sketch Download

function setup() {
    createCanvas(400, 300);

}

function draw() {
	background(220);
	strokeWeight(mouseX/40);
	//red right peak
	for(let i = 1; i <= 100; i += 1) {
        stroke(255 - mouseX, mouseY, 0); //changes color of the strokes
        line(width/2 + 10*i, height, width/2, 10*i); //
	}
	//yellow left peak
	for(let i = 1; i <= 100; i += 1) {
        stroke(255 - mouseY, mouseX, 255); //changes the color of the strokes
        line(width/2 - 10*i, height, width/2, 10*i);
	}
	//top left pattern
	for(let i = 1; i < 100; i += 1) {
        stroke(mouseY, 0, mouseX);
        line(0 + 10*i, 0, 0, height - 10*i);
    }
    //top right pattern
     for(let i = 1; i < 100; i += 1) {
        stroke(mouseX, 255 - mouseX, 255 - mouseY);
        line(width - 10*i, 0, width, height - 10*i);
    }
}

I drew a sketch of what I wanted my project to look like. If you move the mouse, the stroke width and color changes.

Project 2: Variable Face

This project shows variable faces of a girl.

sketch Download

/*
*Alyssa Song
*agsong@andrew.cmu.edu
*Section C
*Project 02- Variable Faces; Face Variables
*
*/

var eyeSizeX = 40;
var eyeSizeY = 20;
var faceWidth = 150;
var faceHeight = 200;
var noseLength = 20;
var noseWidth = 10;
var browHeight = 170; //determines general brow height
var browExpression = 4; //determines brow arch
var leftMouth = 170; //determines the left edge of mouth
var rightMouth = 230; //determines the right edge of mouth
var mouthHeight = 250; //determines the height of the edges of the mouth
var mouthExpression = 260; //determines the expression of the mouth

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

function draw() {
	stroke(0);
	strokeWeight(2);


	//background changes color when mouse is on
    // left or right side of screen
	 if (mouseX < 0.5 * width) {
    	background(228, 228, 253); //light purple background
    } else {
    	background(198, 226, 249); //light blue background
    }

    //hair
    point (width / 2, height * 0.2);
    point (width * 0.7, height * 0.3);
    point (width * 0.75, height / 2);
    point (width * 0.75, height * 0.8);
    point (width * 0.25, height * 0.8);
    point (width * 0.25, height / 2);
    point (width * 0.3, height * 0.3);

    fill(0, 0, 0);
    beginShape();
    curveVertex(width / 2, height * 0.2);
    curveVertex(width / 2, height * 0.2);
    curveVertex(width * 0.7, height * 0.3);
    curveVertex(width * 0.75, height / 2);
    curveVertex(width * 0.75, height * 0.8);
    curveVertex(width * 0.25, height * 0.8);
    curveVertex(width * 0.25, height / 2);
    curveVertex(width * 0.3, height * 0.3);
    curveVertex(width / 2, height * 0.2);
    curveVertex(width / 2, height * 0.2);
    endShape();

    fill(227, 180, 171); //skin color
    ellipse((width / 2), (height / 2), faceWidth, faceHeight) //face shape

    point (width / 2, height * 0.2);
    point (width * 0.4, height * 0.35);
    point (width * 0.3, height * 0.4);
    point (width * 0.4, height * 0.25);

    point (width / 2, height * 0.2);
    point (width * 0.6, height * 0.35);
    point (width * 0.7, height * 0.4);
    point (width * 0.6, height * 0.25);

    fill(0, 0, 0);
    beginShape();
    curveVertex(width / 2, height * 0.2);
    curveVertex(width / 2, height * 0.2);
    curveVertex(width * 0.4, height * 0.35);
    curveVertex(width * 0.3, height * 0.4);
    curveVertex(width * 0.4, height * 0.25);
    curveVertex(width / 2, height * 0.2);
    curveVertex(width / 2, height * 0.2);
    endShape();

    beginShape();
    curveVertex(width / 2, height * 0.2);
    curveVertex(width / 2, height * 0.2);
    curveVertex(width * 0.6, height * 0.35);
    curveVertex(width * 0.7, height * 0.4);
    curveVertex(width * 0.6, height * 0.25);
    curveVertex(width / 2, height * 0.2);
    curveVertex(width / 2, height * 0.2);
    endShape();
    //eyes
    fill(255, 255, 255); //whites of eyes
    var leftEyeX = width / 2 - faceWidth * 0.25; //placement of left eye
    var rightEyeX = width / 2 + faceWidth * 0.25; //placement of right eye
    var eyeIrisX = 20; //placement of iris
    ellipse(leftEyeX, height / 2, eyeSizeX, eyeSizeY);
    ellipse(rightEyeX, height  /2, eyeSizeX, eyeSizeY);
    fill(149, 85, 73); //light brown

    ellipse(leftEyeX, height / 2, eyeIrisX, eyeSizeY); //left Iris
    ellipse(rightEyeX, height / 2, eyeIrisX, eyeSizeY); //right Iris
    fill(0, 0, 0); //black
    ellipse (leftEyeX, height / 2, 10); //left pupil
    ellipse (rightEyeX, height / 2, 10); //right pupil

    //if the eyes are big enough, this program will add
    //an eye reflection to make the face seem more "cute"
    if (eyeSizeY > 20) {
        fill(255, 255, 255);
        ellipse((leftEyeX + 3), height / 2, 5);
        ellipse((rightEyeX + 3), height / 2, 5);
    }
	
    //nose
    noFill();
    beginShape();
    curveVertex(width / 2, height / 2 - noseLength);
    curveVertex(width / 2, height / 2 - noseLength);
    curveVertex(width / 2, height / 2);
    curveVertex(width / 2 + noseWidth, height / 2 + noseLength);
    curveVertex(width / 2, height / 2 + 25);
    curveVertex(width / 2 - 5, height / 2 + noseLength);
    endShape();

    //mouth
    fill(152, 41, 41);
    //mouth outline
    point(leftMouth, mouthHeight);
    point(rightMouth, mouthHeight);
    point(width / 2, mouthExpression);
    //mouth shape
    fill(255, 255, 255);
    beginShape();
    curveVertex(leftMouth, mouthHeight);
    curveVertex(leftMouth, mouthHeight);
    curveVertex(rightMouth, mouthHeight);
    curveVertex(width / 2, mouthExpression);
    curveVertex(leftMouth, mouthHeight);
    curveVertex(leftMouth, mouthHeight);
    endShape();

    //adds blush if the face is grinning or not frowning
    if (mouthExpression > 260) {
        strokeWeight(0);
        fill(251, 195, 204);
        ellipse(leftMouth - 10, mouthHeight - 20, 15);
        ellipse(rightMouth + 10, mouthHeight - 20, 15);
        strokeWeight(2);
    }

    //eyebrows
    strokeWeight(5);
    var leftBrowFront = width / 2 - faceWidth * 0.15
    var rightBrowFront = width / 2 + faceWidth * 0.15

    //left brow outline
    point(leftBrowFront, browHeight);
    point(leftBrowFront - 20, browHeight - browExpression);
    point(leftBrowFront - 35, browHeight);

    //left brow shape
    noFill();
    beginShape();
    curveVertex(leftBrowFront, browHeight);
    curveVertex(leftBrowFront, browHeight);
    curveVertex(leftBrowFront - 20, browHeight - browExpression);
    curveVertex(leftBrowFront - 35, browHeight);
    curveVertex(leftBrowFront - 35, browHeight);
    endShape();

    //right brow outline
    point(rightBrowFront, browHeight);
    point(rightBrowFront + 20, browHeight - browExpression);
    point(rightBrowFront + 35, browHeight);
    
    //right brow shape
    noFill();
    beginShape();
    curveVertex(rightBrowFront, browHeight);
    curveVertex(rightBrowFront, browHeight);
    curveVertex(rightBrowFront + 20, browHeight - browExpression);
    curveVertex(rightBrowFront + 35, browHeight);
    curveVertex(rightBrowFront + 35, browHeight);
    endShape();
    strokeWeight(2);

}

function mousePressed() {
    faceWidth = random(130, 170);
    faceHeight = random(230, 160);
    eyeSizeX = random(35, 45);
    eyeSizeY = random(15, 25);
    noseLength = random (15, 25);
    noseWidth = random (5, 15);
    browHeight = random (160, 180);
    browExpression = random (0, 10);
    leftMouth = random (160, 180);
    rightMouth = random (220, 240);
    mouthHeight = random (240, 260);
    mouthExpression = random (230, 270);


}

Looking Outwards 02: Generative Art

UCracking, Marius Watz

This piece was published as part of Absolut Art Exchange, 2014.

The piece uses 2D geometric figures to create 3D textures and forms. I admire the use of bright colors and the different geometric shapes in the art. It looks very clean and detailed, but there is also a level of creativity in the piece.
This piece also makes me question how artists can express their creativity in art that is made out of code and algorithms.

Watz named these pieces “UCracking” based on “cracking” algorithms that are based on subdivision algorithms.

Fundamentally, logic and creativity are completely different – logic follows a set of rules and bounds, while creativity encourages freedom of thought, and lacks any boundaries. How do creativity and computer logic interact? How do you express creativity through something that fundamentally has rules and bounds?

The visuals are based on subdivision algorithms, also known as cracking. Subdivision algorithms split triangles into a new set of smaller triangles through some coded operation. The triangles are colored accordingly, and those triangles are further split, until the result is an art piece.

Project 01 – Self Portrait

This is my self portrait, that changes color when you move your mouse around

self-portrait

/*
*Alyssa Song
*agsong@andrew.cmu.edu
*Section C
*
*This program draws a self-protrait. It takes a little bit of time to load!
*/

function setup() {
    createCanvas(800, 800);
    //background(255, 255, 255);
}
   

function draw() {
	stroke(0);
	strokeWeight(5);
	//background changes color when mouse is on left or right side of screen
	 if (mouseX < 0.5*width) {
    	background(228, 228, 253); //light purple background
    } else {
    	background(198, 226, 249); //light blue background
    }

	//hair in the back and face
	fill(0, 0, 0);
	quad(0.25*width, 0.25*height, 0.125*width, 0.875*height, 0.875*width, 0.875*height, 0.75*width, 0.25*height) //back hair
	fill(227, 180, 171); //skin color
	ellipse(0.5*width, 0.5*height, 0.5*width, 0.7*height); //face

    //eyebrows
    fill(0, 0, 0);
    quad(0.4375*width, 0.40625*height, 0.4375*width, 0.4375*height, 0.3125*width, 0.4375*height, 0.3125*width, 0.40625*height); //left eyebrow
    quad(0.6875*width, 0.40625*height, 0.6875*width, 0.4375*height, 0.5625*width, 0.4375*height, 0.5625*width, 0.40625*height); //right eyebrow

    //hair in front of face
    quad(0.25*width, 0.25*height, 0.25*width, 0.5*height, 0.5*width,0.25*height, 0.5*width, 0.125*height) //left side hair
    fill(0, 0, 0);
    quad(0.75*width, 0.25*height, 0.75*width, 0.5*height, 0.5*width, 0.25*height, 0.5*width, 0.125*height) //right side hair
    fill(0, 0, 0);

    //eyes
    fill(255, 255, 255); //white
    ellipse(0.375*width, 0.5*height, 0.125*width, 0.0625*height); //left eye
    //change left eye color when mouse is on left or right side of the screen
    if (mouseX < 0.5*width) {
    	fill(149,85,73); //light brown
    } else {
    	fill(104, 47, 48); //brown
    }
    ellipse(0.375*width, 0.5*height, 0.0625*width); //left iris
    fill(0, 0, 0); //black
    ellipse(0.375*width, 0.5*height, 0.02*width); //left pupil
    fill(255, 255, 255); //white
    ellipse (0.38*width, 0.49*height, 0.02*width); //left shine
    fill(255, 255, 255); //white
    ellipse(0.625*width, 0.5*height, 0.125*width, 0.0625*height); //right eye
    //change right eye color when mouse is on left or right side of the screen
    if (mouseX < 0.5*width) {
    	fill(149,85,73); //light brown
    } else {
    	fill(104, 47, 48); //brown
    }
    ellipse(0.625*width, 0.5*height, 0.0625*width); //right pupil
    fill(0, 0, 0) //black
    ellipse(0.625*width, 0.5*height, 0.02*width); //right pupil
    fill(255, 255, 255); //white
    ellipse(0.635*width, 0.49*height, 0.02*width); //right shine

    //nose 
    line(0.5*width, 0.5*height, 0.5*width, 0.5625*height); 
    line(0.5*width, 0.5625*height, 0.5625*width, 0.625*height);
    line(0.5*width, 0.625*height, 0.5625*width, 0.625*height);

    //mouth
    //change lip color when mouse is on left or right side of the screen
    if (mouseX < 0.5*width) {
    	fill(160, 95, 120); //nude lip
    } else {
    	fill(152, 41, 41); //red lip
    }
    quad(0.4375*width, 0.71875*height, 0.46875*width, 0.6875*height, 0.53125*width, 0.6875*height, 0.5625*width, 0.7185*height); //upper lip
    quad(0.4375*width, 0.71875*height, 0.46875*width, 0.75*height, 0.53125*width, 0.75*height, 0.5625*width, 0.7185*height); //lower lip
    
    //blush
    if (mouseX < 0.5*width) {
    	fill(241, 212, 230); //nude lip
    } else {
    	fill(229, 142, 196); //red lip
    }
    ellipse(0.625*width, 0.625*height, 0.0625*width); //right cheek
    ellipse(0.375*width, 0.625*height, 0.0625*width); //left cheek

}

LO1 – Some Technological Art that Inspired Me

My Inspiration: “Ghost Pole Propagator II”

Ghost Pole Propagator II, created by Golan Levin, 2016 (http://www.flong.com/projects/gpp-ii/)

This project is a digital interactive installation in Houston, for the Day for Night Festival. It projects stick figure visuals onto a large screen that followed human movement. It was mainly created by one person, but the project credited resources and assistance to 6-8 people.

An image processing technique called “skeletonization” was used to generate the stick figures from the human figure. This algorithm is similar to the one used in OCR (optical character recognition), except adjusted for human silhouettes. The art was developed in openFrameworks, which is a free C++ programming toolkit. Laser control and laser path related add-ons were also used. This art was inspired by Ghost Pole Propogator I that was created in 2007, which projected extremely abstract stick figures of observers.

Potential opportunities and futures of this artwork could be projecting more figures of different forms. This could include animals, birds, moving objects, and more.