Overview

Hae Wan and my project in it’s original state cannot be displayed on wordpress because it uses the p5.gui library that isn’t included. We’ve made a modified version with p5 sliders that doesn’t include the full capabilities. Please scroll down to see that, but we would like the attached file to be what is graded. As per instruction of TA’s, we’ve included screenshots of how it works as well as a link to the video. Please download the packaged file below:

yuchienc-sectionC-haewanp-secionA-final

and run the index.html file. There’s no need to setup any servers; the p5.gui library is included. Simply type in any message you want in the “message” box and play around with the parameters to customize your text!

Here is a video of how it works:

https://vimeo.com/246549917

Running the index.html file in a browser with the gui created by p5.js library

Showing how text can be resized

Showing different color palettes

Type of letter randomly changes when parameters are adjusted

Size of type can be resized

The vertical height of the canvas adapts to amount of text and can be used to create a pattern.

Demo

To interact with this demo, please type a few letters (don’t use spaces or backspace or punctuation) and play with the sliders!

sketch

var aSlider;
var bSlider;
var unit;
var padding;
var message = [];
var fontA = {'A': a_a, 'B': a_b, 'C': a_c, 'D': a_d, 'E': a_e, 'F': a_f,
 			 'G': a_g, 'H': a_h, 'I': a_I, 'J': a_j, 'K': a_k, 'L': a_l, 
 			 'M': a_m, 'N': a_n, 'O': a_o, 'P': a_p, 'Q': a_q, 'R': a_r,
 			 'S': a_s, 'T': a_t, 'U': a_u, 'V': a_v, 'W': a_w, 'X': a_x,
 			 'Y': a_y, 'Z': a_z
 			}; //storing all functions of the haewan's font into an object];

function setup() {
    createCanvas(480, 480);
    noStroke();
    aSlider = createSlider(0, 100, 50);
    aSlider.position(330, 405);
    bSlider = createSlider(0, 100, 0);
    bSlider.position(330, 455);
}

function draw() {
    background(250);
    
    fill('#ef4131');
    text('SIZE', 325, 390);
    text('PADDING', 325, 440);
    
    unit = aSlider.value();
    padding = bSlider.value();
    for (i = 0; i < message.length; i++) {
        var cur = message[i];
        typeletter(cur, i);
    }
}

function typeletter(ltr, i) {
    fontA[ltr](unit * i + padding*i, 0);        
};


function keyPressed() {
    message.push(key);
    print(key);
}

////////////////////////////////////////////////////
/////////////////////TYPEFACE///////////////////////
////////////////////////////////////////////////////


function a_a(x, y) {
    trngl(x + unit / 2, y, unit, 3)
    trngl(x + unit / 2, y, unit, 4);
    crcl(x + unit / 2, y + 2 * unit / 3, unit / 3);
}

function a_b(x, y) {
    hlf_crcl(x, y + 3 * unit / 10, 3 * unit / 5, -HALF_PI);
    hlf_crcl(x, y + 7 * unit / 10, 3 * unit / 5, -HALF_PI);
    rctngl(x + unit / 6, y, unit, 'v');
}

function a_c(x, y) {
    hlf_crcl(x, y + unit / 2, unit, HALF_PI);
    crcl(x + unit / 2, y + unit / 2, unit / 3);
}

function a_d(x, y) {
    rctngl(x, y, unit, 'v');
    hlf_crcl(x - unit / 6, y + unit / 2, unit, -HALF_PI);
}

function a_e(x, y) {
    rctngl(x + unit * 0.15, y, unit, 'v');
    crcl(x + unit * 0.7, y + unit * 0.15, unit * 0.3);
    crcl(x + unit * 0.7, y + unit * 0.5, unit * 0.3);
    crcl(x + unit * 0.7, y + unit * 0.85, unit * 0.3);
}

function a_f(x, y) {
    rctngl(x + unit * 0.15, y, unit, 'v');
    crcl(x + unit * 0.7, y + unit * 0.15, unit * 0.3);
    crcl(x + unit * 0.7, y + unit * 0.5, unit * 0.3);
}

function a_g(x, y) {
    hlf_crcl(x, y + unit / 2, unit, 0);
    hlf_crcl(x, y + unit / 2, unit, HALF_PI + QUARTER_PI);
}

function a_h(x, y) {
    rctngl(x, y, unit, 'v');
    crcl(x + unit * 0.5, y + unit * 0.5, unit * 0.3);
    rctngl(x + 2 * unit / 3, y, unit, 'v');
}

