Author: Jiaxin Wen

jiaxinw-LookingOutwards-02

Concentric Squares, Frank Stella, 2015

This is a piece of installation arts created by Montreal-based digital art studio Iregular, and It was inspired by Concentric Squares of Frank Stella, an American painter. This project was projected on a rounded curved wall to allow the audience to look at the animation from different aspects. But wherever they stood, they could always see a square shape on the wall. The animation looked like a tunnel floating in the air with a black background, and somebody called it an “infinite digital wormhole”.   The whole visual content was fully generative, random and infinite.

This installation inspired me as of how we could create the infinity of visual effects by using a computer program. I particularly admired that it combined the physical environment with the visual content to strengthen the immersion of the arts, and because of the non-repetitive animation, the audience can stay in the immersion even longer.

I guess the creator wrote a specific program to generate random moving lines along the four sides of a square. At the same time, these lines follow a “deep space” rule on the surface, so that to create a feeling of a tunnel.

Iregular created the animation following the one point perspective rule to fulfill the need of making a digital aisle. The random movements and changes of lines had its own rhythm to make the animation look comfortable.  The original painting has been completely transformed into a futuristic and mesmerizing visual content.

 

jiaxinw-Project02-Variable Faces

sketch

//body
var bodyWidth = 350;
var bodyHieght = 400;
var bodyColor = 170;

//face
var faceWidth = 250;
var faceHeight = 300;

//ear
var eyeSize = 30;
var earWidth = 50;
var earHeight = 70;

//the two middle points of eyebrows
var eyebrowPoint1 = 180;
var eyebrowPoint2 = 180;

//mouth left side
var mouthCornerL = 300;

//mouth right side
var mouthCornerR= 340;

var mouthHeight = 350;

//skin color
var skinR = 250;
var skinG = 230;
var skinB = 220;

//background begin color
var BackLR = 255;
var BackLG = 249;
var BackLB = 223;

//background end color 
var BackRR = 211;
var BackRG = 248;
var BackRB = 238;


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

}

function draw() {
	//background colors
	noStroke();
    from = color(BackLR, BackLG, BackLB);
    to = color (BackRR, BackRG, BackRB);
    colorMode(RGB);
    interA = lerpColor(from, to, .25);
	interB = lerpColor(from, to, .65);
	fill(from);
	rect(0, 0, 160, 480);
	fill(interA);
	rect(160, 0, 160, 480);
	fill(interB);
	rect(320, 0, 160, 480);
	fill(to);
	rect(480, 0, 160, 480);

    //body
    fill(bodyColor);
    rect(width/2 - bodyWidth/2, height/2 + bodyHieght*0.25 , bodyWidth, bodyHieght, 100);

	//face
	fill(skinR, skinG, skinB);
	ellipse(width/2, height/2, faceWidth, faceHeight);

    //ears
    fill(skinR, skinG, skinB);
    ellipse(width/2 - faceWidth/2, height/2, earWidth, earHeight);
    ellipse(width/2 + faceWidth/2, height/2, earWidth, earHeight)

	//eyes
	fill(31, 28, 27);
	var eyeLX = width/2 - faceWidth*0.25;
	var eyeRX = width/2 + faceWidth*0.25;
	var eyeHeight = height/2
	ellipse(eyeLX, eyeHeight, eyeSize, eyeSize);
	ellipse(eyeRX, eyeHeight, eyeSize, eyeSize);

    //left eyebrow
    noFill();
    stroke(70);
    strokeWeight(2);
    beginShape();
    curveVertex(width/2 - faceWidth*0.375,  height/2 - faceHeight*0.125);
    curveVertex(width/2 - faceWidth*0.375,  height/2 - faceHeight*0.125);
    curveVertex(width/2 - faceWidth*0.3, eyebrowPoint1);
    curveVertex(width/2 - faceWidth*0.2, eyebrowPoint2);
    curveVertex(width/2 - faceWidth*0.125,  height/2 - faceHeight*0.125);
    curveVertex(width/2 - faceWidth*0.125,  height/2 - faceHeight*0.125);
    endShape();

    //right eyebrow
    noFill();
    stroke(70);
    strokeWeight(2);
    beginShape();
    curveVertex(width/2 + faceWidth*0.375,  height/2 - faceHeight*0.125);
    curveVertex(width/2 + faceWidth*0.375,  height/2 - faceHeight*0.125);
    curveVertex(width/2 + faceWidth*0.3,  eyebrowPoint1);
    curveVertex(width/2 + faceWidth*0.2,  eyebrowPoint2);
    curveVertex(width/2 + faceWidth*0.125,  height/2 - faceHeight*0.125);
    curveVertex(width/2 + faceWidth*0.125,  height/2 - faceHeight*0.125);
    endShape();

    //mouth   
    fill(236, 39, 70);
    noStroke();
    beginShape();
    curveVertex(mouthCornerL, height/2 +70);
    curveVertex(mouthCornerL, height/2 +70);
    curveVertex(width/2 - 10, mouthHeight);
    curveVertex(width/2 + 10, mouthHeight);
    curveVertex(mouthCornerR, height/2 +70);
    curveVertex(mouthCornerR, height/2 +70);
    endShape();
    

}

    //when the user clicks, variables are assigned to random values within specifid ranges
function mousePressed(){

    //face size change
    faceWidth = random(150, 300);
    faceHeight = random(200, 350);
    
    //eye size change
    eyeSize = random (10, 50);
    
    //ear size change
    earHeight = random(60, 80);
    earWidth = random(40, 60);
    
    //eyebrow change
    eyebrowPoint1 = random(200, 220);
    eyebrowPoint2 = random(180, 220);

    //mouth change
    mouthCornerL = random(280, 300);
    mouthCornerR = random(340, 360);
    mouthHeight = random(300, 350);

    //skin color change
    skinR = random(240, 260);
    skinG = random(220, 240);
    skinB = random(210, 230);

    //background color change
    BackLR = random(220, 256);
    BackLG = random(180, 280);
    backLB = random(200, 250);
    BackRR = random(210, 256);
    BackRG = random(170, 248);
    BackRB = random(50, 238);

    //body change
    bodyWidth = random(350, 400);
    bodyHieght = random(400, 450);
    bodyColor = random(70, 170)
}

