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

Final Project

sunflora — Sat, 12 Dec 2020 04:23:44 +0000

For my final project, I created an animation. My animation tells a story about myself and how I personally am affected by the pandemic. I believe my story will resonate with a lot of students. My animation highlights the unseen effects that COVID has had on students and shows the progressive loss of motivation and the effects on mental health.
The animation runs without user interaction; however, if the user clicks the mouse, a text box appears describing the current state of the pandemic in a quick “news flash”

covidanimation Download

//Flora Xia Section B

var sR = 157; //sky red component
var sG = 196; //sky green component
var sB = 245; //sky blue component
var sRC = .5;
var sGC = .5;
var sBC = .5;
//original positions for mask
var mX = 112;
var mY = 340;
var mW = 300;
var mL = 150;
//change in 
var mdX = 1;
var mdY = 1;
var mdW = 1;
var mdL = 1;
//eyes
var eyeRLinks = [
    "https://i.imgur.com/yT0USca.png",
    "https://i.imgur.com/0LktvFO.png",
    "https://i.imgur.com/Dh0klJU.png",
    "https://i.imgur.com/n7e82Zj.png"]

var eyeLLinks = [
    "https://i.imgur.com/LzeqRqt.png",
    "https://i.imgur.com/dcffyk3.png",
    "https://i.imgur.com/UDx8Xmn.png",
    "https://i.imgur.com/WMngOhd.png"]

var eyeR;
var eyeL;

var eyeRImages = [];
var eyeLImages = [];
//details
var detailLinks = [
    "https://i.imgur.com/611Lsvj.png",
    "https://i.imgur.com/iBUjUeg.png",
    "https://i.imgur.com/1dlHNvm.png"]

var detail;
var detailImages = [];
//clouds
var clouds = []


function preload(){
	//eye images
	for (var i = 0; i < 4; i++){
		eyeRImages[i] = loadImage(eyeRLinks[i]);
		eyeLImages[i] = loadImage(eyeLLinks[i]);
	}
	eyeR = eyeRImages[0];
	eyeL = eyeLImages[0];
	for (var j = 0; j < 3; j++){
		detailImages[j] = loadImage(detailLinks[j]);
	}
	detail = detailImages[0];
}


function setup() {
    createCanvas(510, 600);
    frameRate(5);
    for (var i = 0; i < 2; i++){
    	var rx = random(width);
    	var ry = random(20, 200);
    	clouds[i] = makeCloud(rx, ry);
    }
}

function draw() {
	background(sR, sG, sB);
	skyGrey();
	face();
	eyes();
	maskLaptop();
	details();
	updateCloud();
	removeCloud();
	addCloud();
	if (frameCount > 125){
		appleLogo();
	}
	print(frameCount);
}

function mousePressed(){
	let m1 = 'BREAKING NEWS : COVID-19';
	let m2 = 'NEWS: COVID-19 Gets Worse';
	let m3 = 'NEWS: Cases Rising';
	let m4 = 'NEWS: Second Peak';
	fill(255, 150);
	rect(0, 260, 500, 50);
	fill(255, 0, 0);
	textSize(35);
	if (frameCount <= 50){
		text(m1, 0, 300);
	}else if (frameCount > 50 & frameCount <= 100){
		text(m2, 0, 300);
	}else if (frameCount > 100){
		text(m3, 0, 300);
	}

}

function eyes(){
	if (frameCount <= 50){
		//normal eyes
		eyeR = eyeRImages[0];
		eyeL = eyeLImages[0];
	}else if (frameCount > 50 & frameCount <= 100){
		//eyes w eyebags
		eyeR = eyeRImages[1];
		eyeL = eyeLImages[1];
	}else if (frameCount > 100 & frameCount <= 150){
		//eyes tearing
		eyeR = eyeRImages[2];
		eyeL = eyeLImages[2];
	}else if (frameCount > 150){
		//crying
		eyeR = eyeRImages[3];
		eyeL = eyeLImages[3];
	}
	//position images
	image(eyeR, 285, 225, 130, 130);
	image(eyeL, 102, 225, 130, 130);
}