function a_I(x, y) {
    rctngl(x + unit / 3, y, unit, 'v');
}

function a_j(x, y) {
    rctngl(x + unit / 2, y, 2 * unit / 3, 'v');
    hlf_crcl(x, y + 2 * unit / 3, 2 * unit / 3, 0);
}

function a_k(x, y) {
    trngl(x + unit / 3, y, unit, 2);
    trngl(x + unit / 3, y, unit, 4);
    rctngl(x, y, unit, 'v');
}

function a_l(x, y) {
    rctngl(x, y, unit, 'v');
    crcl(x + unit * 0.55, y + unit * 0.85, unit * 0.3);
}

function a_m(x, y) {
    trngl(x, y, unit, 4);
    trngl(x + unit / 2, y, unit, 4);
}

function a_n(x, y) {
    trngl(x, y, unit, 4);
    rctngl(x + unit / 2, y, unit, 'v');
}

function a_o(x, y) {
    crcl(x + unit / 2, y + unit / 2, unit);
}

function a_p(x, y) {
    hlf_crcl(x - unit / 6, y + 3 * unit / 10, 3 * unit / 5, -HALF_PI);
    rctngl(x, y, unit, 'v');
}

function a_q(x, y) {
    crcl(x + unit / 2, y + unit / 2, unit);
    trngl(x + unit / 2, y + unit / 2, unit / 2, 4);
}

function a_r(x, y) {
    trngl(x + unit / 3, y + unit / 2, unit / 2, 4);
    hlf_crcl(x - unit / 6, y + 3 * unit / 10, 3 * unit / 5, -HALF_PI);
    rctngl(x, y, unit, 'v');
}

function a_s(x, y) {
    hlf_crcl(x + unit * 0.11, y + unit * 0.4, 3 * unit / 4, HALF_PI + QUARTER_PI);
    hlf_crcl(x - unit * 0.11, y + unit * 0.6, 3 * unit / 4, TWO_PI - QUARTER_PI);
}

function a_t(x, y) {
    rctngl(x + unit / 3, y, unit, 'v');
    crcl(x + unit * 0.15, y + unit * 0.15, unit * 0.3);
    crcl(x + unit * 0.85, y + unit * 0.15, unit * 0.3);
}

function a_u(x, y) {
    rctngl(x, y, unit / 2, 'v');
    rctngl(x + 2 * unit / 3, y, unit / 2, 'v');
    hlf_crcl(x, y + unit / 2, unit, 0);
}

function a_v(x, y) {
    trngl(x + unit / 2, y, unit, 1)
    trngl(x + unit / 2, y, unit, 2);
    crcl(x + unit / 2, y + unit / 3, unit / 3);
}

function a_w(x, y) {
    trngl(x, y, unit, 2);
    trngl(x + unit / 2, y, unit, 2);
}

function a_x(x, y) {
    trngl(x + unit / 2, y, unit, 1);
    trngl(x + unit / 2, y, unit, 2);
    trngl(x + unit / 2, y, unit, 3);
    trngl(x + unit / 2, y, unit, 4);
}

function a_y(x, y) {
    rctngl(x + unit / 3, y + unit / 3, 2 * unit / 3, 'v');
    hlf_crcl(x, y, unit, 0);
}

function a_z(x, y) {
    push();
    translate(x + unit / 2, y + unit / 2);
    rotate(HALF_PI);
    trngl(unit/6, - unit / 2, unit, 1);
    pop();
    rctngl(x, y, unit, 'h');
    rctngl(x, y + 2 * unit / 3, unit, 'h');
}

/////////SHAPES TO DRAW///////////
 
function trngl(x, y, h, d) {
    fill(239, 65, 49);
    beginShape();
    vertex(x, y);
    vertex(x, y + h);
    if (d % 2 == 0) {
        vertex(x + h / 2, y + h * (2 % d) / 2);   
    } else {
        vertex(x - h / 2, y + h * (2 % d) / 2);
    }
    endShape();    
}

function crcl(x, y, r) {
    fill(255, 230, 0);
    ellipse(x, y, r, r);
}

function rctngl(x, y, h, d) {
    fill(46, 49, 150);
    if (d == 'v') {
        rect(x, y, unit / 3, h);
    } else {
        rect(x, y, h, unit / 3);
    }

}

