sketch

var img;
var x = 0;
var y = 0;
var circle = 20;
var dirX = 1;
var dirY = 1;

function preload() {
    img = loadImage("https://i.imgur.com/YA5ZxuZ.jpg");
}

function setup() {
  createCanvas(391, 480);
  imageMode(CENTER);
  noStroke();
  background(255);
  img.loadPixels();
}

function draw() {

  var pix = img.get(x, y); //gets color of pixel at location x,y
  fill(pix);    //fills circle with that color
  ellipse(x, y, circle, circle); //draws circle

  x+=random(10) * dirX; //sets horizontal wobbly direction for traveling "snake"
  y+=random(10) * dirY; //sets vertical wobbly direction for traveling "snake"

  //code below: if snake goes out of bounds in canvas
  //then restart in a random location
  //with new snake size and reversed direction

  if (x > width || x < 0) {
    x=floor(random(width));
    circle=random(10,25);
    dirX = -dirX;
  }

  if (y > height || y < 0) {
    y=floor(random(height));
    circle=random(10,25);
    dirY = -dirY;
  }

}

I enjoyed this project quite a bit. I chose to go the narcissistic route and make a self-portrait, mostly because I recently painted my apartment and took this selfie against the new wall, and I really like the color palette of this photo.

I started with the pointillism example for reference, but I knew I wanted to make a portrait that gradually filled in with moving lines, rather than random dots/points. What ended up emerging was this kind of “snake” made up of circles moving across the canvas.

Here’s the original photo:

Santiago Ortiz – History Words Flow (2014)
http://moebio.com/research/historywordsflow/

I am interested not only in history, but in how we choose to engage with our history: what sticks out as important after many years? What gets emphasized? What gets forgotten?

Ortiz’s information visualization is exciting to me because it depicts exactly this: not an objective history, but an extremely subjective one, using the frequency of words in Wikipedia entries about a specific period of time as a measure. Since Wikipedia is constantly updated, this graphic is a means of representing what, at this moment, the English-speaking internet community views as the most salient details of history stretching back for millennia, and what we imagine our future to be as well.

Though no information is provided on the computational techniques Ortiz used, I imagine he has written an algorithm that scrapes Wikipedia pages and finds the words that occur with the greatest frequency. These then get a colored band proportional to their frequency. The colors Ortiz has chosen presumably speak to his own artistic sensibility, and his own subjectivity is evident in the periods of time he’s chosen to depict (when he switches from centuries to decades to years, etc).

sketch

var nPoints = 200;  //set number of vertex points for trifolium shape

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

function draw() {
    background(255);
    noStroke();
   
    //draw center trifolium
    push();
    translate(width/2, height/2);
    fill("blue");
    drawTrifolium();
    pop();

    //draw upper left trifolium
    fill("violet");
    drawTrifolium();

    //draw upper right trifolium
    push();
    translate(width, 0);
    fill("violet");
    drawTrifolium();
    pop();

    //draw lower left trifolium
    push();
    translate(0, height);
    fill("violet");
    drawTrifolium();
    pop();

    //draw lower right trifolium
    push();
    translate(width, height);
    fill("violet");
    drawTrifolium();
    pop();
}

//draw Trifolium shape based on mouseX, mouseY
function drawTrifolium() {

    var x;
    var y;
    var r;
    var theta;

    var a = mouseY; //mouseY governs size of trifolium
    var petals = map(mouseX, 0, width, 2, 45); //mouseX governs number of petals
    var petalsInt = round(petals); //rounds petals to nearest integer (no partial petals)

    //create base trifolium shape using equation from Mathworld
    beginShape(); 
    for (var i = 0; i < nPoints; i++) {
        theta = map(i, 0, nPoints, 0, TWO_PI);
        r = -a * cos(petalsInt * theta);
        x = r * cos(theta);
        y = r * sin(theta);
        vertex(x,y);
    }
    endShape(CLOSE);
}

I found the trifolium curve on Mathworld and decided to see what it could do.

I discovered that changing one number in the equation would cause more “petals” to appear on the trifolium (making it not exactly a “tri”folium anymore, but it looks great), and set this to mouseX. Testing another variable, I found it governed the size of the trifolium shape, so I set this to correspond to mouseY.

To make things more interesting, I added four more trifoliums in the corners of the canvas (so only a corner of each was visible). I started with each one a different color:

