Month: September 2017

sntong-Project-02-Variable-Face

sketch
For this project, I wanted to create a “cheesy” looking slice of cheddar cheese. I was having fun and going along with the metaphor as I was coding for this assignment. As my second coding project I felt I had better understanding of the code basics and syntax and I hope I can move on to more complicated ideas and codes later on. 

//Scarlet Tong
//sntong@andrew.cmu.edu
//Section A
//Project 02 - Variable Face

//Cheese Slice
var rectX = 320
var rectY = 240
var rectW = 180
var rectH = 130
var rectC = 10

//Eyes
var iStrokeWeight = 5
var eyeLX = 270
var eyeLY = 210

//Mouth
var mouthX = 280
var mouthW = 2

//Heart
var heartX = 224

//Colors
var black = 0
var faceG = 220
var faceB = 151
var heartC = 130
var backgR = 215
var backgG = 244

function setup() {
    createCanvas(640,480);
    background(215,backgG,255);

}

function draw() {
  background(backgR,backgG,255);

  //Cheese slice
  fill(255,faceG,faceB);
  noStroke();
  rectMode(CENTER);
  rect(rectX,rectY,rectW,rectH,rectC);
  //left eye
  stroke(black);
  strokeWeight(iStrokeWeight);
  strokeCap(SQUARE);
  line(eyeLX,eyeLY,eyeLX+25,eyeLY-10);
  //right eye
  line(eyeLX+50,eyeLY-5,eyeLX+75,eyeLY);
  //mouth
  ellipse(mouthX,mouthX-40,mouthW,mouthW*4);
  //heart
  fill(249,heartC,heartC);
  noStroke();
  ellipse(heartX,heartX-18,20,20);
  ellipse(heartX+15,heartX-24,20,20);
  triangle(heartX-4,heartX-9,heartX+25,heartX-28,heartX+26,heartX+1);

}

function mousePressed(){
  //Change in color for the background
  backgR = random(254,215);
  backgG = random(254,244);
  //Change in weight and height of the cheese slice
  rectX = random(300,340);
  rectY = random(220,160);
  rectW = random(120,200);
  rectH = random(120,170);
  rectC = random(0,25);

  // change in size od eyes
  iStrokeWeight = random(3,8);
  eyeLX = random(265,275);
  eyeLY = random(190,220);

  //Change in location of mouth
  mouthX = random(275,280);
  mouthW = random(1,4);

  //Change of location of heart on face
  heartX = random(210,230);

  //Different shades of color for the composition
  black = random(0,254);
  faceG = random(213,187);
  faceB = random(146,77);
  heartC = random(151,51);


}

sntong-Looking Outwards- 02


This image is taken from a series of drawings and medias made for a showcase. Daniel Cardoso Llach focused on the history of computational methods and technologies between the 1949 and 1976 and his other works in the showcase aims to track the evolution of new design representation, stimulation or other data processing software. His work sheds light into how the advancement of technology has changed how designers, engineers, and many across different fields to work, think and communicate their work. The image shown is generated by a custom software system made by Professor Llach to reconstructs Steven A. Coons’ mathematical technique for parametric surfaces.

The showcase will be open from September 22 to November 12 at the Miller Gallery in CMU.

image reference: http://grahamfoundation.org/grantees/5577-designing the-computational-image-imagining-computational-design

Sarah Kim- Looking Outwards 2

One of the projects that I found very intriguing was Beautiful Chaos which was an artwork created by an app made for leap motion control. The app, which existed previously before the artist’s decision to create this artwork, became a medium for the artist to explore in and create a beautiful work of nebulous lights. I chose this specific artwork because my main source of interest in artistic mediums were lights and color combination. Because I believe that enticement in art mainly comes from its visual presentation, I liked to study aesthetics through the use of many different color combos and understand the use of mood through the usage of lightings especially with neon and natural light. Because the majority of my interest in art comes from its aesthetic beauty more than the content, I tend to choose works that visually entice me which I find mysterious and interesting.

Beautiful Chaos

 

Yoonseo1 -Looking outwards 02 :Generative Art

City Icon developed by Marcin Ignac

