Final results: sketch 1 , sketch 2

This week’s project is to create a sketch in an object-oriented fashion.
Here are the steps to take for this project:
1. Make one single object with just variables.
2. Put one or more functions in the object.
3. Try manually making two objects.
4. Duplicate the object using an array and make as many as you like!

—

After doing the quiz and watching the code train videos over again, I’m feeling a little more comfortable with the new syntax and concepts. So, I’m going to start on the assignment! I stumbled across some beautiful inspirational graphics this weeks that I wanted to recreate in object-oriented code and make interactive.

Below are the screenshots of the 2 inspirational images I found online and that I will try to make my own interactive version of.

The idea for the left is to create a grid of circles with rotating lines revolving around the center. More lines can be created by clicking within the circle. When mouse is dragged the speed of the lines will increase.

The idea for the right is to create a grid of rectangles with moving lines of different stroke thicknesses. When you click in a rectangle, a new line will appear in that rectangle. When mouse is dragged the line thickness will change

—

Okay! There seems like a lot of parts to this series, and I’m not sure how it’ll come together, but I’m excited to start working on this piece by piece and learn a lot via practice!

Idea 1:

a.) Wrote/sketched out a plan for myself as a way to help me understand the specifics steps to tackle and what order to do them in.

b.) First, let’s do the rotating radius within one circle. For some reason, I set the variables of the radius to be half the diameter, but it was still going a little over the circle amount. So, I had to make the radius= d/2.8 in order for the line to fit the circle exactly. *Strange! why is it that I had to make it d/2.8 and not d/2 to get the radius? After creating one rotating line, I made a for loop to create multiple rotating lines. This works but I am now wondering, should I be making an array for the rotating lines? *What is a good indication of when to use a for loop and an array?

Code here: https://editor.p5js.org/elinsterz/sketches/SJU_m-697

 

c.) Next step is to make this circle + rotating lines into a class/object with constructor. This required me to go back to the tutorials / in-class code. Eventually I got where I needed to be and was able to create a class and put it in it’s own file. Instead of separating out the functions to be move() and show(), I found that it made more sense (for me) to create a class for the circle and a function for the lines. I also decided to call the object a “clock” (even though it’s not actually functioning like one) and the other “hands”. I also decided to create 2 clocks just to try and pass different parameters into the argument.

Code here: https://editor.p5js.org/elinsterz/sketches/HJ2-4fTqX

 

d.) Next is to make the interactive function of adding a rotating line in the circle when the mouse is clicked on that circle. I created a function within the clock class that determines if the distance between the mouse and the center of the circle is less than the radius, then call it true otherwise false. I then created the function mousePressed() in the draw to indicate when the mouse is Pressed and when the mouse is on the circle. It was hard to get the line to be added, so I first had the code do “console.log(“clicked!”)” to make sure the code was at least working.

I’m really struggling to get a ‘hand’ to be added when mouse is clicked! I’m trying  “push.Hand()’ and have made an array for the hands, but I’m not sure why it’s still not working.

After trying many different solutions, I reached out to wonderful resident Alejandro Ortiz for some help, and realized what I had done wrong. I was trying to push a new line into mouse clicked by using the same function that I used to create the rotating hands in the circle. What he helped me realize is that I should’ve made another function and variable for adding in the new line, and make an array for specifically the new hand. Then push the new hand into the array by writing a for loop in the draw() and the ‘push.handR()’ in the mousePressed().

Code here: https://editor.p5js.org/elinsterz/sketches/ry2XHH69X

 

e.) Struggling to create a grid of these circles using an array function. I thought it would be easy, but it’s unlike the tutorial videos. It is not just placing circles in random locations. My technique of trying to repurpose the Coding Train array codes for this project is not working out. I’ve decided to make a separate sketch that just creates a grid of circles using array, then I’ll try to apply that to my clock sketch. Here’s the test code for that using an example from “Make:Getting Started with p5.js.” After a while of messing with the above test sketch I decided to switch gears, and google to see if there’s any one else who has done this. I found this coding train video and am hoping  it will solve my problem!

That making a 2d array video was helpful, I followed along and ended up with this code: https://editor.p5js.org/elinsterz/sketches/r1XzlU0cX which is similar to what I’m hoping to achieve. So now, I’ll try and apply the concepts in this tutorial code to my own.