function hlf_crcl(x, y, r, d) {
    fill(236, 0, 140);
    arc(x + unit / 2, y, r, r, d, d + PI);   
    
}

Reflection

We split up the work by each of us designing our own typeface (denoted in comments). Rules and patterns are common in design of typefaces– you’ll notice that there is symmetry between lowercase “d”s, “p”s, “b”s and “q”s, so it was fun applying that idea of repetition to something computational. Bettina focused on writing the code for the GUI and how to compute the spacing for moving letters to new lines, have the canvas height grow with the type, etc. (the draw() and typeletter() functions, the fontB{} functions) And then Haewan focused on the fontA{} functions, and the revised version with p5 sliders so that something can be displayed on WordPress.

proof of concept

Classmate Hae Wan Park and I will be collaborating on making generative greeting cards with a focus on using the techniques learned in this class to create typefaces. We will split up the work by having each of us create two approaches (so the work would be split vertically instead of horizontally). Some approaches I am considering include:

1. Using turtles to trace images in a pattern, similar to my project last week
2. Having the user draw curves with a mouse and use those stored curve objects to generate random patterns (see below and attached proof of concept video)
3. Create a grid system that would place typefaces in certain colors and sizes across the canvas

We will need assistance creating a simple interface/home page so the user can navigate to each of the 4 approaches; upon quick research, the p5 libary p5.gui might be helpful.

For the final project, Hae Wan and I plan on collaborating on making generative graphic design. We have access to a domain name, so we plan on making this generative design program a web experience people can use. Specifically, we are interested in the generative designs to be used as greeting cards, which the user can print out or send the digital interactive version. The latter may give us opportunity to use sound. Design studio Muir Mcneil and School of Design alumnae Rachel Cheng have both worked with generative graphic design pieces.

Rachel’s following project builds a set grid system that varies based on pre-determined parameters. I think her logic behind the program system is quite robust, and we have an opportunity to improve upon it by adding randomness with various random and noise functions.

Above: examples of generative posters from her system

Above: her parameter system for generating posters

Muir Mcneil emphasizes geometry and patterns in their work, with the use of repeated lines and circles similar to past projects Hae Wan and I have done with turtles and pixels recognition. At a glance, their work has a certain tone to it that may not fit “greeting cards”, so we have room to explore how varying color, lines, or even mimicking real life shapes would have a clearer theme.

Above: screenshot of sample work from their portfolio website

sketch

// Bettina Chou
// yuchienc@andrew.cmu.edu
// section c
// project 11 -- freestyle turtles

///////////////TURTLE API///////////////////////////////////////////////////////////////

function turtleLeft(d) {
    this.angle -= d;
}
 
 
function turtleRight(d) {
    this.angle += d;
}
 
 
function turtleForward(p) {
    var rad = radians(this.angle);
    var newx = this.x + cos(rad) * p;
    var newy = this.y + sin(rad) * p;
    this.goto(newx, newy);
}
 
 
function turtleBack(p) {
    this.forward(-p);
}
 
 
function turtlePenDown() {
    this.penIsDown = true;
}
 
 
function turtlePenUp() {
    this.penIsDown = false;
}
 
 
function turtleGoTo(x, y) {
    if (this.penIsDown) {
      stroke(this.color);
      strokeWeight(this.weight);
      line(this.x, this.y, x, y);
    }
    this.x = x;
    this.y = y;
}
 
 
function turtleDistTo(x, y) {
    return sqrt(sq(this.x - x) + sq(this.y - y));
}
 
 
function turtleAngleTo(x, y) {
    var absAngle = degrees(atan2(y - this.y, x - this.x));
    var angle = ((absAngle - this.angle) + 360) % 360.0;
    return angle;
}
 
 
function turtleTurnToward(x, y, d) {
    var angle = this.angleTo(x, y);
    if (angle < 180) {
        this.angle += d;
    } else {
        this.angle -= d;
    }
}
 
 
function turtleSetColor(c) {
    this.color = c;
}
 
 
function turtleSetWeight(w) {
    this.weight = w;
}
 
 
function turtleFace(angle) {
    this.angle = angle;
}
 
 
function makeTurtle(tx, ty) {
    var turtle = {x: tx, y: ty,
                  angle: 0.0, 
                  penIsDown: true,
                  color: color(128),
                  weight: 1,
                  left: turtleLeft, right: turtleRight,
                  forward: turtleForward, back: turtleBack,
                  penDown: turtlePenDown, penUp: turtlePenUp,
                  goto: turtleGoTo, angleto: turtleAngleTo,
                  turnToward: turtleTurnToward,
                  distanceTo: turtleDistTo, angleTo: turtleAngleTo,
                  setColor: turtleSetColor, setWeight: turtleSetWeight,
                  face: turtleFace};
    return turtle;
}

