Author: alcai@andrew.cmu.edu

Alice Cai Project 7

sketch

//alcai@andrew.cmu.edu
//alice cai
//section E
//Project Week 7

//spinning speed
var speed = 0;

function setup() {
    createCanvas(500,500);
}

function draw() {
    frameRate(30);
    background('black');

    push();
    //draw at middle of canvas
    translate(width/2, height/2);
    //rotate speed, rotates on its own but also adjusted by mouse X
    rotate(speed + mouseX, 0, 200, 0, TWO_PI); 
    speed = speed + 1;
    //call droid draw functions
    epicycloid();
    astroid();
    epitrochoid();
    pop();

}


function epicycloid(){ 
    noFill();
    strokeWeight(2);
    stroke(mouseX, 100, 130,150);
    

    beginShape();
    //defining variables, size is corntroled by mouseX/mousY
    a = map(mouseX, 0, width, 50,300);
    b = map(mouseY, 0, width, 50,300);
    //forloop that repeats shape
    for (var t = 0; t < 40; t ++) {
    var x = (a / (a + 2 * b)) * cos(t) - b * cos(((a + b) / b) * t);
    var y = (a / (a + 2 * b)) * sin(t) - b * sin(((a + b) / b) * t);
    vertex(x ,y);
    endShape();

}
}

function epitrochoid (){
    noFill();
    strokeWeight(5);
    stroke(200,10,100, 5);

    beginShape();

    //forloop that repeats shape
    for (var i = 0; i < 100; i ++) { 

    //defining variables, size is corntroled by mouseX/mousY
    a = map(mouseX, 0, width, 50,300);
    b = map(mouseX, 0, width, 50,300);
    h = map(mouseX, 0, width, 50,200);  

    x = (a + b) * cos(i/2) - (h * cos((a + b / b) * i));
    y= (a + b) * sin(i/2) - (h * sin((a + b / b) * i));
    vertex(x, y);
    endShape();
    }
}



function astroid(){ 
    noFill();
    strokeWeight(5);
    stroke(130, 100, 150,150);

    

    beginShape();

    //forloop that repeats shape
    for (var t = 0; t < 20; t ++) {
        
    //defining variables, size is corntroled by mouseX/mousY
    z = map(height - mouseY, 0, width, 50,200);
    var x = z * cos(t)^ 3 ;
    var y = z * sin (t)^ 3 ;
    vertex(x ,y);
    endShape();

    }

}

This project seemed really daunting because all the shapes looked complex and there was a lot going on on the screen, especially those with mouse interaction. Turns out, it’s not as complex as it seems. Although the equations may seem complex, they are also given to us. After that, it’s just about defining the variables in the equation and calling a for loop to draw a pattern with the shape! I used a map function to control the size of the shape with mouseX and mouseY. I also changed the opacity of the line strokes for a more transparent and three-dimensional looks.

TWO SHAPES
THREE SHAPES with varying opacity
A better capture of the visual effect of lower opacity

Looking Outwards 07-Alice Cai

http://atlasofemotions.org/#triggers

Atlas of Emotions

The Atlas of Emotions

Map of emotions

This project was a commission for the Dalai Lama, a news religious source of Tibet, in 2014. His Holiness had very interesting conversations with a friend and scientist Dr. Paul Ekman about the subject of emotion and asked of an “Atlas of Human Emotion”. Stamen didn’t only illustrate an atlas of Human Emotion, he illuminated the emotional world.

The atlas is programmed to be an interactive tool that helps you learn more and be more conscious about your emotions. There are series of questions about your emotional states and corresponding actions. The program will create a map of all your emotions and actions as well as unpack the reasoning or cause and effects throughout your timeline. The goal is to gain consciousness of what triggers your emotion in order to be more in control of your emotional world. 

Timeline of emotions: cause and effect.