To start this project, I thought about what parts of a face can affect the appearance of it obviously. I came up with the size of the face, size of eyes, shapes of eyebrows and the shape of the mouth. Therefore, I set up different variables for these different part to be changed. Later, I realized the color of skin is also a good point, and I also made it changeable. For the background, I wanted to do something different, I wanted to make it changeable too. I found the function of lerpcolor() in reference, and I thought it would be a fun to make a background that generates gradual colors randomly.

jiaxinw-Project-01

sketch

function setup() {
    createCanvas(600, 600);
    noCursor();    
}

function draw() {
    background(254,207,67);
    noStroke();
    //shadow
    fill(219, 179, 58)
    quad(width/2+40, height/3-115, width, height/2, width, height, width/2, height, )
    //shirt
    fill(243);
    quad(width/2-130, height/2+30, width/2, height/2+10, 
        width/2, height/2+400, width/2-180, height/2+400);
    fill(220, 221, 223);
    quad(width/2+130, height/2+30, width/2, height/2+10, 
        width/2, height/2+400, width/2+180, height/2+400);
    //neck
    fill(243, 210, 165);
    rect(width/2-30, height/2-20, 60, 30);
    arc(width/2, height/2+10, 60, 40, 0, PI);
    //hair
    fill(11);
    ellipse(width/2, height/3-25, 175, 200)
    quad(width/2+30, height/2-20, width/2+70, height/2-60, width/2+30, height/2+80)
    //face
    fill(254, 226, 205);
    ellipse(width/2, height/3, 160, 200);
    //ears
    ellipse(width/2-75, height/3, 50, 60);
    ellipse(width/2+75, height/3, 50, 60);
    //earrings
    push();
    translate(width/2-80, height/3+20)
    rotate(45);
    fill(0);
    rect(0, 0, 10, 10);
    pop();
    push();
    translate(width/2+80, height/3+20)
    rotate(315);
    fill(0);
    rect(0, 0, 10, 10);
    pop();
    //eyes
    fill(11);
    ellipse(width/2-35, height/3-15, 20);
    ellipse(width/2+35, height/3-15, 20);
    //glass
    noFill();
    strokeWeight(3);
    stroke(126, 112, 71);
    ellipse((width/2)-35,(height/3)-10, 55, 50);
    ellipse((width/2)+35,(height/3)-10, 55, 50);
    line((width/2)-6,(height/3)-15,(width/2)+6, (height/3)-15);
    line((width/2)-62,(height/3)-15,(width/2)-85, (height/3)-30);
    line((width/2)+62,(height/3)-15,(width/2)+85, (height/3)-30);
    //mouth
    noStroke();
    fill(241, 84, 75);
    arc(width/2, height/3+55, 50, 50, 0, PI);
    //nouse
    fill(226, 54, 52);
    ellipse(mouseX, mouseY, 30, 30);

}

Before I started to code, I drew a sketch to have a concrete idea of how the portrait looks like. After that, I broke down the whole picture into different simple shapes and measured the position of them. Instead of using all numbers, I used the half or 1/3 of the width and height as the unit of coordinate. For making the portrait more interesting, I had an idea of making my nose as a clown’s nose and letting it become interactive. Therefore, I made the mouse as a red nose and remove the original mouse on my portrait so that people can try to put my red nose in the right place. : )

jiaxinw-Looking Outwards-01

 

The Poster of Framed

Game name: Framed
Developer: Loveshack
Publisher: Noodlecake Studios Inc

The trailer video of Framed

Framed is a mobile game where you re-arrange panels of the animated comic book to change the outcome of the story. It is developed by the Australian studio Loveshack, which was a three-member team (now there are four members). The unique narrative-based puzzles game mechanism, the outstanding art style, and the seamless animation design impressed me a lot. Framed did a really good job on combining interaction and storytelling together, for allowing players actually to affect the story through the whole process instead of just watching as a viewer. Different from the normal design of moving the protagonist or objects in scenes, the player moves the order of the comic panel to change the story. 

From the art aspect, this game has a polished silhouette comic style. The comic style matches the game mechanism very well, and it gives an intuitive indirect control for the players. Besides the visual part, the music part also does a good job to help the player get into the story. There is no dialogue or traditional sound effect in the game, that is why the background music becomes important. As the story going on, the player will find that three different characters have their own theme. Moreover, the music has different layers. When the player is arranging the panel, which means the story is on a break, the background music is a basic accompaniment. When the play button is pressed for starting the story, the theme melody joins in. The design of music helps to indicate the pace and emotion of the story, creating an immersive atmosphere.

When Loveshack created Framed, the team had three members: Joshua Boggs, Ollie Browne, and Adrian Moore. Joshua was responsible for programming and design, Ollie was the artist and designer, and Adrian took the music and design part. The studio spent about 2 years to develop the game. At the very beginning, the rough idea of Framed was born when Joshua read the book Understanding Comics by Scott McCloud and happened to see that the position of the gaps between panels in comics can affect the meaning of the story. Joshua immediately realized it could be a great idea for a game mechanism.

So far, Framed has become a great success for Loveshack as it has received over 30 awards and accolades and the studio released Framed 2 which is a sequel to Framed in July 2017.

For more details about Framed and Loveshack, please go to http://loveshackentertainment.com/