Month: August 2019

Yoshi Torralva-Project-01-Face

When approaching this project, I wanted to create my self-portrait that was angular with similarly toned hues. Using mostly quadrilaterals, I needed to make sure points lined up with each other to create a unified facial structure. Additionally, I added mouse tracking to a square in the background to add an extra element of depth.

sketch

//Yoshi Torralva
//Section E
//yrt@andrew.cmu.edu
//Project-01
function setup() {
    createCanvas(600,600);
}
function draw() {
    background(249,33,33);
//background with mouse tracking for added depth
    fill(234,24,24);
    rect(mouseX,mouseY,500,500);
//shirt
    fill(51,3,14);
    noStroke();
    quad(122,517,374,408,374,600,91,600);
    quad(374,408,507,432,579,600,292,600);
//right ear
    fill(160,2,18);
    noStroke();
    quad(384,267,392,277,377,318,340,326);
//hair behind ellipse
    fill(114,7,18);
    noStroke();
    ellipse(269,172,112,112);
//side hair
    fill(114,7,18);
    noStroke();
    quad(200,194,225,177,218,244,197,274);
//hair
    fill(114,7,18);
    noStroke();
    ellipse(290,163,112,112);
    ellipse(330,224,125,174);
//neck shadow
    fill(89,4,20);
    noStroke();
    quad(224,363,360,314,350,385,237,433);
//head
    fill(191,16,25);
    noStroke();
    quad(256,322,350,331,326,362,274,368);
    quad(207,346,257,322,274,368,224,363);
    quad(207,241,257,323,207,346);
    quad(197,273,207,241,207,346,199,323);
    quad(225,273,297,283,256,322);
    quad(250,323,353,227,357,270,324,329);
    quad(305,359,357,270,370,292,350,331);
//ellipse for head
    fill(191,16,25);
    noStroke();
    ellipse(281,229,146,135);
//neck
    fill(191,16,25);
    noStroke();
    quad(254,390,334,371,374,408,220,477);
    quad(334,371,357,328,351,387);
    quad(219,477,374,407,345,459,269,483);
//hair in front of head
    fill(114,7,18);
    noStroke();
    ellipse(324,172,106,76);
//nose shadow
    fill(160,2,8);
    noStroke();
    quad(276,237,283,245,286,279,278,269);
    quad(261,241,263,238,254,266,246,276);
//sunglasses
    fill(114,7,18)
    noStroke();
    quad(206,225,264,233,250,268,203,260);
    quad(279,235,338,240,334,275,284,273);
    quad(240,230,361,242,360,249,239,237);
//eyebrows
    fill(114,7,18)
    noStroke();
    quad(221,213,236,210,231,219,214,223);
    quad(236,210,261,217,260,226,231,219);
    quad(286,220,326,218,327,227,289,229);
    quad(326,218,342,233,327,227);
//nostrils
    fill(160,2,8);
    noStroke();
    ellipse(254,280,8,4);
    ellipse(274,282,8,4);
//upper lip
    fill(160,2,8)
    noStroke();
    quad(243,309,257,306,257,313,233,316);
    quad(257,306,260,307,260,314,257,313);
    quad(260,307,262,306,263,313,260,314);
    quad(262,306,279,310,288,319,263,313);
//lower lip
    fill(135,3,22);
    noStroke();
    quad(233,316,257,313,256,321,245,320);
    quad(257,313,260,314,259,321,256,321);
    quad(260,314,263,313,262,321,259,321);
    quad(263,313,288,319,262,321);
}

Shariq M. Shah – Self Portrait01


Using basic geometric shapes and a subtle color palette, this exercise allowed me to explore different ways of arranging shapes in p5.js. Although the image looks simple, the functions that allow it to look minimal and composed will have uses in more complex programs.

shariqs_Portrait

// Shariq M. Shah
// Section C
// shariqs@andrew.cmu.edu
// Assignment_01


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

