Final result: sketch

—

This week’s more open-ended assignment is to use functions for either a.) re-organize my code from a previous assignment or b.) start anew. I debated between the two options and decided I’d attempt to do 2 ideas, one of which is based on the previous week 2 assignment, but it will not be having the same design or interaction. Since, I made a button and not a slider or knob for last week’s assignment, I also really wanted to try to figure out those interactive elements for this week and integrate it into 1 of my 2 ideas.

Love coming up with ideas and mocking them up!! Below are some sketches of the 2 ideas I’d like to explore.

Idea 1:
This concept is based on the clock sketch from week 2. However, instead of clocks I will be using letters that rotate individually but are placed in a formation of concentric squares. This idea utilizes the same elements, such as rotating each object on its own axis (using push, pop, translate, angle). This sketch will just have a couple more parameters (i.e. the letters must loop in a square formation). The left image below is a static illustrator sketch of what I am hoping to achieve.

Idea 2:
Before moving to NY, I used to go on hikes over the weekend. During these hikes I’d take photos of the insects and fungi I’d see. I’m hoping to make a wallpaper of mushrooms. I also plan to integrate the mouseDrag() and mouseRollover() functions (that we learned from last week’s assignment) so that users can either change the scale or change the placement of the mushrooms. Below is a quick illustrator sketch of this idea.

Okay, so going to get started! Let’s aim for the best and see if I can actually execute these ideas properly in code!

—

Idea 1:
a.) I figured out last week that the coding is more manageable and less daunting when I tackle one interactive part at a time. So, I first started out with trying to get one individual letter to properly turn from it’s center. Below is the result of that.

 

b.) I managed to use a for loop to have a horizontal row and vertical row for the text. However, this only allowed for half of what I wanted. Also, my code got very long when I had a for loop for each of the 5 letters (reference code: https://editor.p5js.org/elinsterz/sketches/HkTsToCtX). I think there must be a more simplified code I can use.

 

c.) Initially, I was running into issues trying to get the “H” to loop on all four sides, but I realized my second “H” was not looping in the right place. I had miscalculated, I think. So glad that it is figured out, and I can just repeat this code for the “E, L, L, O”!

d.) Great, so now all the letters are looped into concentric squares (see below)! Next step is to add a button in the middle that changes the black background to white (and vice versa for the text) when it is clicked. I thought of this idea as I was working on the sketch, so it’s a little different from what I mocked up originally. But, I wanted to add on this extra interactive challenge for myself, since there is nothing interactive about this current rotating “hello” sketch.

 

 

6.) I started a new document to try out the inverse color button for the center “hello” text. I struggled at first to understand why it wasn’t working, because my code was doing the exact same thing that the Github “button switch” code was. Eventually, I figured out the the variables have to be in the function mousePressed() as well. I keep forgetting that each function’s variables are for that function only. I got the button to inverse the colors in the end. Now, it’s time to combine this code into the other one.

 

7.) I was able to combine the two codes fairly easily. Also, realized that I think it was boring having all the letters rotate at the same angle and speed. So I decided to make every other letter go in the opposite direction. I think it is more interesting this way, but maybe it’s just my personal preference (not sure which I like better).

 

 

8.) Last and easiest step… I want to change the text to a cooler font. I think I’ll try to upload a open source typeface for this one. Below is the final result with a serif typeface and lower case letters! Personally, I prefer the serif, I really am not sure why I do. Perhaps it’s because it makes this sketch feel less digital and more unexpected?

Final code: https://editor.p5js.org/elinsterz/sketches/rkzj_z1qm

 

—
Idea 2: 

a.) First step I did was review Eva’s moon slider code from last week, to remember how she loaded in the images for the animation. Also, I reviewed this Click and Drag code from last week’s references.

b.)  Next step is separating out all the mushrooms as individual svg files in Illustrator.

c.) Then, I decided to just try uploading one mushroom image before uploading them all into the folder. This was where I struggled. I had saved them all as svg files and for some reason it just wasn’t working when I did that. It kept showing up as “loading” in the canvas area, so eventually I gave up and just made them all png files. And this seemed to work (yay!). Below is an example of the working mushroom image in the editor.

c.) Next step is trying to make this one mushroom draggable, which I used the github code for. I tweaked parts of the code so that the image is the one being dragged. It worked! I also made the code that relates to “dragging” a function called “mouseDrag().” Full disclosure, I didn’t come up write the code/ think of the solution for this dragging function. I just edited it to make it work for me. Having this reference to base it off of definitely helps me better understand it though (I don’t think I would have been able to come up with it by myself unfortunately). An example of the draggable mushroom is below.

 

d.) Now, I’m going to try to make all the mushroom images draggable. I think I need to use the for loop to help make a nice scattering of mushrooms. I’m running into the issue of the mushrooms not being able to be draggable by itself. The two mushroom that I have are being moved at the same time. I need to troubleshoot this.

 

e.) So, I’m really having a hard time making each mushroom draggable by itself. I’ll be going to the help session to figure out how I can make it not all drag together. But in the meantime, I’ve loaded up and arranged the mushrooms how I’d like them to be. See example below.

 

f.) Added the text, but I still was not able to get each individual mushroom to be independent from the rest. I tried various solutions, such as making each mushroom it’s own function. I’ll be reaching out for help at the ICM help session, so hopefully we can solve it there. For now here is the code that drags all the mushrooms together: https://editor.p5js.org/elinsterz/sketches/rJceunk5X

g.) Went to the help session and worked with one of the residents, Jasmine, but by the end of the help session we could not come to a solution that worked. She was SO helpful but there’s still something wrong. Here is the solution we came to at the end: https://editor.p5js.org/elinsterz/sketches/rJG741ecX
We tried to tackle it one mushroom at a time instead of trying to do all 13. There’s definitely still work to be done on my own, but for now I’ve scheduled office hours with her on Wednesday to go over this code some more.

I think tonight I’ll try to troubleshoot the code again and rearrange using classes. I hope this will solve it. I’ll update this post with what happens.

—

Reflection

It is always so fun to come up with sketch ideas that I want to make come to life. The hard (yet rewarding when it works) part is usually with making it come to life. For the “hello” piece, I remember really enjoying the troubleshooting process. For this sketch, (maybe because I was more calm and working in a super quiet area) I was more methodical with trying to figure out what’s wrong. However, with the mushroom sketch, I really don’t think I was being smart about how to organize and go about fixing the problem. I was hoping to get the drag function to be applied to multiple objects, and it ended up being less simple than I expected. As usual, I need to learn to be patient and logical in order to think of smart solutions. There are tons of new code that we are learning every week so I’m so glad that we have projects that help us to retain this new information.