function details(){
	if (frameCount <= 50){
		//details mask
		detail = detailImages[0];
	}else if (frameCount > 50 & frameCount <= 75){
		//details hair
		detail = detailImages[1];
	}else if (frameCount > 75 & frameCount <= 100){
		//details hair
		detail = detailImages[2];
	}else if (frameCount > 100 & frameCount <= 125){
		detail = detailImages[1];
	}else if (frameCount > 125){
		detail = detailImages[2];
	}
	image(detail, 0, 0);
}

function skyGrey(){
	//color change
	sR -= sRC;
	sG -= sGC;
	sB -= sBC;
	if (sR == 134){
		sRC = 0;
	} 
	if (sG == 145) {
		sGC = 0;
	}
	if (sB == 158) {
		sBC = 0;
	}
	

}

function face(){
	//hair back
	noStroke();
	fill(74, 63, 47);
	rect(37, 220, 430, 400);
	//neck
	fill(190, 150, 110);
	rect(175, 450, 150, 120);
	//shirt
	fill(245, 235, 244);
	ellipse(250, 570, 480, 60);
	rect(10, 570, 480, 60);
	fill(190, 150, 110);
	ellipse(250, 540, 150, 40);
	//face shape
	fill(194, 156, 118);
	ellipse(250, 300, 350, 420);
	eyebrows();
	//hair bangs left
	push();
	rotate(radians(30));
	fill(207, 201, 167);
	ellipse(200, 55, 150, 300);
	ellipse(245, 45, 70, 175)
	fill(74, 63, 47);
	ellipse(190, 55, 150, 300);
	ellipse(235, 45, 70, 175)
	pop();
	//hair bangs right
	push();
	rotate(radians(330));
	fill(207, 201, 167);
	ellipse(245, 315, 150, 300);
	ellipse(185, 250, 70, 175);
	fill(74, 63, 47)
	ellipse(250, 315, 150, 300);
	ellipse(190, 250, 70, 175);
	pop();
	//hair bangs top
	fill(74, 63, 47);
	ellipse(250, 50, 250, 100);
	//ears
	fill(194, 165, 125);
	ellipse(60, 290, 40, 80);
	//earrings
	fill(222, 210, 140);
	circle(60, 320, 10);
	circle(50, 310, 7);
	//nose
	nose();
}

function eyebrows(){
	fill(82, 64, 33, 150);
	rect(300, 225, 50, 15);
	rect(150, 225, 50, 15);
	fill(82, 64, 33, 50);
	rect(295, 225, 50, 15);
	rect(155, 225, 50 ,15);
	rect(290, 225, 50, 15);
	rect(160, 225, 50, 15);
}

function nose(){
	fill(163, 130, 96, 150);
	ellipse(260, 385, 50, 15);
	stroke(163, 130, 96, 150);
	strokeWeight(3);
	arc(275, 340, 10, 50, (PI / 2), (PI / 2) * 3);
}

function maskLaptop(){
	if (frameCount < 50){
		//mask
		fill(140, 196, 212);
	    stroke(255);
	    strokeWeight(3);
	    //masklines
	    //earloops
	}
	if (frameCount >= 50){
		//turning into laptop
	    mX -= mdX;
	    mY += mdY;
	    mW += mdW;
	    mL += mdL;
	    fill(140, 196, 210);
	    if (mX == 60){
		    mdX = 0
		    fill(150, 190, 200);
	    }
	    if (mY == 400){
		    mdY = 0
		    fill(161, 185, 190);
	    }
	    if (mW == 375){
		    mdW = 0
		    fill(172, 185, 189)
	    }
	    if (mL == 210){
		    mdL = 0
		    fill(182, 185, 186);
		    //add mac symbol
	    }
	    strokeWeight(3);
	    stroke(255);
	}
	rect(mX, mY, mW, mL); 
}

function appleLogo(){
	fill(255);
	noStroke();
	circle(255, 530, 50);
	fill(182, 185, 186);
	circle(283, 528, 30);
	push();
	translate(255, 530);
	rotate(radians(30));
	fill(255)
	ellipse(-15, -40, 5, 20);
	pop();
}

