Embedded Files
After Three Line, Oblivion.
屏幕录制 2025-04-29 222712.mp4Description:
For my Project B, I designed an interactive interface where users explore connections in a data stream to reveal images. Once three images are selected, a short three-line poem is generated, and then both the poem and the images fade away. In this prototype, I focused on the core mechanic: when the mouse hovers over a connection for a few seconds, an image appears; if the mouse moves away, the image disappears. However, if the image is clicked before moving the mouse away, it becomes selected and stays visible. After selecting three images, no more can be triggered. A few seconds later, all selected images disappear together, and the user can start a new round of exploration. I’ll be adding more image and text elements later, but for now, the framework is already in place.
Coding:
drawBigCircle() makes the three circles retain on the canvas. After all 3 circles are fixed, the circles will stay for 15 seconds and then gradually vanish. After that, the process repeats and the user can click 3 times again.
The most difficult part is storing all the points and lines separately and making the circle only appear when the cursor doesn't move and is close to a single line. To solve this, I implemented another class (MyLine) so that I clearly iterate the points when forming lines, but iterate over lines when checking the distances.
Findings / Lessons Learned：
console.log() outputs really help to clarify what went wrong when the code logic itself consists of many steps. Classes make multiple instances of an object and its movements easy to manage and transfer to a larger project. Some simple effects combined together, such as the random movements of the dots and the connection between them when they are close, can create eye-pleasing artistic effects.
Reflection Prompts:
1. Technical Approach
In this mini project, I used two main classes: MyCircle and MyLine. Each circle moves slowly and randomly across the screen, bouncing off the canvas edges. The MyLine class connects circles that are close to each other. When the mouse hovers near one of these short lines for more than 0.5 seconds, a white circle slowly appears. If the user clicks while the white circle is fully shown, the image gets "selected" and stays on screen. When three images are selected, a timer starts, and after a while, they all disappear together. I used variables like hoverStartTime and vanishStartTime to control the timing of these interactions.
2. Next Steps
The next step is to connect the selected positions with real images and generate a short poem when three are chosen. I also plan to add a fading effect for the poem and link the positions to different feelings or themes.
Page updated
Report abuse