WEEK TWO: A RIPPLE IN TIME

Week One proved to be a difficult one, and since I felt very restricted by my drawing with 2D primitives, I decided to abandon it completely and try something new for week two. The criteria of this week’s sketch made me think of ripples. My goal was to have each click of the mouse create an ellipse. The ellipse would grow until it is not visible on the screen. Here was my plan of how to satisfy each criteria:

1. One element controlled by the mouse: A clicked mouse initializes the start of the ripple.

2. One element that changes over time, independently of the mouse: The ripple enlarges by itself.

3. One element that is different every time you run the sketch: The background color is a different shade of blue at each start of the program.

Step 1: make a circle grow

I started with the element that I thought would be the easiest - making an ellipse grow, since we have had a bit of practice in class changing objects on the canvas over time. This program uses variables and the looping draw() function in p5.js.

With this code, the ellipse is a perfect circle starting in the center of the canvas. The width and height increase by 1 pixel every frame as indicated by lines 13 and 14. BUT How can I make the mouse trigger this event/growing circle?

Step 2: mousePressed()

This is a function I didn’t know how to use before, so I had to read up from the p5.js documentation about different functions used to cause events. The mousePressed() or mouseClicked() functions do just this. The former triggers an even when the mouse is clicked, the latter after a mouse is clicked and released. Either would work for what I was trying to do.

In a separate program I wrote code that would create an ellipse when the mouse was clicked to practice this element of my future ripple program.

This code creates an ellipse of 80 width and 80 height anywhere the mouse indicates position using built in variables mouseX and mouseY. With each click, a new ellipse is created. Next I needed to figure out how to combine these two events, so that the mouse created an ellipse that would then grow on its own.

Step 3: mouse triggered ripple

In order to combine the two programs above, the draw() function would have to contain the ellipse making instructions, otherwise mousePressed() or mouseClicked() wouldn’t trigger a growing ellipse, just a stagnant one. With the help of this code, I learned that you can create a sort of on/off switch in the mouseClicked() function. Line 24 “start = !start;” indicates this start or stop of the drawing loop with each click of the mouse. It is setting the variable “start” to not start, meaning that mouseClicked() triggers the opposite of the current state. If start is true, mouse click will produce false start or stop. If at stop, the mouse click will produce start.

Although, I was able to make the animation of the ripple begin with a mouseClick, I faced a huge challenge of knowing where to place mouseX and mouse Y. I didn’t want the ellipse to follow my mouse every frame as shown below:

My goal was to be able to click the mouse to indicate position and essentially leave the ellipse in that place. Ironically, it wasn’t until I wrote some things down on paper that I started to make sense of it all. I realized that I wanted where mouse indicated starting position to happen ONLY ONCE. That was my epiphany. If the mouse indicates the position of the ellipse only once, I could move the mouse and the ellipse would grow from the originally clicked place.

When I figured out that the position of mouseX and mouseY should occur only once and be indicated by the mouse click, I realized that I could create my own variables for mouse x and y position and these should be set in the mouseClicked() function as opposed to the looping draw() function. This changed everything and allowed me to move my cursor away from its initial start, but the ripple would continue to expand on its own from that postion.

Step 4: creating an element that is different every time

This step was made for the random() function. I applied this to the background color. By randomizing just the red and green values but keeping blue the same, the background color varies from shades of pinks, purples, and blues, kind of like water at sunset. See the final program in the p5.js web editor here.

FINAL THOUGHTS:

This program is not complete, but I’ve reached a standstill in my current knowledge. My eventual goal is to have the mouse move anywhere and create new ripples with each click. This would make the program constantly interactive. However, to achieve this I need the mouse click to trigger the same animation over and over again. It’s kind of like I need to loop the loop. But I also need to store each ripple so that it finishes out its expansion and doesn’t disappear with a new click. Initial research has shown that an array would be able to accomplish such a task, but I don’t know how to implement this yet. I would love to come back to this program and add this last element to truly make it what I wanted it to be.

INTRO TO COMPUTATIONAL MEDIA: WEEK ONE

How does computation relate to your interests?

Before thinking about the applications of computation, I think that its important to define 'computation', so here is its meaning according to the dictionary: 

com·pu·ta·tion (ˌkämpyəˈtāSH(ə)n/) noun

1. the action of mathematical calculation.

   • the use of computers, especially as a subject of research or study.

2. a system of reckoning

I particularly like the second definition. Computation is a way of understanding, mainly using mathematical calculation or computers. Makes sense why in orientation ICM was called "fancy programing". To sum this up, computation and computer programming mean to me, that you can be creative, using math as a method or tool for that creation. Tasks can be automated, we can take complicated actions and reduce them to simple logic. It is another way of thinking. 

In my quest to combine art and science, I think animation is a perfect blend of the two. The art of story telling, illustration, etc illuminated by algorithms that produce 3D models, actions, and graphics. Whether for a movie or a simple gif on a website, I can see coding applying heavily in those creations, and I want to learn how to do them. 

This term, I hope to start exploring 3D animation, game design, AR and VR. On a less artistic side, I am also really interested in how to use coding to organize and collect data, i.e. to make sense of the results of an experiment.

____

HW #1: Sketch

For this assignment we had to create any sort of sketch using p5.js. While not limited to 2D primitive shapes, I tried to stay within this constraint. I began by coming up with my idea, which took a while! For things like this, it is often best to just pick something and commit.

I was inspired by the awesome instagram feed of @henrythecoloradodog, which features adorable images of an adventurous cat and dog pair. The cat, Baloo, enjoys laying on Henry’s head. *heart eyes* Go follow!

I started by sketching out a simple drawing of “Cat as Hat”, mocking a rudimentary grid. I picked a point and just took off from there. Usually I am one to really figure things out by mapping it out on paper first, but because the p5.js wed editor has an “Auto-refresh” feature, I found I was able to quickly trial and error. I plugged in numbers, did simple math, and could see the drawing change as I was thinking. My biggest considerations while sketching, were the order of each shape so that things were properly overlapped or hidden, and color choices - the fun part. This is a link to the RGB Color Codes I used.

This feature of the web editor is a great example of strong UX in and of itself. It is so interactive and efficient that I can see the results of code changes instantly. I’m learning how functions work and evolving my image simultaneously.

Below is a screen recording of my process: [UNCENSORED: all typos exposed]

The biggest pitfall for me was that I didn’t really have a great plan for execution. For a drawing as symmetrical as mine, I feel there are probably much faster ways to create identical (but mirrored) shapes. Without delving too deep into more sophisticated functions, I felt I had to compromise my image a lot, or change things because I couldn’t get it exactly how I wanted. I feel like coding should make things easier. Looking forward to repeatability and automation! Bring on the loops!