Month: September 2020

Project 01 – Self Portrait

This is my self portrait, that changes color when you move your mouse around

self-portrait
/*
*Alyssa Song
*agsong@andrew.cmu.edu
*Section C
*
*This program draws a self-protrait. It takes a little bit of time to load!
*/

function setup() {
    createCanvas(800, 800);
    //background(255, 255, 255);
}
   

function draw() {
	stroke(0);
	strokeWeight(5);
	//background changes color when mouse is on left or right side of screen
	 if (mouseX < 0.5*width) {
    	background(228, 228, 253); //light purple background
    } else {
    	background(198, 226, 249); //light blue background
    }

	//hair in the back and face
	fill(0, 0, 0);
	quad(0.25*width, 0.25*height, 0.125*width, 0.875*height, 0.875*width, 0.875*height, 0.75*width, 0.25*height) //back hair
	fill(227, 180, 171); //skin color
	ellipse(0.5*width, 0.5*height, 0.5*width, 0.7*height); //face

    //eyebrows
    fill(0, 0, 0);
    quad(0.4375*width, 0.40625*height, 0.4375*width, 0.4375*height, 0.3125*width, 0.4375*height, 0.3125*width, 0.40625*height); //left eyebrow
    quad(0.6875*width, 0.40625*height, 0.6875*width, 0.4375*height, 0.5625*width, 0.4375*height, 0.5625*width, 0.40625*height); //right eyebrow

    //hair in front of face
    quad(0.25*width, 0.25*height, 0.25*width, 0.5*height, 0.5*width,0.25*height, 0.5*width, 0.125*height) //left side hair
    fill(0, 0, 0);
    quad(0.75*width, 0.25*height, 0.75*width, 0.5*height, 0.5*width, 0.25*height, 0.5*width, 0.125*height) //right side hair
    fill(0, 0, 0);

    //eyes
    fill(255, 255, 255); //white
    ellipse(0.375*width, 0.5*height, 0.125*width, 0.0625*height); //left eye
    //change left eye color when mouse is on left or right side of the screen
    if (mouseX < 0.5*width) {
    	fill(149,85,73); //light brown
    } else {
    	fill(104, 47, 48); //brown
    }
    ellipse(0.375*width, 0.5*height, 0.0625*width); //left iris
    fill(0, 0, 0); //black
    ellipse(0.375*width, 0.5*height, 0.02*width); //left pupil
    fill(255, 255, 255); //white
    ellipse (0.38*width, 0.49*height, 0.02*width); //left shine
    fill(255, 255, 255); //white
    ellipse(0.625*width, 0.5*height, 0.125*width, 0.0625*height); //right eye
    //change right eye color when mouse is on left or right side of the screen
    if (mouseX < 0.5*width) {
    	fill(149,85,73); //light brown
    } else {
    	fill(104, 47, 48); //brown
    }
    ellipse(0.625*width, 0.5*height, 0.0625*width); //right pupil
    fill(0, 0, 0) //black
    ellipse(0.625*width, 0.5*height, 0.02*width); //right pupil
    fill(255, 255, 255); //white
    ellipse(0.635*width, 0.49*height, 0.02*width); //right shine

    //nose 
    line(0.5*width, 0.5*height, 0.5*width, 0.5625*height); 
    line(0.5*width, 0.5625*height, 0.5625*width, 0.625*height);
    line(0.5*width, 0.625*height, 0.5625*width, 0.625*height);

    //mouth
    //change lip color when mouse is on left or right side of the screen
    if (mouseX < 0.5*width) {
    	fill(160, 95, 120); //nude lip
    } else {
    	fill(152, 41, 41); //red lip
    }
    quad(0.4375*width, 0.71875*height, 0.46875*width, 0.6875*height, 0.53125*width, 0.6875*height, 0.5625*width, 0.7185*height); //upper lip
    quad(0.4375*width, 0.71875*height, 0.46875*width, 0.75*height, 0.53125*width, 0.75*height, 0.5625*width, 0.7185*height); //lower lip
    
    //blush
    if (mouseX < 0.5*width) {
    	fill(241, 212, 230); //nude lip
    } else {
    	fill(229, 142, 196); //red lip
    }
    ellipse(0.625*width, 0.625*height, 0.0625*width); //right cheek
    ellipse(0.375*width, 0.625*height, 0.0625*width); //left cheek

}

Project 01 – Self Portrait

