Pseudocode, encode, recode

Part 2: encode

Encode 2

Original | Modification

1. Create a canvas the size of the width and height of the window.
2. Make the background color black with opacity of about 200. It should be the first thing in draw().
3. Draw a circle with no fill, with a stroke of about 10, with a radius that is about 1/10 of the width. The position of the circle should be the center of the canvas.
4. move the x position of the circle each frame by using a sin() function that goes from about a 1/3 of the width of the screen to about 2/3 of the width of the screen.
5. The canvas should be adjusted if the size of the window changes (that means all variables should be proportional to that to).

‍

Encode 3

original | Modification

1. Create a canvas the size of the window.
2. Make the background color black.
3. Remove fill colors. Define a variable for stroke weight and set it as the stroke weight.
4. Using the sin() function, change the stroke weight to from around 3px to 35px.
5. Draw a circle at the center of the screen with dimensions of about 1/3 of the width.
6. The canvas and the circle should be adjusted on window change, so all sizes should be proportional to one variable.

‍

Encode 4

original | Modification

1. Create a canvas the size of the window.
2. Make the background black.
3. Remove fill color. Define a variable for stroke weight, set it to be the stroke weight and make it proportional to the screen's dimensions.
4. Draw a circle in the size of about 1/8 of the screen. The position should be set to variables that are changed each frame with a sin() or cos() (?) functions, so that it will move in a circle with a diameter of about 80% of the screen
5. The canvas and the circle should be adjusted on window change.

‍

Encode 5

Original | Modification

1. Create a canvas the size of the window.
2. Make the background black with opacity of about 127.
3. Draw a circle with a radius of about 25px when viewed in full screen on my laptop (but make it proportional to the screen's dimensions). The circle's position should be defined in variables using the sin() and cos() functions (one for x and one for y — this will dictate if its clockwise or counter-clockwise). To this to make the circle move as if it's on the rim of a bigger circle that is positioned in the center of the canvas. That rim's radius should be about 1/10 of the screen's width (but make it proportional!).
4. The canvas and the circles should be adjusted on window change.
5. Set the frame rate to something low like 12. This is to make the animation look jumpy.
6. The angle of the sin and cos functions should increase by like 360 divided by the number of positions we want? — test this! See how many work and in what proportions.

‍

Part 3: ask AI

One question I had from Encode 5 was how do you keep the outcome within the range, in the line where its used to set the positionIndex. I mostly understand it if I "pseudo-loop" it in my head using actual numbers, but I getting a "full" explanation also proved useful here. So I asked chat GPT and got the following answer:

Certainly! In the provided p5.js code, the line positionIndex = round(frameCount / totalPositions); is used to determine the current index in a sequence of positions based on the frame count. Let me break down how it works:

1. frameCount is a built-in variable in p5.js that keeps track of the number of frames that have been displayed since the program started running.
2. totalPositions is a variable that represents the total number of positions in the sequence.
3. The division frameCount / totalPositions calculates a fractional value that changes over time as the frames progress.
4. round() function is then applied to round that fractional value to the nearest whole number. This effectively converts the continuous frame count into a discrete index within the range [0, totalPositions-1].
5. The result is stored in the variable positionIndex, which is later used to determine the angle for rotation in the following line: let angle = (360 / totalPositions) * (positionIndex % totalPositions);

In summary, the positionIndex variable is a discrete index that cycles through the range [0, totalPositions-1] based on the progression of frames. This allows the sketch to iterate through a sequence of positions over time, creating an animation or pattern that depends on the frame count.

‍

Part 4: re/code

So I kind of decided to use this assignment as an opportunity to revisit classes and get better at using them. This was an attempt at creating some sort of animation system; one that could take in keyframes, measurements, scale, rotation and more. It wasn't a very successful attempt.

‍

‍

I know many aspects of this animation system class could and should be further abstracted so that it would be more useful for performing different kinds of animations and tasks. For example, I don't want to have to draw a rectangle for each instance. I consulted with a friend on how to achieve something like that and learned about function overrides (not implemented in the current sketch yet). I also realized that another (better) way of creating an animation system like that would have to be built in such a way that you could specify a frame for each keyframe (for example: Keyframe #3 would happen on frame 120 and have xPos of 50, and yPos of 72), so that the time it takes to move between any two keyframes is not necessarily the same for all keyframes. But, this would mean the keyframes would have to be ordered and not random or else it wouldn't make sense. I do kind of like the random order so I've stuck with that for this assignment.

The loading animation I created is some sort of a non-linear loading bar. While trying different things, I liked how with a certain combination of blend modes and semi-transparent fills, anything that moved on the screen kind of leaves this permanent trail in the background. Similarly to many other loading animations, there's something satisfying about watching it. I like how one geometric shape leaves a trail in the shape of another geometric shape. I think it's satisfying because it does what you expect it to do, but not when you expect it. I chose to have it "jump" between positions because I think it adds realism to the feeling that something actually is loading — like it's not a premade animation, but an actual representation of the loading process that more often than not feels jumpy and a-synchronous.

‍

Another example using the same method but creating a rectangle:

‍

...And another one where the angle of the moving rectangle is changed using the sin() function:

‍

Anyway, I hope I can continue working on this animation system and probably redo it differently. I do feel somewhat comfortable with the basics but I want to be smarter about how I write this code, and be able to create more complex programs that allow for more complex behaviors.