Week Three Documentation

Dana and I met up on Thursday to plan out what we were going to create for our collaborative sketch. We decided to create a control panel on the left third of the screen with a human face filling out the rest. On the control panel, we would create four interfaces that could change aspects of the screen. We wanted to change the image’s mouth from happy to sad, we would create a slider to change the length of the nose, a button to generate freckles randomly in a fixed zone across the face’s cheeks, and a button to set the eyes into “Disco Mode,” which would make them behave in erratic ways. For division of labor, Dana would tackle the eyes and the smile, and I would do the nose slider and the freckle generator. We got to work with plans to meet up on Sunday.

I started with what I assumed would be the more difficult of my two tasks, which was to create a slider. I knew that I needed it to move between a range along the y-axis that aligned with a visible line, I knew that I needed it to become “active” when the mouse hovered over it, and I knew that, once clicked, it would need to move along that axis along with the mouse. I used “if” statements with the mouse position to activate the slider, and a “mouseIsPressed” if statement to make the sliders y position align with that of the mouse, and a couple more if statements to stop the slider at the top and bottom end of the line, with a “mouseReleased” event to let the slider go. I then hooked up a variable to the size of an ellipse as a way to test this new slider that I had written.

Screen Shot 2018-09-24 at 10.47.38 PM.png
Screen Shot 2018-09-24 at 10.47.29 PM.png

Great, this is all going pretty smoothly so far. Interestingly, when I met up with Dana on Sunday, I saw that she had a completely different method for making her own slider. Once her slider was activated, it tracked the change in the mouse position (as opposed to just mouseX or mouseY), and used a constrain command that I didn’t know about to keep it on its track. It was kind of fun seeing a different way of accomplishing the same thing.

The second task, that of creating a button that, when pressed, would generate a freckle in a random location, was where I got stuck. I knew kind of how the mousePressed event worked (as opposed to the mouseIsPressed conditional statement that I used for the slider), but it took me a long time of playing with it and combing through the Coding Train videos to get to a point where I could actually use it effectively. I don’t know why this one was so much harder for me to get, but it just wasn’t clicking for me, so to speak. For really the first time in this class, I felt like I had hit a wall that I couldn’t get past.

By the time it was time to meet back up on Sunday, I had my working slider to control a variable that would eventually turn into our cartoon person’s nose, but I didn’t have anything for the freckle generator that we needed. After an hour of coding together, it became clear to me that I wasn’t getting anywhere with it. We decided that Dana would create her sketch first while I kept working on my problem, then send it over to me when she was done.

So I sat down and started watching some Coding Train. I feel like I learned a lot, but nothing that exactly would get me where I needed to go. I’m pretty sure that there’s a video just past where I got to in it that would have had what I needed, but I just ran out of time before I could really figure it out.

Screen Shot 2018-09-23 at 8.05.24 PM (2).png
Screen Shot 2018-09-23 at 8.05.24 PM.png

Dana sent me her part of the code on Sunday evening, and I got to work adding in my parts the next morning. I copied her code into a TextEditor file so I wouldn’t destroy it, then started carefully copying my code for my into the project.

Screen Shot 2018-09-24 at 9.52.34 AM.png

I copied everything in pieces, making sure that each piece still worked as I went along. I then took out the ellipse and attached the slider variables to the position of one vertex of the nose.


Looks pretty good. Then for the “Frecklifier,” instead of having the button create one additional freckle each time you hit it, it just has the ability to create one randomly placed freckle each time the code runs.

Screen Shot 2018-09-24 at 11.14.23 PM.png

Which I’m calling a moral victory. I think the actual solution for what I’m trying to do involves splicing an object into an array every time a button is pressed, which is a little past what I can do right now. Ultimately, the part of this that I thought would