Author: cmhoward@andrew.cmu.edu

Moka’s Maps

Moka, an artist based in Los Angeles, uses software to generate art in all different media types: drawing, animation, etc. These drawings are computer generated using meteorologist maps and scientific visualizations of flow.

Unnatural Flux: computer generated drawings based on maps and data visualizations of flow

Moka, having been trained in communication design, rather than computer science or fine arts, has an interesting background that he clearly applies in approaching his work. Specifically, it adds a level of visual clarity that seems to be unique considering the medium of the work.

The aesthetic of these drawings is what initially drew me in because it doesn’t look computer generated, so the character is human like, but the artist was only able to design the back-end. With this kind of work, the design flow, from data to art, creates almost endless possibilities where each piece can become so independent from others and it has the potential to stand alone or with a group of similar pieces.

What I enjoy most about these works is this almost new-frontier of data visualizations. While the information isn’t 100% clear to the eye, if we were to begin to compare these drawings, for example, based on their location, we could begin to uncover more specific information. Being an architecture student, we are often confronted with diagramming site analysis or social demographics and it’s so unique to see software generated data that isn’t a chart or a graph.

For more information on this project click this:  https://www.mokafolio.de/works/UnnaturalFlux

cmhoward-project-02

cmhoward-p2

var eyeSize = 20;
var faceWidth = 100;
var faceHeight = 150;
var earSize = 15;
var headphoneSize = 6;
var colorPicker = 1;
var faceColor = 2;
var mouthWidth = 3;
var mouthHeight = 4;
var eyebrowWidth = 5;
var eyebrowHeight = 6;

function setup() {
    createCanvas(300, 300);
}

function draw() {
    //background
    switch(colorPicker) {
        case 1:
            background(252, 156, 231);
            break;
        case 2:
            background(230, 156, 252);
            break;
        case 3:
            background(156, 193, 252);
            break;
        case 4:
            background(252, 249, 156);
            break;
        default:
            background (161, 252, 156);
    }
    //headphones
    noFill();
    stroke('black');
    strokeWeight(4);
    curve(width / 2 - faceWidth * 1, height * 3.5, width / 2 - faceWidth / 1.75, height / 2, width / 2 + faceWidth / 1.75, height / 2, width / 2 + faceWidth * 1, height * 3.5);
    //ears
    fill('black');
    noStroke();
    ellipse(width / 2 - faceWidth / 2, height / 2, earSize, earSize*1.5);
    ellipse(width / 2 + faceWidth / 2, height / 2, earSize, earSize*1.5);
    //face
    switch(faceColor) {
        case 1:
            fill(252, 156, 176);
            break;
        case 2:
            fill(204, 139, 224);
            break;
        case 3:
            fill(139, 171, 224);
            break;
        case 4:
            fill(242, 239, 145);
            break;
        default:
            fill(143, 224, 139);
    }
    noStroke();
    ellipse(width / 2, height / 2, faceWidth,  faceHeight);
    //hearteyes
    fill('pink');
    stroke('black');
    strokeWeight(1);
    var eyeLX = width / 2 - faceWidth * 0.25;
    var eyeRX = width / 2 + faceWidth * 0.25;
    //lefteye
    curve(width / 2 + width * .75, height / .75, eyeLX, height / 2.0, eyeLX, height / 1.8, width / 2, height / 1.5);
    curve(width / 2 - width * .75, height / .75, eyeLX, height / 2.0, eyeLX, height / 1.8, width / 2, height / 1.5);
    //righteye
    curve(width / 2 + width * .75, height / .75, eyeRX, height / 2.0, eyeRX, height / 1.8, width / 2, height / 1.5);
    curve(width / 2 - width * .75, height / .75, eyeRX, height / 2.0, eyeRX, height / 1.8, width / 2, height / 1.5);
    //nose
    noFill();
    curve(width / 2 + faceWidth / 2, height / 2 + faceHeight / 2, width / 2 - faceWidth / 16, height / 2 + faceHeight / 6, width / 2 + faceWidth / 16, height / 2 + faceHeight / 6, width / 2 - faceWidth / 2, height / 2 + faceHeight / 2);
    //mouth
    arc(width / 2, height / 1.6, mouthWidth, mouthHeight, TWO_PI, PI, OPEN);
    //eyebrows
    arc(width / 2 - faceWidth / 3.5, height / 2.5 + faceHeight / 12, eyebrowWidth, eyebrowHeight, PI, TWO_PI, OPEN);
    arc(width / 2 + faceWidth / 3.5, height / 2.5 + faceHeight / 12, eyebrowWidth, eyebrowHeight, PI, TWO_PI, OPEN);
}

