Author: ljkim@andrew.cmu.edu

ljkim_project 04 string art

sketch

/*Lois Kim
Section A
Project-04
*/

var x1 = 10;
var x2 = 200;
var y1 = 30;
var y2 = 400;

function setup() {
  createCanvas(400,300);
  background("#353334");
}

function draw() {
  for (var i = 0; i < 10; i++){
  noFill();
  stroke(299, 299 - i*20, 60);
  bezier (x1, y1, x2, y2, 90 + 500, 10 * i+ 200, 15+ 500, 80 * i + 100);
  } //yellow gradient curve
  
  for (var i = 0; i < 10; i++){
  noFill();
  stroke("#F4F4F4");
  bezier (x1 + 50, y1 + 40, x2 * 3, y2 * 2, 90, 10, 15, 80 * i + 50);
  } //white curves
  
  for (var i = 0; i < 10; i++){
  noFill();
  stroke("#1E4E87");
  bezier (40, 100, 225, 300, 90, 10, 500, 80 * i + 100);
  } //green curves
  
  for (var i = 0; i < 10; i++){
  noFill();
  stroke("#61BF25");
  bezier (x1 *20, y1 + 90, x2 * 4, y2 - 50, 700 * i + 100, 10, 500, 80 * i + 100);
  } //blue curves
  
  
  
}

I wanted color to be the focus of the curves. I also wanted to play around with different compositions. I ended up with this in the end

ljkim – Looking Outwards 02

Vergance – short version by Tina Frank

vergence (short version) from Tina Frank on Vimeo.

This project focuses on the threshold of spatial perception. The artist uses geometric shapes and consistent color scheme to be consistent. I think it works effectively in this case because it captures the audience’s attention. The artist also uses a sound track to accompany the piece which also effectively works to create a wholesome experience. I admire the simplicity of the work but being able to capture someone’s attention for something so basic.

I’m assuming that the project uses set variables and the random function. But majority of the video graphics seems intentional and designed. I can also see the artist using a function that I am unaware of that spreads the squares evenly.

ljkim – project 02

sketch

/*Lois Kim
Section A
ljkim@andrew.cmu.edu
Project-02*/

var helmetWidth = 323;
var helmetHeight = 323;
var shieldWidth = 275;
var shieldHeight = 275;
var shieldOHeight = 275;
var shieldOWidth = 275;
var faceWidth =  178;
var faceHeight = 183;

//stars in sky
var star = {
  x: 100,
  y: 50
}

//color of stars
var col = {
  r: 255,
  g: 255,
  b: 255
}

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

function draw() {
  //background color
  background("#495C7C");
  
  //random stars in background
  star.x = random(0,width);
  star.y = random(0,height);
  fill(col.r, col.g, col.b);
  noStroke();
  ellipse(star.x, star.y, 1, 1);
  
  //helmet
  fill("#B3B3B3");
  noStroke();
  ellipse(320, 240, helmetWidth, helmetHeight);
  
  //shield
  fill("#666666");
  noStroke();
  ellipse(320, 240, shieldWidth, shieldHeight);
  
  //shield outline
  stroke("#1A1A1A");
  strokeWeight(3);
  noFill();
  ellipse(310, 250,shieldOHeight, shieldOWidth);
  
  //antenna stick
  fill("#B3B3B3");
  noStroke();
  rect(297, 29, 7, 70);
  
  //antenna circle
  fill("#9E0421");
  noStroke();
  ellipse(300,25,25,25);
  
  //face
  fill("#EAD8A9");
  noStroke();
  ellipse(320, 250, faceWidth, faceHeight);
  
  //left eye
  fill("#333333");
  noStroke();
  ellipse(365,250,12,12);
  //right eye
  fill("#333333");
  noStroke();
  ellipse(275,250,12,12);
  
  //mouth
  fill("#B2542F");
  beginShape();
  curveVertex(292, 303);
  curveVertex(310, 311);
  curveVertex(326, 280);
  curveVertex(349, 314);
  curveVertex(356, 308);
  endShape();
  
}

function mousePressed() {
  helmetWidth = random (200, 400);
  helmetHeight = random (310, 400);
  shieldWidth = random (300, 290);
  shieldHeight = random (350, 240);
  shieldOHeight = random (200, 430);
  shieldOWidth = random (290, 300);
  faceWidth = random (150, 200);
  faceHeight = random (100, 200);
}

I wanted to do an astronaut as my project this week. I attempted to add a stars generator in the background (as seen in my code) – however it would not allow my random generator for the face to start fresh. It would over draw what was existing before. Although I had fixed that issue – the star generator had disappeared. This is what it looked like with the stars:

Before I begin any project I always start in adobe illustrator and this always helps visualize projects.

ljkim Face Portrait

sketch

function setup() {
  createCanvas(600,600);
  background("#FFFFFF");
	fill("#39B778"); /*green*/
	noStroke();
	ellipse(300,300,470,470); /*circle*/
}

function draw() {
	
  fill("#EECE7A");
	noStroke();
	ellipse(300,260,270,270); /*face*/
	
	fill("#EECE7A"); 
	noStroke();
	ellipse(300,300,260,350); /*lower half of face*/
	
	fill("#E5B558");
	rect(300,300,10, 50); /*bridge of nose*/
	
	fill("#1E1E1E");
	rect(210,235,50,5); /*right eyebrow*/
	rect(345,235,50,5); /*left eyebrow*/
	
	fill("#FFFFF");
	ellipse(230,280,10,10); /*right eye*/
	ellipse(370,280,10,10); /*left eye*/
	
	fill("#1E1E1E");
	rect(150,200,50,240); /*right hair*/
	fill("#1E1E1E");
	rect(420,200,50,240); /*left hair*/
	
	fill("#1E1E1E");
	arc(310,220,320,200, HALF_PI*6, PI); /*bangs*/
  
}

So coding is new to me. Obviously. From a design stand point – I knew what I wanted but it was frustrating for me to not translate it to code. I hope for the end of the semester I can re-do this assignment and accomplish what I want. Here is what I ideally wanted it to look like: (2 iterations)

Lois Kim – Looking Outwards 01

Disney’s “Magic Bench”

https://www.youtube.com/watch?v=JnLk2_Xbr90

                                                   Disney’s Magic Bench interaction.

You sit on a bench with a mirror across from you – and an animated character walks over to sit next to you. Disney overcomes the barrier of a clunky headset often associated with augmented reality.

This was a breakthrough for augmented reality. No longer is a user tied to a piece of equipment to experience the “magic” of technology. The bench uses depth shadows to operate the experience. I admired how Disney was able to introduce a new way to experience augmented reality. It allows users to be equipment free and interact with whimsical characters.

I appreciate how Disney took into consideration the whole experience. Sound, sensation, and the visuals are all cohesive and included. For example, when it rains – the user feels rain droplets and the sound associated. This was a big component to why it was a success. It mirrors a real life experience. The one negative is that the user is forced to stare at a screen – which takes them away from the world. When augmented reality often times allows users to incorporate their world with the technology.

Augmented reality has been obviously up and coming. A big source and competition is Microsoft and their hololens.