Section C – Page 20 – [OLD FALL 2017] 15-104 • Introduction to Computing for Creative Practice

karinac-LookingOutwards-06

These drawings were created by an app called Silk, developed by Yuri Vishnevsky. Users can generate their own art by picking colors and dragging their mouse through the canvas. Random algorithms are generated as your mouse moves across the screen to create the effect of the different strokes that can be seen in the pictures. When you stop mouse your mouse, colors and shapes are still generated around your mouse due to the random code in the software.

I thought this app is the perfect way to create interactive and generative art. I was really intrigued by the design of this app because it utilizes the random algorithms to create a piece of cool art that people can enjoy looking at.

Here is the link to the online website:
http://weavesilk.com/

serinal – looking outwards 06 (section C)

I know a lot of artists often use randomness in their work, but I don’t think I have seen computational randomness art. After looking through some stuff, I stumbled upon this artist, Linyi Dai. She is a graduate of RISD and currently is a designer at Ogawa Depardon Architects. Her work for Coding Architecture features this really cool growth of a spherical infrastructure. I love the way that it grows at the same time to show the randomness that comes out of each of the four spheres. I am not completely sure what the coding background of this is, but I do know that a lot of architects employ randomness into their practice. You can see the architectural background in this piece as it is pretty structured and seems relatively calculated. Overall, I think Dai’s work is really cool and I would be extremely interested in seeing more types of computational randomness artwork.

link to find her

link to the work

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

ashleyc1-Section C-Looking Outwards-06

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/

ikrsek-Looking Outwards-06

Randomness

The piece that I am choosing to write about for this week’s looking outwards is one which adheres to a more visual randomness, than randomness in regards to intention. The artist of this work is Casey Reas, and this work is an amalgamation of video, photography, and computation which results in seemingly randomized but stunning visual dissonance. Specifically his work in his semi-recent show of about a year, ULTRACONCENTRATED, seems to revel in visuals like these. The pieces however, are not just skin deep – they are meant to be representations of the body through media – each small rectangle a screen snatched from terrestrial television broadcasts. Reas created custom software to pickup on and distort/visualize the signals that flow through the air, and inherently through our bodies – signals which we use to communicate, share, and in doing so plays with our perception of technology and mass media.

Bettina-LookingOutwards-06-SectionC

Generative poster wall display, an installation created by Dutch design company Lust Design.

This installation generates hundreds of unique posters from various internet sources, and new posters are generated when a new visitor enters/interacts with the space. In this way, the project is random not necessarily because the code itself calls random variables (i.e. when we set a value to random()) but because the conditions under which items are generated on random: one cannot predict when and how people will interact with the exhibit or what content will be available online at that time. Surely, there are still set constraints, but the dependence on audience interaction makes this piece feel as if viewers take part in creating the art. I admire how the system needs to have a level of ambiguity to adapt to visitor interactions– that concept is reminiscent of how designers are taught to be comfortable with ambiguity as well. According to the studio’s site, the piece was implemented using a series of kinects. I’d be interested in learning to code with hardware, such as arduino or raspberry pi. My impression is that using such components allows one to create more spatial and interactive pieces instead of experiences on a laptop screen.

sijings-lookingOutwards-06

http://color-wander.surge.sh
video cannot be embedded here and thus a link is provided.

My ideas for the use of randomness in the computation of art is about randomized patterns that a function computes. “Generative Art with Node.js and Canvas” is one of the randomized artwork I appreciated. This is not a famous art piece but a small weekend project that combines Node.js and HTML5 Canvas to create high-resolution generative artwork. The reason I chose this instead of other big names works is because of the amazing color combination and the shape of each growing elements. Visually, this appears to me as a really interesting and aesthetic artwork. In the artist’s blog, he detailedly records of his process. He chose to use Node.js, pursuing a fast speed and a high resolution of the pattern.

In each version, the particle is rendered as a small pattern with direction and velocity. The scale and the mass’ scale is randomized to reach some straight and curly lines. After this, he uses photographs as “distortion maps” to drive the algorithm so some of his work looks as random segments creating some larger scale pattern. Lastly, he randomized the color from the “color lovers API”. He also uses many randomizations including the choice of color, the scale of particles, and the mass’ scale. Thus, I think this uses a “truly” random method for accomplishing the final results. Overall, I enjoyed the visual pattern and the pattern each particle accomplished.

Generative Art with Node.js and Canvas

abradbur – Project-05 – Wallpaper

rainyday

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

function draw() {
    background(22, 79, 119);
    noStroke();
    //rain
    for (var y = 0; y < 480; y += 5){
        for (var x = 0; x < 480; x += 5){
            fill(30, 190, 177);
            ellipse(x, y, 1, 1);
        }
    }

    for (var x = 0; x < 480; x += 96){
        for (var y = 0; y< 480; y+= 96){
            push();
            translate(x,y);
            drawTile();
            pop();

        }
    }
}

function drawTile(){


    //umbrella
    fill(60, 56, 68);
    quad(18, 66, 42, 34, 45, 35, 21, 67);
    rect(18, 66, 7, 3, 20);
    fill(151, 17, 55);
    triangle(24, 30, 60, 12, 36, 36);
    fill(151, 59, 86);
    triangle(36, 36, 60, 12, 48, 51);
    fill(151, 17, 55);
    triangle(48, 51, 60, 12, 54, 54);
    fill(243, 207, 118);
    triangle(60, 10, 64, 9, 63, 13);
    triangle(60, 10, 57, 12, 55, 8);
    triangle(58, 10, 55, 16, 63, 13);
    triangle(59, 14, 66, 16, 63, 12);
    fill(108, 13, 40);
    ellipse(60, 12, 3.5);

    
}

I wanted to make a cute wallpaper with umbrellas to signify my deep seated hope that maybe Pittsburgh will start cooling down for Fall and stop cooking us alive at 80 – 90 degrees. Let the rain fall.

Coding the loop was pretty simple, coding the shapes is still the most finicky part. However, using graph paper to sketch out things first helps.

ikrsek-Looking Outwards-05

This week for the topic of Computer Graphics, one of the most compelling artists that utilizes CG for their work would be Hayden Zezula. He works primarily as an animator doing designs and such for brands like Adidas, HBO, or Adultswim – and mucho of his portfolio work comes in the form of gifs or video. Overall, the reason why I chose him is because of his experimentation with representing texture and form in a 3D style on a 2d screen. His work is extremely visually captivating, both because of the bizarre content that is displayed and the sheer technical ability he diplays. There is not a lot to be said for his work that isn’t said by the work itself, and unfortunately I can only post photos of it since gifs don’t seem to play when you post them here, so here are a few screenshots – though I highly recommend you visit his website or instagram and view the work as it is meant to be seen.

Websites:

http://zolloc.com/work/

https://www.instagram.com/zolloc/