function draw() {
  background(230, 211, 211);
  noStroke()

  fill(250, 200, 0)
  ellipse(300,600,600,300)

  strokeWeight(2)
  rect(220, 400, 150, 150, 15)

  //Face
  fill(200, 162, 132)
  rect(170, 180, 250, 250, 30, 100, 150, 150)

  fill(0,0,0)

  ellipse(300,180, 250, 150)
  rect(150, 180, 300, 80,30)

  //Left Spec
  noFill()
  stroke(300)
  ellipse(240, 290, 60, 60)
  ellipse(240, 290, 55, 55)


  //Left Eye
  stroke(300)
  fill(300)
  ellipse(240, 290, 30, 20)
  fill(0)
  ellipse(240, 290, 15, 20)
  ellipse(240, 285, 2, 2)


  //Right Eye
  stroke(300)
  fill(300)
  ellipse(340, 290, 30, 20)
  fill(0)
  ellipse(340, 290, 15, 20)
  ellipse(340, 285, 2, 2)

  line(175, 180, 425, 180)

  //Right Spec
  noFill()
  stroke(300)
  ellipse(340, 290, 60, 60)
  ellipse(340, 290, 55, 55)

  line(310,290, 270, 290)
  line(310,285, 270, 285)

  line(210,285, 170, 280)
  line(210,290, 170, 280)


  line(370,285, 420, 280)
  line(370,290, 420, 280)

  //Nose
  noStroke()
  fill(240, 171, 142)
  triangle(290, 300, 290, 340, 310, 360)
  fill(214, 171, 139)
  triangle(290, 300, 290, 340, 270, 360)

//Mouth
	fill (300);

	ellipse (290, 382, 70, 42);
	fill (200, 162, 132);

	rect (250, 360, 89, 21);

    ellipse(425,300, 20, 80)
    ellipse(165,300, 20, 80)


  fill(300)



  //Logo
  bezier(105, 20, 10, 10, 90, 90, 15, 80)

  //Collar
  bezier(220, 460, 300, 650, 150, 650, 370, 460)



}

 

Bo Yang- LookingOutwards-01

 

I was play Electronic Organ when I was in undergraduate university in China. This instrument is very popular among children because it contains thousands of sounds in one instrument.

The first electronic organ made by an American named Thaddeus Cahill in 1904. Until now, YAMAHA is the biggest company producing this instrument.

Electronic Organ seems like a harpsichord, piano size but has a foot-keyboard. Electronic Organ is a modern electronic keyboard instrument which combines high technology. It originates from classical pipe organ and is similar to the structure of the classical pipe organ. But the electronic organ has its own musical form, which is just like a music synthesizer but need a performer to run the whole organ. It contains thousands of instruments inside one electronic organ and it can show symphony when performer plays it. Even I play this instrument for 8 years, I still do not know how does it run. All the information online is about teach how to play it but no one to show how can produce one.

From my experience, the electronic organ function just likes the music synthesizer but more than one. It can process thousands of instruments in one time.

However, the sound of this instrument is not very adjective sometimes. It’s like fake not true. It inspire me to learn more about computing music and what is computing music. I love my instrument and I wandering maybe I can do more about this project. Like, making this instrument become more productive or making the sounds more adjective. Then chamber music can just need one instrument not a lot of instruments.

Sammie Kim_Project01_Face


sketch-Sammie

//Sammie Kim
//section D
//sammiek@andrew.cmu.edu
//Self Portrait

function setup() {
  createCanvas(600, 600);
  background(185,209,158);

//body
  noStroke();
  fill(171 ,220,237);
  ellipse(320,560,265,270);
//neck
  fill(204 ,178,151);
  rect(287,395,64,47);
  ellipse(319,437,64,37);
//leftear
  fill(204 ,178,151);
  arc(225,313,40,55,1/2*PI,PI+1/2*PI,CHORD);
//ponytail
  fill(130,101,56);
  ellipse(400,320,80,240);
//face
  noStroke();
  fill(239 ,224,199);
  ellipse(320,294,202,235);
//blush
  fill(237,192,230);
  ellipse(263,324,24,14);
  ellipse(364,325,24,14);
//right ear
  fill(204 ,178,151);
  arc(414,313,40,55,PI+1/2*PI,1/2*PI,CHORD);
//side hair
  fill(130,101,56);
  rect(408,230,15,124);
//Eyes
  fill(130,101,56);
  ellipse(354,300,18,13); //right eye
  ellipse(273,299,18,13);
  stroke(130,101,56);
  line(360,296,370,293);
  line(264,296,254,293);
  bezier(360,275,363,270,365,275);
//nose
  fill(130,101,56);
  arc(312,330,20,20,PI,2*PI);
//mouth
  fill(161,101,64);
  arc(313, 360, 60, 40, 0, PI, CHORD);
//arms
  noFill();
  stroke(130,101,56);
  stroke(100);
  strokeWeight(1);
  bezier(260, 290, 270, 280, 275, 280, 285, 290);
  bezier(343, 290, 355, 280, 360, 280, 368, 290);
  bezier(405, 525, 410, 535, 415, 567, 408, 600);
  bezier(240, 525, 235, 542, 231, 567, 238, 600);
//Front Hair
  fill(130,101,56);
  angleMode(DEGREES);
  rotate(20);
  ellipse(395,90,175,82);
  rotate(6);
  ellipse(330,110,60,115);
}

