Author: secha@andrew.cmu.edu

SydneyCha-LookingOutwards-06

Colorful Randomness 1 by Dizzyline

Dizzyline is a freelance graphic design and illustration brand based in Montpellier, France.

This piece not only has a refreshing color palette, but also a “randomized” pattern that is equal parts chaotic and structured. Though it has elements that appear to be placed randomly, there is an underlying grid that gives the piece somewhat of a finished look.

The generated elements are confined by pseudo-random numbers that limit their maximum size. For example, the medium-sized circles and crescent shapes are limited to the squares within the grid, while smaller circles are aligned in straight rows.

SydneyCha-Project-05-Wallpaper

For this project, I wanted to create a comical wallpaper with bright colors. Here is the finished result.

sketch
//Sydney Cha
//Section D
 
function setup(){
    createCanvas(600, 600);
    background(255);
    noStroke(); 
}

function draw() {
    background(0, 150, 150);
    drawGrid();
    noLoop();
}

function drawGrid() {
    var red = 90;
    var blue = 90;
    for (var y = 0; y < height + 40; y += 40) {
        blue = 10;
        for (var x = 0; x < width + 30; x += 30) {
            fill(red, 0, blue);
            arc(x, y, 30, 80, 0, PI);
            fill(200, 200, 0);
            rect(x, y, 20, 20);
            rect(x-15, y+10, 10, 20);
            blue += 10;
        }
        red += 10;
    }
}

SydneyCha-LookingOutwards-05

Fragstein’s promotional video for LAMY Safari

Michael Fragstein is a 3d graphic artist whose main works are promotional videos for LAMY, a company that modernized the traditional fountain pen. Below is a link to his personal portfolio site.

https://fragstein.net

This 2019 special edition promotional video showcases new colors for the LAMY Safari pen in an unconventional way. Fragstein uses the three colors as a consistent theme for the video, making the colors come to life beyond the confines of the pen. Personally, the colors remind me of Easter, and if I were to make a promotional video for this line, I would’ve likely defaulted to rendering floating blobs or orbs. I particularly admire the different ideas/scenes Fragstein rendered to the music (which he also created). The two that I find the most creative are at the 15 second and 25 second marks.

Although it’s not explicitly stated, my guess is that Fragstein uses Blender, a 3D modeling program, for his work. Quite different from what we do in this class, Blender works a lot like modeling and stretching clay, just digitally. Regardless, I’m inspired by Fragstein’s dynamic and eye-catching work and hope to achieve a similar effect using p5.js (or other languages, if possible) to create captivating pieces.

CREDITS:

LAMY aion / Special Edition 2019Client: LAMY
Concept, Artdirection, Production: Büro Achter April / Michael Fragstein
Production Team: Johannes Rauch, Raphael Rau, Thomas Nathan, Jonas Anetzberger, Michael Fragstein
Music & Sound: Marc Fragstein

SydneyCha-LookingOutwards-03

A close up of Aguahoja III from the side.

Aguahoja III is an organic 3D creation made with cellulose bound with other natural materials (lignin, pectin, etc.) to form a strong sculpture that has both aesthetic and structural properties. It is part of a creation line by the MIT Media Lab and is specifically the third iteration of their Aguahoja series.

This project and the process through which it was created feels both organic and mechanical.

Inside Aguahoja III-the outer “shell” parts at the center to reveal the inside.


Aguahoja III uses a flexible generative design method that assigns a bipolymer skin to any input geometry and calculates the required parameters to actually print and create the sculpture. To put it simply, the algorithm generates the design and process simultaneously, making the physical rendering of the sculpture much more efficient.

A breakdown of Aguahoja III’s generated features.


Though made with an algorithm, the Media Lab creators’ decision to use biodegradable materials and their aesthetic choices are clearly present in this project. The piece in its own existence sends a message of responsible and environmentally conscious art,

SydneyCha-Project-02-Variable-Face

sketch
//Sydney Cha
//Section D

var eyeSize = 20;
var faceWidth = 100;
var faceHeight = 150;

var r = 207;
var g = 185;
var b = 151;

var re = 100;
var ge = 100;
var be = 100;
 
function setup() {
    createCanvas(300, 300);
}
 
function draw() {
    background(re);

    ellipse(width / 3, height / 2, faceWidth / 3, faceWidth / 3); //left ear
    ellipse(2*width / 3, height / 2, faceWidth / 3, faceWidth / 3); //right ear

    fill(r, g, b);
    ellipse(width / 2, height / 2, faceWidth,  faceHeight); //face

    var eyeLX = width / 2 - faceWidth * 0.25;
    var eyeRX = width / 2 + faceWidth * 0.25;
    fill(re, ge, be);
    ellipse(eyeLX, height / 2, 2*eyeSize/3, 2*eyeSize); //left eye
    ellipse(eyeRX, height / 2, 2*eyeSize/3, 2*eyeSize); //right eye

    fill(200, 70, 70);
    arc(width / 2, 2*height / 3, 20, 10, TWO_PI, PI); //mouth

    line(width / 2, height / 2, width / 2, faceHeight - 10); //nose
}
 
