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).