It is a generative animation on the panels based on the mix of the intersecting system within the city. Recently, in my architecture studio project, I have been working on site analysis. This project just gave me more perspective on how to express and illustrate mundane conditions such as traffic, water flows, and etc. On the website he describes that bespoke application was develop to run and test the generative animation. The amount the data research went in is impressive, but what I admire the most is the beauty of the expression on the exhibit. the lights are contrasting amazingly well with the background. Not only the simple lines are animated but also the water flow, radius of data, and other interesting features are displayed. In order for this to be generated, I think there needs to be a basic knowledge on the animation program and lots of practice in visualization of data, which is one of the hardest part of my site analysis in architecture studio.

Yoonseo1 – Variable Faces -Project 2

Face Dave

//Yoonseo(Dave) Choi
//Section B 
//yoonseo1@andrew.cmu.edu
//Project-Variable Face
function setup() {
    
    createCanvas(640,480);
    background(100);
}
var val = 0; //define for the face rotation factor
var colorV = 0;// color variable define
var d = 1; // dividing factor define
var St = 0; // Stroke color factor define
function draw() {

}
function mouseClicked() {
    colorV = random(100,230);// change of background color
    division = random(1,16);//change of dividing factor
    St = random(0,255);// change of stroke color 
    if (val <= 0){
        background(colorV/d,colorV/d,colorV/2*d)
        push(new Face1);
        val += 1;
    } else {
    if (val == 1) {
        background(colorV/3*d,colorV/d,colorV);
        push(new Face2);
       val += 1;
    } else
    if (val == 2){
        background(colorV,colorV/d,colorV/d*4);
        push(new Face3);
       val += 1;;
    }else {
        if (val == 3){
        background(colorV/d,colorV,colorV/d*2);
        push(new Face4);
       val =0;
        }
        
    }
    }
 
  
 
}
//Face 1 
function Face1() {

    //left Face 
    //facial shape
    stroke(St/d*2,St,St/d*9) //stroke color for the faces

    strokeWeight(1);
    noFill();
    beginShape();
    vertex(177.91,184.25);
    quadraticVertex(155.28,181.5,139.25,182.41);
    quadraticVertex(129.75,184.5,121.5,186.58);
    endShape();
    line(121.5,186.58,107.08,201.16);
    line(107.08,201.16,100.91,220.91);
    line(100.91,220.91,102.58,225.91);
    line(102.58,225.91,90.58,241.41);
    //tip of nose
    beginShape();
    vertex(89.75,243.08);
    quadraticVertex(93.41,247.25,92,246);
    endShape();
    beginShape();
    vertex(93.41,243.08,);
    quadraticVertex(96.75,243,99.58,243.08);
    vertex(99.58,243.08);
    endShape();
    //starting lip and chin
    line(97.75,248.91,95.58,253.08);
    //lips
    beginShape();
    vertex(96.5,257.41);
    quadraticVertex(103.08,254.91,105.5,255.25);
    vertex(108.41,255.91);
    endShape();
    //chin
    beginShape();
    vertex(96.5,260.08);
    quadraticVertex(99.58,266.91,100.58,266.91);
    quadraticVertex(98.06,271.75,97.75,272.5);
    vertex(101.25,278.08);
    endShape();
    //neckand chin
    beginShape();
    vertex(120.08,284.08);
    quadraticVertex(103.66,279.33,103.66,279.33);
    quadraticVertex(126.25,259,135.25,255.76);
    vertex(148.58,252.08);
    endShape();
    line(126.75,284.08,143.91,295.75);
    //back of head and ears
    line(180.25,184.91,197.58,208.41);
    beginShape();
    vertex(196.75,223.91);
    quadraticVertex(189.25,234.25,184.75,248.5);
    vertex(192.41,261.58);
    endShape();
    //ears
    beginShape();
    vertex(167.91,208.41);
    quadraticVertex(174.25,213.75,171.25,223.25);
    quadraticVertex(167,234.5,158.91,230.41);
    vertex(160.75,221.5);
    endShape();
    //eyes
    beginShape();
    vertex(106.08,222.91);
    quadraticVertex(109.5,223.5,114.25,223.08);
    quadraticVertex(114.25,223.08,117.5,221);
    vertex(120.41,218.75);
    endShape();
}
function Face2(){
   strokeWeight(1);
    noFill();
    //head shape
    beginShape();
    vertex(296.25,253.08)
    quadraticVertex(296.25,237.25,300,220.25);
    quadraticVertex(300,220.25,289.25,192.25);
    quadraticVertex(289.25,192.25,258,184.91);
    quadraticVertex(237,190.25,212,204.25);
    quadraticVertex(204.25,216,199.5,234.49);
    quadraticVertex(199.5,234.49,199.25,243.25);
    vertex(202.25,251);
    endShape();
    //nose and eyes
    beginShape();
    vertex(201.75,253.25);
    quadraticVertex(202.75,252.25,209,262.75);
    quadraticVertex(209,262.75,211,266);
    endShape();
    //eyes
    beginShape();
    vertex(209.41,257.41);
    quadraticVertex(209.41,257.41,212.75,257.41);
    endShape();
    beginShape();
    vertex(226.41,261.58);
    quadraticVertex(226.41,261.58,230.25,262.5);
    vertex(238.91,259.08);
    endShape();
    //top of nose
    beginShape();
    vertex(218.5,246);
    quadraticVertex(218.5,246,214,271);
    quadraticVertex(214,271,198.5,294.5)
    endShape();
    beginShape();
    vertex(202,295.5);
    quadraticVertex(202,295.75,214.5,288);
    quadraticVertex(214.5,286,220.5,280);
    vertex(224.75,275.13);
    endShape();
    //lips
    beginShape();
    vertex(218.58,281.75); 
    quadraticVertex(218.58,281.75,221.58,285.91);
    quadraticVertex(221.58,285.91,231.5,281.5);
    vertex(241.08,284.33);
    endShape();
    beginShape();
    vertex(226.41,289.08);
    quadraticVertex(229,288.75,233.58,286.75);
    endShape();
    beginShape();
    vertex(224.75,289.91);
    quadraticVertex(226.75,293.5,228.5,297);
    quadraticVertex(228.5,297,237.75,298.25);
    quadraticVertex(237.75,298.25,247,296);
    vertex(278.41,274.08);
    endShape();
    //neck
    line(233.58,298.78,238,308);
    beginShape();
    vertex(296.25,241.41);
    quadraticVertex(302,253.5,313.25,263.5);
    endShape();
    //ears
    beginShape();
    vertex(272.75,252.25);
    quadraticVertex(276.5,263,282,263.5);
    quadraticVertex(282,263.5,287.5,242.25);
    quadraticVertex(287,235.5,280.75,234.25);
    vertex(271.5,238.5);
    endShape();

}
function Face3() {
    noFill();
    //hair
    beginShape();
    vertex(336,262);
    quadraticVertex(336,262,326.25,252.08);
    quadraticVertex(325.273,218,336.25,205.58);
    quadraticVertex(335.258,204.027,338.25,200.58);
    quadraticVertex(338.25,200.58,356,187.5);
    quadraticVertex(356,187.5,386.5,184);
    quadraticVertex(386.5,184,401.41,193.08);
    quadraticVertex(401.41,193.08,412.58,209.75);
    quadraticVertex(412.58,209.75,421.91,225.41);
    quadraticVertex(421.91,225.41,420.75,244);
    vertex(409.33,260.33);
    endShape();
    beginShape();
    vertex(335,221);
    quadraticVertex(343,204.667,354.667,202);
    quadraticVertex(362.667,202.333,376.91,200.5);
    quadraticVertex(380.667,200.667,403.5,208.41);
    quadraticVertex(407,212.667,413.44,223.91);
    quadraticVertex(413.667,241.667,409.667,254);
    quadraticVertex(408,262,400.91,277.91);
    quadraticVertex(389.3,275.66,375.3,271.3);
    quadraticVertex(368,271.33,344.41,277.91);
    quadraticVertex(340,269,332,251);
    quadraticVertex(331,244.33,333.41,226.75);
    endShape();
    //neck
    beginShape();
    vertex(346.75,278.08);
    quadraticVertex(348.667,279,349.833,279.75);
    vertex(353.55,292.08);
    endShape();
    beginShape();
    vertex(396.667,278);
    quadraticVertex(395.33,282.5,394.08,295.58);
    endShape();
    //eyes
    beginShape();
    vertex(344.87,213);
    quadraticVertex(353.24,213.25,366.25,210.25);
    endShape();
    beginShape();
    vertex(381,209.75);
    quadraticVertex(387.5,212.5,400.9,213.96);
    endShape();
    //nose
    line(371.25,206.91,371.25,226.75);

    beginShape(); 
    vertex(375.08,210.4);
    quadraticVertex(375.5,218.167,377,226.5);
    vertex(378.75,230.75);
    endShape();
    beginShape();
    vertex(363.75,233.58);
    quadraticVertex(369,230.58,375.667,230.667);
    vertex(378.75,233.667);
    endShape();
    //mouth
    beginShape();
    vertex(368.833,245.167);
    quadraticVertex(380.667,243.833,390.97,242.41);
    quadraticVertex(387.33,246.5,382.08,250.75);
    quadraticVertex(363.667,250,354.66,245.32);
    quadraticVertex(353.667,243.167,361.33,244.667);
    vertex(370.25,245.25);
    endShape();
}
function Face4(){
    noFill();
    //head shape
    beginShape();
    vertex(426.91,239.2);
    quadraticVertex(434,208,445.91,191.58);
    endShape();
    beginShape();
    vertex(453.75,189.08);
    quadraticVertex(472.75,186.25,483.5,187.25);
    quadraticVertex(501.75,194,513.08,200.5);
    endShape();
    beginShape();
    vertex(513.08,202.41);
    quadraticVertex(515,211,520,215);
    vertex(525.75,218);
    endShape();
    beginShape();
    vertex(523.91,220.57);
    quadraticVertex(523.5,222.5,522.75,224.91);
    endShape();
    beginShape();
    vertex(518.41,224.91);
    quadraticVertex(521.25,227.5,524.01,230.02);
    endShape();
    //chin
    beginShape();
    vertex(526.25,239.2);
    quadraticVertex(527.25,244.5,528.41,248.75);
    quadraticVertex(530.41,251.75,530.41,259.08);
    quadraticVertex(515.75,258.25,493.25,259.75);
    vertex(475.08,263.5);
    endShape();
    beginShape();
    vertex(468.58,258.08);
    quadraticVertex(459.75,254,453.75,246.65);
    endShape();
    //neck
    beginShape()
    vertex(529.08,261.41);
    quadraticVertex(513,267.5,502.78,273.08);
    quadraticVertex(502.25,275,500.41,289.75);
    endShape();
    //eyes
    beginShape();
    vertex(477.37,208.37);
    quadraticVertex(485,208,489.5,209.75);
    quadraticVertex(491.25,209.25,493.5,208.47);
    endShape();
    beginShape();
    vertex(511.41,209.13);
    vertex(514.54,209.13);
    endShape();
    //nose
    beginShape();
    vertex(504.87,208.2);
    quadraticVertex(519.35,218.84,516.75,219.25);
    quadraticVertex(514.75,220.5,511.08,222.17);
    endShape();
    //mouth
    beginShape();
    vertex(504.87,233.81);
    quadraticVertex(509.25,236.5,518.25,237);
    vertex(525.62,235.41);
    endShape();

}

