Emily Lin

Final result: sketch

Concept 1
For this week’s assignment to create a p5.js piece that has: a.) 1 element controlled by the mouse, b.) 1 element changing over time, and c.) 1 element that is different every time you run it; I came up with this idea for a ‘moody weather’ series.

The idea for the sun one is that the arc of the mouth and eyebrows would move up and down with the mouse. Also I wanted the rays in the background to continuously rotate. I envisioned this would be down in series with a bunch of other stylized “moody weathers” for a microsite (with a rain cloud version, a moon version). It’d be so great in the future to learn how to add actual weather data so that the raincloud, sun, moon interactive illustration would be correlating with the weather of an actual place and time.

Then I started to work on in it,  and found that the results were too cartoony and I was not happy with where I was. I was able to have the background color change based on the mouse position (using the map function). I made some progress on the rotating rays but I didn’t get it to be exactly where I wanted it to be.

I am planning to return to this weather series piece and troubleshoot all the interactive elements that I couldn’t quite figure out after I finish up a new concept, which I came up with as I was trying to learn more about how to animate the rays. Ultimately, I decided to switch concepts midway. After I get this 2nd concept to a better place, I’ll return to this weather concept.

———

Concept 2
As I was trying to make the rotating sun rays for the weather piece, I was watching tutorials on rotating and familiarizing myself with the concept of angles. I remember thinking that I should do something that plays with the angles of lines (like a clock). I also stumbled upon this awesome gif on the generative art tumblr page that was posted on the ICM inspiration wiki page).

Inspiration on right. Sketch (with ideas about which element will move with mouse / be random/ changes over time) on the left.

 

I decided to play with this idea of rotating arcs/ clocks using the information I had learned from trying to get my sun rays to rotate. I also tried to map out the grid with the variables for organizing the objects into ‘let = row{}’ and ‘let = column{}’. I also knew I wanted the speed of the angles to change for each row.

I determined these settings :
a.) one element controlled by the mouse : arc of circles
b.) one element changes over time (independent of mouse): the colored circles will move independently
c.) one element different every time you run the sketch: text or # (title) in the background

Upon starting, I decided to simplify the task and start by just trying to figure out one rotating arc. I was able to use the idea of translate() to move the origin to the center of the clock and use push() and pop() to isolate the circle.

Next, I created a grid of these clocks using the objects to group columns and rows into their sections.

I’m trying to replicate this gif and get the arc to go reverse once it hits degree 350. I’m testing out the variable statement using (init, test; update) { statements}, but it isn’t working. It has been difficult trying to trouble shoot a lot of these interactive elements, and get it to look exactly how I want it to.

I tried to figure out why certain things weren’t working, but often times I ended up changing my vision. For example, I tried to get random sentences each time you refresh the page. I tried a couple of different solutions. For example, I tried to change the frameRate of just the random text and isolate the text using push() and pop(); however, it just changed the frameRate for all the moving parts. I ended up just using a static text.

I’m hoping to get some help at the help session with this and research some more about how to figure out how to get the text to change each time I restart the sketch. Overall, it has been fun to try and make things move and interact! I just need to keep practicing!!

This is where the previous final result (before the help session): https://editor.p5js.org/elinsterz/sketches/ryIuBZj_7

—-
Update! I went to an ICM help session and they helped me figure out what was wrong. The issue was that I was mixing up where to put the arrays and where to define my variables – I should’ve put the “let time = [”]” and “let t = random(time)” in the function setup(), and put the “text (t, x, y)” in the function draw () or function mousePressed ().

This is the new final result, where the time refreshes every time you click: https://editor.p5js.org/elinsterz/sketches/SkwB4v6d7

———

Reflections:

I can’t believe I didn’t figure it out my problem myself because the solution now seems so simple. But I’m realizing how great it is to ask for help and how important it is to be calm when I don’t get it right. Second eyes never hurts.

Right now, I think my skill level is not matching up with my ideas. It is a frustrating feeling to change what  I envisioned because I couldn’t get the code to work for me. I need to get better ASAP and have more patience to work out solutions. It is fun trying to figure it out, but after a couple times of it not working I can definitely tell I’m becoming more impatient. For me, the tricky part moving forward will be trying to write code that gets the results I want (and do so in a calm manner). It’ll be important that I be able to execute ideas with code (not just piece together random elements).

For this assignment to draw an alien using p5.js, I am purposely trying to code based off of my drawing. The reason I am doing this is because I am hoping I’ll learn more if I try to code the actual result that I want, instead of creating a jumbling of shapes as I go along.

So, here’s my rough alien sketch before I started coding. Let’s try and recreate this with p5.js!

Starting to draw with p5.js and I am having to constantly remind myself of a couple of notes:

1.) “Think like a computer.” I keep placing objects underneath other objects. Ex: I have put the background statement as the first command in the function statement, therefore my objects are all hidden. Need to remind myself that commands read from top to bottom.

