Month: September 2016

Yugyeong Lee Project – 02

sketch

//Yugyeong Lee
//Secton A 9:00 AM
//yugyeonl@andrew.cmu.edu
//proeject-02

var faceWidth = 150;
var faceHeight = 175;
var eyeSize = 15;
var noseWidth = 15;
var noseHeight = 10;
var blushSize = 15
var mouthWidth = 60;
var mouthHeight = 40;
var color = 155;
var hairLength = 175;
var hairangle = 60;
var hairDecorationType = 'ribbon';

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

function draw() {
	//Background
	noStroke();
	fill(249, color, 138);
    rect(0, 0 , width, height / 4);
    rect(0, 320 , width, height / 4);
    fill(249, color, 18);
    rect(0, 160 , width, height / 4);
    rect(0, 480 , width, height / 4);
    fill(255);
    ellipse(width / 2, height / 2 - 15, 300, 300);
    
    //Hair
    noStroke();
    fill(109, 93, 74);
    ellipseMode(CENTER);
    ellipse(240, 285, 200, 200);
    rect(140.5, 215, 199, hairLength, hairangle);

    //Face
    noStroke();
    fill(242, 214, 180);
    ellipseMode(CENTER);
    ellipse(width / 2, height / 2 - 10, faceWidth, faceHeight);

    //Blush
    var blushLX = width / 2 - faceWidth * 0.35
    var blushRX = width / 2 + faceWidth * 0.35
    fill(247, 186, 215);
    ellipse(blushLX, height / 2 + faceHeight * 0.15, blushSize * 1.15, blushSize); 
    ellipse(blushRX, height / 2 + faceHeight * 0.15, blushSize * 1.15, blushSize);

	//Hair (bangs)
	fill(109, 93, 74);
    rect(160, 220, 160, 85, 30);
    fill(242, 214, 180); //Part of Face
    triangle(195, 310, 210, 270, 215, 310);

    //Eyes
    var eyeLX = width / 2 - faceWidth * 0.25;
    var eyeRX = width / 2 + faceWidth * 0.25;
    fill(68, 45, 18);
	ellipse(eyeLX, height / 2 + faceHeight * 0.05,  eyeSize, eyeSize * 1.15);
    ellipse(eyeRX, height / 2 + faceHeight * 0.05,  eyeSize, eyeSize * 1.15);

    //Nose
    var noseX = width / 2
    var noseY = height / 2 + faceHeight * 0.125
    stroke(153, 116, 81);
    strokeWeight(4);
    noFill();
    arc(noseX, noseY, noseWidth, noseHeight, PI, TWO_PI);

	//Mouth
	fill (222, 86, 88);
	noStroke();
	arc(width / 2, height / 2 + faceHeight * .2, mouthWidth, mouthHeight, TWO_PI, PI);

	//Hair Decoration
	hairDecoration();
}

function hairDecoration() {
    if (hairDecorationType == 'ribbon') {
        ribbon();
    }
    else if (hairDecorationType == 'hairBand') {
        hairBand();
    }
}

function ribbon() {
	//Ribbon
	fill(236, 39, 86);
	triangle(290, 255, 260, 240, 260, 270);
	triangle(290, 255, 320, 240, 320, 270);
}

function hairBand() {
	//Hair Band
	stroke(254, color, 22);
	strokeWeight(8)
	noFill();
	arc(width / 2, height / 2, 200, 200, PI+QUARTER_PI, TWO_PI-QUARTER_PI);
}

function mousePressed() {
    color = random(0, 255);
    eyeSize = random(15, 25);
    noseWidth = random(10, 17);
    noseHeight = random(5, 10);
    blushSize = random(10, 20);
    mouthWidth = random(20, 60);
    mouthHeight = random(40, 50);
    hairLength = random(175, 225);
    hairangle = random(50, 100);
    hairDecorationType = random(['ribbon', 'hairBand']);
}

For this project, I focused on creating a bright, colorful mood playing around with different facial expression as well as warmed-toned colors.

Project-02: Variable Faces

sketch

//Rebecca Enright
//Section A
//renright@andrew.cmu.edu
//Project-02: Variable Faces