This is what I wish I looked like.

Self-PortraitDownload
function setup() {
    createCanvas(800, 800);
    background(250);
}

function draw() {
//German Flag background
    fill(0, 0, 0);
    rect(0, 0, 800, 800/3);   //creates the black portion
    fill(218, 41, 28);
    rect(0, 800/3, 800, 1600/3);    //creates the red portion
    fill(255, 205, 0);
    rect(0, 1600/3, 800, 800);    //creates the yellow portion
//left face line
    line(250, 250, 250, 500);
//right face line
    line(550, 250, 550, 500);
//hat
    strokeWeight(3);
    fill(155, 175, 220);
    arc(400, 250, 300, 225, PI, 0, CHORD);   //creates the hat itself
    fill(255, 233, 220);
    arc(400, 230, 90, 60, PI, 0, CHORD);    //provides the skin color underneath
    arc(340, 300, 50, 15);    //provides the smaller arc within the hat
//left jawline
    line(250, 500, 370, 570);
//right jawline
    line(550, 500, 430, 570);
//chin
    strokeWeight(2);
    arc(400, 570, 60, 20, 0, PI);    //physical chin
    strokeWeight(0);
    rect(250, 250, 300, 250);   //the following chin commands are all to color that portion of the face
    fill(255, 233, 220);
    rect(370, 470, 60, 100);
    triangle(250, 500, 370, 500, 370, 570);
    triangle(550, 500, 430, 570, 430, 500);
    strokeWeight(1);
//eyebrows
    strokeWeight(4);
    fill(0, 0, 0);
    quad(370, 280, 370, 290, 300, 295, 305, 285);   //left eyebrow
    strokeWeight(5);
    noFill();
    arc(460, 290, 55, 30, PI, 0);   //right eyebrow
//nose
    fill(255, 233, 220);
    strokeWeight(3);
    arc(400, 395, 30, 25, 0, PI);
    arc(385, 395, 15, 15, 1/2*PI, 3/2*PI);    //left nostril
    arc(415, 395, 15, 15, 3/2*PI, 1/2*PI);    //right nostril
//mouth
    fill(250, 250, 250);
    arc(400, 450, 100, 100, 0, PI, CHORD);

//eyes
    ellipse(340, 310, 50, 25);    //left eye
    ellipse(460, 310, 50, 25);    //right eye
    fill(100, 41, 19);
    ellipse(340, 310, 30, 25);    //left iris
    ellipse(460, 310, 30, 25);    //right iris
    fill(0, 0, 0);
    circle(340, 310, 15);   //left pupil
    circle(460, 310, 15);   //right pupil

}

Project 01- Self Portrait

This is what i look like everyday.

sketchDownload
function setup() {
    createCanvas(500, 500);
    background(250);
}

