Sketch 04: Refactoring an Early Project

This week I focused on revising my first sketch to make better use of objects and functions. I maintained the original premise of drawing a number of different shapes with different colour and size properties, but changed how variation was determined and how the shapes were organized on the canvas.

Two simple functions make up the code: one which determines the shape’s visual attributes and a second function that actually draws the shape. The first function (configureShape) uses a series of restricted random calls for the properties and then reassigns these values to the shape object. The second function (drawShape) plugs these values into either ellipse, rect, or line functions and draws them to the screen.


Press “R” to restart the sketch and produce new confetti

code

Beyond this, I was interested in storing the shapes and then revealing them in different ways. Although not ideal, each shape is drawn individually, sequentially, and then added to an array. Pressing “c” shows all the circles, “s” reveals the squares, “a” shows all shapes, “r” resets what’s shown as well as the background colour. Lastly, pressing and dragging the mouse up and down on the canvas reveals individual rows.


Press “c”, “s”, “a”, “r” or click and drag up and down

code

With this second iteration, I couldn’t get it to work with the crosses. I’m not quite sure why they were behaving differently but hope to dig into it.

Sketch 03: An Animated Loom

Image from Etsy (https://www.etsy.com/listing/59927545/weaving-loom-kit-for-hand-weaving-oak)
Image from Etsy (https://www.etsy.com/listing/59927545/weaving-loom-kit-for-hand-weaving-oak)

Working with Cristobal Valenzuela, through collaborative coding we attempted to make a digital loom.

To kick off the project, we worked side by side, both writing (and breaking) code that resembled a loom. Together we were able to generate the vertical threads and have a dashed line draw itself across the screen as if it were a piece of thread. From there, we decided to see where each of use could take this building block.

My first iteration focused on replacing fixed numbers with variables to allow for adjustments and making the thread turn in the opposite direction when it started a new line. Using the line() function caused some glitchy behaviour around pixel alignment. I had to add in a bit of “calibration” so that as the thickness of the vertical loom elements were changed, the length of the dash was slightly adjusted more than what mathematically seemed correct (i.e. adding 0.5 or 1.5 pixels). When discussing with Cris later, he mentioned that he had the same problem and solved it by drawing the thread with rectangles rather than as lines.

(link to code)

The other component I focused on was adding interactive sliders for users to control the colour of the thread.

As I was working through the code, it was interesting to see the loom restart with every adjustment. However, I think it would be fascinating to build in a degree of “memory” to the system. Each time a user encounters the interactive loom, it’s weaving based on the previous user’s adjustments. This history of multiple changes would be evident by scrolling over the tapestry as it would continue forever—infinite scroll at its best! When no one is “operating” the loom, it would continue to keep weaving and weaving based on whatever state the last user left it in. Although I’m not sure technically how to achieve this, I’m quite interested in this idea of building up a visual artifact of many users’ past interactions.

Sketch 02: Slit-Screen

Photo by James Guerin
Photo by James Guerin

Inspired by slit-scan photography, I wanted to recreate this technique but incorporate a level of interaction. By dragging across the trackpad, I imagined a similar “stretchy” effect being created with an image. The finished sketch is embedded below:

Press r to reload a new image, h and v to switch between horizontal and vertical slices. Link to code

As the cursor moves across the image, slices of the image are copied and then “pasted” back on top. Pressing “h” or “v” toggles between the horizontal slices and vertical slices respectively.

I also developed an iteration that uses the mouseDragged function to add slices.

Although neither technique quite captures the same continuous effect that’s achieved in slit scan photography, the distorted / noise effect is interesting!

Image References

  1. Russell Hardman, “YES” Southbank Tribute Painted Topography
  2. Marie-laure Cruschi, Cabins
  3. Plant, Unknown

On Computation

Computation is a calculation.

Computation adheres to rules; rule of it’s own making and governing rules.

Computation is a tool, a means of extending human capability to achieve a goal.

Computation is written by someone. Even an algorithm generated by another algorithm would have at some point been written by a person.

Is computation subjective or objective?

Computation is a process.

Computation converts an input to an output. The same output can be produced through many different ways of processing the input.

Computation can produce useful outcomes. Computation can produce useless outcomes. The outcome requires interpretation to determine whether it is useful or useless.

The interpretation of computation is a cultural product, reflective of the ideas, values, knowledge, opinions of a point in time.