Author: ashleyc1@andrew.cmu.edu

ashleyc1-Section C-Project-07-Curves

sketch

//Ashley Chan
//Section C
//ashleyc1@andrew.cmu.edu
//Project-07-Curves

var width = 480;

function setup() {
    createCanvas(480, 480);

}

function draw() {

    background(220);

    drawAstroid();
    drawRanunculoid();

}

//first "shape"
function drawAstroid() {

    var x; 
    var y;
    var b = 40; 

    stroke(255);
    strokeWeight(.5);
    noFill(0);
    beginShape();

    push();
    translate(width/2, height/2);
        for(var i = 0; i < 500; i ++) {

            //llows for lots of different ways shape is being drawn
            var theta = map(i, 0, width, constrain(mouseX, 0, 480) + 600, TWO_PI);

            //astroid parametric formulas
            x = (3 * b * cos(theta)) + (b * cos(3* theta));
            y = (3 * b * sin(theta)) - (b * sin(3* theta));

            vertex(x, y);

            }
            endShape(CLOSE);
            pop();
}

//second "shape"
function drawRanunculoid() {

    var x;
    var y;
    var a = 5; //scales shape

    stroke(200);
    strokeWeight(.5);
    beginShape();
    translate(width/2, height/2);
        for(var i = 0; i < 75; i ++) {

            var theta = map(i, 0, width, 2 * constrain(mouseX, 0, 480) + 600, TWO_PI);

            //ranunculoid parametric formulas
            x = a * (6 * cos(theta)) + (cos(6* theta));
            y = a * (6 * sin(theta)) - (sin(6* theta));

            vertex(x, y);

        }

        endShape(CLOSE);

    //same shape but bigger and falls outside of astroid
    beginShape();
        for(var i = 0; i < 75; i ++) {

            var theta = map(i, 0, width, 2 * constrain(mouseX, 0, 480) + 600, TWO_PI);

            x = 50 * (6 * cos(theta)) + (cos(6* theta));
            y = 50 * (6 * sin(theta)) - (sin(6* theta));

            vertex(x, y);

            }

            endShape(CLOSE);
        
}

I had a lot of fun with this project. My process was just a lot of exploring the different functions via mathworld and playing around with which functions look nice with one another. It was a nice refresher to look at math formulas and think about how they corresponded with the visual compositions it was creating. I also spent a lot of time learning about map() and how to draw complex “shapes” using vertex(). I think there’s a lot of potential of using math as a way to create compelling and dynamic visuals.

Some Stills:

ashleyc1-Section C-Looking Outwards-07

history flow for “Abortion” page, versions equally spaced.
history flow for “Chocolate” page, versions equally spaced.

 

History Flow (2003) is a project by Fernanda Viegas in collaboration with Kushal Dave and Johnathan Feinberg which calculates and visualizes the changes of wikipedia articles. They calculated the changes by using tokens, or html tags in their program sentences to compare and capture changes in the articles. Although I don’t have access to the details, the Fernanda Viegas collaborated with IBM researchers. Their software was also able to determine who and at what age the author of the changes was and visualized these variants with different colors and sizes. Any time there is a black space, this indicates the article was vandalized or parts were blacked out which brings a lot of political undertones when seeing it in the context of a abortion wiki article.

This project is interesting because it brings up questions about censorship and the freedom to alter and edit text on a platform that is often referenced for the general public. From a visual standpoint, it’s also interesting to see the designs change and deviate significantly from the initial pattern and makes you think about what sort of conflict was going on and at what point can two (or more) authors of different opinions on a topic come together and agree what information is a determined fact to include in the article.

Artist Page:

http://bewitched.com/historyflow.html

Papers Written About Process:

http://alumni.media.mit.edu/~fviegas/papers/history_flow.pdf

http://hint.fm/papers/wikipedia_coordination_final.pdf

ashleyc1-Section C-Project-06-Abstract-Clock

sketch

 //Ashley Chan
 //Section C
 //ashleyc1@andrew.cmu.edu
 //Project-06-Abstract-Clock

var  lastSecond;
var  currentSecond;

var lastMinute;
var currentMinute;

var lastHour;
var currentHour;