//cloud object
function updateCloud(){
    for (var i = 0; i < clouds.length; i ++){
        clouds[i].move();
        clouds[i].display();
    }
}

function removeCloud(){
    var keepClouds=[];
    for (var i = 0; i < clouds.length; i++) {
        if (clouds[i].x < width) {
            keepClouds.push(clouds[i]);
        }
    }
    clouds = keepClouds;
}

function addCloud(){
    //little probability
    var newCloudLikelihood = 0.007; 
    if (random(0,1) < newCloudLikelihood) {
        clouds.push(makeCloud(15, 15));
    }
}

function moveCloud(){
    this.x += this.speed;
}

function displayCloud(){
    fill(255);
    noStroke();
    push();
    translate(this.x, this.y - 20);
    circle(0, 0, 135);
    circle(-60, 10, 90);
    circle(60, 10, 90);
    fill(110);
    textSize(24);
    text('anxiety', -40 ,0);
    pop();
}

function makeCloud(birthLocationX, birthLocationY){
    var cloud = {x: birthLocationX,
                y:birthLocationY,
                speed:random(3, 7),
                move: moveCloud,
                display: displayCloud};
    return cloud;
}

Project -11

sunflora — Sat, 14 Nov 2020 22:21:16 +0000

I decided to make a mountain landscape with birds flying over. In the front is a field then there are two mountain ranges with a setting sun behind. The hardest part for me was working with the objects and understanding the example code so that I could apply it for myself.

landscape Download

var mtnDetail = 0.005; // detail in tall mountain 
var mtnSpeed = 0.0001; // speed of mountains
var mtnDetail2 = 0.007; //detail of short mountain
var birds = []

function setup() {
    createCanvas(480, 400);
    for (var i = 0; i < 5; i ++){
        var rx = random(width);
        var ry = random(10, 50)
        birds[i] = makeBird(rx, ry);
    }
    frameRate(15);
}

function draw() {
	background(153, 153, 204);
    sun();
	makeMtns();
    field();
    updateBird();
    removeBird();
    addBird();	
}

function makeMtns() {
    fill(138, 118, 139);
    stroke(133, 114, 137);
    strokeWeight(1);
    beginShape();
    vertex(0, height);
    for (var x = 0; x < width; x++) {
        var t = (x * mtnDetail) + (millis() * mtnSpeed);
        var y = map(noise(t), 0, 1, height / 8 * 2, height / 8 * 4);
        vertex(x, y);
    }
    vertex(width, height);
    endShape();
    //second mountain
    beginShape();
    fill(175, 143, 178);
    vertex(0, height);
    for (var x = 0; x < width; x++) {
        var t2 = (x * mtnDetail2) + (millis() * mtnSpeed);
        var y = map(noise(t2), 0, 1, 100, 300);
        vertex(x, y);
    }
    vertex(width, height);
    endShape();
}

function field(){
    stroke(118, 139, 121);
    fill(122, 145, 132);
    rect(0, 300, width, 100);
}

function sun(){
    // sun ray inner
    noStroke();
    fill(229, 187, 161, 60);
    ellipse(240, 150, 225, 225);
    //sun ray outer
    fill(229, 187, 161, 60);
    ellipse(240, 150, 300, 300);
    // sun
    stroke(198, 115, 76);
    strokeWeight(1);
    fill(184, 106, 70 );
    ellipse(240, 150, 175, 175);
}
//bird object

function updateBird(){
    for (var i = 0; i < birds.length; i ++){
        birds[i].move();
        birds[i].display();
    }
}

function removeBird(){
    var keepBirds=[];
    for (var i = 0; i < birds.length; i++) {
        if (birds[i].x < width) {
            keepBirds.push(birds[i]);
        }
    }
    birds = keepBirds;
}

function addBird(){
    //little probability
    var newBirdLikelihood = 0.007; 
    if (random(0,1) < newBirdLikelihood) {
        birds.push(makeBird(15, 15));
    }
}