…but decided I preferred the patterns that emerged when all 4 corner shapes were the same color, creating a more ambiguous web rather than 4 distinct shapes.

sketch

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

function draw() {
    
    //fetches increments of time
    var H = hour();
    var M = minute();
    var S = second();
    var totalSec = ((H * 3600) + (M * 60) + S); //calculates total # seconds in day so far

    //maps increments of time to circle size
    var mappedH = map(H, 0, 23, 0, 200); 
    var mappedM = map(M, 0, 59, 0, 150); 
    var mappedS = map(S, 0, 59, 0, 100);

    //maps increments of time to color values
    var colorH = map(H, 0, 23, 255, 0); 
    var colorM = map(M, 0, 59, 255, 0); 
    var colorS = map(S, 0, 59, 255, 0); 
    
    //creates grayscale roughly in accordance with time of day
    var sky1 = map(totalSec, 0, 43200, 0, 255); //midnight-noon goes from black to white
    var sky2 = map(totalSec, 43201, 86400, 255, 0); //noon-midnight goes from white to black
    
    background(255);

    //draw background circle, fill according to time of day
    if (totalSec <= 43200) {
        fill(sky1);
    }   else {
        fill(sky2);
    }   ellipse(width/2,height/2,width,height);

    //draw circles that expand as increments of time grow
    //fill with colors that get more saturated as increments of time increase
    noStroke();
    fill(colorH,255,255);
    ellipse(150, 130, mappedH, mappedH); //hour
    fill(255,colorM,255);
    ellipse(260, 270, mappedM, mappedM); //minute
    fill(255,255,colorS);
    ellipse(135, 280, mappedS, mappedS); //second
}

I wanted to keep circles as an integral part of the design, because my own experience of time feels most attuned to cycles— the calendar, circadian rhythms, etc. The movement and color of the inner circles are tied to “human” time (hours, minutes, seconds), while the color of the background circle is tied (very approximately, using noon as the brightest point and midnight as the darkest) to the position of the sun in the sky. The map function came in very handy for this project.

sketch

var xSpacing = 125; //horizontal distance between elements
var ySpacing = 100; //vertical distance between elements

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

function draw() {

    var stripeHeight = height/5; //set height of horizontal stripes

    //draw black stripes
    fill(0); 
    rect(0, 0, width, stripeHeight);
    rect(0, 2 * stripeHeight, width, stripeHeight);
    rect(0, 4 * stripeHeight, width, stripeHeight);

    //draw blue stripes
    fill("deepskyblue");
    rect(0, stripeHeight, width, stripeHeight);
    rect(0, 3 * stripeHeight, width, stripeHeight);

    for (var y=0; y<5; y++) { //create 5 rows

        //even rows: draw moon & stars
        if (isEven(y)) {   
        for (var x=0; x<4; x++) {   //draw 4 columns
            var i = (x * xSpacing) + 50;  
            var j = (y * ySpacing) + 50;  
            moon(i, j);   //draw 
            starCluster(i + 25, j - 25);
        }
        
        //odd rows: draw sun
        } else {  
            for (var x=0; x<4; x++) {
                var a = (x * xSpacing) + 75;
                var b = (y * ySpacing) + 50;
                sun (a, b);
            }
        }
    }
}


//creates moon
function moon (x,y) {
noStroke();
fill("lemonchiffon");
arc (x,y,50,50,HALF_PI,(PI * 3/2));
fill(0);
arc (x,y,25,50,HALF_PI,(PI * 3/2))
}

//creates three stars
function starCluster (x,y) {
fill(255);
text ("*",x,y);
text ("*",x+10,y+10);
text ("*",x-5,y+18);
}

//creates sun
function sun (x,y) {
    noStroke();
    fill("yellow");
    ellipse(x,y,30,30);
    for (var angle=0; angle < 360; angle +=45) {
        stroke("yellow");
        strokeWeight(2);
        line(x, y, x + cos(radians(angle)) * 30, y - sin(radians(angle)) * 30);
        }
}

//tests for odd/even
function isEven (value) {
    return value % 2 == 0;
}

I am not a visual artist/designer and not the best at drawing, so I skipped straight to brainstorming shapes in code. I knew I wanted to work with some curved shapes since I didn’t entirely master the arc() function earlier in the semester. Playing around with arcs in p5.js led me to the moon shape, which gave me the idea of alternating day/night sky patterns. This week’s lessons on cos() and sin() came in handy when I was trying to draw the sun’s rays, as I was able to use these functions to create a simpler way of creating the circular lines than drawing each individually.

