September 2016 – Page 40 – [OLD – FALL 2016] 15-104 • COMPUTING for CREATIVE PRACTICE

GraceCha-LookingOutwards-1

Random Chance – #commonflag2016

This summer, I stumbled upon a twitter hashtag called the #commonflag2016 that was an open commission by The Design Office to create a cool moving animation of a universal animated flag that could symbolically unify and represent America for flag day. It’s a fun little doodle with a pretty interesting story behind it.

‘Random Chance’ was one of my favorites among the submissions because of its crazy American Flag animation, which flashes different color stars, background colors, and disappearing/appearing stripes. The sound-less nature makes it Other submissions included using a mixture of placing the stars and stripes in different locations. After using the ‘random’ function in class today, this reminded me of the random changing positions of the colors, but using colors and different thickness of lines.

On this particular submission, for another iteration, I think it would be nice if the colors weren’t flashing too fast (although I think one of its charms is the quick flashing quality). Also, the stars and stripes were in a predestined area of the screen, but it would be interesting to see how different it would look if the stars spilled out over the stripes or vice versa.

Some Other Examples of #commonflag2016

Screen Shot 2016-09-01 at 1.42.10 PM

Some other examples utilize the creative more abstract ways of displaying their examples showing “Blurred lines, blurred identities, different shapes, overlap & unification”.

https://twitter.com/hashtag/commonflag2016?src=hash

http://thedesignoffice.org/project/the-common-flag

KyleLee-LookingOutwards-1

http://www.commarts.com/column/reformulating-ux-norms

This article, written by Brian Burke, discusses the role of UX agencies to transform norms of business, education, social interaction, and large societal transitions. The CEO of Smashing Ideas, a UX agency, Burke discusses changing trends to onboard digital, the affect of big data, as well as the balance of art and science. One of their projects includes aiding Penguin Random House Publishing’s digital transformation to deeply broaden and diversify audiences.

For me, my greatest fear as a designer is that people see my role as shallow; all I do is make things simple and look “pretty.” The most admirable points in this article was the discussion of using design to lead some of these big trends towards a more cohesive future. In particular, the aiding of design to effect education and development of children significantly resonated with me.

One critique I have is on the results of some of Smashing Ideas projects. Given their success and reputation I am not too critical, but I would have liked to see some hard evidence on the fruits of their design work, namely how their aiding of Penguin Random House Publishing has actually changed peoples lives.

UX is huge now. Nearly every tech company and start up is in need of a UX/UI role. A lot of the time, UX can be coupled with Engineer. At Google, these UX Engineers are obviously prominent and have less of a presence in the vastness of Google. I like how even in the design of the company’s small 70 person employee roster seems to focus on the experience of their workers. In a more intimate workspace, there is greater opportunity to acknowledge and appreciate the work itself.

GarrettRauck-Project-1

sketch

//Garrett Rauck
//Section C
//grauck@andrew.cmu.edu
//Project-01

///////////////////////////////////
// INIT VARIABLES
///////////////////////////////////
var canvasWidth = 500;
var canvasHeight = 600;

///////////////////////////////////
// RUN
///////////////////////////////////
function setup() {
	bg = loadImage("https://courses.ideate.cmu.edu/15-104/f2016/wp-content/uploads/2016/09/background.jpg");
    createCanvas(canvasWidth, canvasHeight);
}

function draw() {
	// set background
	background(bg);
	// background(255);

	// set drawing modes
	rectMode(CENTER);
    ellipseMode(CENTER);
	noStroke();

	//// HAIR ////
	fill(54, 32, 9);
	ellipse(canvasWidth/2, canvasHeight/2-175, 300, 200);
	ellipse(canvasWidth/2+35, canvasHeight/2-200, 175,175);
	//// FACE MASSES ////
	fill(255, 239, 161);
	// Chin
    rect(canvasWidth/2, canvasHeight/2 + 125, 325, 265, 50);
    // Cheeks
    ellipse(canvasWidth/2-100, canvasHeight/2+25, 190, 190);
    ellipse(canvasWidth/2+100, canvasHeight/2+25, 190, 190);
    // Ears
    ellipse(canvasWidth/2-105, canvasHeight/2-120, 50, 65);
    ellipse(canvasWidth/2+105, canvasHeight/2-120, 50, 65);
    // Upper
    rect(canvasWidth/2, canvasHeight/2-75, 225, 200);
    // Forehead
    ellipse(canvasWidth/2, canvasHeight/2-175, 225, 100);

    //// FEATURES ////
    stroke(0);
    strokeWeight(1);
    noFill();
    // Mouth
    rect(canvasWidth/2, canvasHeight/2+50, 260, 20, 0, 0, 10, 10);
    // Chin
    arc(canvasWidth/2,canvasHeight/2+170, 100, 75, PI+QUARTER_PI, TWO_PI-QUARTER_PI);
    // Nose
    rect(canvasWidth/2, canvasHeight/2+10, 45, 25, 0, 0, 10, 10);
    //Eyes
    arc(canvasWidth/2-50, canvasHeight/2-65, 60, 75, PI+QUARTER_PI, TWO_PI-QUARTER_PI);
    arc(canvasWidth/2+50, canvasHeight/2-65, 60, 75, PI+QUARTER_PI, TWO_PI-QUARTER_PI);
    //Eyebrows
    fill(54, 32, 9);
    rect(canvasWidth/2-55, canvasHeight/2-150, 60, 15, 5);
    rect(canvasWidth/2+55, canvasHeight/2-150, 60, 15, 5);
    // Overlays
    noStroke();
    fill(255, 239, 161);
    rect(canvasWidth/2, canvasHeight/2+40, 280, 5);
    rect(canvasWidth/2, canvasHeight/2-5, 50, 10);

}

To create this image, I started by sketching an abstract face, thinking about primitive shapes as building blocks.

Sketch-01

I then drew a second sketch using the wireframes of all of the shapes to get an idea of shape centers and how they would need to overlap.

Sketch-02

The hardest part about writing the code was dealing with all of the different unique coordinates. I didn’t find a very elegant way of doing this — a lot of guess-and-check…