function mousePressed() {
    faceWidth = random(100, 120);
    faceHeight = random(130, 200);
    eyeSize = random(10, 30);

    r = random(160, 240);
    g = random(180, 200);
    b = random(150, 180);

    re = random(95, 255);
    ge = random(95, 255);
    be = random(95, 255);
}

SydneyCha-Project-01-Face

//Sydney Cha
//Section D

function setup() {
    createCanvas(400, 500);
    background(225);
    noStroke();
}

function draw() {
    noStroke();
  
    fill(73, 63, 47);
    triangle(270, 100, 300, 150, 280, 300); //hairside

    fill(73, 63, 47);
    triangle(90, 100, 80, 200, 200, 200); //hairsnippet

    fill(73, 63, 47);
    ellipse(70, 180, 70, 100); //hairbun

    fill(252, 240, 222);
    ellipse(190, 210, 200, 230); //facebase

    fill(252, 240, 222);
    quad(280, 250, 260, 320, 230, 330, 190, 325); //chin

    fill(252, 240, 222);
    quad(130, 250, 220, 300, 160, 390, 80, 360); //neck

    fill(240, 230, 210);
    quad(250, 220, 270, 250, 265, 260, 245, 265); //nosebase

    fill(240, 230, 210);
    ellipse(205, 215, 50, 35); //lefteyebase

    fill(240, 230, 210);
    ellipse(275, 210, 25, 30); //righteyebase

    fill(102, 94, 89);
    quad(170, 197, 190, 190, 230, 192, 230, 200); //lefteyebrow

    fill(102, 94, 89);
    quad(260, 198, 262, 190, 280, 189, 290, 195); //righteyebrow

    fill(193, 104, 115);
    quad(250, 280, 263, 280, 258, 295, 230, 290); //lips

    fill(102, 94, 89);
    triangle(200, 130, 70, 170, 110, 300); //hairbottom

    fill(102, 94, 89);
    triangle(80, 170, 140, 80, 270, 100); //hairtop

    fill(102, 94, 89);
    triangle(270, 100, 220, 120, 290, 200); //hairbangs

    fill(244, 194, 194);
    arc(195, 165, 230, 210, PI, TWO_PI); //capbase

    fill(244, 194, 194);
    quad(300, 160, 380, 170, 370, 180, 195, 165); //capextension

    stroke(1);
    strokeWeight(1);
    
    fill(250);
    arc(210, 220, 40, 30, PI, TWO_PI); //lefteye

    fill(250);
    arc(277, 218, 25, 30, PI, TWO_PI); //righteye

    fill(73, 63, 47);
    ellipse(215, 213, 18, 16); //leftpupil

    fill(73, 63, 47);
    ellipse(276, 211, 15, 15); //rightpupil
    }

SydneyCha-LookingOutwards-01

Before Your Eyes promotional trailer

Before Your Eyes is a VR game where the player blinks to progress through the game. The gameplay itself is extremely simple, but the story is striking. While some games rely on high quality graphics or intense gameplay for entertainment, Before Your Eyes is an immersive, bittersweet story that lets players experience the life of the protagonist through their own eyes. The game not only made me emotional, but left me with a lasting gratefulness for the undefined time I’ve been given to live.

The idea for the game started in 2014 with Will Hellwarth, a student assistant for an intro-level game development course at the University of Southern California. The initial project was presented at a game fair by Hellwarth and assisting developers and was later picked up and developed by GoodbyeWorld Games. The final game was published by Skybound Games in 2021.

Guided gameplay-at the start of the game, the player is instructed to look at an option and blink to select it.

Though VR gaming had existed for a while, Hellwarth invented a new approach by toggling with a previous game to respond to the player’s eye movements using the VR headset’s built-in camera. This inspired the idea for his game, which was initially called Close Your.

The story was influenced by the play Death of a Salesman, which has a similar theme of progressing the story through the protagonist’s earlier memories after his death.

Kickstarter promotional video for Close Your, an early version of Before Your Eyes.

Below is a link to the Steam site where the game can be purchased.

https://store.steampowered.com/app/1082430/Before_Your_Eyes/

SydneyCha-LookingOutwards-02

No. 001 | Arcs 21 – Lia (2018)

The Arcs 21 project by Lia was made using Processing code and AxiDraw, a mechanical plotter–a calculated process, yet the final piece is as compelling as a drawing done by hand.

One of the most important aspects of creation is the process between the conception and execution of an idea. Pieces I find most compelling show bits of the process and the artist’s mind at a glance. To be transparent, I used to look down on computer-generated art for this reason. Computers to me were always cold and calculating, and I had the notion that anything that was processed through a computer would end up just as emotionless. I thought I wouldn’t be able to sense anything about the artist through a generated piece.

I was confused when I first saw No. 001. There were clusters of thin pen strokes that were playful, yet perfectly placed. Some of the other pieces felt too “obvious,” but No. 001 really felt like a piece from the artist’s heart. I was reminded of tree bark, desert sand, and the expressive ink exercises I did last year for Design. I think I feel especially attached to this piece because it has the ability to make me think about things I’ve experienced.

Mechanical Plotter Drawings – Arcs 21 from Lia on Vimeo.

https://www.liaworks.com/theprojects/mechanical-plotter-drawings-arcs-21/