serinal@andrew.cmu.edu – [OLD FALL 2017] 15-104 • Introduction to Computing for Creative Practice

serinal – looking outwards 07 (section C)

Periscopic did a data visualization for “The Emotional Highs and Lows of Donald Trump” during the last Presidential election. I think that this was a really cool way to visually understand one aspect of the election. The Periscopic team used the Microsoft’s Cognitive API Service in order to sort through all the various stages of emotions as well as measure the frequency and intensity of each. There are 7 big categories of emotions and the team at Periscopic discovered that even thought the API could correctly and efficiently categorize and recognize these emotions, they sometimes lumped together things like “mocking” and “dominance” into the bigger categories.

On Periscopic’s site they state: “Our goal with this exploration was to test the API to determine if it could be a viable tool to lend additional data to projects that contain video. While we didn’t complete an exhaustive analysis, we do feel the API reveals valuable patterns that might otherwise be very time-consuming to obtain.” I think that for a company that does data visualization, it is really cool that they take time to do personal projects to explore new forms of data identification and analysis in order to use it in their later practices with different companies and corporations.

identifying emotions throughout different speeches

Read more about Periscopic’s Donald Trump project here

serinal – project 06 (section C)

For this abstract clock assignment, I used the base of my extra credit regular clock code and altered it a bit. I wanted it to resemble a bit of a flower (which is hopefully indicative through the colors as well). My sketch up made it seem really complex, but when I actually started to code it, it seemed to work out pretty well. I wanted everything to stay until it made a full circle and since it’s a 24 hour clock, the seconds is the clearest indicator of it constantly disappearing and reappearing.

sketch

//Serina Liu
//Section C
//serinal@andrew.cmu.edu
//Project 06

function setup() {
    createCanvas(480, 480);
    angleMode (DEGREES);
}

function draw() {
    background(255, 240, 245);
    var H = hour();
    var M = minute();
    var S = second();

    fill (230,230,250);
    noStroke();
    ellipse (240, 240, 350, 350);

    for(var s = 0; s < S; s++) { //seconds hand
        push();
        translate (240, 240);
        rotate(6*s); //60 seconds
        strokeWeight (2);
        stroke (128, 0, 128); //dark purple
        line(0, 0, 0, -150);
        pop();
    }

    for(var m =0; m<M; m++){ //minutes hand
        push();
        translate (240, 240);
        rotate(6*m); //60 minutes
        strokeWeight (4);
        stroke (221, 160, 221); //plum
        line(0, 0, 0, -100);
        pop();   
    }
    for (var h=0; h<H; h++){ //hour hand
        push();
        translate (240, 240);
        rotate(15*h) //24 hour clock
        strokeWeight (5); 
        stroke(256); //white
        line(0, 0, 0, -50);
        pop(); 
    }
}

serinal – looking outwards 06 (section C)

I know a lot of artists often use randomness in their work, but I don’t think I have seen computational randomness art. After looking through some stuff, I stumbled upon this artist, Linyi Dai. She is a graduate of RISD and currently is a designer at Ogawa Depardon Architects. Her work for Coding Architecture features this really cool growth of a spherical infrastructure. I love the way that it grows at the same time to show the randomness that comes out of each of the four spheres. I am not completely sure what the coding background of this is, but I do know that a lot of architects employ randomness into their practice. You can see the architectural background in this piece as it is pretty structured and seems relatively calculated. Overall, I think Dai’s work is really cool and I would be extremely interested in seeing more types of computational randomness artwork.

link to find her

link to the work

serinal- project 5 (section C)

sketch

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

 	var constant = (sqrt(3)/2)*20; // value for the width
    var row = 8;
    var w = 65; //spacing
    var th = constant;
    var oy = 10; // original y
    var ox = 2; // original x

    for (var y = 0; y < 8; y++) {
        for (var x = 0; x < row; x++) {
            var py = oy + y * th;
            var px = ox + x * w;
            if (y%2 == 0){
            	noStroke();
            	fill (112, 128, 144);
            	rect(px+w*0.3, py*8, 10, 10); //smaller rectangles (top n bottom)
            	row = 10; 
            } else {
            	noStroke();
            	fill (176, 192, 222);
            	rect(px, py+119, 50, 50); //larger rectangle in middle
            	row = 10;
            }
        }
    }
    noLoop();
}

