This week I worked with Emily Lin to develop an animating moon sketch. Together we came up with an idea to make an interactive animated moon image. Originally we planned to have the sketch resemble Figure 1.
The sketch would contain three sliders, a moon slider that changes the phase of the moon, a night sky slider that changes the color of the sky, and a star slider that changes the brightness of the stars. Once we got started we realized this was a bit ambitious for a one week project so we decided to focus on a design with just one slider that changes the color of the sky and the phase of the moon together. Then we would have stars animating in the background, without an interactive element. Once we had this plan we experimented with ways to make the moon. We considered making the moon out of bezier curves but ultimately decided this would be too complicated to manipulate once we incorporated the animation. Eventually we decided to develop images of the phases of the moon in Illustrator and load them into the sketch. Sample illustrator images are shown in Figure 2.
Depending on the location of the slider, we could display a corresponding moon phase image using an array of moon phases and mapping that array to the slider. Once we developed this plan we split up the work. Emily developed the star animation and the illustrator files with 100 phases of the moon while I developed the slider and mapped the moon images and background color to the slider. Emily also developed her own slider in order to grasp that concept on her own. First, I developed the slider and mapped the background color to a range that resembled the range of a night sky. This slider toggles the variable ‘dragged’ between true and not true depending on the pressed/released state of the users mouse. If the mouse is dragging the slider, the slider rectangle moves with the mouse. The general concept of this slider was loosely base on this example provided in the syllabus for ICM. Then I used the moon images that Emily provided to tackle displaying the moon phases. I used the function loadImage() to load each image in the preload() function and then displayed the image in the draw() function using image(). Doing this with one image worked wonderfully, however a unique problem arose when I implemented a for loop in order to load all of the moon images into an array. Somehow the size of the images got compressed into a 1 pixel by 1 pixel image while using a for loop. I could not solve this problem alone, so I eventually decided to hardcode just 7 moon images into the file to create a less smooth animation of the moon phases. I loaded each image in the preload() function individually and then displayed the image based on the location of the slider. Since these moon images were not in an array anymore, I did not use the map() function to map the images to the slider. Instead I used if statements to determine which image should be displayed based on the location of the slider.
Once we each developed our parts, Emily and I met to go over our sketches and combine them. Working with Emily was wonderful. We took time to go through both of our sketches so we each understood the others work. After we met, we decided to use a timeInterval() to flash the stars so that they could slow down without affecting the slider interaction. Emily implemented this timeInterval() into our code. The final result can be seen here. Both Emily and I would love to work together in the future to improve this sketch and perhaps add the other two sliders that we originally planned on making.
Figure 3 shows a video of the final program.