WEEK 1: PRELOADER

SKETCH FOUND HERE

My original idea is to use an icon of a flower in which the petals expand and then retract.

I ditched that idea almost immidietely. Using some of the code from the 5th encoding excersise, I played around with color & background transparency to get the first iteration of my preloader. I don’t like how clunky it looks - it’s not smooth like I want it to be. (SKETCH)

I decided to change the shape from a circle to a square, and set one of the corner points to be the origin point so it rotates around the center of the screen. I like this more but I don’t feel finished with it.

I want to play around with the speed that the squares seem to move in a circle, but I am having trouble with the % part of the code. I know what the terms mean individually but can’t wrap my head around how it’s playing out here.

Update: I figured it out. I wrote outwhat the code is doing in plain english, and saw that it was only increasing the counter variable when the frameCount was an even number, which it why it wasn’t moving smoothly. Once I took out that if statement, it ran smoothly. (SKETCH)

I still didn’t like these and decided to try something different. Using the code from the encode 2 example, I built a new preloader that has 5 rectangles that expand and retract. This was helpful to understand what each line of code in the example was doing and what its purpose was. I like the smooth movement of this one and am happy with the final result. The hardest part was keeping my variables organized and figuring out what was the right height for each rectangle so they were evenly spaced out. 

ENCODE 2

ENCODE 3

ENCODE 4

ENCODE 5

SPECULATE
- Resizes for canvas width & height
- y = height/2

QUESTIONS AFTER REVIEWING CODE
-  let x = map(sin(angle), -1, 1, xStart, xEnd); ???
- why “angle”?








SPECULATE
- Adding to stroke width with every frame using variable
- Set max stroke weight, once reached then subtract

QUESTIONS AFTER REVIEWING CODE
-   let amount = sin(angle)/2 + 0.6; ???
- why do we need to use sin(angle) for this?





SPECULATE
- circle x & y change with every frame
- stroke transparency changes?

QUESTIONS AFTER REVIEWING CODE
-   Did not expect to use translate for this
- why do all of these use minDimension? I get why it’s used here (I think) but what’s its role overall?




SPECULATE
- draw circle with specific level of transparency 
- transparency starts at max level, then decreases 

QUESTIONS AFTER REVIEWING CODE
- DId not expect to use rotate - would this work to just draw each circle at specified points to create the circle shape?