Author: katieche@andrew.cmu.edu

katieche – looking outwards 01

https://www.ingenie.com/one-four-nine/

One Four Nine is an interactive web and smartphone based game where the player has to solve a case surrounding a car crash. Designed by Epiphany for Ingenie, an insurance brand for young drivers, the site utilizes a first person point of view interactive video along with sounds to place the user in the perspective of an investigator on the crash site. Not only is the video beautifully made, the graphics and and movement flow of the entire project was stunning and inspired me to look more into interaction design.

Epiphany used GSAP animation (a type of HTML5 for animations), Hammer.js, and Zepto.js to create One Four Nine. As a company who has received several awards for their other websites, I’m sure they are composed of a well rounded team of designers and coders; however, I could not find exactly how they organized themselves or how many people were involved. This project served primarily as an educational site to raise awareness against distracted drivers, a common stereotype of young drivers. I believe the utilization of  gamification in the educational industry is continuing to grow as it has proven successful in being both entertaining and informative to our short-attention-spanned youth.

 

katieche – project 01 face

katieche-01

function setup (){
	createCanvas (600, 600);
	rectMode(CENTER);
}

function draw (){
	background (229, 185, 185);

	fill (0);
	ellipse (300, 335, 250, 330);

// head
	strokeWeight (0);
	stroke (229, 213, 199);
	fill (255, 243, 219);
	ellipse (300, 300, 200, 220);
	rect (300, 400, 50, 70);

// hair
	fill (0);
	ellipse (315, 230, 150, 90);
	fill (0);
	ellipse (230, 250, 60, 30);
	fill (0);
	ellipse (300, 210, 150, 60);
	fill (0);
	ellipse (240, 235, 70, 40);

// nose
	noStroke();
	fill (229, 213, 199);
	triangle (287, 350, 300, 357, 312, 350);

// eyebrows
	noStroke();
	fill (0, 0, 0);
	rect (250, 290, 60, 7);	

	noStroke();
	fill (0, 0, 0);
	rect (350, 290, 60, 7);

//cheeks
	fill (247, 215, 215);
	ellipse (245, 340, 30, 30);

	fill (247, 215, 215);
	ellipse (355, 340, 30, 30);


// eyes
	fill (0);
	ellipse (250, 320, 30, 30);
	strokeWeight (3);
	stroke (0);
	line (230, 310, 250, 320);

	fill (0);
	ellipse (350, 320, 30, 30);
	strokeWeight (3);
	stroke (0);
	line (330, 310, 350, 320);

//shine
	noStroke();
	fill (250);
	ellipse (245, 315, 7, 7);

	noStroke();
	fill (250);
	ellipse (345, 315, 7, 7);



}

I started with a blank circle for the head, and made the features from the center out: from the nose to eyes, eyebrows, cheeks, and lastly, hair. There was a lot of guess and check involved with figuring out the location of the features. Wanted to include arcs or rotate objects, but had trouble figuring both of these out.