bon – Page 2 – [OLD FALL 2020] 15-104 • Introduction to Computing for Creative Practice

Project 6: Abstract Clock

/*
Bon Bhakdibhumi
bbhakdib
Section D
*/

function setup() {
    createCanvas(480, 480);
    background(0);
    frameRate(1);
}

function draw() {
    noStroke();
    var x = random(0, 480);
    var y = random(0, 480);

// every second generate 1 random white star
    fill(255);
    circle(x, y, 3);

// every minute generate 1 cyan star
  if(second() == 59) {
      fill(0, 255, 255);
      circle(x, y, 10);
  }

// every hour generate 1 yellow star
  if (minute() == 59 & second() == 59) {
      fill(255, 255, 0);
      circle(x, y, 35)
  }
// when clock reaches 24 hr reset background to black
  if (hour() == 23 & minute() == 59 && second() == 59) {
      background(0);
  }
}

For this project, I was inspired by the concept of time and the universe, which is still yet to be fully discovered or understood. In my work, a second is represented by a small “white start” appearing into the “universe.” A minute is by a “blue star”, and an hour is represented by a yellow star. When the clock reaches 24 hours, the canvas is reset to black

LO6: Randomness

<50 RANDOM> by Linyi Dai

In her work, Linyi Dai uses randomness to generate the value of each register to generate the rungs of the sphere. Her work is not based on “truly” random numbers but rather on “pseudo-random” numbers. The work uses a complex repeated algorithm to emulate the effect of randomness. I really enjoy her work as her work provides a good balance between the result of randomness and the creator’s agency; although she uses randomness to generate aspects of the work–the rungs of the sphere–she is in full control of the general outcome–the spherical shape of her work. I also enjoy the simplicity of her work. The use of dull colors is very successful in making this piece of work relaxing and satisfying to look at.

Link: http://lostritto.com/risd2015spring-seminar/?p=275

Title: <50 Random>

Creator: Linyi Dai

Year: 2015

Project 5: Wallpaper

sketch

/*
Bon Bhakdibhumi
bbhakdib
Section D
*/
function setup() {
    createCanvas(600, 600);
    text("p5.js vers 0.9.0 test.", 10, 15);
    background(146, 214, 255);
}

function draw() {
    // odd columns
    for(var i=50; i<=600;i+=200){
        for(var j=50; j<=600;j+=100){
            push();
            translate(i,j);
            carpattern();
            pop();
        }
    }
  // even columns
    for(var k=150; k<=600;k+=200){
        for(var l=0; l<=600;l+=100){
            push();
            translate(k,l);
            carpattern();
            pop();
        }
    }
}
function carpattern(){
    noStroke();
    // front window
    fill(195, 244, 266);
    quad(-15, -1, -17, -2, -6, -9, -5, -8);
    // car body
    fill(248, 95, 120);
    rect(-36, 2, 78, 4);
    fill(237, 67, 80);
    rect(-36, 6, 78, 5);
    fill(255, 33, 49);
    rect(29, 5, 13, 4);
    quad(42, 5, 42, 9, 44, 8, 44, 5);
    quad(-38, 6, -39, 9, -30, 9, -30, 6);
    quad(-30, 9, -30, 11, -36, 11, -38, 9);
    fill(248, 95, 102);
    rect(-15, -2, 57, 8);
    quad(-14, 6, -36, 6, -37, -2, -15, -4);
    rect(-15, 2, 57, 8);
    quad(-18, 1, -5, -9, 20, -10, 33, -1);
    // windows
    fill(195, 244, 266);
    quad(-12, 0, -3, -9, 19, -9, 26, 0);
    // black line separating the window
    fill(0);
    quad(6, 0, 8, -9, 10, -9, 10, 0);
    fill(120, 0, 3);
    rect(-20, 10, 40, 2);
    // tires
    fill(0);
    ellipse(-25, 10, 12, 12);
    ellipse(25, 10, 12, 12);
    fill(151, 162, 168);
    ellipse(-25, 10, 8, 8);
    ellipse(25, 10, 8, 8);
    // lights
    fill(247, 109, 49);
    rect(41, 1, 1, 2);
    quad(-37, 4, -38, 2, -36, 2, -36, 4);
}

I started by sketching my car in illustrator before calculating the coordinates for the geometric shapes in my canvas.

This is the reference of the car:

LO5: Computer Graphics

