Final result: sketch

—

Process:
For this week’s project to work with more rule-base animation, motion and interaction, and to try making a rollover, button or slider from scratch; I teamed up with Eva! We started out by first discussing potential concepts; we both liked the idea of trying to show the phases of the moon and recreate the night sky. The elements that we decided would be changed as you dragged the slider: 1.) the different phases of the moon; 2.) the sky would gradually get lighter, 3.) the brightness of the stars and # of stars would increase.

Below is a storyboard of the sketch that describes all the parameters, sliders, and visuals we were trying to achieve after our initial meeting.

Initially, Eva and I  thought the moon phases would not be too difficult to recreate. Eva had mentioned trying to solve this by overlapping a shape that would mask parts of the moon circle. But as I was sketching the storyboard on illustrator, we realized it would not be that easy. These were not perfect arcs that we could work with. We tried to think of different solutions (i.e. bezier curve, this html jquery plugin, etc). Thankfully we discussed with our professor and she pointed out an image load function that would allow us to make something like an animation for the slider.

Since Eva is more experienced with coding than I am, she was up for the challenge! It’s so great, because with this project I was thinking I’d have to change the concept to match my skill level (like with the last project). But Eva was ready to tackle the task of  coding the animation + slider element.

So as she worked on doing the complicated moon phase, I worked on trying to create stars in the background using an algorithmic design with simple parameters, and not just use random (). I ended up using the for loop () function. I was however having trouble with making it look random with the for loop(), therefore I played around with different sizes and opacity levels to create the look of randomness.

I wanted to make sure I learned about how the interface elements worked, so I made a separate version (before Eva and I met up to combine our codes to one) that tries out a different concept than our storyboard. My practice interface element version has a moon/sun act as a button switch. The sun is a button and when you click on only the sun, it’ll change to be the moon and the background colors will change to go with it. I was trying to create a slider that also adjusts the intensity and # of the stars, but I was not getting it. I am going to ask during the help session and just spend some more time on doing this star slider/knob.

Here is a version of the star patterns that uses the for loop and has the sun/moon as a switch. https://editor.p5js.org/elinsterz/sketches/SkSMRYXYQ

I wasn’t happy with this one’s star pattern. I didn’t like using opacity for this design, but that worked the best for using a for loop for the stars.

For my personal sketch before meeting up with Eva, I just decided to embrace the grid like structure of the stars and just have it as a design element. I think I’m happier with this below version (for the stars) than the above. https://editor.p5js.org/elinsterz/sketches/Sk0PS-VFQ

It was great when we met up to share our progress on Saturday! Eva shared all the code that she had written for the moon slider. She also shared all the troubleshooting she had to do to get it to work, which I really appreciate! It is amazing to be partnered with someone who is both willing to explain and is good at it! So I think I understand the concept of how the images were loaded, though I have yet to try it myself and practice. I also think I understand the basic idea of why she had to hard code the images in (because of a p5.js bug), instead of being able to use a loop to call the different images each time. I shared my versions and my for loops code for the stars; however, we decided that the stars still looked like they were on the  grid too much. Therefore, we just wrote a new version that uses the random function. I then hard coded in some static stars in the background so it didn’t look to empty.

Here is our final version after we combined and worked on it a little more Sunday! 
https://editor.p5js.org/elinsterz/sketches/rkmI7jHFm

—

Reflections on this week:

I am especially grateful for Eva and how she has been patient and kind enough to walk me through her steps. I’ve learned a lot just hearing about how she troubleshoots an issue and her process for coding. It’s been wonderful working with her and I hope we can continue working together in the future.

Though the final result at the end of this week was not exactly what we had mocked up, I’m hoping that we will continue to build out all the functions we had imagined. If not in this course then at least during winter break. We think this could be a really fun series to work on and to help us (or at least me) practice! Overall, I really enjoyed this project and getting to touch upon interface and more interactive elements!

To be honest, this week I spent much more time trying to figure out the solutions for the quiz that I didn’t work on the assignment as much as I wish I had. I do think that solving the questions did help me understand the knobs and sliders more. But I will want to do more exercises and personal sketches that utilize the complicated knobs and sliders.

The quiz questions were extremely challenging for me, but they were so great for testing my knowledge and getting me to better understand if statements, for loops, and booleans (which I specifically still need to practice a lot more of). Throughout the process of trying to answer the questions, I’d watch the Code Train videos over and over. When I would think I understood it, I would try to solve a question and realize that I actually didn’t quite understand how it works. I also notice that we are starting to get into the parts of coding that require more problem solving. This is all exciting, fun, and fulfilling when I actually write a code that solves the prompt; however, I can tell that I’m working out a brain muscle that’s not used to being used. It’s amazing that I get this opportunity to practice and push myself with code every day. I just have to accept that it won’t always be easy and that certain coding challenges will take me longer than I expected. I’m eager to keep practicing so that I can be faster , smarter, and better at this.