var head = 100
var eye = 50
var brow = 40
function setup() {
    createCanvas(640,480);  
}
function draw() {
    background(0,171,255);
    //create conditional head
    if (mouseIsPressed) {
    	fill(115,252,19);
    	ellipse(320,240,head+100,head/2);
    } else {
        fill(255,207,153);
        ellipse(320,240,head,head);
    }
    //create conditional eyes
    if (mouseIsPressed) {
    	//creates whites of eyes
    	fill(255);
    	ellipse(300,200,eye,eye);
    	ellipse(340,200,eye,eye);
    	//creates pupils
    	fill(0);
    	ellipse(300,200,eye/2,eye/2);
    	ellipse(340,200,eye/2,eye/2);
    } else {
    	//creates whites of eyes
    	fill(255);
    	ellipse(300,220,eye/2,eye/2);
    	ellipse(340,220,eye/2,eye/2);
    	//creates pupils
    	fill(0);
    	ellipse(300,220,eye/4,eye/4);
    	ellipse(340,220,eye/4,eye/4);
    }
    //creates condidtional mouth
    if (mouseIsPressed) {
    	//creates tounge
    	fill(255,104,153);
    	arc(320,240,25,100,TWO_PI,PI);
    } else { 
        //creates open mouth
        fill(0);
        arc(320,250,40,75,TWO_PI,PI);
    }
    //creates conditional features
    if (mouseIsPressed) {
    	//creates eyebrows
    	fill(0);
    	rect(320,150,brow,brow/2);
    	rect(270,150,brow,brow/2);
    } else {
    	//creates crown
    	fill(255,255,0);
    	rect(300,180,brow,brow/2);
    }
}

This project was a lot of fun, I really like learning about how to make things interactive. It was tricky at first, but it became easier as I worked on it.

LookingOutwards-02

This picture uses algorithms to create a colorful and precise drawing.  What I find amazing about these types of algorithms is that they are completely man made yet similar patterns can be found in nature in snails shells, trees and many other natural objects.  I have no idea how this algorithm was formed but considering what I have learn thus far, it would include a series of repeated functions combined together to form repeated shapes and patterns.  I think that the artist’s representation came out mainly through the colors which flow into each other harmoniously.  What draws me and many other people to art like this is its perfection yet unpredictability.  When I look at this picture I can both admire and be in awe of the mathematical perfection which leave me wondering how mathematicians were able to turn algorithms into art.

mathart

created in 2012
https://ablogappart.wordpress.com/tag/math-art/

Brian Bizier- Project 02- Variable Faces

brian-bizier-project-02-variable-faces

I began this project by creating a digital “sketch” using JavaScript, fine tuning it until I basically liked. I then substituted the values for variables and added the randomization. I don’t know why, but this felt better than last week’s project for me. I hope I formatted this correctly! 😛

Liu Xiangqi-Looking Outwards-02

lia
This work is from Australian Artist Lia. Her work combines the traditional drawing styles and digital techniques and aesthetics. The reason I appreciate her work is that I believe modern art needs to be understood and appreciated by the public. Abstraction is not working well to connect with the audiences.

This work is created for Fabasoft website themes. Through a series, she tries to convey themes of Serenity, Trust and Respect. Her work however, contains some concrete patterns–dandelion in this work. And the texture of color pencil and feather-like strokes can be felt vividly. I feel peacefulness and harmony for consistency in color and non-edge shapes. Variation exists in size of the shape and brightness of the color.

Jinhee Lee; Looking Outwards 02

Above this text is a video project titled “Sun,” made and published by Robert Hodgin in 2015. Among several other animation projects he’s done, this video was made using Cinder, which is a “C++ library for programming with aesthetic intent – the sort of development often called creative coding,” encompassing various domains like “graphics, audio, video, and computational geometry,” as described on its homepage.

This coding service is peer-reviewed and apparently free, which compounds with my surprise that sophisticated coding purely for the sake of artistic visuals, rather than the application of such, existed. From the looks of Hodgin’s other projects, Cinder is vastly diverse in its aesthetic capabilities, ranging from displaying – in Hodgin’s case – a school of fish, taxi routes in a city, spectacles in space, and particles flowing in space as if carried by an air current.