function draw(){
	for (var i =0; i<800+40; i+=30) {
		stroke (30, 144, 225);
		strokeWeight (2);
    	line(i-2, 35, i+5, 40); //shorter line top
    	line (i-2, 35, i+5, 50); //longer line bottom
    	stroke (245, 255, 250, 80);
    	line (2, 3*i, 5*i, 1);
    	stroke (30, 144, 225);
    	strokeWeight (2);
    	translate (-5, 0);
    	line (i+40, 400, i+25, 405);
    	line (i+40, 400, i+25, 420);
    }
}

This project was pretty low-key for me and I wanted to keep my project mostly geometric/basic. I liked playing around with the colors and I chose to do a blue-guided color palette. If I had more time, I definitely would want to make it a little more complex.

serinal – looking outwards 05 (section C)

Pedro Conti is a Brazilian 3D computer graphics designer. Although he is much more concentrated in character design and development, I wanted to focus on his 3D work for a Philips commercial advertisement. What I really like about this project is that it borders on unpleasing to look at, but the pretty colors and the smoothness of the rendering say otherwise. I really admire Conti’s ability to visualize this slow motion explosion in an artistic manner. I’m not completely sure what the algorithm would look like, but you can definitely see that Conti is well refined in it.

I think it is an indication of his character design background because even the way that the fruit is render seems to have a personality of some sort and the way that it is handled with the splat seems to give it a lot of character.

link to his behance: https://www.behance.net/pedroconti

link to his website: https://www.pedroconti.com

link to website about pedro: http://www.creativebloq.com/3d/top-artists-follow-behance-11121367

serinal – project 4 (section C)

my string art isn’t super complex as I didn’t really have a vision of what I wanted it to look like when I started the project, except the fact that I wanted a light color background and a non-super contrasting (color-wise) end product. My favorite part is the little crosshatching component kind of in the background, I think it turned out quite nicely and holds the piece together well in a subtle way. I definitely could get some more getting use to with for loops!

sketch

//Serina Liu
//Section C
//serinal@andrew.cmu.edu
//project-04, string art

function setup() {
    createCanvas(400, 300);
    background (176, 196, 222);
    
var x = 3;
var y = 250; 

    for (var i = 0; i < 400; i += 4) {
        stroke(256, 256, 256);
        strokeWeight(2);
        line (x-3, y*i-7, 30*i, 300); //left curve
        var y = x * 0.5; //every time the y value is used, it is multiplying x by 0.5 
        stroke (255, 255, 0,90); 
        strokeWeight (1);
        line (x, y*i-50, 300 *i , 30); //background yellow curve
        stroke (256, 256, 256);
        strokeWeight (2);
        line (399, 3*i, 5*i, 1); //upper right curve
        strokeWeight (0.6);
        line (0, y*i, 2*i, 1); //crosshatching line
        strokeWeight (2);
        line (1, 5*i+90, 5*i, 299); // lower left curve
        line (6*i, 300, 400, height-5*i) // lower right curve

    }
}

serinal – looking outwards 04 (section C)

In 2014, visual artist, David Bowen, created an installation, “cloud piano”, that plays the piano based on cloud movements and shapes. How this is done is that Bowen has a camera set up that is pointed towards the sky and takes video of the clouds. Using a software he made, the video causes a device to press down on the corresponding piano keys. The whole act of the installation is to make it seem like the clouds are pressing the piano keys as they move across the sky and go through shape changes. Ultimately, the sound that is played on the piano is made up of a bunch of different sound patterns that Bowen describes as “ethereal forms that build, sweep, fluctuate and dissipate in the sky”.

What I think is really cool about this project is the fact that it is so beautifully and intricately constructed. It is cool to see how sound, art and technology can all be tied in together. Bowen’s work definitely gears towards this side of things, but it is amazing to see things like this done because it is so opposite of what I would do or how I create my art.

Name: Cloud Piano

Artist: David Bowen

Date: 2014

Website Link: http://www.dwbowen.com/cloud-piano/

serinal – project 03 (section C)

sketch

//Serina Liu
//Section C
//serinal@andrew.cmu.edu
//Project-03

var sizex = 320;
var sizey = 240;
var R = 0;
var G = 0;
var B = 0;
var circle = 320;
var dir = 1; 
var speed = 10;
 
function setup() {
  createCanvas(640, 480);
  background (25);

}

function draw() {

    if (mouseX < width*0.44) {
        background (255, 228, 225);
    } else if (mouseX > width*0.6) {
        background (224, 255, 255);
    } else {
        background (255, 215, 0);
    }
    //changing the background color in three different intervals 
    R = 0;
    G = 0;
    B = 0;

    if (mouseX < width*0.44) {
        sizex= 190;
        sizey= 250;
        R= 256;
    } else if (mouseX > width*0.6) {
        sizex= 700;
        sizey= 900;
        B= 256;
    } else {
        sizex=400;
        sizey=470;
        G= 256;
    }
    //size of rectangle changing in three different intervals
    //color of rectangle also changing in three different intervals

    noStroke();
    fill(256, 256, 256);
    ellipseMode (CENTER);
    ellipse (320, 230, circle ,circle);
    //ellipse

    circle += dir*speed;
    if (circle > 550) {
        dir = -dir;
        circle =550;
    } else if (circle < 0) {
        dir = -dir;
        circle = 0;
    }
    //ellipse moving outward and inward

    var rectangle=(width-mouseX);
    fill (R, G, B);
    rectMode (CENTER);
    rect (rectangle, mouseY, sizex/8, sizey/30);
    //mirrors the rectangle in the opposite direction 

    fill(R, G, B);
    rectMode(CENTER);
    rect(mouseX, mouseY, sizex/8, sizey/30);
    //moving rectangle with mouse

}

It is hard to work on motion heavy ones because they tend to give me a headache after looking at them for too long, but I had fun with this one. I think the more practice that I am getting is definitely helping me. I was inspired by a lot of the motion graphics that you see nowadays, with the pastel color backgrounds, whites and then a loud pop of color. I wanted to just focus on the rectangle mainly changing things, but included the ellipse zoom in and out for some added visual simulation.

serinal – Looking Outwards 03 (section C)

Trussfab is an extremely cool platform, created by Robert Kovacs and his HCI team at Hasso Plattner Institute in Germany, that allows users to design something that can be fabricated into large structures using recycled bottles and 3D printed joints.

Personally, I think the very coolest part of this is that the user doesn’t need to have any outstanding knowledge on engineering or have certain materials/equipment, but still can produce these large structures. You design your structure via Trussfab and then they will generate all the 3D files for all the hinges and joints that are needed to complete the structure.

The idea of Trussfab being an easy to use platform for people to create structures and prototype different things is really great. What is even cooler is how much you can manipulate the structure (with decorations, small details, etc) and the fact that it can even support human weight. I am extremely interested in seeing where this will take a lot of designers and architects with their ideas and whether or not it will become a part of some people’s practices.

I am not completely sure what the algorithms for the actual Trussfab extension are, but I am sure that there was a lot of complex thinking behind it. Robert Kovacs and his HCI team are definitely more into the background, the actual algorithm and the coding that goes into it, because it is meant to serve the artistic sensibilities of other people. I think it’s really cool because it directly relates to design being a “service industry” and they have created a platform that conveys this idea. I am excited to see the future of Trussfab.

Read more about Trussfab via this article!

serinal (section C) – project 02

*i’m not sure why the thing is getting cut off, but TECHNICALLY if you zoom out, it should work out*

sketch

// Serina Liu 
// Section C
// serinal@andrew.cmu.edu
// Project 02, Changing Faces

var eye = 40;
var faceWidth = 150;
var faceHeight = 200;
var mouthSize = 25;
var featherwidth = 30;
var featherheight = 60;
var beaklength = 160;
var pupilsize = 10;
var buttfeathers = 495;
var brow = 5; 
var browtilt = 130; 
//colors
var cR = 240;
var cG = 100; 
var cB = 192; 
//eyebrow
var eyebrows = 10;
 
function setup() {
    createCanvas(640, 480);
}
 
function draw() {
    background(178, 255, 102);
    //head
    fill(256, 256, 256);
    rect(320, 240, faceWidth,  faceHeight);
    //top part of head 
    fill (220);
    rect (320, 240, faceWidth, faceHeight/2);
    //eyes
    fill(0, 0, 0);
    var eyeLX = 320 - faceWidth * 0.1;
    var eyeRX = 320 + faceWidth * 0.2;
    ellipse(eyeLX +10, height / 2, eye, eye);
    ellipse(eyeRX +10, height / 2, eye, eye);
    //eyepupils
    fill(256, 256, 256);
    ellipse (eyeLX+5, height/2, pupilsize, pupilsize);
    ellipse (eyeRX+5, height/2, pupilsize, pupilsize);
    //mouth
    fill(255, 255, 0);
    triangle(200, height/2 + 40, 360, 280, 360, 330);
    //mouthpiece2
    fill(255, 255, 0);
    triangle(beaklength, height/2 + 60, 360, 330, 360, 380);
    //head piece
    fill (255, 0, 0);
    ellipse(460, 240, featherwidth, featherheight);
    ellipse (470, 250, featherwidth, featherheight);
    ellipse (480, 260, featherwidth, featherheight);
    //butt feathers
    fill (256, 256, 256);
    triangle (buttfeathers, height/2 +120, 420, 390, 490, 4000);
    //underchin 
    fill (255, 0, 0);
    ellipse (350, 390, featherwidth, featherheight);
    ellipse (330, 390, featherwidth, featherheight);
    ellipse (370, 390, featherwidth, featherheight);
    //text
    fill(250, cG, cB);
    textSize(20);
    text("hello i am a chicken", 235, 145, 500, 500);
    //text
    fill(cR, 180, cB);
    textSize(20);
    text("hello i am a chicken", 450, 145, 500, 500);
    //text
    fill(cR, cG, 180);
    textSize(20);
    text("hello i am a chicken", 20, 145, 500, 500);
    //text
    fill (76, 153, 0);
    textSize (100);
    text("i am a chicken", 1, 30, 700, 700);
    //eyebrows
    fill(0,0,0);
    rect(eyeLX+7, 203, 30, eyebrows);
    rect(eyeRX+7, 203, 30, eyebrows);
}
 
function mousePressed() {
    // when the user clicks, these variables are reassigned
    // to random values within specified ranges. For example,
    // 'faceWidth' gets a random value between 75 and 150.
    faceWidth = random(130, 165);
    faceHeight = random(300, 400);
    eye = random(10, 30);
    mouthSize = random(80, 100);
    featherwidth = random(30,60);
    featherheight = random(30, 60);
    beaklength = random(40, 120);
    pupilsize = random(7, 15);
    buttfeathers = random(40, 150);
    cR = random(1, 256);
    cG = random(1, 256);
    cB = random(1, 256);
    eyebrows = random(5, 15);
}

This particular project was kind of a challenge for me just because I was having trouble really understanding variables in general. However, once I started to understand the meaning of a variable, I was more easily able to code something. I knew I wanted to do an animal and I wanted to keep the colors of the chicken stable so I tried to manipulate all the other stuff that is involved with it. The text changing color was a fun little thing. Overall, I guess that I would love to have a bit more time to explore and refine my ideas. I think it would probably be helpful to actually sketch out my ideas prior to making it, but as of now and as of the level I am at, I think that it satisfies my standards.