function moveBird(){
    this.x += this.speed;
}

function displayBird(){
    fill(0);
    stroke(0);
    push();
    translate(this.x, height-300);
    //top wing
    triangle(0, 0, 5, 0, -2, -7);
    //bottom wing
    triangle(0, 0, 5, 0, 2, 7);
    pop();
}

function makeBird(birthLocationX, birthLocationY){
    var bird = {x: birthLocationX,
                y:birthLocationY,
                speed:random(3, 7),
                move: moveBird,
                display: displayBird};
    return bird;
}

LO -11

sunflora — Sat, 14 Nov 2020 22:15:23 +0000

For this weeks Looking Outwards focusing on females, I chose to look at Emily Gobeille.
Gobeille is a visual design, motion graphics, and interactions artist. She is from Amsterdam but is based in Brooklyn.
One of her works, titled “Knee Deep,” uses real-time greenscreening and stomp detection to allow kids to play and immerse themselves in a virtual landscape. I really like this project because it allows children to experience art and coding. For me, it is exhibits like these that I loved when I was younger and really got me interested in art. It is really interesting to learn about someone who creates these pieces that I viewed as magic as a kid.

Project -10

sunflora — Sun, 08 Nov 2020 18:44:56 +0000

soundstory Download

var cloudX = 0;
var cloudY = 50;
var cloudDx = 5;
var carX = 400;
var carY = 350;
var carDx = 15;
var manX = 200;
var manY = 350;
var manDx = 10;
var cloudLaughing;
var rainSound;
var manGrumble;
var carSound;

function preload() {
    cloudLaughing = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/laugh.wav");
    rainSound = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/rain-1.wav");
    carSound = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/car.wav");
    manGrumble = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/mad.wav");
}


function setup() {
    // you can change the next 2 lines:
    createCanvas(400, 400);
    frameRate(1);
    useSound();
}

function soundSetup(){
    cloudLaughing.setVolume(0.5);
    carSound.setVolume(0.5);
    manGrumble.setVolume(0.4);
}

function cloud(){
    noStroke();
    fill(255);
    //cloud 1
    push();
    scale(1.5);
    circle(cloudX, cloudY, 60);
    circle(cloudX - 30, cloudY + 10, 40);
    circle(cloudX + 30, cloudY +10, 40);
    //face
    stroke(0);
    line(cloudX-15, cloudY - 15, cloudX-5, cloudY - 5);
    line (cloudX - 15, cloudY - 5, cloudX -5, cloudY - 15);
    line(cloudX+15, cloudY - 15, cloudX+5, cloudY - 5);
    line (cloudX + 15, cloudY - 5, cloudX + 5, cloudY - 15);
    fill(0);
    arc(cloudX, cloudY, 30, 30, 0,  PI); //smile
    pop();

    cloudX += cloudDx
    print(frameCount);
    if (frameCount == 25){
        cloudDx = 0
    }
}

function rain(){
    for (var i = 0; i < 12; i++){
        var x = random(125, 275);
        var y = random(100, height);
        fill(93, 146, 245);
        noStroke();
        circle(x - 15, y+3, 5);
        triangle(x - 17.5, y +3, x - 12.5, y+ 3, x - 15, y - 5)
    }
}

function car(){
    fill(255, 0, 0);
    ellipse(carX, carY, 100, 70);
    ellipse(carX, carY + 15, 150, 40);
    fill(60, 140, 255);
    ellipse(carX - 30, carY - 10, 40, 20)
    fill(0)
    //tires
    circle(carX - 35, carY + 30, 30);
    circle(carX + 35, carY + 30, 30);
    carX -= carDx
    if (frameCount == 14){
        carDx = 0;
    }
}

function person(){
    fill(0);
    stroke(0);
    strokeWeight(1);
    circle(manX, manY, 15);
    strokeWeight(5);
    line(manX, manY, manX, manY + 30);
    line(manX, manY + 30, manX -15, manY + 40);
    line(manX, manY + 30, manX + 15, manY + 40);
    line(manX, manY + 20, manX -15, manY+ 5);
    line(manX, manY + 20, manX + 15, manY+ 5);
    if (frameCount >= 27){
        manX -= manDx
    }
}