var secondAngle;
var minuteAngle;
var hourAngle;

var x = 0;
var y = 0;

var maxDiameter = 280;
var theta = 0;

var strokeCol;
var weight;


function setup() {
    frameRate(1);
    createCanvas(300, 300);
   // translate(150, 150); //Set origin to center of canvas
    angleMode(DEGREES);
    background(215, 192, 208);
    drawMinuteArc();
}

function draw() {
    translate(150, 150); //Set origin to center of canvas
    rotate(-90); //set hands so they start where 12 would be

        drawStuffBasedOffMinute();

        drawStuffEverySecond();

        drawMinuteArc();

        drawStuffBasedOffHour();

     
     if (second() != 0) {
     //clock outline
        stroke(255);
        strokeWeight(5);
        noFill();
        ellipse(0, 0, 200, 200);

    }


}

function drawStuffBasedOffHour() {

      currentHour = hour();

            if (lastHour != currentHour) {

                //calculate how much to rotate hour rect
                hourAngle = currentHour * (360/12);
                    //For every hour that passes, rotate hour rect
                    for (var i = 0; i <= 12; i++){
                        push();
                        rotate(hourAngle);
                        fill(255, 100, 150, 8);
                        noStroke();
                        rect(0, 50, 25, 25);
                        pop();

                    }

            }
}


function drawStuffBasedOffMinute() {

      currentMinute = minute();
      
            if (lastMinute != currentMinute) {
                //have circle with stroke outline pulse according to minute
                for (var i = 0; i < 60; i ++) {
                    var diam = (sin(theta) * maxDiameter/2) + maxDiameter/2;

                    strokeWeight(.1);
                    stroke(0);
                    noFill();
                    ellipse(0, 0, diam, diam);

                    theta += 1;
                    }
                }

                
}

function drawStuffEverySecond() {

      currentSecond = second();

                if (currentSecond != 0) {

                    //Calculate how much to rotate line
                    secondAngle = currentSecond * (360/60);
                        push();
                        rotate(secondAngle);
                        fill(255, 100, 150, 8);
                        stroke(50, 50, 50);
                        line(0, 0, 80, 0);
                        noStroke();
                        ellipse(0, 110, 10, 10);
                        pop();
                    
            }

            else {
                setup();
            }

}

function drawMinuteArc() {

            if (lastMinute != currentMinute) {
                //calculate houw much to rotate min hand
                minuteAngle = currentMinute * (360/60);
                    //For every hour that passes, rotate hour hand
                    push();
                    rotate(minuteAngle);
                    stroke(255);
                    strokeWeight(1);
                    ellipse(20, 20, 25, 25);            
                    pop();

                print(minuteAngle);
        }   
}

This clock isn’t what I thought it would be. I think I had a lot of creative ideas that just didn’t completely work out. I wanted to create a pulsing circle based on the minute and have a “second” hand and circle revolve around the center. Every hour, a square would rotate as well. I also wanted all of these shapes to draw over each other. By doing so I could create a cool optical illusion effect which I think I was successful at but there are still bugs in my code that I couldn’t quite resolve. Additionally, wordpress seems to not be able to handle my clock since so much information is being stored and drawn over. My code doesn’t normally freeze when the index is run normally if you want to check: ashleyc1-Section C-Project-06

Initial Sketch
In progress code of just seconds that I like better than my final
In progress code of just seconds that I like better than my final

ashleyc1-Section C-Looking Outwards-06

DRAWING, 147-137#2B, APRIL 14, 1964
DRAWING, STUDY 152-137A-B, FEBRUARY 24, 1966

John De Cesare was an American sculptor turned graphic illustrator. He is most famous for his colored pencil drawings of music where he created a complex and new language to visualize famous pieces of music. Heavily inspired by Art Deco ornamentation, De Cesare’s 250 drawings are a visual language with vibrant but flat color and distinct, geometric shapes. While these drawings are subjective to how De Cesare would interpret and visualize these scores, he studied music theory heavily before creating a complex algorithmic language.

In a Cooper Hewitt analysis of De Cesare’s work, De Cesare mathematically determined that:

Music has two geometric elements within its structure. A horizontal and a vertical reciprocally related. The horizontal movement from left to right indicates the duration (or time value) of a note and the vertical, or up and down movement, indicates the pitch (or position on the staff). Since a musical note contains both duration and pitch, it forms a geometric unit in the form of an angle. This angle can be considered the space form.
Using an angular geometric shape to symbolize a standard musical note, he varied its width to suggest the length in time, and its position on the staff to indicate the pitch. The direction of the angle up or down indicated the bass or treble clef. He created forms of entirely different shapes to symbolize vocal parts. He used color to clarify visually each line of music (for instance, in a simple score, violet “notes” might indicate notes in the treble clef and red “notes” those in the bass clef).

Unlike other artists who have created abstract musical notations, De Cesare stands out because the rendering of the music is still referential to the Art Deco art movement: his own personal background. I appreciate that this large series isn’t just an abstraction of music but also keeps to the artist’s own personal identity and can stand alone as a piece within the Art Deco movement.

Sources:

https://en.wikipedia.org/wiki/John_De_Cesare

https://collection.cooperhewitt.org/objects/18799825/

ashleyc1-SectionC-Project-05-Wallpaper

sketch

//Ashley Chan
//Secion C
//ashleyc1@andrew.cmu.edu
//Project-05-Wallpaper


var slant; //diagonal angle of line
var offsetX; //line space of x
var x; //x-value of gold lines


//setup is executed once at the launch
function setup() {
    createCanvas(400, 400);
    background(10, 51, 80);


    x = 0;
    slant = 500;
    offsetX = -800;

  
}


function draw() {
  
    drawDiagonalLines();

    drawMiddleGoldLines();

    drawTopGoldLines();

    drawBottomGoldLines();

    drawOrnaments();
  
}




function drawDiagonalLines() {
     //outer white diagonal lines going up
    for (var i = 0; i <= width; i = i + 1){

      stroke(219, 179, 2);
      line (offsetX, 0, offsetX + slant, height);
      line(offsetX, 0, offsetX - slant, height);
      offsetX += 200;

    }

}




function drawMiddleGoldLines() {

    
   for (var x = 0; x <= 50; x += 1){
      for (var y = 240; y <= height; y += 40){

      stroke(219, 179, 2);
      strokeWeight(1);
    
    //cone part of lines  
      line (x, 240, (x + slant) - 450, height/5);
      line (x, 240, (x + slant) - 550, height/5);
      line (x - 50, 240, (x + slant) - 600, height/4);
      line (x - 150, 240, (x + slant) - 600, height/4);

    //top of diamond cones
      line (x - 100, 280, (x + slant) - 550, 240);
      line (x - 100, 280, (x + slant) - 650, 240);
      line (x - 150, 240, (x + slant) - 450, height/5);
      line (x - 50, 240, (x + slant) - 750, height/5);
      
    //diamond criss-cross
      line (x, 40, (x + slant) - 450, height/5);
      line (x - 50, 80, (x + slant) - 500, height/10);
      line (x, 120, (x + slant) - 450, height/5);
      line (x, 120, (x + slant) - 550, height/5); 
   
      x += 200;

    } 
   }

}


function drawTopGoldLines() {
    push();
    translate(0, -158);
    drawMiddleGoldLines();
    pop();

}


function drawBottomGoldLines() {

  push();
  translate(0, 160);
  drawMiddleGoldLines();
  pop();

}

function drawOrnaments() {

   for (x=0; x <= width; x = x + 200){
    for (y = 0; y <= height; y = y + 160){
      fill(255);
      strokeWeight(2);
      ellipse(x, y, 10, 10);
      ellipse(x + 100, y + 80, 10, 10);

      //petals
      ellipse(x, y - 20, 10, 20);
      ellipse(x, y + 20, 10, 20);
      ellipse(x - 20, y, 20, 10);
      ellipse(x + 20, y, 20, 10);
  }
  }

}

I tend to enjoy wallpapers/designs with a subtle, floral element over a geometric background. My process for this project was fairly experimental and non-linear. I initially sketched out some diagonals for myself and then figured I’d just play with p5 until I got a floral shape that I enjoyed. In reality, I had fun altering the start and end points of the diagonal lines so much so that I was creating different layering effects with them. I decided then that the floral element that would sit on top had to be very simple otherwise the pattern would be overloaded. Overall, my final result stemmed from a lot of playing and deviating from my initial sketch. I’m content with the final design and if I were to have this printed on fabric, I would sew and wear it.

