hannajan_final project


//Hanna Jang
//Section B 
//Final Project

var space = 10; 
var heart; 
var lightning; 
var banana; 
var ball; 
var RectLength = 0; 
var RectLength2 = 0; 
var hand; 
var snow = []; 

function setup(){
	createCanvas(480, 300); 
	//create Snow in window 
	for (var i = 0; i < 1; i++){
		var px =  space*8; 
		snow[i]= makeSnow(px); 

//load images
function preload(){ 

function draw(){
	background(254, 233, 239); 

//Mia reacts to being fed 
	if (mouseX > 38.14*space & mouseX < 44.14*space
		&& mouseY > 20 && mouseY<80){
//Mia reacts to being played music 
	if (mouseX > width/6 & mouseX < 15.5*space
		&& mouseY > 22*space && mouseY < 27*space){
//Mia reacts to playing with ball
	if (mouseX > 35*space & mouseX < 42*space
		&& mouseY > 21*space && mouseY < 28*space){
//fill up energy bar when fed
	fill(247, 102, 188); 
	rect(23*space, space*3, RectLength*15, space*3);    
//fill up heart bar when Mia is happy 
	fill(90, 130, 222); 
	rect(space*6, space*3, RectLength2*10, space*3); 

//draw Mia's house 
function DrawHouse(){
//draw Mia's wallpaper 
	for (var i = 0; i < 20; i++){
		rect(i*25, 0, 6, height); 
		fill(199, 232, 255); 
		rect(i*25, 0, 2, height); 
//draw Mia's floor 
	fill(247, 223, 163); 
	rect(0, height-space*5, width, space*5); 
//draw rug 
	fill(245, 156, 210); 
	ellipse(width/2, height-space*3, space*14, space*5); 

//draw Mia's body 
function DrawMiaBody(){
	fill(176, 106, 26); 
	ellipse(width/2, height/2+space*8, space*9, space*10); 
	fill(239, 194, 144); 
	ellipse(width/2, height/2+space*9, space*5, space*6); 

//draw Mia's face 
function DrawFace(){
	//left ear
	fill(176, 106, 26); 
	ellipse(width/2-space*7, height/2-space*1.5, space*5, space*5); 
	fill(239, 194, 144); 
	ellipse(width/2-space*7, height/2-space*1.5, space*3, space*3); 
	//right ear
	fill(176, 106, 26); 
	ellipse(width/2+space*7, height/2-space*1.5, space*5, space*5); 
	fill(239, 194, 144); 
	ellipse(width/2+space*7, height/2-space*1.5, space*3, space*3); 
	fill(176, 106, 26); 
	ellipse(width/2, height/2, space*14, space*12); 
	fill(239, 194, 144); 
	ellipse(width/2-space*2, height/2, space*6, space*6); 
	ellipse(width/2+space*2, height/2, space*6, space*6); 
	ellipse(width/2, height/2+space*2.7, space*8, space*5); 
	ellipse(width/2-space*2, height/2, space*2, space*2); 
	ellipse(width/2+space*2, height/2, space*2, space*2); 
	//eyes follow mouse
	var x1 = map(mouseX, 0, width, width/2-space*2.5, width/2-space*1.9);
	var y1= map(mouseY, 0, height, height/2-2, height/2+2);
	ellipse(x1, y1, space, space); 
	var x2 = map(mouseX, 0, width, width/2+space*1.6, width/2+space*2.1);
	ellipse(x2, y1, space, space); 
	ellipse(width/2 - space, height/2 + space*2, 5, 5); 
	ellipse(width/2 + space, height/2 + space*2, 5, 5); 

//draw Happiness Bar 
function DrawHappinessBar(){
	fill(241, 101, 87); 
	rect(space*3, space*3, space*14, space*3); 
	ellipse(space*3, space*4.5, space*5, space*5); 
	ellipse(space*3, space*4.5, space*3.5, space*3.5); 
	image(heart, space*1.6, space*3.4); 

function DrawEnergyBar(){
	fill(100, 175, 209); 
	rect(space*22, space*3, space*14, space*3); 
	ellipse(space*21, space*4.5, space*5, space*5); 
	ellipse(space*21, space*4.5, space*3.5, space*3.5); 
	image(lightning, space*19, space*2.9); 

function DrawRadio(){
	fill(243, 98, 26); 
	rect(width/5.5, height - space*11, 5, space*4); 
	rect(width/6, height - space*8, space*7.5, space*5); 
	fill(255, 227, 168);   
	ellipse(width/5, height - space*6, space*1.5, space*1.5); 
	ellipse(width/5, height - space*4, space, space); 
	fill(177, 167, 146); 
	rect(width/4, height - space*7, space*2.5, space*2.5); 

function DrawFood(){
	fill(173, 234, 245); 
	ellipse(width*6/7, space*5, space*6, space*6); 
	ellipse(width*6/7, space*5, space*4, space*4); 
	image(banana, width*4.9/6, space*4); 

function DrawBall(){
	image(ball, space*35, height - space*9, space*7, space*7); 

function DrawWindow(){
	fill(160, 209, 243); 
	rect(space*1.8, space*8, space*12, space*10); 
	rect(space*1.8, space*16, space*12, space*2); 

function MiaEats(){
	//opens mouth for food
	fill(212, 68, 56); 
	ellipse(width/2, height/2+space*3.5, space*2.5, space*2.5); 

function MiaIsHappy(){
	fill(212, 68, 56); 
	arc(width/2, height/2+space*3.1, space*4, space*4, 0, PI); 

function MiaSmiles(){
	image(smile, width/2 - 6, height/2+space*2.6, space*3, space*2.1); 

function DrawHand(){
	image(hand, mouseX - 17, mouseY - 10, space*6, space*6); 

//update the snow and display them
function UpdateAndDisplaySnow(){
	for (var i = 0; i < snow.length; i++){

function addNewSnow() {
    // With a very tiny probability, add new snow to the end.
    var likelihood = 0.03; 
    if (random(0,1) < likelihood) {
        snow.push(makeSnow (space*8));

// method to update position of snow every frame
function snowMove() {
    this.x += this.speed;
    	if (this.x >= 17*space){

// draw the snow
function snowDisplay() {
  rect(this.breadth, this.x, 4, 4); 

//make the snow
function makeSnow(birthLocationX) {
    var snow = {x: birthLocationX,
                breadth: random(18, 130), 
                speed: 3.0,
                move: snowMove,
                display: snowDisplay}
    return snow;

function mouseClicked(){
	//mia earns energy when fed 
	if (mouseX > 38.14*space & mouseX < 44.14*space
		&& mouseY > 20 && mouseY < 80){
			if (RectLength==9){
			} else {
	//hearts earned when played music or playing with ball
	if ((mouseX > width/6 & mouseX < 15.5*space
		&& mouseY > 22*space && mouseY < 27*space)
		|| (mouseX > 35*space && mouseX < 42*space
		&& mouseY > 21*space && mouseY < 28*space)){
			if (RectLength2==11){
			} else {

Meet Mia the monkey!

She loves music and playing with her beach ball. Her favorite food to eat are bananas.

See what her reaction is when you click on the banana and feed her one! What is her reaction when you click on the ball or the radio? You can also see the reaction of  Mia’s heart and energy bar at the top. When you feed her, Mia’s energy level will increase. Mia’s heart level will also increase if you do something she likes.

As observed:

1). If you click on the banana, Mia will open her mouth to be fed. Her energy level will also increase from eating the banana.

2). If you click on the ball, Mia will smile. Her heart level will also increase.

3). If you click on the radio, Mia will open her mouth to sing. Her heart level will increase because she is having a good time.

Note About this Project*

For my final project, I wanted to create a virtual pet that could be interacted with through a mouse. In the end, I created Mia. The feedback in this game is simple. You are winning this game by increasing the levels in the heart and energy bars. The game is also endless, as the heart and energy bars are set back to 0 every single time you win all the points possible. That way, you can play again and again.

hannajan_Looking Outwards 12


Art Piece “True/False”

The first project that I found was called “True/False” by Onformative. This project is a kinetic sculpture made up of arrays of circular black metal segments in mechanical columns. The cylinders cover or expose the light to show an endless number of patterns. This visual makes up to show variations in the choreography that result in distinctive pattern changes. I found this particular project relevant to my final project because I also plan to use true or false statements to decide what to display given a certain command. Just like “True/False” shows variations in distinctive pattern changes, my project will show differences in outcomes depending on the variations of commands and situations that I code.

(Video Clip above showcases “4 rooms in one Tilt File”)

This is very different from the second project I found which is called “4 rooms in one Tilt File” by Stuart Campbell. In this art piece, the artist displays 4 different virtual worlds to the viewers. I found this particular art piece very compelling as he did a very good job in transporting the viewers to such a variety of different worlds. He is also usually a 2D artist but did a very good job in displaying this particular piece in the 3D form. I found this particular piece relevant to my final project as I also am planning to make a virtual world. I hope that my project is as convincing as Campbell’s of the existence of a whole new virtual world. This is different from “True/False” as “4 rooms in one Tilt File” is more relevant to the artistic aspect of my project, while “True/False” is more relevant to the coding aspect.


For my final project, I would like to create a virtual pet game. One of my fondest memories growing up was taking care of virtual pets such as Nintendogs, Neopets, or Tamagotchi. I’m not completely sure which animal I would like to feature as of yet, but I am currently leaning towards making a cat.

         Using mouse interaction and commands, the pet owner can feed the cat, play music to the cat, put the cat to sleep, or play with the cat. This will lead to the cat experiencing an increase in energy or happiness levels, and give feedback to the pet owner on how well they are taking care of their pet. I am also thinking of making the animal move in some way that relates to the mouse. For example, have the eyes follow the mouse and have the cat react when the mouse clicks on the cat. When the owner wants the pet to eat, play, sleep, or listen to music, the cat will move in a way that shows that it is following these commands. 

Basic Sketch of layout


Move and Press Mouse!


//Hanna Jang
//Section B 
//Project 11

function setup(){
	createCanvas(400, 400); 
	background(12, 24, 76); 

function draw(){
	//make tree
	var t1=makeTurtle(width/2, height/2);

//color and stroke weight of tree
	t1.setColor(74, 246, 126);
//make tree 
	//make tree side 
	var t1=makeTurtle(width/2, height/2);

//color and stroke weight of tree
	t1.setColor(74, 246, 126);
//make main star 
	var t2=makeTurtle(width/2, height/2);
//color and stroke weight of star 
//adjust the star size according to mouseX
	var squareSize=20; 
		if (mouseX>width){
		if (mouseX<width){
//make many squares for making star 
	for (var j=0; j<25; j++){
//make the squares
		for (var i=0; i<4; i++){
//make more stars when mouse is pressed 
if (mouseIsPressed){

function morestar() {
	t2=makeTurtle(mouseX, mouseY); 
	t2.setColor(248, 224, 127);
//randomize star size 
	var squareSize=random(3, 50); 

//make many shapes for making star 
	for (var j=0; j<8; j++){

//randomize the type of shapes being used for stars 
var sides=random(3, 5); 
	for (var i=0; i<sides; i++){
function makeTurtle(tx, ty) {
    var turtle = {x: tx, y: ty,
                  angle: 0.0, 
                  penIsDown: true,
                  color: color(128),
                  weight: 1,
                  left: turtleLeft, right: turtleRight,
                  forward: turtleForward, 
                  penDown: turtlePenDown, penUp: turtlePenUp,
                  goto: turtleGoTo, angleto: turtleAngleTo,
                  turnToward: turtleTurnToward,
                  distanceTo: turtleDistTo, angleTo: turtleAngleTo,
                  setColor: turtleSetColor, setWeight: turtleSetWeight};
    return turtle;

function turtleLeft(d) {
    this.angle -= d;
function turtleRight(d) {
    this.angle += d;
function turtleForward(p) {
    var rad = radians(this.angle);
    var newx = this.x + cos(rad) * p;
    var newy = this.y + sin(rad) * p;
    this.goto(newx, newy);
function turtleBack(p) {
function turtlePenDown() {
    this.penIsDown = true;
function turtlePenUp() {
    this.penIsDown = false;
function turtleGoTo(x, y) {
    if (this.penIsDown) {
      line(this.x, this.y, x, y);
    this.x = x;
    this.y = y;
function turtleDistTo(x, y) {
    return sqrt(sq(this.x - x) + sq(this.y - y));
function turtleAngleTo(x, y) {
    var absAngle = degrees(atan2(y - this.y, x - this.x));
    var angle = ((absAngle - this.angle) + 360) % 360.0;
    return angle;
function turtleTurnToward(x, y, d) {
    var angle = this.angleTo(x, y);
    if (angle < 180) {
        this.angle += d;
    } else {
        this.angle -= d;
function turtleSetColor(c) {
    this.color = c;
function turtleSetWeight(w) {
    this.weight = w;
function turtleFace(angle) {
    this.angle = angle;

When thinking about what to do, I thought of an idea to make a star object, and theme it around a simple christmas tree. I then experimented using turtle graphics to make a unique looking object and added extra twinkling stars in the background when the mouse is pressed.

Original Idea Sketch


Softlab’s ‘Volume’ on display

My LookingOutwards post this week is on Softlab’s ‘Volume’ which is an interactive cube of responsive mirrors where light and sound are redirected to reflect the excitement risen from the festival goers. The small changes in the volume of the transparent material let light and sound to move through the space.

I admire that the artist used computational sound to make another form of art. This is especially admirable to me because I thought of sound or music only being used through the use of hearing, but it can also utilize the sight or visuals.

Although I don’t know the exact algorithms used in this specific art piece, I do know that the artist somehow used the sounds generated from the crowd around the art piece, and reflected it.

The artist’s creative sensibilities are manifest through the use of visuals and beautiful lights, when the original main focus was on the sounds.



//Hanna Jang
//Section B 

//background mountian display characteristics 
var terrainSpeed = 0.0005;
var terrainDetail = 0.005;

var terrainSpeed1 = 0.0008;
var terrainDetail1 = 0.008;

var terrainSpeed2 = 0.0010;
var terrainDetail2 = 0.01;

//moon and car variables
var moon; 
var car; 
var carx=150; 
var carx2=60; 

//array for stars 
var stars = [];

function preload() {
	//loading images of car and moon
    moon = loadImage("https://i.imgur.com/EWntReN.png"); 
    car= loadImage("https://i.imgur.com/kx6JqDC.png"); 

function setup() {
    createCanvas(480, 480);
    // create an initial collection of stars
    for (var i = 0; i < 15; i++){
        var rx = random(width);
        stars[i] = makestar(rx);
function draw() {
    background(47, 94, 123);
    //moon image in the sky 
    image(moon, 320, 60); 
     //draw background mountian that is farthest from road 
    for (var x2 = 0; x2 < width; x2++) {
        var t = (x2 * terrainDetail2) + (millis() * terrainSpeed2);
        var y2 = map(noise(t), 0,1, height/3.5, height/2);
        vertex(x2, y2); 
        stroke(53, 80, 102); 
        line(x2, height, x2, y2); 
    	//draw background mountian that is between the other two mountains
    for (var x1 = 0; x1 < width; x1++) {
        var t = (x1 * terrainDetail1) + (millis() * terrainSpeed1);
        var y1 = map(noise(t), 0,1, height/3, height*3/4);
        vertex(x1, y1); 
        stroke(15, 51, 79); 
        line(x1, height, x1, y1); 
	//draw background mountian that is closest to road
    for (var x = 0; x < width; x++) {
        var t = (x * terrainDetail) + (millis() * terrainSpeed);
        var y = map(noise(t), 0,1, height/2, height);
        vertex(x, y); 
        stroke(10, 31, 47); 
        line(x, height, x, y); 
   //draw road 
   rect(0, height-40, width, 20); 
    //car image driving 
    image(car, carx, height-carx2); 
   //stars are displayed 

function updateAndDisplaystars(){
    // Update the star's positions, and display them.
    for (var i = 0; i < stars.length; i++){

function addNewstarsWithSomeRandomProbability() {
    // With a very tiny probability, add a new star to the end.
    var newstarLikelihood = 0.05; 
    if (random(0,1) < newstarLikelihood) {

// method to update position of stars every frame
function starMove() {
    this.x += this.speed;

// draw the stars
function starDisplay() {
    var skyHeight = 50;
    var bHeight = this.nsky * skyHeight; 
    fill(251, 248, 36); 
    translate(this.x, height - 100);
   rect(0, -bHeight, 5, 5);

//make the stars 
function makestar(birthLocationX) {
    var str = {x: birthLocationX,
                breadth: 60,
                speed: -1.0,
                nsky: round(random(2,9)),
                move: starMove,
                display: starDisplay}
    return str;

For this week’s project, I knew that I wanted to recreate a very specific memory. I wanted to recreate the car drives my family would have in the countryside late at night, when we went on road-trips.

I recreated this by making sure that the car looked like it was continuously moving forward, when it actually was a still image on the canvas. This was done by making sure the background image in the back of the car was moving. The mountains in the background give the image a more 3-D look.

In my memory, there were many bright stars in the sky during those drives. I randomized the position of these stars in the sky. I am overall pleased with the outcome of my project.

Early Sketch of final product
Screenshot of final product


(Clip Above shows Kate Hollenbach’s User is Present)

For this week’s Looking Outward post, I reviewed Kate Hollenbach’s project named User is Present. I particularly liked this project because it is an art piece that examines the interaction between the human and the mobile phone. The experience is captured and presented in an artistic form. I admired how she skillfully combined the world of art and technology to convey a message about a merge between the two worlds. I feel like this was done well, as Hollenbach has an extensive background in studying both worlds of technology and design.

Kate Hollenbach is an artist, programmer, and educator based in Los Angeles, California. Kate has a MFA from UCLA Design Media Arts and a B.Sc. in Computer Science and Engineering from MIT. Her work includes developing and examining interactive systems and new technologies relating to body, gesture, and physical space.


Pictured above are two people interacting with the Lumifolia artwork.
Shadow of a woman exploring the art piece.

For my Looking Outwards Post this week, I looked at the very first Looking Outward Post by Rachel Park from the first week of classes. She wrote about an art piece made by the duo Scenocosme: Gregory Lasserre and Anais met den Ancxt called Lumifolia (press for link). This interactive garden “questions sensitivity, artistic, and musical relationships with the plants and the environment” according to its official website. The closer the human’s touch, the brighter the lights shine.

I agree with Rachel that the idea behind this art piece is both very refreshing and also innovative. It can be used for a greater purpose such as a future public installation in more uninteresting areas. However, I also thought of how this piece could be used for safety measures in dark allies such as in urban areas.

Rachel also mentioned the unique design of the art piece, which encouraged human interaction. I also thought of the tree model they used for this particular art piece. Maybe, there is a more subtle message that encourages more interaction between humans and nature in this specific art piece. The message can be seen with the bright light that shines specifically only when the human touch comes closer to the tree model itself.

It reminded me once again that my art can be used for more than just aesthetic purposes. It can beautify the setting that surrounds it, but can also help serve the usability of that area also.

Below, is an interactive video of the art piece.


Category Project-09-Portrait


//Hanna Jang 
//Section B 
//Project -09

var underlyingHanna;
var randommax=13;

function preload() {
    var myImageURL = "https://i.imgur.com/v5rsvnH.jpg?1";
    underlyingHanna = loadImage(myImageURL);

function setup() {
    createCanvas(500, 500);

function draw() {
    var px = random(width);	//random y from canvas width
    var py = random(height);	//random x from canvas height
    var thex = constrain(floor(px), 0, width-1);
    var they = constrain(floor(py), 0, height-1);
    var theColorAtLocationXY = underlyingHanna.get(thex, they); //var color from image background 

    //make smiley face 
    //happy mouth is made 
  arc(px, py, 10, 10, 0, PI); 
  //happy eyes are made 
  ellipse(px-3, py-5, 5, 5); 
  ellipse(px+3, py-5, 5, 5); 

	//when mouse moves, a trail of squares follow 
    var theColorAtTheMouse = underlyingHanna.get(mouseX, mouseY);
	rect(mouseX, mouseY, 3, 3);

function mousePressed(){
	//random sizes for sad face generation from mouse press 
	var sizex=random(7,randommax); 
	var sizey=random(7, randommax); 
	 var Mousecolor = underlyingHanna.get(mouseX, mouseY);

	//sad mouth is made 
    arc(mouseX, mouseY, sizex, sizey, PI, TWO_PI); 
    //sad eyes are made 
    ellipse(mouseX-3, mouseY-10, 5, 5); 
    ellipse(mouseX+3, mouseY-10, 5, 5); 

I decided to do a self-portrait image background of me smiling into the camera. I then thought of an idea to use faces for the custom pixels, to make up a bigger picture of a smiling face.

Original image draft
original picture
screenshot of partly finished portrait
fully finished portrait



(Above is a VIMEO clip of Maya Ganesh’s talk in Eyeo 2013)

Maya Indira Ganesh is a reader, writer, researcher, and activist working at Tactical Technology Collective in Berlin. She is a PhD candidate at Leuphana University, Lüneburg. She works as a feminist activist, and has been writing about and researching gender/sexuality, media, technology and rights, and social justice since the early 2000s.

A topic she is passionate about is Visual Influence. In the video clip that is attached to this post, she talks about Visual Influence and how data and visuals can be artfully used to benefit spreading and progressing social issues.

I admire her work in bringing together two different groups that are not linked together all the time. However, in stressing their advantages she talks about how both groups can benefit from collaborating their strengths together. She is able to do this because of her diverse background in working in both fields actively.

A project she has actively worked in is called Tactical Tech – a non-profit working for the past ten years to help activists worldwide use information more effectively. It made me think about how in the artistic pieces I design in the future, the message behind the art is equally as important as the aesthetic aspect of it.