Recode Week 2: Decode Process
Predict: The code will draw a canvas at the width and height of the current window of the user, it will have a black background, with a rectangle that has no fill but a white stroke with a thin (2) weight. The rectMode has been set to “CENTER” so whatever its position coordinates, it will be at the center of the rectangle. A square will be drawn to change dimensions and positioning with the sizing of the window because the (x,y) coordinates and size are connected by an equation to the width and height values.
Run/Investigate: Rather than dynamically changing, the squares are drawn statically. Looking back, this is because all the lines of code are written under “setup” instead of function “draw” which means the code is only drawn once.
Predict: The code will draw a canvas at the width and height of the current window of the user, it will have a black background, and any rectangle elements’ centers will be set to the middle of the shape, any elements will ave no fill, a white stroke with weight 2. The code will draw a black background on a loop so there will probably be some animation or interaction. The code will generate 400 rectangles at random sizes and positions. It will refresh when you press the mouse.
Run/Investigate: Upon closer investigation and after seeing what the code draws, what was unclear before (the logic of the random drawing of shapes) is clearer. There are 400 squares drawn, and the “if/else” function controls how many of the rectangles are vertical or horizontal by controlling the range of width and height values. If the “random” number from 0 to 10 is less than 8, then the random width value is constrained between 5-25, and the height is constrained between 50 and 150, and flipped if not.
Predict: It’s going to draw a bunch of random lines at different orientations?
Run/Investigate: Because the parameters the line “if (random(10) < 1)” is quite narrow the initial set of statements will have less drawings than the lines after the “else” statement. I’m not really sure what randomSeed(seed) does; searching for it shows me that it is a built in line that starts the random number generation at an arbitrary number, but if I turn it off, it negates the “mousePressed” function and starts drawing randomly generated compositions on a loop. I know that the lines:
let seed = 1
randomSeed(seed)
seed = random(1000)
are all connected, but I’m not entirely sure how. I think that the global definition of “let seed = 1” starts the randomSeed(seed) as randomSeed(1), and then when the mouse is pressed, the seed value becomes something random from 0-1000 because of the line “seed = random(1000)” at the end in the mousePressed function. This means that pressing the mouse will draw a new, random composition 1000 times (replacing 1000 with 2 means clicking the mouse only gives you 2 drawings). Does the “randomSeed(seed)” have something to do with the the looping drawing? If you move that line below the drawing of the lines, you can click a few times before it stops refreshing. I am not entirely sure what this means.
update: maybe because “seed = 1” is defined globally, but randomSeed(seed) is defined within the draw function, so every time the drawing loops, it starts over at seed = 1? I think this is correct.
Predict: The only thing I could predict about this was that it would draw lines, but the “startX = endX” logic was very confusing.
Run/Investigate: I kind of get that the next line being drawn is connected to the end point of the last line drawn, but I still don’t see the logic that makes “startX = endX” and “startY = endY” work.
Predict: This code looks a lot like the previous Encode assignment, with the exception of new variables (tx and ty) and noise and map functions.
Run/Investigate:
Annotate: https://editor.p5js.org/kat_j_park/sketches/OuYPpGSEa
Modify:
This assignment explores introduces unpredictability into our programs by coding procedural drawing rule sets with random functions. Invent your own rules and create a system that as Tyler Hobbs mentions in his talk, Code goes in, Art comes out, “balance[s] randomness and structure so the outcome is unpredictable and surprising but [has] a type of order that we still understand.” Challenge yourself to create something that is distinctive from the examples.
Procedural Drawing: https://editor.p5js.org/kat_j_park/sketches/ZO6Wkreor
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?