12.R Final Project Prototyping

“Code + Time Visualization” — Prototyping

Link to my Code

Demo

Fabrication

1. Creating Webpage

        Firstly, I created the title using HTML and a p5 canvas with window width and window height:

        To eliminate the white border, I set the margin of the title to 0 and adjust the canvas’s position using canvas.position and canvas.style:

        (The white rectangle is a pattern I drew in the draw function)

2. Creating Volume Rectangle

        First, I defined an interaction range for mouseY position and created a rectangle whose position is in accordance with mouseY. The rectangle will only appear when mouseY falls into the interaction range:

        Then, I loaded the pixels and used pixel arrays to make the rectangles look like sands. Below is an attempt of using sin function in pixel’s alpha value:

        Since the effect was not satisfying, I also tried to randomize the alpha values and sizes of the pixels:

        But due to the regular distribution of the pixels, the manipulated rectangle didn’t resemble the sands. So I decided to use a solid rectangle instead.

3. Constructing the hourglass:

        I drew the hourglass in Procreate and exported it as a PNG file with transparent background. Since the rectangle is drawn from the corner and its height is fixed, I increased the length of the hourglass image to hide the rectangle when the mouseY value is large.

        I loaded the image and adjusted its position and size to make it fit the rectangle:

 

        I then drew the rest of the hourglass and applied different colors to the rectangle. I used another if statement to delimit the interaction range of mouseX: 

        I also added texts to indicate the activity’s name of each hourglass:

        Next, I mapped the mouseY value to the 0-24h time scale and displayed it above the hourglass. Below is a failed attempt due to wrong mapping:

        And the final version:

 

4. Fail to Freeze the volume and record the data when the mouse is clicked

        I wanted to use lists to store the data at first:

        I defined a lot of variables and the data management became very complicated, so I used dictionaries to store the inputs instead:

        Oops, it’s not the correct format. This one is:

        I tried to freeze the volume using a boolean value and dictionaries manipulation:

        But the volume still changed when the mouse was clicked. So I drew a still rectangle outside the if (freeze == true) statement, hoping that there would be two rectangles when the mouse was clicked — one moving and one still:

        I tried to use OOP to reconstruct the scene so that I can freeze the rectangle easily. But during the process, I found that I couldn’t store the user inputs if I used OOP to draw the rectangles. I’m still figuring out this problem.

Reflection

        In this week’s recitation, I prototyped the most interactive page of my final project. I practiced embedding js canvas on a webpage and integrating the page with the HTML title. I also successfully create certain visual effects and interactions (mouse movements and hourglass construction). However, my goal is:

1. when the user moves the mouse over the hourglass, the volume rectangle will change according to the mouseY position and a text will indicate the number of hours.
2. when the user clicks the mouse, the volume rectangle freezes, and the number of hours will be stored in the dictionary.

        And I encountered the dilemma:

1. I failed to use a variable “freeze” to freeze the rectangle upon clicking.
2. However, if I use OOP, I cannot store the inputs in a list or a dictionary.

        I’m still trying to solve this problem and make progress on my final project.