Hodgin’s “Sun” project caught my eye in particular, for its theme and because, with my current knowledge of coding, its animation is the one I find simplest to understand. Two celestial bodies, one (presumably the Earth) orbiting its gargantuan counterpart spinning in place, and that’s all.

Aesthetically speaking, I appreciate all the small details added to the Sun to make it feel organic rather than procedurally generated, as well as the fact that, being the largest thing on the screen, it takes up the vast majority of the viewer’s attention. Additionally, the comparatively tiny and featureless Earth revolving around the Sun add to the overwhelming presence of the latter body. An effect the author achieved with naught but a tiny moving black circle.

 

Below is a link to additional projects that Robert Hodgin has done:

https://vimeo.com/flight404/videos

Liu Xiangqi Project-02-Variable-Face

sketch


// Liu Xiangqi xiangqil@andrew.cmu.edu Section-A Project-02
var eyeSize = 20;
var faceWidth = 100;
var faceHeight = 150;
var eyeR = 0;
var eyeG = 0;
var eyeB = 0;
var faceR = 255;
var faceG = 230;
var faceB = 230;
var noseX1 = 320;
var noseY1 = 240;
var noseX2 = 310;
var noseY2 = 260;
var noseX3 = 330;
var noseY3 = 260;
var mouthAlpha = 0.5;
var mouthX1 = 310;
var mouthY1 = 280;
var mouthX2 = 315;
var mouthY2 = 275;
var mouthX3 = 320;
var mouthY3 = 280;
var mouthX4 = 325;
var mouthY4 = 275;
var mouthX5 = 330;
var mouthY5 = 280;
var mouthX6 = 325;
var mouthY6 = 290;
var mouthX7 = 315;
var mouthY7 = 290;
var mouthX8 = mouthX1;
var mouthY8 = mouthY1;


function setup() {
    createCanvas(640, 480);
}
 
function draw() {
    colorMode(RGB,255,255,255,1);
    background(255, 204, 204);
    //draw face
    noStroke();
    fill(faceR, faceG, faceB, 0.3);
    ellipse(width / 2, height / 2, faceWidth,  faceHeight);
    var eyeLX = width / 2 - faceWidth * 0.25;
    var eyeRX = width / 2 + faceWidth * 0.25;
   
    //contour of the eye
    fill(255);
    ellipse(eyeLX, height / 2, eyeSize+10, eyeSize);
    ellipse(eyeRX, height / 2, eyeSize+10, eyeSize);
    

    //change eye color
    fill(eyeR, eyeG, eyeB);
    ellipse(eyeLX, height / 2, eyeSize, eyeSize);
    ellipse(eyeRX, height / 2, eyeSize, eyeSize);
    
    //contour of the nose
    noFill();
    stroke(255);
    strokeWeight(3.0);
    strokeJoin(ROUND);
    beginShape();
    vertex(noseX1, noseY1);
    vertex(noseX2, noseY2);
    vertex(noseX3, noseY3);
    endShape();
    
    //draw the mouth
    fill(255,0,0,mouthAlpha);
    noStroke();
    beginShape();
    curveVertex(mouthX1,  mouthY1);
    curveVertex(mouthX1,  mouthY1);
    curveVertex(mouthX2, mouthY2);
    curveVertex(mouthX3,  mouthY3);
    curveVertex(mouthX4,  mouthY4);
    curveVertex(mouthX5,  mouthY5);
    curveVertex(mouthX6,  mouthY6);
    curveVertex(mouthX7,  mouthY7);
    curveVertex(mouthX8,  mouthY8);
    curveVertex(mouthX8,  mouthY8);
    endShape();
    
}    
 
function mousePressed() {
    faceWidth = random(75, 150);
    faceHeight = random(130, 200);
    eyeSize = random(10, 20);
    //randomize eye color;
    eyeR = random(0, 250);
    eyeG = random(0, 250);
    eyeB = random(0, 250);
    //random face color according to a research of human skin color
    faceR = 168.8 + 38.5*random(-3,3);
    faceG = 122.5 + 3.1*random(-3,3);
    faceB = 96.7 + 6.3*random(-3,3);
    //randomize nose size;
    noseX1 = random(317, 323);
    noseY1 = random(235, 245);
    noseX2 = random(305, 315);
    noseY2 = random(255, 265);
    noseX3 = random(325, 335);
    noseY3 = noseY2;
    //randomize mouth color and shape
    mouthAlpha = random(0.1, 1);
    mouthX1 = random(307, 313);
    mouthX2 = random(314, 316);
    mouthX3 = random(318, 322);
    mouthX4 = random(324, 326);
    mouthX5 = random(327, 333);
    mouthX6 = random(323, 327);
    mouthX7 = random(313, 317);
    mouthY1 = random(275, 285);
    mouthY2 = random(273, 277);
    mouthY3 = mouthY1;
    mouthY4 = mouthY2;
    mouthY5 = mouthY1;
    mouthY6 = random(287, 293);
    mouthY7 = mouthY6;
    
    
    
}

