- New Portrait
- Playful Communication
- Soft Robotic
- Modern Artifact
- Expressive Environment
- AR
- 2024 FW Archive
zx1900@nyu.edu
xuanzhongao.com
Intro to Comp Media
Essay
The only time ever in my life I have opened a coding program is the first time that I attended a math class in the United States, and that is also the first class of my high school life. I imagined math should be on paper to solve complicated equations and geometry, but I had never thought coding was one of the tasks. The program we used was called Processing, and it looked similar to p5. At that time, I struggled with everything with coding, since I was impatient and misunderstood every part of the code. I drew some circles and programmed some of the star-shaped characters to move. After that semester ended, I never opened Processing again.
Over the past few years of my educational and professional career, I came to realize the skill of coding is more and more necessary to creativity and design, because it opened so many opportunities for us to explore and interact with technology. I always considered coding is to be like learning a new language, language that is used by machines. As a traditional jewelry artist, I work everything with my hand and that used to be efficient, but now my works are also processed by 3D printers and virtual platforms. To make my wearable projects more approachable and interactive, I am eager to restore my pursuit of coding, and work with sincerity and passion.
For the first week of coding, I encountered many challenges and confusions. The first question I had was to figure out the exact location of any given shape on canvas within the p5 platform, and I used external applications such as illustrator and photoshop. However, I imagine there is a way to code to calculate the location of these shapes. I also used photoshop to identify the RGB value of each color.
While working on my self-portrait, I kept speaking to myself that there must be a simpler way to do this. I was translating my drawing from procreate into p5, and I needed to figure out what kind of shapes I need to use from each component. I spent a lot of time on getting the exact opening of the arc and the right curve line from the hair, since I did not understand what those values in code represent on canvas. At last, I made a necklace with point command, and I did it by typing each single point location. I want to learn a repetition code in the future to repeat a pattern.
function setup() {
createCanvas(651, 488);
}
function draw() {
background(255, 0, 0, 100);
noStroke();
fill(0, 255, 255);
triangle(0, 27, 0, 488, 618, 488);
triangle(33, 0, 651, 0, 651, 461);
fill(0, 200, 0);
ellipse(325.5, 244, 325.5, 244);
fill(1, 0, 128);
rect(488.25, 244, -33, -33);
}
function setup() {
createCanvas(400, 400);
colorMode(RGB)
}
function draw() {
background(210);
//neck
noStroke()
fill(71,148,101)
rect(160,270,80,80)
quad(120,310,280,310,340,400,60,400)
//face
noStroke()
fill(255,203,163)
ellipse(200,180,190,240)
//hair
fill(0)
stroke(1)
rect(105,120,10,80)
rect(295,120,-10,80)
curve(400,600,105,120,295,120,20,600)
curve(400,-100,105,120,295,120,20,20)
//eye
stroke(0.1)
fill(255)
arc(150,180,60,55,PI+100,-100, OPEN)
arc(250,180,60,55,PI+100,-100, OPEN)
fill(0)
arc(150,181,35,35,PI-25.6,25.6,OPEN)
arc(250,181,35,35,PI-25.6,25.6,OPEN)
fill(255,203,163)
noStroke()
arc(150,207.45,60,40.3,+9.85,PI-9.85,OPEN)
arc(250,207.45,60,40.3,+9.85,PI-9.85,OPEN)
//eyeballs
noStroke()
fill(255)
ellipse(145,172,7,7)
ellipse(255,172,7,7)
ellipse(160,181,11,11)
ellipse(240,181,11,11)
//nose
fill(239,160,118)
quad(190,190,210,190,215,225,185,225)
fill(0)
triangle(202,225,212,225,208,220)
triangle(188,225,198,225,193,220)
stroke(177,117,85)
strokeWeight(5)
line(200,197,200,220)
//mouse
fill(205,73,73)
stroke(145,38,38)
strokeWeight(5)
curve(100,180,170,260,230,260,280,110)
curve(100,400,170,260,230,260,280,280)
//necklace
stroke(240)
strokeWeight(7)
point(140,310)
point(145,315)
point(150,320)
point(155,325)
point(160,330)
point(165,335)
point(170,340)
point(175,345)
point(180,350)
point(185,355)
point(190,355)
point(195,355)
point(260,310)
point(255,315)
point(250,320)
point(245,325)
point(240,330)
point(235,335)
point(230,340)
point(225,345)
point(220,350)
point(215,355)
point(210,355)
point(205,355)
point(200,355)
noLoop()
}