In this atlas, each emotion is represented as a continent, and within each emotion is a number of related emotional states. Next, each emotional state leads to actions, which then leads to triggers. He also mapped out the “cousin” of emotion, mood. Finally, he included a visualization of “calmness”, or a neutral state of emotion. 

Alice Cai Looking Outwards 06

Mark Wilson is a digital artist that self learned programming to create computer-generated works. He wrote his own software after buying his own microcomputer. His work combines human and machine decisions by having a combination of intricate design and random generation. 

e4708

His project e4708 is very geometric. It consists of overlapping circles and rectangles in many neon colors. There are patterns, but there are also random inconsistencies. He created this image by running and rerunning random generating computer software. After selecting successful images, he weaved them together to create patterns. 

https://collections.vam.ac.uk/item/O164447/e4708-print-wilson-mark/

Alice Cai Project 6 Abstract Clock

I have always wanted to try living without knowing what the time is. How can I make a clock that doesn’t tell me the time? The way I started brainstorming for this was quite simple. Time would be represented through a greyscale spectrum. I wanted to go as abstract and clean as possible, which was at first, just three squares.

First iteration: three squares.

Through this, I wanted to represent time in color, simply by changing the shade of the squares every second minute and hour.

I liked this solution because it was as clean, modern, and abstract as possible. You can’t actually know what second it is in any way; it is only dictated by a spectrum.

I began to further develop this solution by adding the factor of length so that the rectangle grows as time passes.

Finally, I added the concept of “time is a social construct”. “Time is” is always there in black, but the answer changes as time passes. In the beginning of the hour and minute, the shades of the second and minute are the darkest, and as time passes, they fade away. Inversely, the answer “a social construct” becomes darker as time passes.

sketch

//alcai@andrew.cmu.edu
//project6 abstract clock
//section E week 6

function setup(){
    createCanvas(500,500);
    
}

function draw() {
    strokeWeight(0);
    background('white');
    //variables for time
    var s = second();
    var m = minute(); 
    var h = hour();


    //second rectangle grows per second and gets lighter, at 60 seconds it is white
    fill(255/60 * s);
    rect(width/4, height/2 - 50, 40,40 + 3 * s);
    //minute rectangle grows per minute and gets lighter at the pace of the second rectangle
    fill(255/60 * s);
    rect(width/2, height/2 - 50, 40, 40 + 3 * m);
    //hour rectangle grows per hour and gets lighter at the pace of the minute rectangle
    fill(255/60 * m);
    rect(width/4 * 3, height/2 - 50,40,40 + 3 *h);
    //time is... is always black, but "a social construct" gets darker by the second, inverse to the actual time rectangles. 
    textSize(32);
    fill(0);
    text('TIME IS...', width/4, height/2 - 100);
    fill(255 - 255 / 60 * s);
    text('A SOCIAL CONSTRUCT', width/4, height/2 - 75);
}

Alice Cai Looking Outward 5

https://Mikecampau.com/projects

Mike Campau is a 3D Computer Graphic/Digital Artist that creates images that tell stories. In order to do this, he implements illustration, graphic design, photography, and especially focuses on combining computer-generated imagery and photography.

While Mike does impressive marketing with graphic design/CGI for recognizable brands, I find his project “I Can Do That” particularly interesting because of its unique concept and statement about the modern art world. “I Can Do That” is an interesting series where Mike discusses plagiarism through computer graphic art. While digital art opens up an infinite breadth of opportunities, the con is that many things are easily plagiarized. Since there is a formula and a “visual road map”, many people take shortcuts to create unoriginal artwork and, as a result, fail to appreciate the creative work and labor of the original artist. 

He gives himself four hours maximum to replicate another artist’s style or create a similar version of another artist’s work. He chooses artists who have work that is very recognizable and most likely, often plagiarized. Although he was able to achieve great results in terms of imitation, he also gained a deep respect for the effort of the original artist. He hopes to make people reconsider replicating work that they think is easily achievable, and think as a real artist.