///////////////BEGINNING OF CODE///////////////////////////////////////////////////////////////

function preload() {
    img = loadImage("https://i.imgur.com/UB3R6VS.png")
}

function setup() {
  createCanvas(300,480);
  img.loadPixels(); //load pixels of image but don't display image
  background("#ffccff");
}

var px = 0; //x coordinate we're scanning through image
var py = 0; //y coordinate we're scanning through image
var threshold = 90; //image is bw so threshold is set to high brightness

function draw() {
  var col = img.get(px, py); //retrives RGBA value from x,y coordinate in image
  var currentPixelBrightness = brightness(col);
  var t1 = makeTurtle(px,py);
  var t2 = makeTurtle(px + 20, py); //offset by 10 pixels to the right
  strokeCap(PROJECT);
  t1.setWeight(5);
  t1.setColor("#ccffff");
  t2.setWeight(1);
  t2.setColor("#33cc33");
  if (currentPixelBrightness > threshold) { //does not draw lines in negative space
      t1.penUp();
      t2.penUp();
  }
  else if (currentPixelBrightness <= threshold) { //only draws lines to fill in positive space
      t1.penDown();
      t2.penDown();
  }
  t1.forward(1);
  t2.forward(1);
  px += 1;
  if (px >= width) { //brings px to 0 again
    px = 0;
    py += 10; //starts a new row
  }
}

I was inspired by the following piece of work and considered how computation could create such image treatments as opposed to manually setting the lines and offsets.

I would have had no idea where to start if not for the deliverables prompt suggesting that we could have turtles draw things in relation to an image. I decided to build upon the pixel brightness techniques we learned in previous weeks to make the turtle penDown() when the image is black and penUp() when the image is white. Thus, in a black and white image it is easy to recreate it using the lines method.

Above is the quick image I put together in illustrator to have my turtle trace

Above is a screenshot of the finished image from this particular code. Line weight, colors, amounts, and offsets could easily be manipulated to create a variety of imaging. There could even be multiple images referenced to create a more complex drawing.

Above: screenshot of Carsten Nicolai’s work from vimeo. (click image for video)

The only sound artist I knew of prior to this assignment was Ryoji Ikeda, so through searching “artists like Ryoji Ikeda” I found the following article. Carsten Nicolai piqued my interest because of his work in “altering audiovisual perception”. I think it’s interesting how we often blend our 5 senses; perhaps we visually represent sound or taste, or aurally represent touch. I can see there being pre-determined constraints mapping one variable to another so one sensory input informs the other.

It is nevertheless interesting that despite his work in representing sound visually, the visuals he makes sounds very sterile and technical. He seems to emphasize texture and lines, but I’m interested to see what computation could do with colors as well.

Above: screenshot from google images of Nicolai’s work

sketch

// Bettina Chou
// yuchienc@andrew.cmu.edu
// Section C
// Project 10

var buildings = []; //the big icebergs
var sparkles = []; //yellow sparkles on bottom

function setup() {
    createCanvas(309, 480);
    frameRate(10);
    
    for (var i = 0; i < 2; i++){
        var rx = random(width);
        buildings[i] = makeBuilding(rx);
    }
    
    for (var h = 0; h < 5; h ++) {
        var rz = random(width);
        sparkles[h] = makeSparkle(rz);
    }
}   
 


function draw() {
    background("#364442");
    noStroke();
    fill("#5e7d6f");
    rect(0,135,width,346);

    drawBoat();
   
    updateAndDisplayBuildings();
    removeBuildingsThatHaveSlippedOutOfView();
    addNewBuildingsWithSomeRandomProbability(); 
    
    updateAndDisplaySparkles();
    removeSparklesThatHaveSlippedOutOfView();
    addNewSparklesWithSomeRandomProbability();
    
}

//draw and update position of boat
var boatX = 125;
var boatY = 137;
var boatSpeed = 3