function draw() {
    background(195, 200, 226);
    fill(190);
    stroke(50);
    rect(0, 350, width, height);
    cloud();
    car();
    if (frameCount <= 5){
        text('Evil Cloud', 190, 200);
    }
    if (frameCount >= 15){
        person();
    }
    strokeWeight(1);
    //sounds
    if (frameCount > 25 & frameCount <= 49) {
        rain();
        rainSound.play();
    }
    if (frameCount >= 27 & frameCount < 49){
        manGrumble.play();
    }
    if (frameCount < 14){
        carSound.play();
    }
    if (frameCount == 25) {
        cloudLaughing.play();
    }
    if (frameCount == 50){
        rainSound.stop();
        manGrumble.stop();
    }
    if (frameCount == 14){
        carSound.stop();
    }
    if (frameCount == 28){
        cloudLaughing.stop();
    }

}

My story is of an evil cloud. A car drives by and parks and the man gets out, seeing this the cloud laughs and the rain starts to fall. The annoyed man grumbles and walks away from the rain.

LO -10

sunflora — Sun, 08 Nov 2020 18:35:47 +0000

My Sound Art blog post mainly focused on music so this week I will be focusing on sound art.
The piece I chose is an audiovisual art installation titled Meandering River. This piece premired in Berlin in 2018. The installation is comprised of visuals generated in real-time as well as music that was composed by an A.I.
The piece illustrates the movement of rivers through visuals and sound representing the rivers impact on earth.
I was attracted to this piece due to the unique interpretation of movement. The visuals are stunning and the concept is very intriguing. The piece emphasizes the beauty of nature and leaves the viewer with a sense of appreciation and harmony.

Project – 09

sunflora — Sun, 01 Nov 2020 05:21:24 +0000

Here is my self portrait done with circles and words when the mouse is moved. Because the image is filled with color it is hard to see the full image through the code but I like it that way because it adds to the ambiguity of the picture

portrait 09 Download

var flora;
var words =['flora' , 'xia' , 'FX' , 'fleur']

function preload() {
	flora = loadImage("https://i.imgur.com/tXb4FAg.jpg");
}

function setup() {
    createCanvas(480, 480);
    background(255);
    flora.loadPixels();
    frameRate(2000);
}

function draw() { 
	//set up variables
    var x = random(width);
    var y = random(height);
    var ix = constrain(floor(x), 0, width-1);
    var iy = constrain(floor(y), 0, height-1); 
    //creating the text at mouse
    var colorAtMouse = flora.get(mouseX, mouseY); //color at pixel
    fill(colorAtMouse);
    textSize(random(2, 15));
    text(random(words), mouseX, mouseY);
    //creating the shape that appears randomly
    var colorAtXY = flora.get(ix, iy);
    fill(colorAtXY);
    noStroke();
    circle(x, y, random(1, 8));
}

original image

LO -09

sunflora — Fri, 30 Oct 2020 22:42:43 +0000

Looking at Zimmy’s post from week six, she wrote about Manolo Gamboa Naon and his piece “Mantel Rojo.”
The theme for the week was Randomness. What really drew meto the post was the image of the work. As Zimmy describes, there is no focal point making the viewer see the piece as a whole. I definitely agree that it is very intruging how the longer you look the more details become apparant. The random aspect of the piece is how the shapes are generated.
Zimmy does a great job explaining how the composition draws the attention of the viewer. To add to her discussion It is very cool how the pseudo-randomness created some small patterns only really noticable when looking at the details where the swirls create a path that the viewers eyes follow.

LO – 08

sunflora — Mon, 26 Oct 2020 02:22:01 +0000

