Week 1
Pre-loader Animation
The pseudo code approach I took to start was writing down the idea in plain text and then made a quick drawing on illustrator to give myself a visual example.
Pseudo Code:
Black background the fills the window screen
white circle falls from the top and fills a portion of the window white
circle with be white, on the smaller side, and maybe attempt to make a fluid looking animation (bounce or smooth transition)
screen fills up after six circles fall
to reset, the same thing will happen but in reverse black circles that fill the screen back to black
After trying to make the above work smoothly I came up with another idea that I decided to pursue. I wanted something on the funner side and that mimicked the DVD logo pre-loader. What I came up with was an astronaut bouncing around in space while loading. (This was built off of an ICM assignment I did)
Pseudo Code:
Image of space as the background, always filling the window screen
An image of an astronaut will float around
Every time the astronaut touches an edge the word “loading” will appear
Encoding Exercise
Observations: Resizes with window adjustment, moves between 1/4 to 3/4 of the screen (does not move to the end of the screen), stays in the same y
Was unable to figure out how to not hardcode the initial “let x = width * 0.25”. I kept getting an error and had to code a number instead and that would not work with the window readjustment. I still do not understand why I was receiving that error.
Observations: Circle resizes, uses windowResized again, most likely the use of angle as a variable, stroke weight animates by the stroke adjusting in thickness
What is the purpose of using ellipse over circle?
How does min work?
Observations: Circle moves in a circle, resizes based off window, circle has a trail behind it, some sort of delay perhaps in the draw function?
the fading is due to the speed of the movement
circle moves with the use of translate
Observations: Similar to encode 4 except the translation is faster so there is not a blurry tail but each circle can be seen individually, the color fades from white to black as it moves around the circle
the code for this one gave me a better understanding of the translate
“let angle = (360 / num) * (counter % num);” the math of this is confusing to me