function drawBoat() {
    fill("#141916")
    stroke(2);
    beginShape(); //boat body
    vertex(boatX,boatY);
    vertex(boatX+9,boatY-11);
    vertex(boatX-16,boatY-11);
    vertex(boatX-16,boatY-58);
    vertex(boatX-18,boatY-58);
    vertex(boatX-18,boatY-11);
    vertex(boatX-42,boatY-11);
    vertex(boatX-34,boatY);
    endShape();
    fill("#d5d9b8");
    noStroke();
    beginShape(); //right boat sails
    vertex(boatX-14,boatY-17);
    vertex(boatX-14,boatY-59);
    vertex(boatX+14,boatY-17);
    endShape();
    beginShape(); //left boat sails
    vertex(boatX-20,boatY-17);
    vertex(boatX-37,boatY-17);
    vertex(boatX-20,boatY-47);
    endShape();
    boatX += boatSpeed; //makes boat move left and right across canvas
    if (boatX >=width) {
        boatSpeed *= -1;
    }
    else if (boatX <= 0) {
        boatSpeed *= -1;
    }
}


//Below: set of functions that create the big icebergs
function updateAndDisplayBuildings(){
    // Update the iceberg's positions, and display them.
    for (var i = 0; i < buildings.length; i++){
        buildings[i].move();
        buildings[i].display();
    }
}


function removeBuildingsThatHaveSlippedOutOfView(){
    var buildingsToKeep = []; //says building because using code template
    for (var i = 0; i < buildings.length; i++){
        if (buildings[i].x + buildings[i].breadth +30 > 0) {
            buildingsToKeep.push(buildings[i]);
        }
    }
    buildings = buildingsToKeep; // remember the surviving icebergs
}


function addNewBuildingsWithSomeRandomProbability() {
    // With a very tiny probability, add a new building to the end.
    var newBuildingLikelihood = 0.009; 
    if (random(0,1) < newBuildingLikelihood) {
        buildings.push(makeBuilding(width));
    }
}


// method to update position of an iceberg every frame
function buildingMove() {
    this.x -= this.speed;
}
    

// draw the icebergs
function buildingDisplay() {
    fill("#a4bcad"); 
    noStroke(); 
    push();
    translate(this.x, this.y);
    beginShape(); //draws iceberg shape using vetices
    vertex(this.x,this.y);
    vertex(this.x-69,this.y+93);
    vertex(this.x-143,this.y+105);
    vertex(this.x-193,this.y+31);
    vertex(this.x-179,this.y-114);
    vertex(this.x-139,this.y-229);
    vertex(this.x-120,this.y-213);
    vertex(this.x-93,this.y-120);
    endShape();
    pop();
}


function makeBuilding(birthLocationX) { //creates iceberg objects to store in array
    var bldg = {x: birthLocationX,
                y: 150,
                breadth: random(60,90),
                speed: 1,
                sparklespeed: random(0.5,1),
                nFloors: round(random(1,1.5)),
                move: buildingMove,
                display: buildingDisplay
               }
    return bldg;
}





//Below: set of functions that generate the yellow sparkles
function updateAndDisplaySparkles(){
    for (var i = 0; i < sparkles.length; i++){
        sparkles[i].move();
        sparkles[i].display();
    }
}


function removeSparklesThatHaveSlippedOutOfView(){
    var sparklesToKeep = [];
    for (var i = 0; i < sparkles.length; i++){
        if (sparkles[i].x + sparkles[i].breadth +30 > 0) {
            sparklesToKeep.push(sparkles[i]);
        }
    }
    sparkles = sparklesToKeep;
}


function addNewSparklesWithSomeRandomProbability() {
    // With a very tiny probability, add a new building to the end.
    var newSparkleLikelihood = 0.1; 
    if (random(0,1) < newSparkleLikelihood) {
        sparkles.push(makeSparkle(width));
    }
}



function sparkleMove() {
    this.x -= this.speed;
}
    


function sparkleDisplay() { 
    push();
    fill("#ffce71");
    translate(this.x+100, random(30) + this.y);
    ellipse(0, 0, 10);
    pop();
}


function makeSparkle(birthLocationX) {
    var sparkle = {x: birthLocationX,
                y: random(400,420),
                breadth: random(60,90),
                speed: random(2,3),
                transparency: random(100,200),
                move: sparkleMove,
                display: sparkleDisplay
               }
    return sparkle;
}

This project was challenging for me to understand because I’ve never worked with this many helper functions before. It took a while for me to unpack the template code and understand what does what, so I’m happy I finally understand.