For this project I wanted to show the 4 different variable faces with emotions and change of colors as effect to provoke the viewers. I have set variable for the stroke line and background so when the mouse is pressed, color of whole thing changes as face rotates.

jennyzha – project 02 – variable faces

my-sketch

var eyeSize = 20;
var faceWidth = 100;
var faceHeight = 150;
var r = 100;
var b = 100;
var g = 100;
var e1 = 100;
var e2 = 100;
var e3 = 100;
var mouthSizeW = 5;
var mouthSizeH = 10;

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

function draw() {
    background(180);
    fill(r, b, g);
    ellipse(width/2, height/2, faceWidth, faceHeight);
    var eyeLX = width/2 - faceWidth*0.25;
    var eyeRX = width/2 + faceWidth * 0.25;
    fill(e1, e2, e3);
    ellipse(eyeLX, height/2, eyeSize, eyeSize);
    ellipse(eyeRX, height/2, eyeSize, eyeSize);
    var mouth = width/2 
    ellipse(mouth, height/2+30, mouthSizeW, mouthSizeH)
} 

function mousePressed() {
	faceWidth = random(75,150);
	faceHeight = random(100,200);
	eyeSize = random(10,30);
	r = random(0, 255);
	b = random(0, 255);
	g = random(0, 255);
	e1 = random(0, 255);
	e2 = random(0, 255);
	e3 = random(0, 255);
	mouthSizeW = random(5, 50);
	mouthSizeH = random(10, 55);
}

