Author: afukuda@andrew.cmu.edu

afukuda-Project07-Curves

afukuda-project-07

/* 
 * Name | Ai Fukuda 
 * Course Section | C 
 * Email | afukuda@andrew.cmu.edu
 * Project | 07
 */ 

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

function draw() {
  background(193, 228, 221);
  translate(width/2, height/2);  // translating grid to center 

  drawSpirograph();
}

function drawSpirograph() {
    // Spirograph: 
    // http://mathworld.wolfram.com/Spirograph.html

    var nPoints = 1000;          
    noFill();
    stroke(140, 164, 212);

    var x;
    var y;
    var a = 200;    // fixed radius in which smaller circle (b) rolls around 
    var b = a/constrain(mouseY+10, 50, 350);  // smaller circle radius - making it interactive with mouseY 
    var h = constrain(mouseX+10, 50, 350);  // distance from center of interior circle in which spirograph is traced - mouseX

    beginShape();
        for (var i=0; i < nPoints; i++) {

            var t = map(i, 0, nPoints, 0, TWO_PI);

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

    
}

My project is based on the Spirograph mathematical curve (link: http://mathworld.wolfram.com/Spirograph.html). Keeping one variable (a) constant, initially I was going to keep things simple by only using small integers (> 10) to create the geometry, but by incorporating mouseX and mouseY for the (b) and (h) variables (see link to see what these variables represent), the geometry became more intricate, more dynamic, and more kaleidoscope-like, which I was compelled by.

afukuda-LookingOutwards-07

eCLOUD

eCloud by Aaron Koblin is a dynamic sculpture inspired by clouds and its behavior, displayed in the San Jose International Airport. The installation, made from polycarbonate tiles, can fade between transparent and opaque states, with its pattern transforming periodically according to real-time weather data from around the world. I find this work intriguing, as it takes an ambiguous natural phenomenon and attempts to abstract its behavior into a pixelated paneling system. From the example of different “states” of the installation, there seems to be an algorithmic system where the opaqueness (or lack of) of the panels are calculated according to the fogginess of the current weather. And the location of said opaque panels indicate the wind motion. It is an interesting idea to bring the outside into interior spaces; I can imagine it conveying a relaxing, pleasant mood in the San Jose airport.

    

Cloud conditions of San Jose & Berlin (respectively)

afukuda-Project-06-Abstract-Clock

afukuda-06-abstract-clock

/* 
 * Name | Ai Fukuda 
 * Course Section | C 
 * Email | afukuda@andrew.cmu.edu
 * Project | 06
 */ 

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

function draw() {
    background(73, 106, 139);
    noStroke();

    // ADDING DESIGN ELEMENTS (FOR AESTHETIC)
    for (y=200; y<300; y+=20) {                // STAR 'TICKS' (BOTTOM LEFT OF CANVAS)
        fill(255, 248, 222);
        for (x=0; x<480; x+=10) {
            if (y%3 == 1) {                       // calling even rows 
                rect(2*x+270, y, 1, 7);
            }
            else {                                // calling odd rows 
                rect(2*x+260, y, 1, 7);  
            }
        } 
    }
    
    push();                                   // SHOOTING STAR LINES 
        stroke(209, 226, 244);
        line(300, 20, 440, 25);
        stroke(206, 236, 236);
        line(300, 30, 440, 45);
        stroke(255, 248, 222);
        line(300, 40, 380, 58);
    pop();

    push();                                  // SHOOTING STAR RECT  
        rectMode(CENTER);
        fill(209, 226, 244);
        rect(455, 26, 5, 5);
        fill(206, 236, 236);
        rect(460, 47, 12, 12);
    pop();

    // ABSTRACT CLOCK ELEMENTS
    var s = second();
    var m = minute();
    var h = hour()%12;     // so hour is given in 12 (not 24)

    // SECOND - 'SHOOTING STAR'
    push();             
        frameRate(40);                                 // defining speed            
        var step = frameCount % 40;
        applyMatrix(1, 0, 0, 1, 40+step, 50+step/3);   // defining slope of 'shooting star' motion 
        fill(255, 248, 222);
        rect(350, 8, 30, 30);
    pop();

    // MINUTE 
    push();
    A = color(255, 250, 195); // light yellow 
    B = color(250, 241, 262); // yellow 
    C = color(254, 232, 147); // yellow yellow orange 
    D = color(255, 228, 183); // yellow orange 
    E = color(253, 205, 167); // orange 
    F = color(253, 210, 194); // orange pink 
    G = color(248, 202, 215); // pink 
    H = color(233, 208, 229); // light pink purple 
    I = color(204, 178, 213); // pink purple 
    J = color(182, 178, 215); // purple 


    interA = lerpColor(A, B, .5);
    interB = lerpColor(B, C, .5);
    interC3 = lerpColor(C, D, .33);
    interC6 = lerpColor(C, D, .66);
    interD3 = lerpColor(D, E, .33);
    interD6 = lerpColor(D, E, .66);
    interE3 = lerpColor(E, F, .33);
    interE6 = lerpColor(E, F, .66);
    interF3 = lerpColor(F, G, .33);
    interF6 = lerpColor(F, G, .66);
    interG = lerpColor(G, H, .5);
    interH3 = lerpColor(H, I, .33);
    interH6 = lerpColor(H, I, .66);
    interI3 = lerpColor(I, J, .33);
    interI6 = lerpColor(I, J, .66);
    // interH = lerpColor(H, I, .5);


        for (z=0; z<m; z++) {         // adding color gradient to minute spectrum                           
            translate(-8, 2.2);
            if (z<2) {              
                fill(A);
            }
            else if (z<4) {
                fill(interA);
            }
            else if (z<6) {
                fill(B);
            }
            else if (z<8) {
                fill(interB);
            }
            else if (z<10) {
                fill(C);
            }
            else if (z<12) {
                fill(interC3);
            }
            else if (z<14) {
                fill(interC6);
            }
            else if (z<16) {
                fill(D);
            }
            else if (z<18) {
                fill(interD3);
            }
            else if (z<20) {
                fill(interD6);
            }
            else if (z<22) {
                fill(E);
            }
            else if (z<24) {
                fill(interE3);
            }
            else if (z<26) {
                fill(interE6);
            }
            else if (z<28) {
                fill(F);
            }
            else if (z<30) {
                fill(interF3);
            }
            else if (z<32) {
                fill(interF6);
            }
            else if (z<34) {
                fill(G);
            }
            else if (z<36) {
                fill(interG);
            }
            else if (z<38) {
                fill(H);
            }
            else if (z<40) {
                fill(interH3);
            }
            else if (z<42) {
                fill(interH6);
            }
            else if (z<44) {
                fill(I);
            }
            else if (z<46) {
                fill(interI3);
            }
            else if (z<48) {
                fill(interI6);
            }
            else {
                fill(J);
            }
            rect(480, 100, z/3, z);
        }
    pop();

    // HOUR 
    push();
    fill(186, 227, 247);
    translate(-92, -92);                                
    arc(100, 100, 300, 300, HALF_PI - radians(7.5*h), HALF_PI);   // shows pie according to hour 
    pop();
} // end of draw function

The design of my abstract clock is an abstraction of the solar system; with a shooting star indicating the seconds, the array of planets indicating the minutes and the degree of the sun visible indicating the hour of the current time. Although the different time units are represented distinctively, through the motion/ the flow of its directionality I tried to harmonize them better. One thing I would improve upon is the color gradation seen in the minutes; I feel like there is a much more efficient way to get the same affect.

       

 

afukuda-LookingOutwards-06

13/9/65 Nr. 2 (Hommage à Paul Klee) 

13/9/65 Nr. 2 (Hommage à Paul Klee) by Frieder Nake is said to be one of the most frequently cited earliest phase of computer art (mid-1960s). I admire how the work plays with the fine line of whether it was hand-crated or computer-generated, which makes the work engaging and intriguing. According to Programm-Information PI-21 where Nake describes the processes involved in generating this artwork, he lists all of the random elements of this work: width of horizontal bands, “buckling” of horizontal bands from left to right, vertical lines of triangles, size (radius) of the circles. It is also intriguing that this piece of work contains numerous variables that are randomized, yet because of the constancy of the general ‘rules’ (having bands of horizontal rules with an array of vertical bands periodically, etc.), the artwork maintains its intention and does not seem utterly random.

Link | http://dada.compart-bremen.de/item/artwork/414

Work | Frieder Nake. 13/9/65 Nr. 2 (Hommage à Paul Klee). 13. 09. 1965

afukuda-Project-05-Wallpaper


afukuda-project-05-wallpaper

/* 
 * Name | Ai Fukuda 
 * Course Section | C 
 * Email | afukuda@andrew.cmu.edu
 * Project | 05
 */ 

var diamondX // x-coordinate for diamond  
var x // horizontal line increment 
var y // vertical line increment 

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

function draw() {
    background(140, 164, 212);
    stroke(219, 242, 248);
 
    for (y = 0; y <481; y += 80) {        
        for (x = 0; x < 481; x += 80) {                

        // ODD COLUMN GEOMETRY 
            if (x%160 == 0) {                                     // calling only odd columns 
                line(x, y, x+80, y);                                 // array horizontal lines 
                line(x, y+40, x+40, y);                              // array top-left diamond lines 
                line(x, y+40, x+40, y+80)                            // array bottom-left diamond lines
                line(x+40, y, x+80, y+40);                           // array top-right diamond lines
                line(x+40, y+80, x+80, y+40);                        // array bottom-right diamond lines 
               
                
                for (diamondX = 0; diamondX < 41; diamondX += 8) {    
                    if (y%160 == 0) {                             // from odd columns - calling only odd rows
                      line(x+40, y, x+diamondX, (y+40)+diamondX);       // array fanning-left lines (fan down)
                      line(x+40, y, (x+40)+diamondX, (y+80)-diamondX);  // array fanning-right lines (fan down)  

                      // TURQUOISE TRIANGLE (BOTTOM)
                      push();
                      fill(193, 228, 221);
                      beginShape();
                        vertex(x, y);
                        vertex(x+40, y);
                        vertex(x, y+40);
                      endShape();   
                      pop();

                      // LIGHT BLUE TRIANGLE (TOP)
                      push();
                      fill(209, 226, 244);
                      beginShape();
                        vertex(x, y);
                        vertex(x, y-40);
                        vertex(x+40, y);
                      endShape();   
                      pop();
                    }

                    else {                                        // from odd columns - calling now even rows 
                      line(x+40, y+80, x+diamondX, (y+40)-diamondX);    // array fanning-left lines (fan up)
                      line(x+40, y+80, (x+40)+diamondX, y+diamondX);    // array fanning-right lines (fan up)

                      noFill();
                      ellipse(x-40, y, 138, 80);                        // array oval 
                      arc(x+40, y-40, 138, 80, 0, PI);                  // array oval (bottom-half)
                      arc(x+40, y+40, 138, 80, PI, 0);                  // array oval (top-half)

                      // TURQUOISE TRIANGLE (TOP)
                      push();
                      fill(193, 228, 221);
                      beginShape();
                        vertex(x+40, y+80);
                        vertex(x+80, y+40);
                        vertex(x+80, y+80);
                      endShape();   
                      pop();

                      // LIGHT BLUE TRIANGLE (BOTTOM)
                      push();
                      fill(209, 226, 244);
                      beginShape();
                        vertex(x+40, y-80);
                        vertex(x+80, y-80);
                        vertex(x+80, y-40);
                      endShape();   
                      pop();
                    }
                } 
            }

        // EVEN COLUMN GEOMETRY
            else {
                line(x, y+40, x+80, y+40);     // array horizontal lines 
                
                line(x, y, x+40, y+40);        // array top-left diagonal lines 
                line(x+40, y+40, x, y+80);     // array bottom-left diagonal lines 
                line(x+40, y+40, x+80, y);     // array bottom-right diagonal lines 
                line(x+40, y+40, x+80, y+80);  // array top-right diagonal lines 

                if (y%160 == 0) {                    // from even columns - calling only odd rows   
                    line(x, y-40, x, y+40);          // array left vertical lines 
                    line(x+80, y-40, x+80, y+40);    // array right vertical lines 

                    // ORANGE DIAMOND OFFSET (TOP)
                    push();
                    fill(253, 203, 167);
                    beginShape();
                      vertex(x, y);      
                      vertex(x+40, y-40); 
                      vertex(x+80, y);  
                      vertex((x+80)-(20/sqrt(2)-5), y+10); 
                      vertex(x+40, y-20);
                      vertex(x+(20/sqrt(2)-5), y+10);
                    endShape();
                    pop();
                    
                    // PINK ELLIPSE (TOP)
                    ellipseMode(CENTER);
                    fill(249, 200, 203);
                    ellipse(x+40, y+26, 20, 20);     
                }

                else {                               // from even columns - calling now even rows 
                    // PINK ELLIPSE (BOTTOM)
                    fill(249, 200, 203);             
                    ellipse(x+40, y-25, 20, 20);
                    
                    // ORANGE DIAMOND OFFSET (BOTTOM)  
                    push();
                    fill(253, 203, 167);
                    beginShape();
                      vertex(x, y);
                      vertex(x+(20/sqrt(2)-3), y-10);
                      vertex(x+40, y+20);         
                      vertex((x+80)-(20/sqrt(2)-5), y-10);
                      vertex(x+80, y);
                      vertex(x+40, y+40);
                    endShape();
                    pop();
                }
            }                                                 
        }
    }  

} // draw function end bracket

My wallpaper was inspired by this geometric pattern I came across while brainstorming for ideas. One thing I noticed upon completing the base of the pattern, was that while it does exhibit a degree of offset row by row, it still had a very strong vertical presence. In order to mitigate the verticality of the pattern I incorporated the overlapping ellipses to create a floral, petal-like design horizontally across the canvas. Finally I added some colors in specific moments to make the wallpaper stand out more.

afukuda-LookingOutwards-05

Persona in Fields 

Persona in Fields by Sherban Epure is a series of inkjet prints that fuses mathematical rules, fine art and technological capabilities to produce visual metaphors. It is a part of his collection of computer-executed, mathematically-based work. The fascinating aspect of this particular work (P211_181_neg of the series), is that it is an aesthetically-pleasing piece of work comprised of mathematical components that were computationally programmed. And because it was computationally programmed, it allows for alterations in the various stages of the work without any of the other stages being affected.  This cannot be achieved in conventional paintings, where once a layer of paint and/or detail has been placed on the canvas it would be impossible to alter that ‘stage’, and the final stage of the work is displayed. Without a more specific description from the artist it is hard to gather what mathematical theories and what form of computational manipulations were incorporated to produce this artwork, but the general nuance of the creation process is described as aforementioned. Epure also has a series of hand-executed work based on mathematics in which he attempts to convey that incorporating computational aspects in the production of art does not diminish the value and/or interest of the work.

Link | http://sherban-epure.com/Meta-Phorms-A/Computer_executed_mathematically_based_work/Pages/Persona_in_Fields_2001-2003.html

Work | Sherban Epure, 2001-2003

afukuda-Project04

afukuda-project-04

/* 
 * Name | Ai Fukuda 
 * Course Section | C 
 * Email | afukuda@andrew.cmu.edu
 * Assignment | 04-b
 */ 

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

function draw() {
    background(206, 236, 236);

    var x1;                     // x-coordinate of vertices 
    var y1 = 160;               // initial y-coordinate of vertices 

// PURPLE LINES (THICK)
    strokeWeight(1.5);                           
    stroke(204, 178, 213);

    for (var x1 = 130; x1 < 201; x1+=10) {      // top-left lines    
        line(100, 50, x1, 120+(y1-x1));
    }

    for (var x1 = 200; x1 < 271; x1+=10) {      // top-right lines 
        line(300, 50, x1, x1-120); 
    }

    for (var x1 = 130; x1 < 201; x1+=10) {      // bottom-left lines     
        line(100, 250, x1, x1+20);
    }

    for (var x1 = 200; x1 < 271; x1+=10) {      // bottom-right lines 
        line(300, 250, x1, 420-x1);          
    }

// PURPLE LINES (THIN)
    strokeWeight(1);
     for (var x1 = 130; x1 < 201; x1+=10) {     // top-left lines     
        line(200, 150, x1, 120+(y1-x1));
    }

    for (var x1 = 200; x1 < 271; x1+=10) {      // top-right lines 
        line(200, 150, x1, x1-120); 
    }

    for (var x1 = 130; x1 < 201; x1+=10) {      // bottom-left lines     
        line(200, 150, x1, x1+20);
    }

    for (var x1 = 200; x1 < 271; x1+=10) {      // bottom-right lines 
        line(200, 150, x1, y1+260-x1);          
    }


// ORANGE LINES 
    strokeWeight(1);           
    stroke(253, 205, 167);     

    // top set of lines 
    for (var x1 = 130; x1 < 201; x1+=10) {       // top-left lines     
        line(200, 20, x1, 120+(y1-x1));
    }

    for (var x1 = 200; x1 < 271; x1+=10) {      // top-right lines 
        line(200, 20, x1, x1-120); 
    }

    // left set of lines 
    for (var x1 = 130; x1 < 201; x1+=10) {       // left-top lines     
        line(70, 150, x1, 120+(y1-x1));
    }

    for (var x1 = 130; x1 < 201; x1+=10) {       // left-bottom lines   
        line(70, 150, x1, x1+20);
    }

    // bottom set of lines 
    for (var x1 = 130; x1 < 201; x1+=10) {       // bottom-left lines     
        line(200, 280, x1, x1+20);
    }

     for (var x1 = 200; x1 < 271; x1+=10) {      // bottom-right lines 
        line(200, 280, x1, y1+260-x1);         
    }

    // right set of lines 
     for (var x1 = 200; x1 < 271; x1+=10) {     // top-right lines 
        line(330, 150, x1, x1-120); 
    }

    for (var x1 = 200; x1 < 271; x1+=10) {      // bottom-right lines 
        line(330, 150, x1, y1+260-x1);         
    }

// BLUE LINES 
    strokeWeight(1);           
    stroke(140, 164, 212); 

    line(130, 150, 200, 80);
    line(200, 80, 270, 150);
    line(130, 150, 200, 220);
    line(200, 220, 270, 150);

// BLUE VERTICES 
/*
    strokeWeight(3);                            
    fill(140, 164, 212);

    point(100, 50);                     // primary geometry vertices (purple)
    point(300, 50);
    point(100, 250); 
    point(300, 250);

    point(200, 20);                    // secondary geometry vertices (orange)
    point(70, 150);
    point(200, 280);
    point(330, 150);

    point(200, 150);                   // center of geometry 
*/
    
}

I was able to generate this string art by simply declaring two variables: one for the initial x-coordinate and another for the y-coordinate. I began with the top-left set of purple curves, and translated those appropriately to create the geometry. Things that I could improve are: using rotation to make the code much simpler, and to use variables so the geometry becomes dynamic.

Process work:

afukuda-LookingOutwards04

The Classyfier

The Classyfier by Benedict Hubener, Stephanie Lee and Kelvyn Marte at the Copenhagen Institute of Interaction Design (CIID) is a table that utilizes AI to detect the social scenario (through beverages being consumed) and reciprocates with appropriate music. This project intrigued me, as I was mesmerized with how technology is able to clearly detect and differentiate the difference between the “clanking” of various beverages. And I could see this experimental project being applied to enhance the capabilities of voice recognition technologies such as “echo” and “siri”; currently they are only able to do what they are told to do, but perhaps in the near future they would be able to read (through AI) different situations and act accordingly. The project brief indicated that the table contains a built-in microphone which catches characteristic sounds and compares these sounds to a predetermined catalogue. This catalogue contains three classes – hot beverages, wine and beer, with each class having its own associated playlist that one can navigate through by knocking on the table. Other algorithmic aspects include machine learning, Wekinator, Processing & OFX collection. The creator’s artistic sensibilities does manifest in a tangible or visual manner but rather musically.

Link |

The Classyfier – AI detects situation and appropriates music

Classyfier

(both pages include video)

Work | Benedict Hubener, Stephanie Lee & Kelvyn Marte, unknown year

afukuda_Project03

afukuda-project-03

/* 
   Name | Ai Fukuda 
   Course Section | C 
   Email | afukuda@andrew.cmu.edu
   Project | 02-VariableFaces
*/ 

var deg = mouseX;
var rad = radians(deg);
var size = 5;
 

function setup() {
    createCanvas(640, 480);
    rectMode(CENTER);
}

function draw() {
    background(214,233,248);
    if (mouseX > (width / 2)) {                                // change background color 
        background (219,233,198);
    }

    noStroke();                                                // orange square 
    fill(253, 205, 167);
    rect(40+mouseX, max((480 - mouseX)-60, 240), 40, 40);
    if (mouseX > 300) {                                
        fill(182,178,215);
    }

    fill(249, 200, 203);                                      // pink square 
    rect(60+mouseX, min((480 - mouseX)-60, 200), 60, 60);

    fill(254, 232, 147);    
    rotate(rad);                                              // yellow square
    rect(100+mouseX, min(mouseX-220), (mouseX*0.25)+60, (mouseX*0.25)+60);

    
}

 

afukuda_LookingOutwards03

Bolbemit by Studio Nick Ervinck has a parasitic presence in the chapel, yet it somehow manages to be harmonious as well. This peculiar balance between the innovative and orthodox is what was most memorable and inspirational about this piece of work. While traditionally the ceilings of churches portray biblical scenes, the heavens and so forth, Ervinck challenges this norm through the installation of his modern ‘blob sculptures’. This computer-generated design further questions the rigidity and immobility of architectural structure; as an architecture student I appreciate his inquisitive challenging approach of work. From the almost topographic nature of the Bolbemit, it can be intuitively thought that there is a radial formula involved, with different variables so as to differentiate between the previous geometry. The questioning of the compatibility between virtual and actual space is a recurring theme in the work of Ervinck, and that is clearly reflected in this work as well.

Link | http://nickervinck.com/en/works/detail-2/bolbemit-2

Work | Nick Ervinck, 2014