Apples by Aleksandr Kuskov is a 3D render that exaggerates the reality of cutting fruits. In his work, Kuskov uses Autodesk Maya and Keyshot to achieve these hyper-realistic effects. I really enjoy this work because as I look at it– the sliced apples flying elegantly left and right, the fresh berries, smooth-textured peaches, and the splashing of apple juice–makes me thirsty. I couldn’t resist but think about how fulfilling it would be to have a taste of that sweet and refreshing juice. Through his 3D render work, Kuskov turns typical household fruits and the mundane process of cutting them up into something elegant and dynamic while provoking a sense of desire as it responds to the basic human need of eating.

Link: https://alekscg.pro/fruit

Title: Apples

Creater: Aleksandr Kuskov

Year: 2020

Project04: String Art

sketch

/*
Bon Bhakdibhumi
bbhakdib
Section D
*/
var dx1;
var dy1;
var dx2;
var dy2;
var dx3;
var dy3;
var dx4;
var dy4;
var dx5;
var dy5;
var dx6;
var dy6;
var dx7;
var dy7;
var dx8;
var dy8;
var numLines = 15;

function setup() {
  createCanvas(400, 300);
  text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {
  background(255);
   
  var backLines = 20;
  // green and yellow green rays
  strokeWeight(2.5);
  stroke(39, 183, 121);
  line(-24, 171, 30, -2); // green reference line
  stroke(158, 191, 67);
  line(31, -13, 277, 36); // yellow reference line
  
  var dx15 = (30+24)/backLines;
  var dy15 = (-2-171)/backLines;
  var dx16 = (277-31)/backLines;
  var dy16 = (36+13)/backLines;
  var x15 = -24;
  var y15 = 171;
  var x16 = 31;
  var y16 = -13;
  for (var i = 0; i <= backLines; i ++) {
    strokeWeight(0.7);
    // if statement for equal amout of green and yellow green rays
    if (i < backLines/2) {
    stroke(39, 183, 121);
    } else {
      stroke(158, 191, 67);
    }
    line(x15, y15, x16, y16);
    x15 += dx15;
    y15 += dy15;
    x16 += dx16;
    y16 += dy16;
  }
  // lines that make up the octagon
  strokeWeight(3);
  stroke(0, 144, 85);
  line(25, 90, 101, 15); // green line
  
  stroke(241, 233 , 2);
  line(108, 12, 220, 12); // yellow line
  
  stroke(246, 137, 31);
  line(224, 13, 303, 92); // orange line 
  
  stroke(237, 28 ,36);
  line(306, 100, 306, 212); // red line
  
  stroke(122, 53, 148);
  line( 304, 216, 224, 295,); // purple line
  
  stroke(73, 78, 161);
  line(220, 296, 107, 296); // indigo line
  
  stroke(0, 114, 185);
  line(102, 292, 22, 213); // blue line 
  
  stroke(0, 153, 192);
  line(22, 205, 22, 92); // blue green
  
  // delta x & y for all the lines that make up the octagon
  dx1 = (101-25)/numLines;
  dy1 = (15-90)/numLines;
  dx2 = (220-108)/numLines;
  dy2 = (12-12)/numLines;
  dx3 = (303-224)/numLines;
  dy3 = (92-13)/numLines;
  dx4 = (306-306)/numLines;
  dy4 = (212-100)/numLines;
  dx5 = (224-304)/numLines;
  dy5 = (295-216)/numLines;
  dx6 = (107-220)/numLines;
  dy6 = (296-296)/numLines;
  dx7 = (22-102)/numLines;
  dy7 = (213-292)/numLines;
  dx8 = (22-22)/numLines;
  dy8 = (92-205)/numLines;
  
  // x & y coordinates for all the lines that make up the octagon
  var x1 = 25;
  var y1 = 90;
  var x2 = 108;
  var y2 = 12;
  var x3 = 224;
  var y3 = 13;
  var x4 = 306;
  var y4 = 100;
  var x5 = 304;
  var y5 = 216;
  var x6 = 220;
  var y6 = 296;
  var x7 = 102;
  var y7 = 292;
  var x8 = 22;
  var y8 = 205;
  
  // lines that make up the outer layer of the octagon
  strokeWeight(1);
  for (var i = 0; i <= numLines; i ++) {
    // green
    stroke(0, 144, 85);
    line(x1,y1, x2, y2);
    x1 += dx1;
    y1 += dy1;
    x2 += dx2;
    y2 += dy2;
  }
   
  x2 = 108;
  y2 = 12;
  for (var i = 0; i <= numLines; i ++) {
  // yellow
    stroke(241, 233 , 2);
    line(x2, y2, x3, y3);
    x2 += dx2;
    y2 += dy2;
    x3 += dx3;
    y3 += dy3;
   }
  
  x3 = 224;
  y3 = 13;
  for (var i = 0; i <= numLines; i ++) {
    // orange
    stroke(246, 137, 31);
    line(x3, y3, x4, y4);
    x3 += dx3;
    y3 += dy3;
    x4 += dx4;
    y4 += dy4;
  }
  
  x4 = 306;
  y4 = 100;
  for (var i = 0; i <= numLines; i ++) {
    // red
    stroke(237, 28 ,36);
    line(x4, y4, x5, y5);
    x4 += dx4;
    y4 += dy4;
    x5 += dx5;
    y5 += dy5;
  }
  
  x5 = 304;
  y5 = 216;
  for (var i = 0; i <= numLines; i ++) {
    // purple
    stroke(122, 53, 148);
    line(x5, y5, x6, y6);
    x5 += dx5;
    y5 += dy5;
    x6 += dx6;
    y6 += dy6;
  }
  
  x6 = 220;
  y6 = 296;
  for (var i = 0; i <= numLines; i ++) {
    // indigo
    stroke(73, 78, 161);
    line(x6, y6, x7, y7);
    x6 += dx6;
    y6 += dy6;
    x7 += dx7;
    y7 += dy7;
  }
  
  x7 = 102;
  y7 = 292;
  for (var i = 0; i <= numLines; i ++) {
    // blue
    stroke(0, 114, 185);
    line(x7, y7, x8, y8);
    x7 += dx7;
    y7 += dy7;
    x8 += dx8;
    y8 += dy8;
  }
  
  // Lines that make up the inner layer of the octagon
  x1 = 25;
  y1 = 90;
  x5 = 304;
  y5 = 216;
  for (var i = 0; i <= numLines; i ++) {
    // green
    strokeWeight(1);
    stroke(0, 144, 85);
    line(x1, y1, x5, y5);
    x1 += dx1;
    y1 += dy1;
    x5 += dx5;
    y5 += dy5;
  }
 
  x2 = 108;
  y2 = 12;
  x6 = 220;
  y6 = 296;
  for (var i = 0; i <= numLines; i ++) {
    // yellow
    strokeWeight(2);
    stroke(241, 233 , 2);
    line(x2, y2, x6, y6);
    x2 += dx2;
    y2 += dy2;
    x6 += dx6;
    y6 += dy6;
  }
 
  x3 = 224;
  y3 = 13;
  x7 = 102;
  y7 = 292;
  for (var i = 0; i <= numLines; i ++) {
    //red
    strokeWeight(1);
    stroke(237, 28 ,36);
    line(x3, y3, x7, y7);
    x3 += dx3;
    y3 += dy3;
    x7 += dx7;
    y7 += dy7;
  }
 
  x4 = 306;
  y4 = 100;
  x8 = 22;
  y8 = 205;
  for (var i = 0; i <= numLines; i ++) {
    // blue
    stroke(0, 114, 185);
    line(x4, y4, x8, y8);
    x4 += dx4;
    y4 += dy4;
    x8 += dx8;
    y8 += dy8;
  }
  
  // rays coming out of the octagon
  var frontLines = 25;
  
  // yellow and orange rays
  push();
  translate (-30, 0);
  strokeWeight(2.5);
  stroke(255, 199, 9);
  line(202, -25, 450, 100); // yellow
  stroke(241, 90, 34);
  line(450, 120, 198, 340); //orange
  var dx9 = (450-202)/frontLines;
  var dy9 = (100+25)/frontLines;
  var dx10 = (198-404)/frontLines;
  var dy10 = (340-149)/frontLines;
  var x9 = 202;
  var y9 = -25;
  var x10 = 450;
  var y10 = 120;
  for (var i = 0; i <= frontLines; i ++) {
    strokeWeight(0.7);
    if (i < numLines/2) {
    stroke(255, 199, 9);
    } else {
      stroke(241, 90, 34);
    }
    line(x9, y9, x10, y10);
    x9 += dx9;
    y9 += dy9;
    x10 += dx10;
    y10 += dy10;
  }
  pop();
  
  //dark blue and light blue rays
  push();
  rotate(radians(-2));
  strokeWeight(2.5);
  stroke(49, 192, 211); 
  line(17, 88, -16, 258); // dark blue
  stroke(82, 92, 193);
  line(-25, 287, 255, 308); // light blue
  var dx11 = (-16-17)/frontLines;
  var dy11 = (258-88)/frontLines;
  var dx12 = (255+25)/frontLines;
  var dy12 = (308-287)/frontLines;
  var x11 = 17;
  var y11 = 88;
  var x12 = -25;
  var y12 = 287;
  for (var i = 0; i <= frontLines; i ++) {
    strokeWeight(0.7);
    if (i < numLines/2) {
    stroke(49, 192, 211);
    } else {
      stroke(82, 92, 193);
    }
    line(x11, y11, x12, y12);
    x11 += dx11;
    y11 += dy11;
    x12 += dx12;
    y12 += dy12;
  }
  pop();
  
  // red violet and purple rays
  push();
  translate(-65, 210);
  rotate(radians(-50));
  strokeWeight(2.5);
  stroke(210, 18, 131);
  line(326, 196, 249, 346); // red violet
  stroke(115, 54, 232);
  line(314, 348, 76, 276); // purple
  var dx13 = (249-326)/frontLines;
  var dy13 = (346-196)/frontLines;
  var dx14 = (76-314)/frontLines;
  var dy14 = (276-348)/frontLines;
  var x13 = 326;
  var y13 = 196;
  var x14 = 314;
  var y14 = 348;
  for (var i = 0; i <= frontLines; i ++) {
    strokeWeight(0.7);
    if (i < numLines/2) {
    stroke(210, 18, 131);
    } else {
      stroke(115, 54, 232);
    }
    line(x13, y13, x14, y14);
    x13 += dx13;
    y13 += dy13;
    x14 += dx14;
    y14 += dy14;
  }
  pop();
  noLoop();
}

For this project, I reinterpreted Itten’s color wheel. I created the main octagon out of primary and secondary colors. I then added in the rest of the string drawings to show the various outcomes of mixing different colors together.

LO4: Sound Art

Crow are Chased and the Chasing Crows are Destined to be Chased as well, Transcending Space

Crows are Chased and the Chasing Crows are Destined to be Chased as well, Transcending Space is a visual and audio interactive installation by teamLab. In this installation, the audience enters a room with projections of crows on all sides of the room. As the crows start flying, the music begins, and when the crows crash into each other’s path, they scatter, turning into flowers. This installation excites me greatly as the surround sound and projections make it seem like the viewer is encompassed by the artwork, slowly becoming one with it. As I watched the video, I could imagine myself losing touch of reality, being immersed in the projected world, fully focused on the crows taking flight and mentally swaying to the energetic, yet soothing music. As the installation is constantly generated, each sequence of music and motion will not be repeated, thus, creating a sense of intriguing uncertainty, which I greatly admire and enjoy. Although it did not specify how the sound and animation is created from coding, I speculate that the installation is done by using loops, random functions, and if statements. The whole installation might be an infinite loop, and embedded in the loop, might be some if statements and random functions to generate variety while maintaining a certain framework. The artist’s sensibility is thus manifest in the generation of numerous sequences of sounds and animations harmoniously coming to life.

Link: https://www.teamlab.art/w/crows_transcending_space/

Creator: teamLab

Title of Work: Crows are Chased and the Chasing Crows are Destined to be Chased as well, Transcending Space

Year: 2017

Project 3: Dynamic Drawing

For project, I experimented with using simple geometric shapes and symmetry to created a balanced and orderly movement. I also played with the different types of color contrasts such as simultaneous contrast and complementary contrast.

sketch

/*
Bon Bhakdibhumi
bbhakdib
Section d
*/
var r = 37;
var g = 51;
var b = 70;
var rTriangle = 225;
var gTriangle = 210;
var bTriangle = 232;
var rCircle = 171;
var gCircle = 237;
var bCircle = 255;
var rRect = 101; 
var gRect = 249; 
var bRect = 183;
var rmidRect = 253; 
var gmidRect = 173; 
var bmidRect = 113;
var rOutertri = 255;
var gOutertri = 255;
var bOutertri = 255;
function setup() {
    createCanvas(450, 600);
    text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {
    background(r, g, b);
  if (mouseX > width/2) {
     r = 211;
     g = 185;
     b = 159;
  }else {
    r = 37;
    g = 51;
    b = 70;
  }
    translate(width/2, height/2);
    rectMode(CENTER); 
  // inner triangles rotate to the left with mouseX increases
  fill( rTriangle, gTriangle, bTriangle);
  if (mouseX > width/2) {
     rTriangle = 129;
     gTriangle = 13;
     bTriangle = 98;
  }else {
    rTriangle = 225;
    gTriangle = 210;
    bTriangle = 232;
  }
  noStroke();
    for (var i = 0; i < 6; i += 1) {
        push();
        scale(mouseY / 500);
        rotate((-mouseX / 400) + radians(360 * i / 6));
        triangle(50, 0, 25, 25, 75, 25);
        pop();
    }
  // mid squares expand when rotating to the left
  var m = max(min(mouseX, 400), 0);
  var sSize = -m * 40 / 400 + 60;
   fill( rRect, gRect, bRect, 230);
  if (mouseX > width/2) {
    rRect = 49
    gRect = 84
    bRect = 55
  }else {
     rRect = 101;
     gRect = 249;
     bRect = 183;
  }
  noStroke();
    for (var s = 0; s < 8; s += 1) {
      push();
      scale(mouseY / 400);
      rotate( mouseX/350 + radians(360 * s / 8));
      rect (130, 0, sSize, sSize);
      pop();
    }
  // outer circles expand when rotating to the right
  var m = max(min(mouseX, 400), 0);
  var size = m * 50 / 400 + 30;
  noStroke();
  fill(rCircle, gCircle, bCircle, 230);
  if (mouseX > width/2) {
    rCircle = 109;
    gCircle = 152;
    bCircle = 186;
  }else {
    rCircle = 171;
    gCircle = 237;
    bCircle = 255;
  }
  for (var c = 0; c < 10; c += 1) {
    push();
    scale(mouseY / 400);
    rotate((-mouseX / 300) + radians(360 * c / 10));
    ellipse(200, 0, size, size);
    pop();
  }
  // outermost triangles rotate to the right with mouseX increases
  fill( rOutertri, gOutertri, bOutertri);
  if (mouseX > width/2) {
     rOutertri = 199;
     gOutertri = 82;
     bOutertri = 156;
  }else {
    rOutertri = 225;
    gOutertri = 225;
    bOutertri = 225;
  }
  noStroke();
    for (var i = 0; i < 10; i += 1) {
        push();
        scale(mouseY / 350);
        rotate((mouseX / 250) + radians(360 * i / 10));
        triangle(275, 0, 225, 50, 325, 50);
        pop();
    }
 // middle square rotates to the right when mouseX increase
  var m = max(min(mouseX, 400), 0);
  var squareSize = -m * 50 / 400 + 10;
  scale(mouseY / 600);
  rotate(radians(mouseX / 5));
  fill(rmidRect, gmidRect, bmidRect);
  if (mouseX > width/2) {
    rmidRect = 107;
    gmidRect = 94;
    bmidRect = 98;
  }else {
    rmidRect = 253;
    gmidRect = 173;
    bmidRect = 113;
  }
  noStroke();
    rect(0, 0, squareSize, squareSize);

 }

LO 3: Computational Fabrication

Creating the Weather Bracelet, Mitchell Whitelaw used generative design to translate the weather-data of Canberra, Australia into a fascinating jewelry piece. The height of each spike on the bracelet represents its daily maximum temperature, and the height of each spike’s shoulder represents its daily minimum. Generally, data visualization is seen in 2d form–whether it be graphic or motion graphic. However, Whitelaw’s work visualizes data as something physical as well as visual. By portraying data through an object–also known as autographic visualization–Whitelaw’s work is eye-opening and captivating. In addition to its interesting process, the final work, the bracelet itself, is intrinsically beautiful. The uneven spikes and holes provide the bracelet with complexity and a futuristic look, balancing well with its minimalistic white color.

Whitelaw accomplished most of his work by first defining a set of 3D points using beginShape() and vertex() and PVectors. To save the geometry of his object, he also used the SuperCad library to write an obj. file. He then worked in MeshLab and Blender to 3D model his bracelet before printing it out.

By utilizing the power of computation, Whitelaw was able to create a jewelry piece that is scientifically meaningful as well as personally meaningful. While making weather data tangible visually and physically, the bracelet also established a personal relationship with the wearer through the sense of touch. It facilitates an exciting experience as the wearer runs his or her fingers down the bracelet, reminiscing about the memories of different seasons and weather.

Creator: Mitchell Whitelaw

Title: The Weather Bracelet

Year: 2009

Link: http://teemingvoid.blogspot.com/2009/10/weather-bracelet-3d-printed-data.html

Project 02: Variable Face

sketch

/*
Bon Bhakdibhumi
Section D
*/
var cheekSize = 44;
var eyeSize = 15;
var mouthWidth = 52;
var mouthHeight = 52;
var faceWidth = 178;
var faceHeight = 267;
var r = 240;
var g = 92;
var b = 138;

function setup() {
    createCanvas(480, 640);
    background(220);
    text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {
    background(255);
    stroke(1);
    noFill();
    //face
    beginShape();
    curveVertex(276, 221);
    curveVertex(265, 215);
    curveVertex(257, 214);
    curveVertex(250, 213);
    curveVertex(234, 215);
    curveVertex(230, 214);
    curveVertex(204, 229);
    curveVertex(191, 235);
    curveVertex(169, 251);
    curveVertex(160, 260);
    curveVertex(152, 271);
    curveVertex(141, 296);
    curveVertex(142, 313);
    curveVertex(143, 322);
    curveVertex(142, 337);
    curveVertex(139, 353);
    curveVertex(137, 365);
    curveVertex(135, 412);
    curveVertex(146, 431);
    curveVertex(157, 422);
    curveVertex(171, 453);
    curveVertex(198, 468);
    curveVertex(215, 473);
    curveVertex(251, 471);
    curveVertex(299, 426);
    curveVertex(313, 388);
    curveVertex(325, 341);
    curveVertex(337, 305);
    curveVertex(340, 292);
    curveVertex(288, 229);
    endShape(CLOSE);
    //right ear
    ellipse(335, 350, 30, 59);
    // left ear
    ellipse(132, 336, 24, 62);
    //nostril
    noStroke();
    fill(0);
    ellipse(218, 380, 9, 9);
    ellipse(230, 380, 9, 9);
    // cheeks
    var xLcheek = width/2 - faceWidth*0.4
    var xRcheek = width/2 + faceWidth/4
    var o = 60
    noStroke();
    fill(r, g, b, o);
    ellipse(xLcheek, height/1.7, cheekSize, cheekSize);
    ellipse(xRcheek, height/1.7, cheekSize, cheekSize);
    // mouth
    var xMouth = width/2.15
    fill(0);
    arc(xMouth, height/1.55, mouthWidth, mouthHeight, 0, PI, CHORD);
    // left eye
    var xLeye = width/1.5 - faceWidth*0.19
    ellipseMode(RADIUS);
    fill(0);
    ellipse(xLeye, height/2, eyeSize, eyeSize); 
    ellipseMode(CENTER);
    fill(255);
    ellipse(xLeye, height/2, eyeSize, eyeSize);
    // right eye
    var xReye = width/1.5 - faceWidth*0.75
    ellipseMode(RADIUS);
    fill(0);
    ellipse(xReye, height/2, eyeSize, eyeSize); 
    ellipseMode(CENTER);
    fill(255);
    ellipse(xReye, height/2, eyeSize, eyeSize);
}

function mousePressed(){
    r = random(20, 200);
    g = random(20, 200);
    b = random(20, 200);
    cheekSize = random(35, 50);
    mouthWidth = random(0, 70);
    mouthHeight = random(0,70);
    eyeSize = random(10, 20);
}

I based my project off a minimalistic illustration I did in Illustrator. I made the mouth size, cheek size, and eye size generative to create varying facial expressions for the same person. I then decided to make the cheeks change color and shape while maintaining a low opacity, making the drawing more dynamic while also persevering its minimalistic style.

LO2: Generative Art

Allison Parrish’s work Rewordable is both admirable and inspirational as it lies between the interaction of my two interests: communications design and card games. Rewordable is a card game that uses computation to generate combinations of letters on cards. Similar to Scrabble, the game allows people to earn points by creating words using different combinations of cards. There are a total of 120 one-letter, two-letters, and three-letter cards generated by coding. Although I am unsure if the artwork on the cards is computer-generated, I really admired Parrish’s use of computation in the process of creating her cards, giving it complexity within its aesthetic, and thus, in a sense, making her work a generative art or design piece. To create the design of the card game, Parrish mainly used matrixes and n-gram frequency analysis, which allowed her to come with various letter combinations to put on the cards. Through her algorithm, Parrish created and curated an experience of enjoyment for the target audience.

Link: http://www.rewordable.com/

http://portfolio.decontextualize.com/

Author: Allison Parrish

Work: Rewordable August, 2017