Mike’s version of replicated art- many of these styles are easily recognizable

Alice Cai Project 5

original sketch
This is my original sketch. I wanted to make a bubbly wallpaper with baby light tones like blue and poink ( didn’t have copics that color). To do this I first created a draw bubbles function that made layers of circles, and then in the draw function I called for loops to make a grid. I decided to add pink lines across the circles to make it more visually interesting and also it now looks like tiles.

sketch

//Alice Cai
//alcai
//week5 Project
//Section E

//pink background
function setup() {
    createCanvas(600,600);
    background('pink')
}

function draw () {
//vertical forloop for y
    for (var y = 25; y <= height; y += 50) {

//horizantal forloop for x
        for (var x = 25; x <= width; x += 50) {

//call drawbubble shape
           drawBubble (x,y);
           
//pink lines over blue bubbles to create tile effect
           strokeWeight(10);
           stroke('pink');
           line(x, y, x, y + x);
           line(x, y, x, y - x);
           line(x, y, x + 30, y);
           line(x - 30, y, x, y);
        }
        
    }   
    noLoop(); 
//so that draw is only called once
}

//bubble shape, x y variable coordinates to be called in for loop
function drawBubble ( x, y) {
            fill(209,242,255);
            strokeWeight(0);
            ellipse(x, y, 50, 50);
        
            fill(100,200,230);
            ellipse(x, y, 35, 35);
        
            fill(118,230,250);
            ellipse(x, y, 20, 20);
        
           
}

Alice Cai Project 4

sketch

//Alice Cai
//alcai
//project#4
//Section E

//global variables
var x;
var y;
var aY;
var aX;

function setup() {
    createCanvas(480, 240);
    strokeWeight(3);
}

function draw() {
//background
    background(200) ;
    strokeWeight(1);

//defining variables 
    aX = mouseX
    aY = mouseY
    x = x * aY
    y = y * aX

//orange lines

    stroke('orange');
    for (var y = 100; y < 10000; y += 5) {
    line(y, aY, width - aX, y);
    line(y, aY, height - aY, y);

    }
//pink lines
    stroke('pink');
    for (var x = 100; x < height; x += 5) {
    line(x, aX, x, aY);
    line(aY, x, x, aX);

    }
//blue lines
    stroke('blue');
    for (var y = 100; y < width; y += 5) {
    line(aX, x, y, aY);
    line(aX, x - y - x, y, aY);

    }
//color changing
    stroke(mouseX,mouseY,mouseY);
    for (var y = 100; y < width; y += 5) {
    line(aX, x - aX, x, aY);
    line(aX, y - aX, y, aY);
    line(aY, y - aX, y, aX);
    }

}

This is my string art. At first, all my curves looked the same because I only used an i variable. After I added more the drawing became more dynamic. Each curve is drawn by a series of lines that are slightly shifted using a for loop and small increments that tilt the line and form a curve.

Alice Cai Looking Outwards 4

http://www.pamelaz.com/carbonsongcycle.html

EXCERPTS OF CARBON SONG CYCLE

Carbon Song Cycle

Pamela Z is a composer and performer who worked with media artist Christina McPhee on a project called Carbon Song Cycle. This project was fro a chamber ensemble and expanded cinema. The project reflects the progressions in the Earth’s ecosystem, focusing on the carbon cycle, which is the cycle of carbon through nature and life. Pamela took data on the carbon cycle, environmental balance and imbalance and created a melody inspired by the data. She also created drawings and images inspired by the carbon process, focusing on heat and chemical transformations in the process. She also took video footage from petroleum fields, natural gas locations, and geothermal sites. The melody was written for an ensemble of voice, electronics, viola, cello, bassoon, percussion, as well as an array of video projections. Throughout the melody, sonic material is passed between the players that reflect the video projections of the natural exchange of elements. 