Ben Rubin – Shakespeare Machine (2012)

Ben Rubin’s Shakespeare Machine uses an algorithm to select phrases or combinations of words from Shakespeare’s plays, and displays them on a series of 37 LED screens installed in a chandelier in the lobby of New York’s Public Theater. Each screen represents one play and displays text taken from that particular play.

The algorithm selects for various contextual and grammatical similarities (e.g. hyphenated adjectives, the word “you” plus any noun, nouns that describe the human body) and displays a phrase from each play at random.

Rubin’s passion for data and the excitement of analyzing texts at a micro level (he has done several other similar projects) come through clearly in this piece. For me, this piece is a visually exciting way of demonstrating Shakespeare’s constant inventiveness as a writer. Its placement in the Public Theater, which produces New York’s free Shakespeare in the Park, is a perfect pairing of artwork and site.

gates-face2

//initialize variables to be randomized
var faceWidth = 480;
var eyeSize = 240;
var eyeColorR = 19;
var eyeColorG = 175;
var eyeColorB = 26;
var noseSize = 350;
var stacheWidth = 3;

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

function draw() {

    background(255);

    //head
    fill(242,208,239);
    noStroke();
    ellipse(240,240,faceWidth,640);

    //eyes
    stroke (0);
    strokeWeight (1);
    fill(255);
    ellipse(144,240,eyeSize,eyeSize);
    ellipse(336,240,eyeSize,eyeSize);

    //iris
    fill(eyeColorR, eyeColorG, eyeColorB);
    noStroke();
    ellipse(144, 240, eyeSize / 2, eyeSize /2);
    ellipse(336, 240, eyeSize / 2, eyeSize /2);

    //pupils
    fill(0)
    noStroke();
    ellipse(144,240,eyeSize/5,eyeSize/5);
    ellipse(336,240,eyeSize/5,eyeSize/5);

    //nose
    fill(218,0,165);
    triangle (240,noseSize,216,425,264,425);

    //mustache
    stroke(40,17,0);
    strokeWeight(stacheWidth);
    line(80,441,80,466);
    line(90,444,90,469);
    line(100,447,100,472);
    line(110,450,110,475);
    line(120,453,120,478);
    line(130,454,130,480);
    line(140,456,140,482);
    line(150,458,150,484);
    line(160,459,160,485);
    line(170,460,170,486);
    line(180,461,180,487);
    line(190,462,190,488);
    line(200,463,200,489);
    line(210,463,210,489);
    line(220,463,220,489);
    line(230,463,230,489);
    line(240,463,240,489);
    line(250,463,250,489);
    line(260,463,260,489);
    line(270,463,270,489);
    line(280,463,280,489);
    line(290,462,290,488);
    line(300,461,300,487);
    line(310,460,310,486);
    line(320,459,320,485);
    line(330,458,330,484);
    line(340,456,340,482);
    line(350,454,350,480);
    line(360,453,360,478);
    line(370,450,370,475);
    line(380,447,380,472);
    line(390,444,390,469);
    line(400,441,400,466);

    //mouth
    noFill();
    stroke(218,0,165);
    strokeWeight(5);
    arc(240,345,576,310,0,PI);

    //hat
    fill(0);
    noStroke();
    arc(240,0,350,200,0,PI);
}

//change face dimensions when mouse is clicked
function mousePressed() {
    faceWidth = random(200,480);
    eyeSize = random(50, 288);
    eyeColorR = random(0,255);
    eyeColorG = random(0,255);
    eyeColorB = random(0,255);
    noseSize = random(300,450);
    stacheWidth = random(0,15);
}

I chose to continue working with my face project from last week. In doing so, I learned why hard-coding numbers can make things difficult down the line: when I changed the canvas size my face didn’t fit in the frame, and after changing that I needed to adjust quite a few numbers to make the proportions match on the facial features. In future I will plan to create more variables and do much less hard-coding of numbers.

Yesterday Tomorrow, by Annie Dorsen

In 2016, I saw the theater director Annie Dorsen’s performance piece Yesterday Tomorrow, in which three performers sing a song over and over. The song starts out as “Yesterday” by the Beatles, and ends as “Tomorrow” from the musical Annie. The transition between these two songs is accomplished by an algorithm that changes both the notes and the lyrics by a very small amount with every repetition, and does so differently at each performance.