function draw() {
  //background
  strokeWeight(0);
  fill(255,0,0);
  rect(0,0, 167,500);
  fill(255,255,255);
  rect(167,0, 166,500);
  fill(0,255,0);
  rect(333,0, 167,500);
  //face color
  fill(191, 128, 111);
  //face shape
  ellipse(250, 250, 210, 272);
  //nose
  strokeWeight(1);
  stroke(0,0,0);
  arc(240,270, 10, 10, 1/2*PI, 3/2*PI);
  arc(260,270, 10, 10, 3/2*PI, 1/2*PI);
  arc(250,275, 20, 10, 0,PI);
  line(240,265, 242,240);
  //lips
  arc(235,298,30,7,PI,0);
  arc(265,298,30,7,PI,0);
  //eyebrows
  strokeWeight(0)
  fill(0,0,0);
  quad(225,197, 228,203, 185,202, 185,200);
  quad(275,203, 278,197, 315,200, 315,202);
  fill(191,128,111);
  //smile
  fill(150,0,0);
  arc(250, 300, 60, 60, 0, PI);
  //eye white
  fill(255, 255, 255);
  //eyes
  ellipse(205,225, 40, 30);
  ellipse(295,225, 40, 30);
  //eye color
  fill(95,44,22);
  ellipse(205,225, 25, 25);
  ellipse(295,225, 25, 25);
  //pupils
  fill(0,0,0);
  circle(205,225, 10);
  circle(295,225, 10);
  //sombrero
  fill(249,230,204);
  ellipse(250,145, 300,100);
  arc(250,150, 100,250,PI, 0);
  //pokeball
  fill(255,0,0);
  arc(250, 100, 75, 75, PI, 0);
  fill(255,255,255);
  arc(250,100, 75,75,0,PI,CHORD);
  fill(0,0,0);
  ellipse(250,100,30,30);
  fill(255,255,255);
  ellipse(250,100,15,15);
  //teeth
  fill(255,255,255);
  arc(225,300,10,10,0,PI);
  arc(235,300,10,10,0,PI);
  arc(245,300,10,10,0,PI);
  arc(255,300,10,10,0,PI);
  arc(265,300,10,10,0,PI);
  arc(275,300,10,10,0,PI);
  //pizza slice
  fill(255,222,111);
  triangle(250,320, 395,305, 395,390);
  fill(242,186,120);
  ellipse(395,347.5, 9,85);
  fill(155,41,23);
  circle(290,330,7);
  circle(270,325,7);
  circle(305,320,7);
  circle(325,345,7);
  circle(335,323,7);
  circle(355,344,7);
  circle(363,332,7);
  circle(378,365,7);
  circle(375,320,7);
  //lines
  strokeWeight(3);
  if(mouseIsPressed==true){
    stroke(255,255,255);
    line(0,0, mouseX,mouseY);
    stroke(0,255,0);
    line(0,500,mouseX,mouseY);
    stroke(255,0,0);
    line(500,0, mouseX,mouseY);
    stroke(255,255,255);
    line(500,500, mouseX,mouseY);
  } else {
    stroke(0,255,0);
    line(0,0, mouseX,mouseY);
    stroke(255,255,255);
    line(0,500,mouseX,mouseY);
    line(500,0, mouseX,mouseY);
    stroke(255,0,0);
    line(500,500, mouseX,mouseY);
  }
}

LO1: My Inspiration

Before starting this course I had rather limited exposure to interactive projects. One project that I saw and was in awe of was my roommate’s interactive desktop wallpaper (no longer available on website).

My roommate had this “clock” that went through the different phases of the day and it did so beautifully. I always wondered what went into creating complex projects like this. At the time I was taking 15-112 so instead of feeling that seeing something amazing would be impossible, I was thinking about what went into its creation how it came to life.

When I saw it for the first time it wasn’t even the clock function that caught my attention – it was the intricate skyline/scenery and how the shadows and light glossed over the screen as it traveled through time. It was inspirational and got me to think about what the possibilities could be if I could learn how to create projects like these.

LO1-My Inspiration

The word “computational projects” was first started off as questioning myself what it defines as. Computational defines as “the use of computers”, therefore I assumed any program or product that has been created by the technical ability of computers such as coding.

            Facebook.com; an online social networking service, allows users to sign up for free profiles and it connects friends, family and people through online. It also allows users to share pictures, music, videos, and posts to anyone who has signed up in the website.

            The founder of Facebook is a well-known billionaire, Mark Zuckerberg. Zuckerberg has started off making the website with a group of his classmates (Eduardo Savarin, Dustin Moskovitz and Chris Hughes) who he has met in Harvard. His classmates included a programmer, spokesman, and investor in the website.

Zuckerberg got the idea of Facebook by first making a site in Harvard which helped University students get to know one another better through online. It only took 2 weeks for Zuckerberg to build the first version of Facebook. However, this did not come at ease since he was accused for stealing the “idea” of an intended social networking site called Harvard connection.

            Facebook.com was developed by a program called PHP. PHP stands for Hypertext Preprocessor and it’s a scripting language used for the development of web applications.

            Facebook’s future goal still lies in the reason why they built the website: connection. The main objective of Facebook is to give people the power to build community and bringing the world closer together. I admire the power Facebook brings to the world- enabling users to connect with the world easier than ever before and bringing comminutes together.

LO – My Inspiration

Looking Outward Assignment 1 Basics

One of my professors from the previous few years is currently a computational design student in the architecture program after working in the field for many years. The project that I am speaking about is one in which he was able to generate different swatches of neighborhood in Grasshopper for Rhino, which would fit into the urban
context of the neighborhood very well, yet not seem like it had been gridded like traditional urban planning. I really admire the project because it shows that the power of architecture (especially in relation to computationally generated architecture) is greater than just at the scale of the house. I believe he did it alone and took a semester. He used a lot of custom software. Was inspired by others in the field of Computational Design. I think it points to a future where computers can provide a baseline for how to design or rework parts of cities where we can quickly propose a multitude of opportunities for the neighborhood. The project is called Urban Synthesizer by Jinmo Rhee.