While making this project I decided to play with color so I assigned random variables for the eyes and mouth and the face.

jennyzha – Looking Outwards 02

IBM’s Watson collaborated with Grammy Award-winning producer Alex Da Kid to create a “cognitive song.” I thought this was a really cool project since you don’t really associate music with artificial intelligence. Nonetheless, looking a little bit deeper you realize that the incorporation of Watson actually provided for even more opportunity as it uncovered unknown inspiration for artists.

To work with Watson, Watson first had to be fed millions of unstructured data points into emotional insights that would help create a new kind of music. To do so, Watson analyzed millions of songs, lyrics, and five years of natural language texts that would ultimately help to teach Watson what made a “good” song.

One large initiative Alex Da Kid wanted was to foster a deeper connection with is audience. Thus, Watson was taught the most significant cultural themes, using Watson Tone Analyzer to read news articles, blogs and tweets to find out what people felt about them. Analyzing years’ worth of popular music, Watson Tone Analyzer API read and ultimately created its own lyrics; while Cognitive Color Design Tool analyzed album art to create their song’s album art. Finally, Watson Beat looked at the composition of songs to generate a fully immersive experience for Alex da Kid.

https://www.ibm.com/watson/music/

aranders-lookingoutwards-02

Carolyn L. Kane’s book written in 2014, Chromatic Algorithms: Synthetic Color, Computer Art, and Aesthetics after Code, fleshes out the phenomena of how color existed in the past and how human understanding of color continues to change today. I admire the interdisciplinary approach the book takes. It discusses established philosophical and scientific ideas about color and newer technological approaches to color. Her novel breaks boundaries that say color should be a certain way. For instance, blue is a cool color and red is a warm color. Kane shows her readers that this statement can be false. Some key ideas about harmony and balance between colors were based off of nature and artists deemed them correct. However, in science there are times that blue is the warm color and red is the cool color (bunsen burners and stars). Kane did not create the algorithms, but she explores the algorithms of synthetic colors used in today’s technology in her novel.  link    