Initial Sketch

ashleyc1-Section C-LookingOutwards-05

Yoichiro Kawaguchi has worked in computer graphics since the 1970s and is known for creating 3D, generative, abstract models using an algorithmic formula he devised called the growth model. The formula is an attempt to replicate the organic shapes of shells, horns, plants and the like. His work is a unique integration of computer graphics, biological sciences and art. 

It’s hard to find information on the specifics of his projects as the websites showcasing his work seem to have been made in 2001 (aesthetics and design say a lot). But in general, he is inspired by the natural environments and he seeks to recreate these spaces through in-house programs and algorithmic processes to create a new 3D digital space.

Some of his more famous projects such as Tentacle Tower or Ocean elicit audience participation. Ocean, for example, is a 3D space that is warped by the movements of the person. This piece is to simulate the emotional element of dancing through a visual language. The environment that is warped is created through an algorithmic process where the computer starts with a shapes that generates and mutates based on the movements of a body.

http://doc.gold.ac.uk/creativemachine/portfolio_page/yoichiro-kawaguchi/

http://www.siggraph.org/artdesign/gallery/S02/onreel/Kawaguchi/1reelpreview.html

http://www.cgw.com/Publications/CGW/2005/Volume-28-Issue-6-June-2005-/SIGGRAPH-2005-Art-Gallery.aspx

ashleyc1-Section C-Project-04-String-Art

sketch

//Ashley Chan
//Section C
//ashleyc1@andrew.cmu.edu
//Project-04-String-Art


var width = 400;
var height = 300;

var x1; //x of line
var y1; //y of line
var r; //rotational angle

function setup() {

    createCanvas(400, 300);

}

function draw() {
    background(249, 220, 187);

        x1 = 0; 
        y1 = 0;
        r = atan(height, width);

   for (var i = 0; i < 1000; i += 10) { 

        strokeWeight(.5);

        translate(width/2, height/2);
        rotate(r); //rotates lines so you can see it

        stroke(233, 100, 140); //pink
        line(x1 + 50, y1, 500, 1000); 
        line(x1, y1, 0, 500); 

        stroke(11, 47, 148); //navy
        line(x1, y1, -100, 500);

        stroke(0, 255, 252); //teal
        line(x1, y1, i + 200, 500); 
    }
}

Initially, I wanted to draw concentric circles for this project because the string art examples I found reminded me of spirographs and the fun “complex” circles children often make with a special tool. But after I made the image I wanted, for funsies, I continued altering my values and ended up with happier accidents. Below are some of the images I got along the way but this final image was the one that I personally responded to the most because of how different it was from the other iterations.

 

ashleyc1-Section C-Looking Outwards-04

PyroGraph is a machine programmed to take in an image, generate and draw it using dots in a style similar to pointillism. It correlates the sound of the room to the greyscale of each particular dot and the dot is then created by a moving tip that burns 450 into the paper. The dot’s greyscale correlates to the noise of the room. PyroGraph is interesting because it recreates and stylizes an image through public involvement. I wonder why the artist/programmers chose to have the machine react to sound. Since this project was inspired by traditional thermal printers, incorporating sound seems disconnected from tangible print. If it’s a reference to the processing noises old thermal printers make, that would make sense but I wish it was explained explicitly.

This project heavily follows the practices of pyrography: the art of burning wood to create an image. There are differences in style. For instance, PyroGraph requires the machine to draw in dots whereas a traditional pyrographic artist could easily burn lines for realistic textures. However, it’s still revolutionizing the practice, not only through computer-generated burning but also shifting the act of burning from an artist to a generalized public. It’s subtly interactive.

PyroGraph – Drawing machine that listens and burns

ashleyc1-Section C-Project-03-Dynamic-Drawing

sketch

//Ashley Chan
//Section C
//ashleyc1@andrew.cmu.edu
//Project-03-Dynamic-Drawing.