function mousePressed() {
    faceWidth = random(80, 100);
    faceHeight = random(140, 165);
    eyeSize = random(10, 30);
    earSize = random(25, 40);
    headphoneSize = random(3, 8);
    colorPicker = int(random(1, 6));
    faceColor = int(random(1, 6));
    mouthWidth = faceWidth / random(2, 4);
    mouthHeight = faceHeight / random(2.5, 4.5);
    eyebrowWidth = faceWidth / random(3.5, 4);
    eyebrowHeight = faceHeight / random(8, 10);
}

i really enjoyed this project because i enjoyed designing throughout the code and trying new things as i went along instead of looking for one specific solution which i may have been trying too hard to do last week.

cmhoward-01


project-01-face-final2

function setup() {
    createCanvas(600, 550);
    background('lightblue');
}

function draw() {
	//face
	fill('tan');
	noStroke();
	ellipse(275,300,375,375);
	rect(200,300,150,500);
	
	//hair left
	fill(255,255,180);
	noStroke();
	ellipse(100,200,100,100);
	ellipse(100,300,100,100);
	ellipse(100,400,100,100);
	ellipse(100,500,100,100);
	ellipse(135,150,100,100);
	ellipse(135,250,100,100);
	ellipse(135,350,100,100);
	ellipse(135,450,100,100);
	ellipse(135,550,100,100);

	//hair top
	ellipse(200,150,100,100);
	ellipse(275,150,100,100);
	ellipse(350,150,100,100);
	ellipse(350,150,100,100);
	ellipse(425,150,100,100);

	//hair right
	ellipse(475,200,100,100);
	ellipse(440,250,100,100);
	ellipse(475,300,100,100);
	ellipse(440,350,100,100);
	ellipse(475,400,100,100);
	ellipse(440,450,100,100);
	ellipse(475,500,100,100);
	ellipse(440,550,100,100);
	
	//space buns
	ellipse(175,100,150,150);
	ellipse(375,100,150,150);

	//hairbows
	fill('pink');
	ellipse(175,100,25,25);
	ellipse(375,100,25,25);
	triangle(175,100,150,75,150,125);
	triangle(175,100,200,75,200,125);
	triangle(375,100,350,75,350,125);
	triangle(375,100,400,75,400,125);


	//eyes
	fill('white)');
	noStroke();
	rect(200,250,55,25,25,25);
	rect(300,250,55,25,25,25);
	fill('black');
	ellipse(225,262.5,25,25);
	ellipse(325,262.5,25,25);
	stroke('black');
	strokeWeight(5);
	line(205,250,245,250);
	line(305,250,345,250);

	//nose
	arc(275,350,25,25,TWO_PI,PI,OPEN);

	//eyebrows
	quad(195,235,205,230,250,230,205,230);
	quad(355,235,345,230,300,230,345,230);

	//mouth
	ellipse(275,400,75,75);
	fill('white');
	ellipse(275,400,65,65);
	fill('tan');
	noStroke();
	rect(225,350,100,50);
}

this exercise turned out to be more creative problem solving than i initially thought! i can’t wait to learn ways to create 25 ellipses without hard coding each of them.

Studio Drift’s Shylights

While at the Design Museum, the Stedelijk, in Amsterdam, I had the opportunity to experience Studio Drift’s Shylights. These lights resemble flowers: growing, blooming, reacting- all as a part of a carefully choreographed dance.  Studio Drift, an artist collective led by Lonneke Gordijn and Ralph Nauta, was inspired by the “constant metamorphosis” of human activity. Using the expression of emotion and character as inspiration, they were interested in applying this attitude to inanimate objects, such as these Shylights.

I am inspired by this project because of the multiple layers of design involved in its creation. The first layer being the visual design and fabrication of the light itself, combined with the layers of responsive coding and software needed to control the light, with the last layer being the expression of their concept: human nature in inanimate objects.

Video of Design, Production, and Performance of Shylights by Studio Drift

Shylight movie by Studio Drift (extended version) from Studio DRIFT on Vimeo.

You can find out more about the project on Studio Drift’s website at http://www.studiodrift.com/work/shylight/