I found some problem when I tried to modify the size of the canvas.

Project-02-Variables-Face

sketch
sketch-13.js


var eyeSize = 20;
var faceWidth = 100;
var faceHeight = 200;
var Rf;
var Gf;
var Bf;
var Re;
var Ge;
var Be;
var rect1y=(480/2-100);
var rect2y=(480/2-130);


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

}

function draw() {
    background(200,100,150);
    //face
    rectMode(CENTER);
    fill(Rf,Gf,Bf);
    ellipse(width / 2, height / 2, faceWidth,  faceHeight);
    var eyeLX = width / 2 - faceWidth * 0.30;
    var eyeRX = width / 2 + faceWidth * 0.30;
    //eyes
    fill(Re,Ge,Be);
    ellipse(eyeLX, (height / 2-40), eyeSize, eyeSize);
    ellipse(eyeRX, (height / 2-40), eyeSize, eyeSize);
    ellipse()
    //mouth
    p1 = {x: 200, y: 200}, p2 = {x:350, y:275 };
    p3 = {x:290, y: 275}, p4 = {x: 200, y: 200};
    noFill();
    stroke(0);
    curve(p1.x, p1.y, p2.x, p2.y, p3.x, p3.y, p4.x, p4.y);
    //nose
    q1 = {x: 230, y: 200}, q2 = {x:350, y:240 };
    q3 = {x:310, y: 260}, q4 = {x: 200, y: 200};
    curve(q1.x, q1.y, q2.x, q2.y, q3.x, q3.y, q4.x, q4.y);


}

function mousePressed() {
    //when clicked the face and eyes change shape and color
    //color
    Rf= random(0,255);
    Gf=random(0,255);
    Bf=random(0,255);
    Re= random(0,255);
    Ge=random(0,255);
    Be=random(0,255);
    //shape
    faceWidth = random(100, 250);
    faceHeight = random(150, 300);
    eyeSize = random(10, 50);
    rect2y=(2-(faceWidth/2));
    rect1y=((width/2),(faceHeight-10),60,80);

}

I had trouble figuring out curves and uploading the document.

Looking Outwards-02

http://blog.drwoohoo.com/turbulence-watercolor-magic/

Turbulence by Dr.Woohoo is an interesting piece since it combines the use watercolor, which is visually organic, and a robotic arm to create a precise and organic piece. I admire the artist’s desire to push the boundaries of basic mechanical systems to revolutionize traditional forms of art. I think it is a noble ambition since it provides traditional art a means to escape its own boundaries. I think the wonderful thing about are is the infinite creative ways artist can utilize the same mediums. Dr. Woohoo’s use of mechanics, increases the amount of possibilities for which these mediums could be used. The algorithm behind Turbulence, appears to be pretty simple. The machine draws simple patterns while filling up on paint when needed. I would like to know if the layout of these simple patterns are randomized or not.  Dr.Woohoo was the directly behind the design the mechanical arm was to draw. He was able to manifest his own sensibilities with various factors out of the arms control like: color, color overlap, and layering. He was also able to ensure that the pattern being drawn would evolve into a hive-like pattern.

Looking Outwards-02 Arula

This is a work by Alex Dragulescu. He created an algorithm that took apart computer viruses and identified their habits, grouping and growing tendencies, and patterns. Using these patterns, he created three dimensional forms. I like this work because it makes a computer virus seem like an actual mutated cell from a human virus. The floral, spiraling form  of the trojan virus pictured below has both beautiful and grotesque aspects to it, for a beautiful piece of code that is used for a grotesque purpose.

l_adv54