Dorsen has been using algorithms in performance for several years, beginning with Hello Hi There, a work for two custom-programmed chatbots, in 2010. The algorithm for Yesterday Tomorrow was developed specifically for the project, in collaboration with a programmer and a researcher from IRCAM, a French institute for the study of music and science.

I am inspired by the use of programming to tap into very human concerns and emotions. Though a program is of course emotionless, its deployment in performance can produce a variety of emotions in the audience: nostalgia, anxiety, frustration, melancholy. For me, this piece was a profound meditation on the passage of time and the fleeting uncertainty of the present moment.

gates-face

function setup() {
    createCanvas(500,500);
    background(255);

}

function draw() {

    //head
    fill(242,208,239);
    noStroke();
    ellipse (250,250,500,700);

    //eyes
    stroke (0);
    strokeWeight (1);
    fill(255);
    ellipse(150,250,250,250);
    ellipse(350,250,250,250);

    //iris
    fill(19,175,26);
    noStroke();
    ellipse(150,200,100,100);
    ellipse(350,200,100,100);

    //gold ring left side
    stroke(190,190,6)
    strokeWeight (3);
    noFill();
    beginShape();
    curveVertex (130,180);
    curveVertex (135,165);
    curveVertex (150,170);
    curveVertex (165,165);
    curveVertex (170,180);
    curveVertex (185,185);
    curveVertex (180,200);
    curveVertex (185,215);
    curveVertex (170,220);
    curveVertex (165,235);
    curveVertex (150,230);
    curveVertex (135,235);
    curveVertex (130,220);
    curveVertex (115,215);
    curveVertex (120,200);
    curveVertex (115,185);
    endShape(CLOSE); 

    noFill();
    curve(130,180,130,180,135,165,135,165);

    //gold ring right side
    noFill();
    beginShape();
    curveVertex (330,180);
    curveVertex (335,165);
    curveVertex (350,170);
    curveVertex (365,165);
    curveVertex (370,180);
    curveVertex (385,185);
    curveVertex (380,200);
    curveVertex (385,215);
    curveVertex (370,220);
    curveVertex (365,235);
    curveVertex (350,230);
    curveVertex (335,235);
    curveVertex (330,220);
    curveVertex (315,215);
    curveVertex (320,200);
    curveVertex (315,185);
    endShape(CLOSE); 

    noFill();
    curve(330,180,330,180,335,165,335,165);

    //pupils
    fill(0)
    noStroke();
    ellipse(150,200,50,50);
    ellipse(350,200,50,50);

    //nose
    fill(218,0,165);
    triangle (250,375,225,425,275,425);

    //mustache
    stroke(40,17,0);
    strokeWeight(3);
    line(50,420,50,445);
    line(60,425,60,450);
    line(70,430,70,455);
    line(80,435,80,460);
    line(90,438,90,463);
    line(100,441,100,466);
    line(110,444,110,469);
    line(120,447,120,472);
    line(130,450,130,475);
    line(140,453,140,478);
    line(150,454,150,480);
    line(160,456,160,482);
    line(170,458,170,484);
    line(180,459,180,485);
    line(190,460,190,486);
    line(200,461,200,487);
    line(210,462,210,488);
    line(220,463,220,489);
    line(230,463,230,489);
    line(240,463,240,489);
    line(250,463,250,489);
    line(260,463,260,489);
    line(270,463,270,489);
    line(280,463,280,489);
    line(290,462,290,488);
    line(300,461,300,487);
    line(310,460,310,486);
    line(320,459,320,485);
    line(330,458,330,484);
    line(340,456,340,482);
    line(350,454,350,480);
    line(360,453,360,478);
    line(370,450,370,475);
    line(380,447,380,472);
    line(390,444,390,469);
    line(400,441,400,466);
    line(410,438,410,463);
    line(420,435,420,460);
    line(430,430,430,455);
    line(440,425,440,450);
    line(450,420,450,445);

    //mouth
    noFill();
    stroke(218,0,165);
    strokeWeight(5);
    arc(250,345,600,300,0,PI);

    //hair
    fill(0);
    noStroke();
    arc(250,0,350,200,0,PI);
}

People always tell me I have big, expressive eyes so I knew they would be the focus of this self-portrait. Since the Mondrian assignment got me very familiar with rectangles, I wanted to challenge myself to explore other shapes. Using the curveVertex() function to make the gold rings inside the eyes involved the most trial and error, as did positioning the many lines that make up the mustache.