bettina-randomface-teal

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

//import math; 
/*head coordinates*/
var TLx=120; //top left x
var TLy=100; //top left y
var TRx=400; //top right x
var TRy=270; //top right y
var BRx=330; //bottom right x
var BRy=500; //bottom right y
var BLx=160; //bottom left x
var BLy=490; //bottom left y
/*eye coordinates*/
var LEx=110; //left eye x
var LEy=280; //left eye y
var REx=300; //right eye x
var REy=260; //right eye y
var eye=50
/*eyebrows*/
var high= 50; //how much higher than eyes
var BrowAngle=0; //angle of brows
var BrowThick=10;  //how thick brows
var lineStart= 60;//left starting x of brows
var lineLength= 30; //length of brows
var LBstart=60; //left brow start
var RBstart=275; //right brow start
var LBangle=0;
var RBangle=0
/*nose*/
var noseBLx=150;
var noseBLy=320;
var noseBRx=200;
var noseBRy=350;
var noseMx=180;
var noseMy=200;
/*mouth*/
var mouthTLx=150;
var mouthTLy=400;
var mouthWidth=100;
var mouthHeight=100;
var MouthRound=20;


function draw() { 
  background(255);
  strokeWeight(6);
/*face*/
  noFill();
  stroke(90,196,186); //teal
  beginShape();
    curveVertex(BRx,BRy);//ones on the ends are the "handles"
    curveVertex(BRx,BRy);//first point (bottom right)
    curveVertex(TRx,TRy);//top right
    curveVertex(TLx,TLy);//top left
    curveVertex(BLx,BLy);//bottom left
    curveVertex(BRx,BRy);//bottom right
    curveVertex(TRx,TRy);// last point (top right)
    curveVertex(TRx,TRy);//ones on the ends are the "handles"
  endShape();;
  
/*eyes*/
  stroke(119,117,224); //indigo
  ellipse(REx,REy,eye);//right eye
  ellipse(LEx,LEy,eye); //right eye
/*eyebrows*/
  strokeWeight(BrowThick);
  line(LBstart,LEy-high,LBstart+lineLength,(LEy-high)+LBangle); //left brow
  line(RBstart,REy-high,RBstart+lineLength,(REy-high)+RBangle); //right brow
/*nose*/
  strokeWeight(6);
  stroke(232,117,106);//red
  triangle(noseBLx,noseBLy,noseMx,noseMy,noseBRx,noseBRy);
/*mouth*/
  rect(mouthTLx,mouthTLy,mouthWidth,mouthHeight,MouthRound);

}

function mousePressed() {
/*face*/
  TLx=random(80,200);
  TLy=random(100,300);
  TRx=random(300,440);
  TRy=random(80,310);
  BLx=random(80,200);
  BRx=random(310,440);
/*eyes*/
  REx=random((TRx/2)+40,TRx);
  LEx=random(TLx,((TRx/2)-40));
  eye=random(10,45);
  REy=random(TLy,BLy);
  LEy=REy+random(-10,10);
/*eyebrows*/
  lineStart=random(-20,20);
  LBstart= (LEx-(eye/2)+lineStart);
  lineLength=random(30,80);
  BrowThick=random(6,14);
  RBstart=(REx-(eye/2)+lineStart);
/*nose*/
  noseBLx=random(LEx+20,LEx+((REx-LEx)/2));
  noseBRx=noseBLx+random(10,60);
  noseBLy=random(LEy+eye,BRy);
  noseBRy=noseBLy;
  noseMy=random((noseBLy-50),noseBLy);
  noseMx=random(noseBLx,noseBRx);
/*mouth*/
  mouthTLx=random(Math.max(TLx,BLx),(noseMx-20));
  mouthTLy=random((noseBLy+20),BLy);
  mouthWidth=random(20,150);
  mouthHeight=random(0,80);
  MouthRound=random(10,50);
  BrowCounter=3;
  LBangle=random(-30,31);
  RBangle=random(-30,31);
  }

I was inspired by Moka piece, which felt playful and childish. I wanted to challenge myself to create more organic lines as opposed to geometric ones I did for my first project. After a lot of math and quadrants, and bringing a bit of Math.min and Math.max, I was able to set enough rules for the randomization so the facial features were in believable positions.

I intended for each face to have the energy of children’s drawings, incorporating near primary colors for the lines. My concept was that generative art is not about creating a single perfect piece, but instead a system. Thus, while each face on it’s own seems laughable, I intended to present the outcome as patterns, showing the theme and variation throughout my system.

For the time being, I could not implement enough rules to draw all these faces in one program (my code was getting messy and I could not figure out how to put in conditionals), so I modified the program above to make the face outline different colors, add an additional curve vertex, as well as add an additional translated outline.

Sample spread of the book

Conditional Design Workbook

This is a workbook created with Conditional Design studio. I admire it’s analogue interpretation of “programming” and generative art. Programming at it’s core is the logic and rules, whereas the syntax we learn is simply the language necessary to communicate the rules to a computer. Since these rules are communicated to people, there is freedom in how the information is presented, as well as opportunities for more organic, “hand-made” forms. I admire how inherently interactive the piece is; it reinforces my belief that interactive art forms are more palatable to a wider audience.

This system also relates to my design studies: our school head, Terry Irwin, asserts that to solve for “wicked”, or complex, problems, it is more effective to create rules for creation as opposed to simply creating a set number of things. In other words, it is creating a lasting system. Unlike set “things” rules for a system may outlast wear, as well as adapt to unpredictable conditions of an environment.

bettina-01-face

function setup() {
  createCanvas(325,611);
  background(246,201,69);
  
}

function draw() {
  fill(71,63,150); //hair 
  noStroke();
  ellipse(162,517,256);
  rect(34,444.5,256,256,75);
  stroke(71,63,150);
  strokeWeight(13);
  strokeCap(SQUARE);
  noFill();
  arc(180,375,90,90,HALF_PI+QUARTER_PI,PI+QUARTER_PI); //cowlick
  noStroke();
  fill(124,121,185);
  ellipse(188.5,432,88,53); //hair shine
  fill(239,204,188);
  rect(64,500,195,157,34.5); //skin base
  fill(239,171,146);
  rect(162,527.5,97.5,84.5) //skin shadow
  fill(71,63,150);
  quad(144.5,473,270.5,473,270.5,561.5,144.5,534); //bangs
  fill(244,134,107);
  rect(64,593,42,18); //blush
  rect(217.5,593,42,18);
  noFill();
  stroke(37,33,90);
  strokeWeight(6); //eyes and eyebrows
  arc(107,575,56,56,PI+QUARTER_PI,PI+HALF_PI+QUARTER_PI);
  strokeWeight(9);
  arc(107,592,45,45,PI+QUARTER_PI,PI+HALF_PI+QUARTER_PI);
  arc(218,592,45,45,PI+QUARTER_PI,PI+HALF_PI+QUARTER_PI);
}

Reflection

This assignment felt more straightforward than programming I’ve done in previous programming classes; instead of solving for a scenario we had the freedom to play with shapes to create an image. For artists and designers, this is satisfying because we like seeing visual output of our work and are taught that there is no set “right” or “wrong”.

Most of the time spent on creating this piece was preparation: sketching ideas of my portrait, mapping it out on Illustrator, and then math-ing out the coordinates necessary to create the shapes. The most complex math needed was remembering there’s 2 Pi in a circle to create arcs. Planning the drawing felt like building blocks: we had to be conscious of which basic shapes we’re piecing together to form a complex shape as well as which order to draw on top of the canvas.

Additional color iterations of my self-portrait

Screenshot of the website in midst of being colored

This is an interactive music video in which the video plays in black outlines and no color so that the watcher can select various colors and color the music video themselves. At the end, they can watch their own colored version of the music video and share with friends on social media. The song is called “Stained Glass” by the band Real Estate for the release of their new album “In Mind”. The video was created in collaboration with Wieden + Kennedy group creative director Craig Allen and the digital production company MediaMonks. It’s likely there was a team of 4-7 people that helped out, although I’m not as familiar with the advertising/branding industry, and there isn’t information on how long it took. Since it was with a large agency, it’s likely the band had access to industry-standard resources in creating it.

On a superficial level, this inspires me because it’s just so pretty and fun; it recalls childhood days of coloring in coloring books and pays homage to adult zentangle coloring books that help destress. I’m also baffled at the implementation— I literally haven’t the slightest idea at how they did it and I love that.

The strength of this piece lies in the conceptual reason of why this inspires me. The site allows music listeners to have a new way of interacting with an otherwise passively listened entertainment. The music industry struggles to compete with easier forms of entertainment/socializing such as eating out or netflix. The traditional model of planning months in advance, committing an entire evening or more to travel to a venue to watch something. I can see this microsite as a concept for web-based concerts: instead of simply watching a livestream, there could be elements such as color, and light that the audience can interact with (think Twitch plays rock concert). I believe audience participation is key to growing the entertainment industry. From a design/business perspective, too much of passive entertainment is already free (even active entertainment like video games are free). One could even make revisions to this piece for those who prefer passive entertainment by providing an option for people to work with existing versions that people have colored. On the other hand, from an artistic perspective, interactive art is valuable because it feels like the artist isn’t having a one-sided conversation with the audience; instead, the artist and the audience can generate an idea together.