//PARAMETERS THAT I AM CHANGING
//Color
//Ball Size
//Ball angle: rotation of the spiral
//Spacing between balls
//Size of spiral

    var angle;
    var positionX;
    var positionY;
    var ballWidth;
    var ballHeight;
    var isDrawing;
    var r;
    var g;
    var b;

//setup with default values for rgb color values
function setup(/*red = 213, green = 23, blue = 23*/) {
    createCanvas(640, 480);
    background(0);

    //rotate circles based on mouse position
    //#gotta love trig 
    angle = (atan((mouseY - 240) / (mouseX - 320)) / 500);
    
    positionX = 0;
    positionY = 0;
    ballWidth = 5;
    ballHeight = 5;

   //as you increment i, draw a circle
    for (var i = 0; i < 600; i++) {

        fill(r, g, b); 
        stroke(255);

        //As i increases, we draw a ball with increasing width
        //untill we reach maximum growth
        ballWidth += (30/600) * ((480 - mouseY) / 480);
        ballHeight += (30/600) * ((480 - mouseY) / 480);

        //start point
        push();
        translate(width/2, height/2); 
        rotate(degrees(angle));
        ellipse(positionX, positionY, ballWidth, ballHeight);
        pop();
    
    
        drawOut();

    }
    

}

function draw() {

    changeColor();

}


function changeColor() {

    //if mouse is on right side of canvas, red
    if (mouseX > width/2) {

         r = map(mouseX, 0, width/2, 500, 213);
         g = map(mouseX, 0, width, 100, 32);
         b = map(mouseX, 0, width, 135, 255);

}
    //if mouse is on left side of canvas, blue                              
    if (mouseX < width/2) {
        
         r = map(mouseX, 0, width/2, 200, 100);
         g = map(mouseX, 0, width, 0, 32);
         b = map(mouseX, 0, width, 0, 255);

    }

    //have to call setup again if you want movement
    setup(r, g, b);

}


function drawOut() {
   //circles drawn outward

    positionX = positionX  + .5;
    positionY = positionY + .5;

    //controls the spacing between the balls 
    angle = angle + (mouseX/ 100000);


}

For this project, I wanted to expand on the spiral drawing exercise we did in lab because I found it a fun shape to play with and thought it would create a cool optical illusion. Although subtle, I am changing several parameters such as color, ball size, ball position and angle as well as the space in between the balls. One surprising result is how much had to tap into old trig knowledge in order to calculate how to rotate the spiral just right.

ashleyc1-Section C-LookingOutwards-03

Earlier this year (February to May), the Carnegie Museum of Art hosted a retrospective of Iris van Herpen’s fashion designs called Iris van Herpen: Transforming Fashion that featured clothes from 15 of her collections. She is credited to be the first designer to send a 3-D printed dress down the runway. Her dresses are meticulous and overwhelming in detail but she is able to create these intricate dresses through her process of integrating traditional craftsmanship with computers and digital fabrication. Although this particular merging is apparent in the majority of her collections, I think one the most note able collections to mention is Escapism. To me, this is the collection that mostly reads as fashion that merges with digital fabrication as well as meticulous craft. It was also one of her beginning collections to feature more than one 3-D printed dresses on the runway.

In Escapism, Herpen explores the concept of emptiness and how emptiness plays with form to create fantastical and grotesque feelings. Although I couldn’t find information on the particular algorithms used, I do know her process is collaborative as she works with architects like, Daniel Widrig, to 3-D print her desired designs. In this collection, they were able to create a lace-like structure that didn’t require a needle to construct the parts together. Together, they weaved into a coral-like, organic design. Most of the dresses in this collection remind me of the way sine waves move and billow together when programmed correctly.

Herpen became successful because of her unique melding of the two worlds; not just using the machine to replace the traditional process. In an interview with Vogue, she clarified that designing the dress is mostly hand crafted because of the inventive ways the designers need to create to sew the printed components together. In this way, her voice as a traditional artist is still prominent because she uses the machine to support her process, not become it.

Sources:

Iris van Herpen: Transforming Fashion

http://www.irisvanherpen.com/behind-the-scenes/escapism

http://www.irisvanherpen.com/haute-couture/crystallization