Debugging / Unpredictability

Encode

Decode 1:

Original | modification

1. A canvas will be created that is the size of the screen.
2. The background will be black.
3. Whatever will be drawn, it's going to have a white, 2px stroke and no fill.
4. Saving a variable (minSize) that is equal to either the width or the height of the canvas — whoever's smaller.
5. A new variable will be set (amount) as the previous one divided by 30.
6. A for loop will create 29 squares (because the loop starts from 1 and stops at 29). I'm guessing that this is because we're multiplying by i inside the loop and multiplying by zero would basically generate a 0 sized square in this case). The squares will be positioned in such a way that they deviate from the center of the canvas by a specified amount.
7. Each square that is drawn will be a bit larger than the previous one. The squares should all be drawn from their center so they would be centered on the canvas, other than the slight deviations mentioned above.
8. This set of instructions will only run once at the beginning of the program and that's it.

Decode 2:

Original | modification

Ok I'm stopping explaining this like a weird robot, so:

1. This program will create a canvas in the dimensions of the screen.
2. The background will be black (in draw!). 400 rectangles will be drawn, 1 per frame, but not looping so after 400 frames the program will stop. Clicking the mouse will run it again.
3. The rectangles will all have no fill and white, 2px stroke, and they will be drawn from their center pivot point.
4. The rectangles' width and height will be defined randomly but in a way where there's an 80% chance that it'll be longer than it is wider.
5. The position of the rectangles will be a random range between the dimensions of each square as a gap from each edge of the canvas.
6. There is a random seed set in the beginning of the sketch which makes the random results repeatable. But each click of the mouse will generate a new pseudo-random seed.

Decode 3:

Original | modification

1. This program will create a canvas in the dimensions of the screen.
2. Every frame, for a 100 frames, a white line will be created on a black background.
3. All lines will have a starting point of some random small number acting as a gap between either one side of the screen or the other.
4. There is an 10% chance that the line will horizontal, and 90% change it'll be vertical. All lines will have slight random deviations and won't be completely straight.
5. There is a random seed set in the beginning of the sketch which makes the random results repeatable. But each click of the mouse will generate a new pseudo-random seed.

Decode 4:

Original

1. This program will create a canvas in the dimensions of the screen, with a black background.
2. It will draw 40 lines with white 2px stroke
3. Two points (x, y) are set with random values that are within a small distance of the canvas' edges.
4. The first line will be drawn using the two random points.
5. Each line the follows will start from the previous' line end, and get a new random end point.

Decode 5:

Original 

This one works the same as the previous one, except the points are not random, but are generated with noise. I expect it to look quite different — instead of being sharp and all over the place, the points would move in a more "directed" / soft line, with some curvature to it.

‍

‍

Re/code

Ok so for this week I sort of wanted to redo the animation system I started last week. I wanted to be able to specify position, rotation, and scale by number of frame, and have it interpolate between the frames. That was a bit of a challenge to figure out, and had to start with a different mindset than I'm used to... I also wanted the animation class to be further abstracted so that it'll allow me to use whatever shape I want. Ideally it should also have children that have their own animation while being tied to the parent (like moons around a planet if that makes sense?).

Admittedly this whole thing is a bit beyond my abilities but I feel it's a good opportunity to learn more new concepts and to sharpen my skills while I'm still doing fine with the subjects covered in class... So I asked for some help and guidance (thank you Lior!). It was very helpful to think about how to do some parts of this together, having to explain it to each other and raise potential problems or comments. There are a few parts of this code that were pretty much copied and pasted from Stackoverflow as is and that I don't fully understand, like this part:

But I understand its probably along the lines of being a shorthand version of going through all the posKeys, looking at each two consecutive keys, and sorting them, so we should end up with a Map of sorted posKeys. I learned about this other map — the Map() — which is a js class that lets you specify key-value pairs, similarly to objects, only they're ordered so they're sortable (At some point I started watching these videos about sorting algorithms and now I really want to get into implementing and experimenting with something like this). Anyway, using the Map() class essentially allowed me to have keyframes — each specified frame has a value that belongs to it.

‍

‍

Unfortunately I ended up not having enough time to actually create something more sophisticated visually. But it's like I have this tool now, a sort of template, that might come in handy in the future for many different things. I might try to figure out a way to automate instance creation because writing the literal keyframes by hand becomes very tedious very fast. But it does offer a lot of control, and automation would probably cost that. That's something I guess many creative coders face and that I also encountered last week — how to balance the creation process so that on one hand you get to direct it, and make it in your style; while on the other hand a big part (a big advantage!) of working in this medium is actually getting unexpected outcomes, so you also have to let go of some control to allow that to happen. This animation system is definitely more of the "control-freak" side of the spectrum, but I think it could potentially be used to generate unexpected results between different instances or between the different parameters as they all have their own separate keyframes.

Ending with this mesmerizing thing I can't take my eyes off of: