Month: September 2020

LookingOutwards-02

The work that I find inspirational is “Cables” created by Moka. It is the exact work that I like the ways of which the cables are intertwined in an order. Plus, the colors of the background and the cables are all appealing. The cables with light yellow and blue are spread horizontally and the others with pink and deep blue are spread vertically, but we don’t find the whole artwork to be complex, instead I think it is rather neat. I suppose the algorithm that generated the work is a program that can select the colors of the “lines” and the intervals of each color. The lines are probably on different covers so that they seem to be up or below one another. The artist hopes that his works can reveal a similar relationship between us and the machines. The crooked cables are arranged parallel to one another, and I think this is telling the audience how complicated information is transported and how the development of technology is forming our lives in a way that we don’t usually perceive. The different colors of each cable illustrates a different type of material that is transported through cables, whose colorfulness shows that our wonderful and convenient life is a bliss from technologies.

Cables, Moka, 2020

https://www.mokafolio.de/works/Cables

Looking Outwards 2 – Generative Art

I really admire the video game “Panoramical” by Fernando Ramallo and David Kanaga. It is a very beautiful and immersive experience through a world of stunning visuals and music. The landscapes and music inside the game change based on the player’s input. 

I admire this work of generative art because of its beauty and interactivity. To put it bluntly, a lot of computer generated artworks have interesting concepts but are lacking in the quality of experience they provide. “Panoramical” on the other hand draws you in with otherworldly visuals and sounds. It is otherworldly due to the usage of algorithms, but it is beautiful due to the creators’ sensibilities to colors and sound. Each landscape and how they change is designed with care, and the music is designed to immerse players into the landscape.

“Panoramical” stands out from motion graphics and animated experiences due to its interactivity. Thanks to the creators’ usage of algorithms to  “connect multiple sensory variables to [the player’s] actions” (1), the player actively becomes a part of the experience. 

I think “Panoramical” is a good example of how the infinite possibilities of algorithms working inside the bounds of an artist’s design can create an unique and beautiful experience. 

Work Cited

  1. “Generative Art: Best Examples, Tools & Artists (2020 GUIDE).” AIArtists.org, aiartists.org/generative-art-design.

LO-2-Generative Art

Upon looking through Robert Hodgin’s portfolio, a project that caught my attention was “Star Chart.” This project was completed in April 2020 and is essentially a map of constellations from any time and location. As a statistics major, I study a lot about data so the fact that this project was achieved through the use of astronomical databases piqued my interest. I admire how he was able to take something rather unexciting and imperceptible like a database of numbers and made it into something much more visual and stimulating. This project was a continuation from a previous project of his from 2012 where he plotted about 120,000 different star positions in a 3-D space to mimic the stars surrounding the sun. For this new project, however, he wanted to show the night sky view of the stars so he used stereographic projection, which projects a sphere onto a plane.
Hodgin’s interest in physics and astronomy requires accuracy and precision, which suit perfectly with his methods of using data visualization to create his projects.

Project 2 – Variable Face

VariableFaces
var faceWidth = 60;
var faceHeight = 60;
var mouthWidth = 50;
var mouthHeight = 30;
var eyeWidth = 70;
var eyeHeight = 70; 
var browHeight = 60;

let ecolor = 255;
let bcolor = 10;

function setup() {
    createCanvas(480, 640);
    background(220);
    text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {
    background(bcolor)

    var x = width/2;
    var y = height/2;

    //hair
    fill(29, 22, 16);
    noStroke();
    ellipse(x, y - (1.5 * faceHeight), 6*faceWidth, 6*faceHeight);
    rect(x - (3*faceWidth), y - (1.5 * faceHeight), 6*faceWidth, 5*faceHeight);

    //ears 
    fill(171, 113, 88);
    ellipse(x - (1.5 * faceWidth), y, 2*faceWidth, 2*faceHeight);
    ellipse(x + (1.5 * faceWidth), y, 2*faceWidth, 2*faceHeight);

    //earrings
    noFill();
    stroke(ecolor);
    strokeWeight(8);
    circle(x - (1.5 * faceWidth), y + faceHeight, 95);
    circle(x + (1.5 * faceWidth), y + faceHeight, 95);

    //face
    fill(171, 113, 88);
    noStroke();
    ellipse(x, y - (1.5 * faceHeight), 4*faceWidth, 4*faceHeight);
    rect(x - 2*faceWidth, y - 1.5*faceHeight, 4*faceWidth, 2*faceHeight);
    ellipse(x, y + 0.5*faceHeight, 4*faceWidth, 4*faceHeight);

    //nose
    noStroke();
    fill(0, 0, 0);
    ellipse(x - 10, y, 8, 4);
    ellipse(x + 10, y, 8, 4);

    //mouth
    strokeWeight(5);
    stroke(235, 76, 61);
    fill(0, 0, 0);
    ellipse(x , y + 50, mouthWidth, mouthHeight);

    //eyes
    strokeWeight(5);
    stroke(0, 0, 0);
    fill(255, 255, 255);
    ellipse(x - faceWidth, y - faceHeight, eyeWidth, eyeHeight);
    ellipse(x + faceWidth, y - faceHeight, eyeWidth, eyeHeight);

    //pupils
    fill(0, 0, 0);
    var a = constrain(mouseX, (x + faceWidth) - (eyeWidth/2) + 20, (x + faceWidth) + (eyeWidth/2) - 20);
    var b = constrain(mouseY, (y - faceHeight) - (eyeHeight/2) + 20, (y - faceHeight) + (eyeHeight/2) - 20);
    ellipse(a, b, 30, 30);
    var a = constrain(mouseX, (x - faceWidth) - (eyeWidth/2) + 20, (x - faceWidth) + (eyeWidth/2) - 20);
    var b = constrain(mouseY, (y - faceHeight) - (eyeHeight/2) + 20, (y- faceHeight) + (eyeHeight/2) - 20);
    ellipse(a, b, 30, 30);

    //bindi
    noStroke();
    fill(ecolor);
    circle(x, y - (2*faceHeight), 25, 25);

    //eyebrows
    strokeWeight(9);
    stroke(0);
    line(x-(faceWidth*1.5), y-(2*faceHeight), x-(faceWidth*0.5), y-(2*browHeight));
    line(x-(faceWidth*1.5), y-(2*faceHeight), x-(faceWidth*0.5), y-(2*browHeight));
    line(x+(faceWidth*1.5), y-(2*faceHeight), x+(faceWidth*0.5), y-(2*browHeight));
    line(x+(faceWidth*1.5), y-(2*faceHeight), x+(faceWidth*0.5), y-(2*browHeight));

}

function mousePressed() {
    clear(0);
    faceWidth = random(40,75);
    faceHeight = random(35,70);
    mouthHeight = random(20,80);
    mouthWidth = random(30,90);
    eyeWidth = random(60,80);
    eyeHeight = random(60,80);
    browHeight = random(45,65);

    bcolor = color(random(255), random(255), random(255));
    ecolor = color(random(255), random(255), random(255));

}
Initial Sketch

For this project I started by drawing it on Illustrator. I wanted to continue to iterate on what I created for project one. I decided to keep the face color and nose size consistent and everything else variable. I also added earrings and a bindi for some more personalization.

Project-02-Variable-Face

powerpuffDownload
//Annie Kim
//andrewID: anniekim
//Section B

var Reye= 228; //color of original eye (red)
var Geye = 175; //color of original eye (green)
var Beye = 195; //color of original eye (blue)
var HR = 255; //color of original hair (red)
var HG = 159; //color of original hair (green)
var HB = 65; //color of original hair (blue)
var pupil = 20; // diameter of pupil
var heart1r = 227; //red of heart1
var heart1g = 83; //green of heart1
var heart1b = 102; //blue of heart1
var heart2r = 232; //red of heart2
var heart2g = 138; // green of heart2
var heart2b = 173; //blue of heart 2
var backgroundr = 158 // red of background
var backgroundg = 15 // green of background
var backgroundb = 28 // blue of background
var StrokeArrow = 15; //stroke size of arrow
var RectColorR = 218; //red of right background
var RectColorG = 127; // green of right background
var RectColorB = 157; // blue of right background
var backR = 216; // red of original background
var backG = 77; // green of original background
var backB = 82; //blue of original background
var smilecurvex = 20; //width of smile
var smilecurvey = 15; //height of smile


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

function draw() {
    background(backR, backG, backB);


    //right half of background
    stroke(RectColorR, RectColorG, RectColorB);
    fill(RectColorR, RectColorG, RectColorB);
    rect(320, 0, 320, 480);


     //lines across
    stroke(248, 206, 93);
    strokeWeight(StrokeArrow);
    line(140, 380, 550, 80);
    line(65, 370, 140, 380);
    line(100, 450, 140, 380);
    fill(248, 206, 93);
    triangle(540, 57, 575, 100, 580, 60);


//heart1 forming
    fill(heart1r, heart1g, heart1b);
    strokeWeight(7);
    stroke(heart1r, heart1g, heart1b);
    triangle(171, 210, 469, 210, 320, 440);
    circle(244, 183, 155);
    circle(396, 183, 155);

//second heart layer
    fill(heart2r, heart2g, heart2b);
    stroke(heart2r, heart2g, heart2b);
    triangle(240, 240, 400, 240, 320, 360);
    circle(359, 220, 92);
    circle(281, 220, 92);

//middle hair behind the back
    fill(HR, HG, HB);
    stroke(HR, HG, HB);
    arc(320, 260, 120, 140, 0, PI, CHORD);
    triangle(320, 200, 275, 260, 365, 260);

    //body middle
    fill(Reye, Geye, Beye);
    stroke(0);
    strokeWeight(5);
    rect(295, 220, 50, 80);
    fill(0);
    rect(295, 245, 50, 30);
    fill(255);
    stroke(255);
    rect(328, 305, 15, 40);
    ellipse(297, 297, 25, 45);
    fill(0);
    stroke(0);
    arc(297, 297, 25, 45, 0, PI, CHORD); //left shoe
    arc(335.5, 337, 17, 35, 0, PI, CHORD); //right shoe

    //recovering black stroke
    stroke(0);

    //middle right arm
    fill(246, 232, 219);
    stroke(246, 232, 219);
    circle(230, 240, 30);
    circle(410, 120, 30);
    stroke(246, 232, 219);
    rect(395, 120, 30, 40);
    triangle(395, 160, 422, 164, 377, 200);
    triangle(235, 225, 295, 225, 243, 249);

 //middle bow
    fill(255, 0, 0);
    stroke(255, 0, 0);
    circle(270, 80, 25);
    circle(375, 80, 25);
    triangle(257, 89, 255, 155, 295, 170);
    strokeWeight(30);
    line(274, 85, 310, 170);
    strokeWeight(1);
    arc(320, 120, 60, 35, PI, 0);
    strokeWeight(30);
    line(375, 80, 330, 170);
    line(375, 80, 370, 175);


    //head middle
    strokeWeight(2);
    fill(246, 232, 219);
    stroke(0);
    ellipse(320, 177, 135, 110);
    

    //middle eyes
    strokeWeight(2);
    fill(255);
    circle(283, 175, 60);
    circle(355, 175, 60);
    fill(Reye, Geye, Beye);
    stroke(Reye, Geye, Beye);
    circle(350, 178, 45); // color of right eye pink 
    circle(290, 178, 45); // color of left eye pink
    noFill();
    stroke(0);
    circle(283, 175, 60);
    circle(355, 175, 60);
    fill(0);
    stroke(0);
    circle(346, 180, 35); // black of right eye
    circle(294, 180, 35); // black of left eye
    fill(255);
    circle(346, 180, pupil);
    circle(294, 180, pupil);


    //middle bangs
    fill(HR, HG, HB);
    stroke(0);
    strokeWeight(1.5);
    arc(320, 150, 118, 52, PI, 0, CHORD);
    fill(246, 232, 219);
    stroke(246, 232, 219);
    triangle(320, 135, 310, 155, 330, 155);


    //overlapping head shape
    noFill();
    stroke(0);
    strokeWeight(5);
    ellipse(320, 177, 135, 110);

     //middle smile
    noFill();
    strokeWeight(2);
    arc(320, 205, smilecurvex, smilecurvey, 0, PI);
 
}
    function mouseClicked() {
    Reye = random(0, 255);
    Geye = random(0, 255);
    Beye = random(0, 255);
    HR = random(0,255);
    HG = random(0, 255);
    HB = random(0, 255);
    pupil = random(15, 35);
    heart1r = random(100, 255);
    heart1g = random(75, 90);
    heart1b = random(80, 110);
    heart2r = random(0, 100);
    heart2g = random(0, 100);
    heart2b = random(0,100);
    backgroundr = random(150, 200);
    backgroundg = random(15, 25);
    backgroundb = random(20,30);
    StrokeArrow = random(1, 20);
    RectColorR = random(200,220);
    RectColorG = random(110, 130);
    RectColorB = random(150, 160);
    backR = random(200, 255);
    backG = random(50, 100);
    backB = random(60, 100);
    smilecurvex = random(15, 45);
    smilecurvey = random(15, 45);
}

I decided to create a PowerPuff character because I thought it would be interesting to see how the appearance of the character would change with each click, and I wanted to see if I could get it to look like the other PowerPuff characters by continuously clicking. I worked on most of the shapes (such as the bow, the hair, the hearts, etc) by putting together a variety of shapes. It was a little challenging to make sure everything aligned perfectly. One of the hardest things was making sure that everything remained proportionate to the actual character from the show. I think that this does a nice job of making this character essentially customizable because you can keep clicking until you are happy with the color and sizes of different features.

Project 2: Variable Face

generative_faces

var bgColor;
var blushColor;
var cheekBlush;
var blushSize;
var blushHeight;
var faceWidth;
var faceHeight;
var faceStyle;
var Bun;
var bunY;
var noseStyle;
var mouthStyle;
var eyeStyle;

function setup() {
    createCanvas(600, 600);
    //background(220);
    //text("p5.js vers 0.9.0 test.", 10, 15);

    bgColor = color(255, 235, 232);
    blushColor = color(255, 138, 130);
    cheekBlush = 0;
    blushSize = 0;
    blushHeight = 0;
    Bun = 0;
    bunY = 0;
    noseStyle = 0;
    faceStyle = 0;
    mouthStyle = 0;
    eyeStyle = 0;
}

function draw() {
    background(bgColor);

    // HAIR BUNS
    fill(0);
    ellipse((width/3), bunY, Bun, Bun); 
    ellipse((width/1.5), bunY, Bun, Bun);

    // FACE
    fill(255);
    strokeWeight(5);
    if (faceStyle >= 2) {
        ellipse((width/2), (height/2), 300, 300); //circular face
    }
    else if (faceStyle >= 1) { //teardrop face
        ellipse((width/2), (height/2.2), 360, 250);
        bezier(475, 300, 400, 500, 220, 550, 125, 300);
    }
    else {
        ellipse((width/2), (height/2), 350, 280); //oval face
    }

    // EYES
    if (eyeStyle >= 2){ //oval eyes
    push();
    fill(255);
    ellipse((width-375), (height-300), 50, 35); // left eye
    ellipse((width-225), (height-300), 50, 35); // right eye

    noStroke();
    fill(0);
    ellipse((width-375), (height-300), 30, 30); //left pupil
    ellipse((width-225), (height-300), 30, 30); // right pupil
    pop();
    }
    else if (eyeStyle >= 1) { //round owl eyes
        stroke(5);
        push();
        fill(255);
        ellipse((width-375), (height-300), 60, 60); //left eye
        ellipse((width-225), (height-300), 60, 60); //right eye
        noStroke();
        fill(0);
        ellipse((width-375), (height-300), 45, 45); //left pupil
        ellipse((width-225), (height-300), 45, 45); //right pupil
        pop();
    }
    else { //closed eyes
        arc((width-375), (height-300), 50, 35, HALF_PI + HALF_PI, TWO_PI); //left eye
        arc((width-225), (height-300), 50, 35, HALF_PI + HALF_PI, TWO_PI); //right eye
    }

    // BLUSHING CHEEKS
    if (cheekBlush >= 0.5){
        push();
        fill(blushColor);
        noStroke();
        ellipse((width-400), blushHeight, blushSize, blushSize); //left blush
        ellipse((width-200), blushHeight, blushSize, blushSize); //right blush
        pop();
    }

    //MOUTH
    noFill();
    strokeWeight(5);
    if (mouthStyle >= 2){ //closed smile
        arc((width-300), (height-280), 200, 140, QUARTER_PI, QUARTER_PI + HALF_PI);
    }
    else if (mouthStyle >= 1){ //open smile
        push();
        fill(0);
        translate((width-300), (height-220));
        rotate(TWO_PI);
        arc(0, 0, 75, 50, 0, PI, CHORD);
        pop();
    }
    else { //shocked mouth
        fill(0);
        ellipse((width/2), (height - 205), 50, 50);
    }

    //NOSE
    if (noseStyle >= 2) {
        noFill();
        arc((width-300), (height-270), 45, 55, QUARTER_PI, QUARTER_PI + HALF_PI); //down-turned nose
    } else if (noseStyle >= 1){ //nostrils
        push();
        noStroke();
        fill(0);
        ellipse((width-310), (height-250), 10, 10); //left nostril
        ellipse((width-290), (height-250), 10, 10); //right nostril
        pop();
    }
    else { //pink button nose
        fill(blushColor); 
        ellipse((width/2), (height-260), 20, 20);
    }

    //BANGS
    fill(0); //right bang
    push();
    translate((width-225), height-350);
    rotate(-QUARTER_PI - HALF_PI);
    arc(0, 0, 250, 200, 0, PI);
    pop();

    translate((width-375), (height-350)); //left bang
    rotate(QUARTER_PI + HALF_PI);
    fill(0);
    arc(0, 0, 250, 200, 0, PI);
}

function mousePressed(){
    cheekBlush = random(0, 1); //randomize blush
    blushSize = random(30, 60); //randomize blush size
    blushHeight = random(350, 360); //randomize blush's Y-axis
    bunY = random(200, 400); //randomize hair buns' Y-axis
    Bun = random(150, 250); //randomize hair buns' size
    noseStyle = random(0,3); //randomize nose shape
    faceStyle = random(0,3); //randomize face shape
    mouthStyle = random(0,3); //randomize mouth shape
    eyeStyle = random(0,3); //randomize eyes
}

For this project, I drew inspiration from the Moomin books, the logo for Utz Snacks, the mascots for PBS Kids, and the logo for a Korean supermarket franchise. The generative process became a lot easier once I started incorporating if-else statements!

Looking Outwards 2: Generative Art

Ian Cheng’s Emissaries is “a trilogy of simulations about cognitive
evolution, past and future, and the ecological conditions that shape
it,” as per the artist’s website. Cheng created the live, CGI
simulations through a video game engine and observed the works from
2015 – 2017 as the game essentially “played itself.” The characters
and creatures within Emissaries play out their lives in open-
ended narratives generated and modeled through predictive technology
usually reserved for forecasting election results or climate change.

Emissaries is a fascinating case study on narrative consciousness,
evolution, and dealing with natural chaos in life. I had the good
fortune of listening to Ian speak about this work when he visited
Carnegie Mellon back in 2017, and I was struck by the sheer complexity
and time he invested into these generative worlds. In order to build
this game and have it play itself over two years, I think Cheng would
have had to feed the algorithm an inordinate amount of data on past
major events, disasters, and research on human psychology so that the
game could generate narratives and characters that accurately reflect
our world.

LO-02

I find artist Manfred Mohr’s Algorithmic Modulations inspirational since it uses simple rotations to make sophisticated visual effects. In the project, lines and color bands are used to present the n-dimensions rotation in 2-dimensions. The color bands have similar colors of watercolor, like light blue and light violet, which are calming. However, lines that come across those bands are of much darker colors, which are nearly back. The contradictory color choices tell us about the artist’s aesthetics and sensibilities.

Mohr. M. (2019). Algorithmic Modulations. http://www.emohr.com/ww4_out.html

According to the artist, the algorithm is written in this way: One diagonal path across a 12-D hypercube is selected randomly, which is then put in 3 angular positions. This diagonal path in three positions represents the initial graphic constellation as the inherent generator of the images. After being rotated in 12-D and projected into 2-D, the diagonal-paths become visible as transparent color bands. A thin horizontal black line is drawn starting from each vertex (of all three diagonal paths), crossing the vertical center of the image and continuing to the opposite side. In addition, for each vertex a slightly thicker horizontal black line is drawn starting from the vertical center of the image and continuing to the negative x-value of the respective vertex (reflection from the vertical center). The rotation in 12-D horizontally modulates the black line construct, whereas its symmetric aspect, creates a graphic counterpoint to the visually floating transparent color bands. In the screen-based work the algorithm randomly changes the colors of the 3 transparent bands and occasionally switches completely to white bands on a grey background. On other occasions the 3 bands transform to full color and while returning to their transparency they are overlayed with a shrinking and slowly fading structure revealing the generating diagonal-paths.

animation – example

LO-2-Generative Art

Fish Tornado by Robert Hodgin

Fish Tornado, an interactive VR experience that puts the user in the center of thousands of Big Eye Trevallie forming a toroidal bait ball, caught my attention. This generative artwork was created by Robert Hodgin and I was admired by how Hodgin wanted to see how close he could come to simulating this phenomenon with code and simulate in the Oculus VR headset. I admired this aspect because I have always wanted to know how a bait ball is formed and by the use of VR, I would be able to experience it directly.

The algorithm generated in this artwork is very cool in a way that the fish is aware of my position in the 3d world. The fish attempts to form a toroidal bait ball around me and I can stand in the center. Also, the fish responds towards me by treating me as a low threat predator and thus prevents the fish from traveling through the camera.

Hodgin further manifests his artistic sensibilities by adding a shark into the simulation. The experience of watching a fish form a toroidal bait ball around me is very relaxing with background music but its calmness breaks apart by an occasional passing of a shark.

Link

Fish Tornado

Project-02-Variable Face

sketch

var eyeSize = 20;
var faceWidth = 300;
var faceHeight = 300;
var eyeWidth= 40;
var mouth=5;
var eyeball=10;
var nose=20;
var ear=150;
var inside=120;
var tongue=20;


 
function setup() {
    createCanvas(480, 600);
}
 
function draw() {
    background(200);// face shape
    fill(224, 211, 220);
    ellipse(width / 2, height /2, faceWidth,  faceHeight); 
    fill(252, 249, 243); //eye
    var eyeLX = width / 2 - faceWidth * 0.2;
    var eyeRX = width / 2 + faceWidth * 0.2;
    ellipse(eyeLX, height / 2, eyeSize, eyeSize);
    ellipse(eyeRX, height / 2, eyeSize, eyeSize);
    fill(0,0,0); //eyeball
    circle(eyeLX+5,height /2, eyeball,eyeball);
    circle(eyeRX-5,height/2,eyeball,eyeball);
    fill (0,0,0);//nose
    circle(width / 2, height /1.9, nose,nose);
    fill(224, 211, 220); //leftear
    circle(width/4,height/3,ear,ear);
    fill(224, 211, 220); //rightear
    circle(width/1.4,height/3,ear,ear);
    fill(245, 186, 227); //inside
    circle(width/3.7, height/2.8,inside,inside);
    circle(width/1.42, height/2.8,inside,inside);
    strokeWeight (2);
    fill(247, 134, 209) //mouth
    var mouth = width/7 - faceWidth * 0.5;
    ellipse( width/ 2, height/1.6, mouth, mouth/2);
    
}
 
function mousePressed() {
   
    faceWidth = random(200, 300);
    faceHeight = random(280, 300);
    eyeSize = random(20, 50);
    mouth = random(2,5);
    eyeball= random(7,19);
    hair = random(110,160);
    ear = random(140,170);
    inside = random(110,115);
}

I started off by using the original code given for this project. I randomly inserted numbers and variables to see how each code works out. Then I started to design the basic shapes and narrowed it down to the small details.