Author: lannal@andrew.cmu.edu

Lanna Lang – Project 02 – Variable Face

lanna_project02_sketch

//Lanna Lang
//Section D
//lannal@andrew.cmu.edu
// Project 02 Variable Face

var fill1 = '#00bff3'
var r = 255
var g = 245
var b = 104
var duckoWidth = 500
var duckoHeight = 600
var thic = 20
var mouthWidth = 70
var eyeSize = 20
var blushX = 80
var blushY = 470


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

function draw() {
    background(fill1);
    
//lefthair
    strokeWeight(thic);
    stroke(0);
    line(240, 250, 170, 150);

//righthair
    strokeWeight(thic);
    stroke(0);
    line(240, 250, 310, 150);

//body
    fill(r, g, b);
    ellipse(240, 550, duckoWidth, duckoHeight);

//eyes
    fill(0);
    circle(140, 390, eyeSize);
    circle(340, 390, eyeSize);

//mouth
    strokeWeight(mouthWidth);
    stroke('#f49ac1');
    line(200, 500, 280, 500);

//blush lines on the left
    strokeWeight(10);
    stroke('#f69679');
    line(blushX - 20, blushY, blushX, blushY + 30);
    line(blushX, blushY, blushX + 20, blushY + 30);
    line(blushX + 20, blushY, blushX + 40, blushY + 30);
  
//blush lines on the right
    strokeWeight(10);
    stroke('#f69679');
    line(blushX + 300, blushY, blushX + 320, blushY + 30);
    line(blushX + 320, blushY, blushX + 340, blushY + 30);
    line(blushX + 340, blushY, blushX + 360, blushY + 30);
}

function mousePressed() {
    g = random(200, 255);
    duckoWidth = random(100, 900);
    mouthWidth = random(30, 200);
    eyeSize = random(5, 150);
}

I experimented with different faces and making different characters, but I enjoyed the result of coding this character, so this became my final outcome. The code behind the character is simple, but after experimenting with p5js and creating characters for a while, I decided that sometimes less is more.

Lanna Lang-Looking Outwards-02

Casey Reas’ “KNBC” / Dec. 2015

This project is a continuous, generative collage created through an audio and visual distortion of television signals that are looped continuously as the data is extracted, amplified, and composed into a new stream. This installation combined coding, art, and sound into a unified piece of work. What I find interesting about this work is his unique artistic expression with a visual experience that builds upon conceptual art, experimental animation, and generative software technology.

I cannot think of a way to make this project better than it already is. It’s full of chaos yet is somehow still kind of uniform by the symmetry of the visual distortion of the television broadcast signals. The audio played with the visual fits beautifully with the portrayed imagery by immersing the viewers with a haunting and eerie feel.

Reas wants to depict through his work that writing code is a versatile way of thinking of design, and not just another tool. Reas not only could use software, but he created his own called Processing, in hopes to inspire others, including his students at UCLA, to use code not only for STEM but also for visual arts. This project was inspired by his previous work that also focused on distorted, television-static imagery, such as “Tox Screen”, “Ultraconcentrated”, “100% Gray Coverage”, and others.

Video recording of the audio and visuals for Casey Reas’ “KNBC”.

Lanna Lang-Looking Outwards-01

David Bowen’s “Cloud Piano” / 2014

This project was an installation that played the keys of a piano based on the movements and shapes of clouds. Bowen recorded the clouds in real-time with a camera pointed at the sky, and then used custom software to convert the video to program a robotic device that pressed the corresponding piano keys. David Bowen’s works really inspire and interest me because of his ability to think so out of the box with his interactive art and using his creativeness to intertwine computer science and art in unique ways.

I loved that composition of sounds such as tempo, rhythm, mood, and dynamics were all determined by factors of the sky at that moment; for example, the mood of the music was determined by the direction the clouds moved: if they moved north to south, the piano plays a cheery tone, and if it was the other direction, the sound becomes dark and moody.

This project’s chain of influences first stems from one of his earlier works called “Cloud Tweet” where he used MaxMSP to take videos of clouds and sent Twitter messages based on the movements and shapes of the clouds. The chain extends deeper through his initial interest in the interaction between machines and the natural world, as well as many artists for their use of kinetics and others working with technology, such as Jean Tinguely, Edwardo Kac, Simon Penny, and more.

David Bowen’s “Cloud Piano” – an overview that shows the grandeur of the installation’s mechanics.
David Bowen’s “Cloud Piano” – a close-up shot that shows all the details he put into his work.
A video Bowen produced about this work that shows the installation at work, allowing viewers to listen to the clouds playing the piano.

Lanna Lang- Project 01-Face

sketchP1 – lanna

function setup() {
    createCanvas(350, 420);
    background(200, 200, 225);
    
    strokeWeight(4);
    stroke(51);
    fill(255, 204, 0);
    textSize(50);
    textAlign(CENTER);
    textStyle(BOLDITALIC);
    text('SHH KEEP', 170, 45);
    
    strokeWeight(4);
    stroke(51);
    fill(255, 204, 0);
    textSize(80);
    textAlign(CENTER);
    textStyle(BOLDITALIC);
    text('IT A', 170, 110);
    strokeWeight(4);
    stroke(51);
    fill(255, 204, 0);
    textSize(80);
    textAlign(CENTER);
    textStyle(BOLDITALIC);
    text('SECRET', 170, 175);
}

function draw() {
/* BLUSH */
    stroke(255, 200, 200);
    fill(255, 200, 200);
    circle(130, 230, 20);

/* FACE */
    strokeWeight(4);
    stroke(51);
    noFill();
    ellipse(175, 230, 130, 130);

/* NOSE */
    strokeWeight(4);
    stroke(51);
    arc(160, 230, 20, 20, 0, PI + QUARTER_PI, TWO_PI);

/*BODY */
    stroke(51);
    line(135, 285, 100, 420);
    line(210, 287, 250, 420);

/* MOUTH */
    strokeWeight(4);
    stroke(51);
    noFill();
    arc(180, 250, 40, 40, 0, HALF_PI);

/* LEFT EYE */
    line(135, 205, 148, 205);

/* RIGHT EYE */  
    fill(0);
    circle(190, 205, 10);

/* ARM */
    strokeWeight(6);
    line(117, 350, 70, 280);
    line(70, 280, 90, 240);
    line(90, 240, 103, 223);
    line(90, 245, 130, 243);
    line(92, 240, 125, 238);

   
}

I wanted to make my self-portrait funny and light-hearted so I recreated a meme with this project. The process wasn’t that difficult as I decided to stick with basic shapes and lines. Overall, this was a great experience for me to familiarize myself with basic coding and using Sublime.