Source: http://jinmorhee.net/jinmorhee_3-multimedia/uss.html

LO1 – My Inspiration

December 2017, my family and I traveled to Washington D.C. as a holiday getaway. At the same time, the ARTECHOUSE was holding an exhibition of the wonderful works of Adrien M and Claire B. The two artists are known for their digital creations as well as living art forms. Their work is presented through stage performances or installations. My family and I were able to experience a live performance called HAKANAI. The performance consisted of a single dancer being surrounded by moving digital images that were formulated into a landscape. It presented the interaction between the dancer and the “magical environment”. The name of the performance translates to ephemeral, which means to not last for a long time. The digital solo performance presented the nature of existence, between reality and imagination.
The performance also consisted of digital images, electronic music, live music, proximity sensors, and environmental/nature-like sounds. And according to Claire B., everything about the performance is live. With the usage of four screens, creating a cube, the projectors produce 360 degrees images that respond to the sound as well as the dancer’s movement. The way the artists were able to intertwine art, technology, human, and music is very amazing. As an architecture student, there has always been a need to somehow create art beyond a piece of paper. However, I also wanted to discover how humans interact with art. The way the dancer was able to interact with the digital images reminds me of the interaction between humans and buildings/structures.

L01 – My Inspiration

An interactive project I admire is Club Penguin. Club Penguin before its discontinuation was an online children’s game that became popular among people of all ages. I admire the simplicity of the game itself, but also the community built by the chat feature within the game. Even years after original players of the game had become “too old” to play, many still enjoyed it as well as created a multitude of different forms of art from it. Memes and YouTube videos were created daily about Club Penguin which shows the lasting impact the project had. The idea was started by a singular person and then developed by himself, Lance Priebe, and a co-founder, Lane Merrifield. The company itself was formed with 10 employees and eventually grew to over 10 times that. The game was developed for years and there is no information regarding how long the bare bones of it took to create. Sources state the game was created with commercial software, utilizing Flash Player to run. The code itself uses many things, such as java, ActionScript, and more. It has also been said that the company did create its own custom extensions for preexisting software for optimization. The fan page for the game states the founder got his inspiration from a newspaper depicting a penguin and a banana peel. The futures Club Penguin pointed to have already been seen. As an old, discontinued game, it still has a strong fan-base and inspires media. A simple project has had a lasting impact which gives insight into how influential computational projects can be. The game itself was even sold to Disney for a guaranteed $350 million dollars, revealing that someone with a passion and an idea can become successful no matter what it is.

A link is not possible as the game has been shutdown.
Official Title: Club Penguin
– Creator/Founder: Lance Priebe
– Co-Founder: Lane Merrifield
Source of Information: https://clubpenguin.fandom.com/wiki/Club_Penguin#:~:text=They%20never%20advertised%20at%20all,Puffle%20temporarily%20for%20the%20party
*This information may not be accurate as it is simply a fan made forum
*however it was one of the sole places I could find any information on the
*history and creation of the project.

Club Penguin Shuts Down After Disney Claim, U.K. Child-Porn Arrest - Variety

L01- My Inspiration

An interactive project I knew before this course were the Pokemon games, specifically Pokemon Red and Blue, the first two pokemon games. These games were developed under the names PocketMonsters: (Red, Green, and Blue) by Gamefreak, published by Nintendo and specially introduced in Japan in 1996 for the Game Boy. I admire these games because I grew up playing pokemon and was always around cards, toys, and the games themselves. These games are where pokemon started. These first games were made by a team of 10 people, they split up to design and code the game, 4 of which were programers. The games took about 6 years. The creator Tajiri was inspired by the Game boy allowing players to play together via cables, and by Square’s Game Boy game The Final Fantasy Legend. The games were written in Z80 Assembly, the “off-the-shelf” software as it was introduced in the late 1970s. This game led to interactive game play between players, letting them collect, travel, and battle with each other. The future of these games includes vr, 3D games, and more interaction with the real world. These games were developed by GameFreak, designed by Satoshi Tajiri, and composed by Junichi Masuda.

source of information: https://en.wikipedia.org/wiki/Pok%C3%A9mon_Red_and_Blue

Amazon.com: Pokemon - Red Version: Nintendo Game Boy Color: Video Games