First, in setup we fill the array with objects. We make the objects in a separate function; that is the make[name] function. The function that draws the images is the [name]display function. At the same time, the move function is running and since the array with the objects is a global variable, we don’t need to pass the objects between the move and display functions. Finally we have the remove and add functions, which constantly scan the “x” methods of each object in the arrays to remove items that have fallen off the screen and push new objects into the array.

Above: Sketch I drew in Adobe Illustrator prior to implementing in p5

For this week’s looking outwards, I found Mimi Son’s work to be quite intriguing. She co-founded a studio, Kimchi and Chips, with UK artist Elliot Woods and together they work on a mixture of tangible and digital installation projects. I liked A Journey, London, for its use of paper craft and lights — two mediums I particularly like. I appreciate how delightful the environments the studio creates are.

Above: Image of project “A Journey, London”

What’s interesting, since we are bringing up the topic of underrepresented females in the industry, is that Elliot Woods, Son’s male studio partner, is listed first in all descriptions of their studio. Perhaps I’m affect by confirmation bias (after all, their studio name suggests Son is first since Kimchi references Korean culture) but I’m curious if it was a publicity decision or a sincere representation of who has more contribution in the studio.

sketch

// Bettina Chou
// yuchienc@andrew.cmu.edu
// Sectin C
// Project 9: Pixelated Image

var img;

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

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

function draw() {
      scale(.5,.5); //image is double size of canvas, just scaling down to fit
      var x = floor(random(img.width));
      var y = floor(random(img.height));
      var col = img.get(x, y); //retrives RGBA value from x,y coordinate in image
      //fill(col);
      var weight = 640/(brightness(col));
      stroke(col);
      strokeWeight(weight);
      strokeCap(SQUARE);
        //ellipse(x,y,30);
      line(x, y, x-25, y-25);
      }

I wanted to build off the brightness indicators we learned last week with the eye-tracking project. In art, darker colors have more weight, so I made the thickness of the strokes depend on the darkness. I chose diagonal lines to mimic the motion in the original picture, in which my friend stands within the famous LACMA spaghetti installation. Initially, I tried drawing each line in order by calling each pixel by row and column. However, that method not only was inefficient (taking at least 10 seconds to compile) but the order felt rigid. Instead, I call each pixel randomly. Not only is it more efficient, but the audience can watch the image unfold and the randomness adds a sense of movement to the piece that honors the original photo.

Top: An early iteration. Below: Screenshot of what the final image may look like.

I perused through my peers’ looking outwards to come across this fun web toy, frankenSimulator.

Above: screenshots of compositions I made on the interactive site.

As a designer with an art background, I’ve been toying with the balance of form and function in my work. Often I aim for my work to have a purpose and achieve a particular goal. But other times, I simply want to satisfy myself and make something fun and pretty. It’s delightful to come across a piece that simply seems pretty, but I could also imagine it having functional applications. Such types of work could be used for promotional events, branding a product, film, or company release. It could also be a “hook” for a more serious campaign.

I could see a piece like this using concepts of primitive/complex shapes as we’ve learned in class, as well as objects and animation with arrays that we’re beginning to learn.

Thanks to this peer’s post, I was able to also look into the studio behind this piece, Animade, who works on various interactive/motion pieces. As I’ve been getting more into animation and illustration this semester, I am happy to add this studio’s work to my repertoire of knowledge!

Above: screenshot of Animade’s work on their site

Derek Watkins‘s work piqued my interest because his ethos relates to my design methodology, and his approaches relates to an independent study I’m doing this semester.

Watkins works at New York Times where he tells interprets how to tell stories in ways more than just written word and still image. He includes animations and interactive elements to add layers of information to the otherwise standard scrolling-interaction the reader needs to go through. I appreciate his statement in the Eyeo 2017 video, that it’s not about “video journalism” or “photojournalism”, it’s about understanding the nature of the content and what form best communicates the essence of the content to readers. That sentiment of identifying concept and purpose before creating form relates to my design practice; it’s an approach I notice people from other disciplines have trouble grasping– people (myself included) struggle with ambiguity and strive for a tangible grasp of what the thing they’re making is.

Nevertheless, when we let go of preconceived notions of what a form should be, we evolve news sites from pages of text to interactive data visualizations. I hope to apply similar approaches, both conceptually and formally, to an independent study I’m working on where I want to communicate the different lenses I’ve interpreted The Little Prince through in a web format.

Above: images from Watkin’s work in New York Times articles.