This self portrait assignment allowed me to be more experimental with coding, and compile various shapes to create my face. As I had a hard time figuring out curved shapes, this was a good practice to recall my basic geometry knowledge. 

Alec Albright – Looking Outwards – 01

Demo and tutorial of SICKTRICKS by creator Bo Tembunkiart

SICKTRICKS is an interactive video game for the sport of tricking, which is an aesthetic blend of martial arts, gymnastics, and break-dancing. It was a project created nearly three years ago by CMU student Bo Tembunkiart. Though this project was created from scratch, it did utilize the Autodesk Maya application for 3-D interactivity in order to allow for more realistic movements and responses by the avatar.

The project was not as inspired by one particular work as it was inspired by the lack thereof. As tricking is a somewhat new, relatively small sport, the creator wished to create a video game for the tricking community, entering a space that has not been widely explored before. In this way, it offers a new area of potential study for the video game world, expanding the awareness of tricking at the same time.

I admire this project because not only does it explore a new realm of video games, but it also is wildly impressive to me that such a game was able to be created from scratch in just one semester. It is exciting for me to see that you can create new content even if there is no template, so long as you’re willing to work hard enough for it. This project was certainly outside the box, and that to me is definitely inspiring.

Lanna Lang-Looking Outwards-01

David Bowen’s “Cloud Piano” / 2014

This project was an installation that played the keys of a piano based on the movements and shapes of clouds. Bowen recorded the clouds in real-time with a camera pointed at the sky, and then used custom software to convert the video to program a robotic device that pressed the corresponding piano keys. David Bowen’s works really inspire and interest me because of his ability to think so out of the box with his interactive art and using his creativeness to intertwine computer science and art in unique ways.

I loved that composition of sounds such as tempo, rhythm, mood, and dynamics were all determined by factors of the sky at that moment; for example, the mood of the music was determined by the direction the clouds moved: if they moved north to south, the piano plays a cheery tone, and if it was the other direction, the sound becomes dark and moody.

This project’s chain of influences first stems from one of his earlier works called “Cloud Tweet” where he used MaxMSP to take videos of clouds and sent Twitter messages based on the movements and shapes of the clouds. The chain extends deeper through his initial interest in the interaction between machines and the natural world, as well as many artists for their use of kinetics and others working with technology, such as Jean Tinguely, Edwardo Kac, Simon Penny, and more.

David Bowen’s “Cloud Piano” – an overview that shows the grandeur of the installation’s mechanics.
David Bowen’s “Cloud Piano” – a close-up shot that shows all the details he put into his work.
A video Bowen produced about this work that shows the installation at work, allowing viewers to listen to the clouds playing the piano.

William Su-Looking Outwards-01

Pix2Pix is a creative application for artificial intelligence that takes a crude line drawing and tries to apply realistic textures to it.

Link to the web tool: https://affinelayer.com/pixsrv/

Christopher Hesse, the cofounder of pushbullet made an interactive tool using a Tensorflow port of pix2pix. The pix2pix model works by training on pairs of images with one set of them containing labels. It then attempts to generate the corresponding output image from any input image you give it.

I especially love the rewarding and quite hilarious aspect of it. It’s quite interesting to see how close the model can recreate what you’re trying to draw or how badly it failed at doing it.

Taken from the Verge’s article on pix2pix.

Obviously this points to the topics surrounding the uses of machine learning and AI. While having the potential to be used for interesting and quite useful ways, it also has the potential to be used in a nefarious manner.

