Recode Week 1: Encode Process
Original: https://editor.p5js.org/enickles/sketches/octqJ1ws4
Speculate: black background that is responsive to the window size, a no fill circle with a white outline that is fairly thick moving back and forth horizontally across the screen; the circle does not hit the sides of the window, but stops at about it’s own diameter short of the end of the screen. there is no interactivity.
Annotated/Investigated: https://editor.p5js.org/kat_j_park/sketches/rGI1D-8Tj
Modified: https://editor.p5js.org/kat_j_park/sketches/Usyl3mrCd
Original: https://editor.p5js.org/enickles/full/gjM62bFgK
Speculate: black background that is responsive to the window size, a no fill circle in the center of the canvas with a white stroke that changes in stroke size at a steady rate. the circle does not move or change shape otherwise. there is no interactivity.
Annotated/Investigated: https://editor.p5js.org/kat_j_park/sketches/l2YXKN8Ff
Modified: https://editor.p5js.org/kat_j_park/sketches/ThiADI90Y
Original: https://editor.p5js.org/enickles/full/6DcoacfOj
Speculate: black background that is responsive to the window size, a no fill circle in the center of the canvas with a white stroke that changes in stroke size at a steady rate. the circle does not move or change shape otherwise. there is no interactivity.
Annotated/Investigated: https://editor.p5js.org/kat_j_park/sketches/3yyBmdBas
Modified: https://editor.p5js.org/kat_j_park/sketches/1YMkY2-An
Create a loading icon (aka preloader or throbber) animation with code. Where do you often see these types of icons? Think of all the loading and waiting animations you encounter in your digital interactions, e.g. streaming video, connecting to devices, syncing accounts, payment transactions, etc. Are the icons related to waiting (or wasting) time? What does a loading icon communicate or hide? What aspect of experiencing time on a machine do you want to explore or express?
Metronome Icon:
I created a simple swinging “metronome” for my loading icon. These icons I mostly see when waiting for something on a screen to load that would take an indefinite amount of time (versus something like a download that is usually a bar or some kind of predictor of time left). I think because of the indefinite amount of time aspect, it needed to be something that had a consistent rhythm but was on some kind of infinite loop or repeating pattern. I chose a metronome because when I’m bored I sing to myself, and I could imagine myself staring at the metronome loading icon and singing to whatever “beat” it was on. If I were to get really advanced, I would maybe make a slider that lets you control the speed.
Reflect on the discoveries and challenges you encountered during the exercises. What graphic or animation effects are most pleasing to you? Where did you get stuck, and what steps did you take to troubleshoot? What code-related techniques would you like to explore and practice more?
I really like simple, shape based effects. I usually get stuck on lines of code that “hook” into other lines of code, like variables within variables. It’s a little hard to keep track of everything. To troubleshoot, I usually change things line by line, but when the lines of code all hook together, sometimes just changing one thing or turning off one thing breaks the entire thing so it is not an effective way of troubleshooting. I think identifying the ways things hook together and looking for “chunks” first before breaking things down was helpful. I would just like to practice more in general.