2.) Trying to remind myself to also not use the same method each time. Ex: I want to try out different ways of drawing ellipses with the different ellipseMode(). I just want to make sure I know of all the different techniques/commands, even if it takes longer. Hopefully this will help in the future.

3.) My struggles with making a unique, organic shape (the alien body)

Reading the beziers page to help me get that cylindrical shape of the body. Finally got the cylindrical body shape, but am struggling to have the color fill on the inside not outside of the shape. Ex below:

So bezier command doesn’t work for making an organic shape. Thankfully stumbled upon the beginShape() and vertex () function. It’s still not curved. Here is the vertex version:
 So, I think I should apply this concept to the curve vertex function. However, I am very confused as to why the number of curveVertex() points and the number of points() are not the same. Should there be a curve for each point.

Ok, well despite not knowing, still was able to get a little closer using the curveVertex() function.

5.) Throughout the building of the alien, I did wonder if there was an easier way to do things. Example, instead of having to draw a vertex point for the foot I was hoping I could just rotate a ellipse. When I tried to do this, it would end up rotating the whole alien. Also another example, making each polka dot took time, wonder if there’s an easier way. Trying to find an easier way to do things/ “shortcut” will be key for me.

Though there’s probably an easier way to do some of these steps, I still managed to Updated version of the alien with all the body parts I had envisioned.

6.) Added color! Easiest part!

Here is the final result + code: https://editor.p5js.org/elinsterz/sketches/SygUGrhPm

 

Reflections on this assignment:

Only after finishing my alien did I realize we were only supposed to use basic shapes for this assignment. So, I didn’t follow the guidelines exactly but I do feel like a learned a lot.

It’s exciting to see the results. Throughout doing my alien, I did ask myself many times if there was a more systematic way of doing things. Instead of putting in individual dots, is there a way to make a pattern? Also, I found myself becoming more comfortable with using the p5.js reference page in order to figure something out.

I also kept itching to understand other commands, such as how to make a gradient background. I discovered lerpColor(), but couldn’t quite understand how it works. I can definitely tell I’m only scratching the surface of this program and I’m antsy to be more well-versed in it.

With my work and life, I hope to create educational experiences that help myself and others better understand a topic, a person’s point of view, and the world around us. This is why I’ve made it a point to find graphic design work opportunities that were not just about selling products to consumers. After graduating, I purposely tried to apply my love for graphic design and illustration towards organizations and studios that are committed to helping the world in some capacity. With this focus, I found myself working for an anthropology museum,  media/magazine companies, and a social impact design studio. All these experiences further confirmed my belief that collaborating with those who are passionate about their subject and their mission is key.

So, how will computation be applied to my purpose? I hope that with the help of technology and computation, I will be able to create more engaging and immersive learning experiences. I find that some of the most engaging pieces in the museum, media and magazine world are when they use computation and other types of media (video, animation). When used intentionally and beautifully, computation can truly transport people into a story and subject matter. Lately, many of the works that I found most inspiring involve programming in some way or another. Some examples of the editorial pieces that are amazingly engaging are these heartbreaking New York Times pieces (they’ve done so many but I’ll just post the ones I distinctly remember): Greenland is Melting Away, Antartica Dispatches.

The Refugee Project (not so much editorial, more data visualization) but still effective and still beautiful. This project maps the movement of those seeking and obtaining asylum in the world.

Smithsonian’s Interactive Fact Table and the Natural History Museum of Los Angeles’s Nature Lab are two great examples of technology being incorporated into the museum experience. This nature lab is such a perfect blend of illustration, design, objects, and technology. Children’s science and natural history museums are especially an interest of mine. My SO is a material scientist and I’ve learned to love and appreciate science; I only wish I knew more. These science and history exhibits are a fun way for me to learn about these topics in a playful and easily digestible way. And one thing I’ve noticed from these exhibits are that interaction is a key component to helping people learn.

I’ve been in awe of certain interactive pieces that I’ve experienced in person. Some pieces that are always in the back of my mind are: Ai Wei Wei’s Hansel & Gretel show. I was also in New York a couple years ago for the Ryoji Ikeda’s exhibit which was so unforgettably peaceful and mesmerizing. Although I don’t know if I’ll do work as awesomely minimal and experiential as this; I can’t imagine his work not effecting my choice to learn more about computing. More for spirit and aesthetic inspiration, Keetra Dean Dixon is a designer and artist who I’ve been following for years. Her work is tactile, playful and, best of all, it forces people into unexpected situations (be it a digital experience or not). I hope to infuse her sense of delight, absurdity, and humor into all that I dream of and work on.

I had my first Physical Computing course yesterday. During one part of the lecture, Tom Igoe described the 3 types of interactions that he generally sees at ITP: 1.) Expressive, 2.) Instrumental, 3.) Instructional. While I hope to make work that touches upon all of these, the interaction type that I connected to the most was the instructional kind. My goal is to use programming skills and all that I learn at ITP to help me be a better, more well-rounded designer, technologist, and collaborator for empathetic and educational causes!