f.) Okay, so went to the ICM help session, and figured out with the help of amazing resident Jasmine Soltani how to tackle creating a grid using arrays and nested for loops. I realized I was on the right track with using that 2d array technique from the coding train tutorial. The only thing is I didn’t need to make a function for the 2d array. It was just a matter of making 2 for loops with an array to achieve the grid. This worked great, and the code now looks like this: https://editor.p5js.org/elinsterz/sketches/SJ02W3R9X

However, I’m not understanding why the code breaks every time I click it once.  See video below:

g.) Next step, is now to get the code to not break every time I add a new line to a circle. We figured out why it was not able to read the code after clicking into the circle just once. It was because it was adding a number to the array index and the function wasn’t able to read this new, larger number. In order to accommodate for this we decided not to have the interactive function be to add an extra line. Instead when mouse is clicked it changes the speed and angle to a random amount between 2 variables when you click in a circle. This step took a lot of console.log -ing. Code here: https://editor.p5js.org/elinsterz/sketches/B1ICMR0cm

h.) Lastly, I made some last minute style changes: the light gray was too subtle so I made it b&w, I decided to have 5 instead of 3 lines. This is the end code without all the commented out code for troubleshooting purposes: https://editor.p5js.org/elinsterz/sketches/B1ICMR0cm

Here is the final piece:

 

Last thoughts: I do think I got stuck WAY too much when I tried to create a grid with arrays, although I do think that I am better understanding classes and constructor (and can say that I figured out how to organize that part myself). This was both good and bad I think. Good – I learned a lot just from seeing how Jasmine troubleshoots (printing in console and narrowing down why a line isn’t working, even counting out the math in a loop). With arrays, I realized I still feel uncomfortable using it. Bad – I relied too much on the problem solving skills of other people, and didn’t come up with my own solutions. I think I still need to practice how to troubleshoot better. I’m happy that I have one more sketch to try, because this time around I don’t want to resort to asking for resident’s help. Hopefully, with this first sketch as practice, I will be able to better approach and better solve any issues.

—

Idea 2: Work in progress (aiming to be ready by Tuesday Morning)

a.) First things first, wrote a list of items to tackle for this sketch. See list below:

b.) This idea also reminded me of the quiz from a previous week with the vertical rectangles. So, instead of making the moving stripes first, I started by creating the for loop for the grid first. Here is the result: https://editor.p5js.org/elinsterz/sketches/SkZJMJMsQ 

c.) Then, I moved onto the moving stripes within one vertical rectangle. By complete luck, I saw Shiffman’s code in the “Objects and Arrays” section. Having this as a reference was incredibly helpful. Although before stumbling across it, I did try to write a class for the stripes from scratch. In the end, I managed to rework the code to have it fit my sketch. Here is the sketch for that part: https://editor.p5js.org/elinsterz/sketches/HJzSC4zo7

 

d.) Struggling to have the moving stripes be in a grid, because the stripes are already in an array. What I think I need to achieve is to create an array (or for loop?) for the stripes array to live in. Right now, I just have a for loop() for the grid of rectangles, but I need to get the column of stripes into this grid. I’ve been trying different methods, such as making an array with a class, but I’m not getting it right. Video below and code here: https://editor.p5js.org/elinsterz/sketches/HJy_9szi7

 

e.) After trying out multiple things, I realized what I needed was the 2d array of processing. There needed to be another variable to move the x position of the moving stripes class. Once I did that I was able to create 10 independent columns of the class. Another time, I will try to add an interactive function but for now this is what I have.

Final code is here: https://editor.p5js.org/elinsterz/sketches/H1Irt0MiX

Below is a video of the result:

 

—

Reflection: 

For some reason this week’s topics were much harder for me to grasp.I don’t know why this week feels different and why I was not getting it faster. Personally, I thought we were introduced with so many new terms (i.e. return, intersects, push, class, this.) that I just have a hard time remembering where to put what and when to use what. Even though I used arrays in my homework, I still have many questions and uncertainties regarding arrays. However, I’m very happy that we are learning how to organize our code in more systematic ways!

Thank goodness for the ICM help sessions, for the resident office hours, and for an extra week to soak up the information. Of all the weeks since we started, this was the one that I made the most use of the ITP community and residents. Also, very thankful for the quizzes. They really help me realize if I’m getting the content or not, and I learn a lot through the process of trying to answer them.

The concepts make sense (as in, when I read the code it is somewhat understandable), but the hard part is actually when I start to write my own code and try to apply these new concepts. I need to keep re-watching these videos, read more of the book, look at all the github example codes, go to more help sessions. I don’t want to be stuck and I would like to be a better troubleshooter; just have to push through and hopefully at some point I’ll find myself writing code from scratch and not having to constantly look at other code for reference.