References:

Christopher Hesse’s pix2pix tool: https://affinelayer.com/pixsrv/

Verge Article: https://www.theverge.com/tldr/2017/6/6/15749754/pix2pix-auto-fill-neural-network-images-portraits

Jina Lee – Looking Outwards 01


https://renaudrohlinger.com

Renaud ROHLINGER is a French developer that lives in Japan who made an interactive website portfolio to help depict his experience when he traveled to Japan. The main objective of his project is to show Japanese culture. He stated on his website that he wanted to create a “cool webgl design without using Distortion and Wave effects.”

When entering the website, you see a kitten that directs you to the title then sleeps. Everything is animated so you can see the background continuously moving. Once you scroll, the kitten wakes up and walks into the background.

As the cat leads you into the background, the setting changes from black and white to color. At first, it is difficult to see where the kitten is at, but the camera zooms out so you are able to see the “world” that the kitten is in.

I really enjoyed the transitions that the designer made. Every time you scrolled to move on, there were cool transitions that helped you get immersed into the work. In addition, the interaction was extremely fun to play around with. The designer gave a backstory in the beginning of how he started. While doing so, he talked about what kind of softwares he uses. He also added that he uses an old Mac and like everyone he hates lags. His writings were very relatable which I enjoyed. He used Phaser.io, Pixi with Canas/WebGL, HowlerJS, Es6 StandarJS, Webpack. In the end he talked more about how he was able to create his portfolio. He mentions architecture, 3D optimizations and three optimizations, animations. I really thought the animations and interactions were really were integrated with each others. I would like to do something like this in the future once I am more educated about coding. Through this portfolio, I was able to see what a long and tedious process it is to create cool and interactive projects.

Sean Leo – Project_01

sleo-selfportrait

/*Sean B. Leo
Section C
sleo@andrew.cmu.edu
Project_01*/
function setup() {
    createCanvas(600, 600);
  }
  function draw() {
    background(225);
    noStroke();
    //skin
    fill(222, 197, 165);
    rect(200, 150, 200, 300);
    quad(200, 150, 200, 450, 178, 400, 150, 200);
    quad(400, 150, 450, 200, 415, 440, 400, 400);
    //hair
    fill(83, 47, 22);
    quad(150, 150, 350, 100, 450, 150, 350, 175);
    rect(150, 210, 10, 80);
    rect(440, 210, 10, 80);
    triangle(200, 150, 150, 250, 130, 175);
    triangle(400, 150, 470, 170, 450, 250);
    //beard
    quad(150, 249, 200, 375, 250, 470, 160, 430);
    quad(450, 249, 440, 430, 350, 470, 400, 375);
    quad(200, 400, 270, 450, 270, 500, 200, 460);
    quad(400, 400, 400, 460, 320, 500, 320, 450);
    rect(270, 450, 50, 50); 
    //musatche
    quad(200, 420, 270, 390, 280, 395, 300, 405);  
    quad(320, 390, 330, 395, 400, 420, 300, 405); 
   
    
  }

Thinking about drawing through coordinates was challenging as well as getting used to the grid orientation. I believe it’ll just take some getting used too and practice.

*not sure why my height is getting cropped off…

Shariq M. Shah – Looking Outwards – 01

Holger Lippmann is a generative artist working at the intersection of art and technology whose work, through processing, seems to challenge perceptible reality. Initially training as a traditional visual artist, Lippmann later moved to Berlin in the middle of the electronic music boom. These interests in the visual arts and in electronic music merged into explorations in digital and computational art. Key works from his ‘noise warp’ collection use collectives of elongated shapes to define highly organic and warped field conditions. Lippmann draws inspiration from the flowing brushstrokes of Van Gogh, even drawing from the color palettes of his various paintings. A central concept of Lippmann’s works seems to be the aggregation of a relatively simple shape or element, i.e a line or rectangle, into varying densities and arrangements where they, as a collective, articulate complex and nuanced field conditions. As an architecture student, these visualizations provoke thought and introspection as spatial possibilities can be speculated. Explorations upon the responsiveness of such systems could have aesthetic as well as practical implications.

Holger Lippmann Website:

http://www.lumicon.de/wp