Watching the video, the melody is very mystic and abstract. It is actually pretty intense at moments. The melody rises and falls almost like fire. At some points, it is more melodic, at some points ,it’s like random sounds, metal clanging, and mystic signing. Some points actually have lyrics, like “I’m breathing”. You can kind of sense if some parts are more chemical in contrast to parts that seem to reflect nature.

Alice Cai Looking Outwards 03

https://www.media.mit.edu/projects/meta-mesh-computational-model-for-design-and-fabrication-of-biomimetic-scaled-body-armors/overview/

a photo of METAMESH by Neri Oxman, Jorge Duro-Royo, and Laia Mogas-Soldevila.

MetaMesh is a project by Neri Oxman, Jorge Duro-Royo, and Laia Mogas-Soldevila. In this project, they study biomimetic design. This means studying and producing designs that mimic the functions and features of biochemical processes. MetaMesh studies and mimics the scaling of the Polypterus sengalus, which is an ancient fish. They developed a “hierarchical computational model” that mimics the “structure-function relationships found in the biological exoskeleton”. They then use additive manufacturing, a technology that uses additive layers in order to produce a three-dimensional object.

The purpose of this project was actually to propose a computational approach for protective armor. This scaled armor is meant to be multifunctional. The scaling/exoskeleton of the fish allows for flexibility as well as structural protection. Because the scales are segmented, they allow for movement and adhere to the curves of the body while the body is still covered.

First, they studied the biological organism, how it moves in reaction to curved surfaces. Then they looked at local, regional, and global analysis of the scales. In the regional analysis, they looked at how each scale can connect. In the locoal, they looked the parts of the fish and the proportions. Finally, they looked at the global analysis, which is how clothes adhere to the curves of the human body. This was then put through computational translation that digitalizes the studies to develop an algorithm.

^^ diagram of work flow: putting biological organism studies and new host geometry through computational translation.

I think this project is amazing because it is both functional, scientific, and aesthetic. This study serves a great purpose of protection but also generates such a natural and complex pattern.

Alice Cai_project03_dynamic drawing

sketch


//Alice Cai
//Section E
//alcai@andrew.cmu.edu
//Project 3

//global variables
var angle = 0


//canvas setup and original background
function setup(){
    createCanvas(640,480);
    background(220);
}

function draw() {
    stroke(mouseX, mouseY);
    strokeWeight(10);
    //color controls changes at half canvas 
    if (mouseX < width / 2){
    fill(mouseY ^ 2, mouseY ^ 2, mouseX ^ 2); 
} else {
    fill(mouseX ^ 2,mouseY ^ 2,mouseY ^ 2); 

}
    
//ellipse positioning
    push();
    translate(mouseX, mouseY);
    rotate(radians(angle) / 100);
    ellipse(0, 0, mouseX, mouseY);


    pop();
    angle = angle + mouseX;

//color controls changes at half canvas for second ellipse
    stroke(mouseX, mouseY);
    if (mouseX > width / 2){
    fill(mouseX / 5,mouseY * 3,mouseY); 
} else {
    fill(mouseX, mouseX, mouseY / 2); 
}
//ellipse2 positioning,not center of mouse, size and position is opposite of original

    push();
    translate(640 - mouseX, 480 - mouseY);
    rotate(radians(angle) / 100);
    ellipse(0, 0, mouseX, mouseY);
    pop();
    angle = angle + mouseX;
    

}

This is my dynamic drawing! It quite literally is dynamic drawing. I started this by using our lab exercises with spinning square moving with the mouse. Then, I changed it to a circle, added another circle, and offset one of them through translate. One of the circles moves opposite of the mouse. I did this by using the previous assignment, with Width/height – mouseX/mouseY. Then, I moved background to set up so that the background doesn’t reset and you can see all the circles that are drawn. The colors of the stroke weight and the circle fills are all controlled by mouseX and mouseY coordinates, as well as the speed of the spinning.