I watched the video on Sarah Groff Hennigh-Palermo from the 2019 Eyeo Festival. Hennigh-Palermo is an artist, data designer, and programmer.
Sarah’s work is devoted to making computers more accessible, flexible, and contextual; to do so she has created art sites, computer langugaes, hybrid machines, and — more recently — films and live visuals.
My personal favorite of her works is “Summer’91” which is based off her own experiences, specifically her childhood growing up in Southern California. I really like this piece because of its smooth visual flow with the warm tones, also once you know the story behind it you feel immersed in the gentle feeling from the piece.
I really like how she also pulls her own experiences into the presentation too. While presenting she often refered to what she has experienced to bring importance to her points.
In addition, her visuals are fun and intriguing making it easy for the viewers to feel engaged and intersted in her presentation.

part of “Summer’91” work

Project – 07

sunflora — Sun, 18 Oct 2020 01:18:34 +0000

I chose to use the Ranunculoid Curve to create my project. When making it I noticed that the curve looks like a star when small with a larger stroke weight, so I set up my project to switch from day and night to see a star turn into a flower created by ranunculoid curves.

shapes Download

var n = 50 //number of cusps
var angleRan1 = 0 //rotation of pink flower
var angleRan2 = 0 //rotation of yellow flower

function setup() {
    createCanvas(480, 480);
    background(220);
    frameRate(20);
}

function draw() {
	background(31, 45, 97); // night sky
	translate(width/2, height/2);
	//moon
	push();
    noStroke();
    fill(255);
    circle(-100, -150, 100);
    fill(31, 45, 97);
    circle(-75, -150, 100);
    pop(); 
	stroke(255);
	strokeWeight(5);
	push(); // rotate ranunculoid
	rotate(radians(angleRan1));
    angleRan1 += mouseY;
	drawRanun1();
	pop();
	push();
	rotate(radians(angleRan2));
	angleRan2 += mouseY + 90
	drawRanun2();
	pop();
	if (mouseX >= 100) {
		noStroke();
		fill(129, 191, 54);
		circle(0, 0, 30);
		//sun
		fill(240, 213, 36);
		circle(-200, -200, 200)
	}
}

//Ranunculoid Curve
function drawRanun1 () {
    //x = a[6cost-cos(6t)] y=a[6sint - sin (6t)] <- parametric equations
    var aRan1 = mouseX/50
    if (aRan1 <= 2) {
    	fill(251, 252, 182); //yellow when it is a star shape
    }else {
    	background(130, 201, 255); // day time
    	fill(252, 182, 203); //pink when its a flower shape
    }
    //curve
    beginShape();
    for(var i = 0; i < n; i += 0.1){
    	var xRan1 = aRan1 * (6 * cos(i) - cos(6 * i));
    	var yRan1 = aRan1 * (6 * sin(i) - sin(6 * i));
    	vertex(xRan1, yRan1);
    }
    endShape();
}
//inner flower
function drawRanun2 () {
	strokeWeight(5);
	fill(245, 226, 100);
	var aRan2 = mouseX/100
	if (aRan2 < 2) {
		stroke(255);
	} else {
		stroke(250, 175, 137);
	}
	//curve
	beginShape();
	for(var i = 0; i < n; i += 0.1) {
		var xRan2 = aRan2 * (6 * cos(i) - cos(6 * i));
    	var yRan2 = aRan2 * (6 * sin(i) - sin(6 * i));
    	vertex(xRan2, yRan2);
	}
	endShape();
}

LO- 07

sunflora — Sun, 18 Oct 2020 01:12:21 +0000

The work I chose is “Facebook: Mapping the World’s Friendships” by Stamen Designs published in June of 2020.
This project is incredibly interesting as it takes data on the interconnectedness of Facebook’s users and turns the data into clean cut visuals on a map to illustrate the world’s friendships.
The countries are sorted by a combination of how many facebook friendships there are between countries as will as the total number of facebook friendships within one county.
The data isn’t only intriguing, it is also informative. Surprisingly, you can see a lot of history within the data, such as where countries have been. If one country has occupied another you can see the connectedness through peoples friends on facebook which is extremely interesting.
I really admire this work as it condenses large quanities of data into an easily undersood visual that can tell you more than you would ever expect.