serinal – looking outward 02

Title: Visual Sounds of the Amazon

Year: 2017 (3 weeks ago to be a little more exact, sounds for actual piece were recorded in 2016)

Artist: Andy Thomas

Andy Thomas’s “Visual Sounds of the Amazon” is an extremely cool installment. It involves an array of colored visual shapes that are based on noises or the sounds of the Amazon rainforest. The piece attempts to capture the sounds of the different Amazonian birds in some sort of visual formation. This installment will be presented at a festival in Lima, Peru called “Render”. I really especially love the way he talks about his work, he says, “I see sounds as moving shapes and colours in my imagination. Bringing these to life is the challenging part. There are many countless hours drawing sketches and testing particle effects. Some of the results are more refined and closely match my imagination than others.” It is refreshing to see an artist openly acknowledging their work into something refined and something that could use more work to be similar to their vision.

Visual Sounds of the Amazon from Andy Thomas on Vimeo.

The algorithm of the piece relies mainly on the sound waves of the birds or animals in the Amazon. Thomas does some really impressive things with the 3D soften programs in link with digital audio software. I think the impressive thing is how well-matched the sounds go with the imagery and vice versa. The colors chosen and the shapes that are manipulated are all very detail oriented towards its’ matched sound. I am also really glad that Thomas uses these forms of art as a way to not only raise awareness about the deterioration of the Amazonian rainforest, but also donates money towards the WWF-Australian foundation. I also find it admirable when artists use new found technology and methods to not only influence a new wave of looking and presenting art, but use it for things they are passionate about (or a good cause).

Alternative Links:

 

thlai-LookingOutwards-02

The Wombats – Techno Fan

 

Wombats – Techno Fan is generative music video created in 2010 by computational artist Memo Akten. Akten developed his own software using C++/openFrameworks to process video footage of the band. Akten goes into some detail of the process he went through to generate the footage – each raw video shot was edited quite heavily and separated into layers, which were then individually fed through Akten’s software. The software, I imagine, finds the most interesting points of the footage and movement and outputs a new sequence. There are different styles and “looks” applied to different video footage, resulting in a final compilation of a variety of colors and compositions. I wonder how this project would be different if he hadn’t used code and instead drew out each frame. I imagine the results would be extremely different because the randomness of each frame is what makes the video interesting.
The most admirable aspect of this project is that Akten uses existing software to he creates custom software in order to achieve his artistic vision. Not only is he successful in doing so, but the final piece is a visual stunner. He brings the final music video together in After Effects and Final Cut Pro.