William's Digital Sketchbook!

A sketchbook compiling the different assignments I've done for a blend of art and code:

Collaborative Drawing Exercise

This is the first exercise we did that involved a series of verbal instructions that 'programmed' a drawing. See the images below for the instructions as well as my own result.

Instructions. Locate the largest piece of paper in your current environment. Find some strips of fabric that can be woven together. Fold an origami crane. Cut two holes in the paper - place the paper on two different windows, finding something different to draw each time. Spill coffee around a cup and across the page but not the edges and not under the cup. Use a pencil to draw a 15 second self portrait. Section your drawing into three. In the first section, create a past dream. In the second section, create a current dream. In the third section, create a future dream. Use contrasting colour stories to differentiate the sections of your drawing. Dice. With a pencil crayon or marker, fill in a closed space where lines surround it. If there are no lines in your drawing yet that create a closed space, draw enough lines to create one and then fill in the space with the pencil crayon or marker. Add color into the drawing. How to draw a flower. Your drawing should include 3 daisies.

A photograph showing a piece of paper with sketches, two cloth facemasks folded together, a spill-stain of coffee and scattered dice

For this assignment, we were asked to code a drawing of a flower in p5 javascript and give it to a friend. I chose a camellia blossom because I like its simplicity and its assigned meaning for general love and affection.

Additionally, I found a graphsheet and drew up a sketch of the general shapes I'd be using in the program with reference coordinates.

A digital sketch on a coordinate graph vaguely resembling a flower

And here's the final product

Line For Line

This assignment dealt more with the line-by-line coding and ordering of variables to create patterns with the use of lines of a single stroke and colour.

A series of work-in-progress screenshots

Screenshot of a production sequence in the Line for Line project Screenshot of a production sequence in the Line for Line project Screenshot of a production sequence in the Line for Line project Screenshot of a production sequence in the Line for Line project Screenshot of a production sequence in the Line for Line project

Here's the link to the final product

Computational Conversion

Rough draft sketch for the conversion of Composition VII - The Three Graces by Theo van Doesburg

Draft one for October 14th

Click here to see the editor for the conversion

In the second part of the assignment, I found that I could apply random for-loops in interesting ways that made the composition more vibrant and randomized with each generation.

Admittedly, finding the code to prevent overlap was a bit outside of my skillset at the time, but the idea of creating an if-else format that could establish those kinds of constraints is certainly possible, which would allow the generative compositions to more closely resemble the original piece.

Digital Brushup

The assignment was based on creating a drawing implement in real life and then creating a digital brush in p5.js and vice-versa.

For my drawing implement in real life, I chose to use a USB face as a comment on the way that drawing tools are often connected to digital works through these ports. Now in reverse, the idea of a digital drawing is turned into a physical material.

Access to my Digital Brush editor for p5

Part 2 involved the digital rendering of images with the brush I coded.

Beach Ball of Death

I wanted to try and imagine a UI animation that I would see in reference to art/comic software, since I use a lot of that in my everyday life and it's often relegated to more simple freezing/loading bars when it stalls.

Instead, I imagined something that would make use of the CMYK color print tones in a sort of "circling spotlight" effect.

The result was simple, but by adding an expanding/contracting rhythm, it made the animation more fun, along with guiding it around by the translated centre of the mouse cursor's coordinates.

You can see my animation and code here.

Final Project

Overall, my proposal for my final project involves the imitation of a phenomenon integrated into a digital space. The current idea involves creating a random spawn of white ellipses as "stars" being drawn into the translated center location based on the mouse's X and Y coordinates. In the center, just barely visible, will be a true black ellipse as opposed to the off-black used for the background, forming a sort of "black hole".

Concept work and sketches involved figuring out the general shape and vision for presenting an animated 'black hole' as it were.

You can find my final project's host page here.