Introduction to Computational Media: Week 10

This past week in ICM, we focused on exploring sound in p5. Our assignment was to create a sketch that analyzes sound (live or recorded audio) and translates it into something visual to represent the sound. I wanted to experiment with visualizing the sound of popping popcorn. For this initial version of the sketch, I used an image of a single popcorn that changed in size according to amplitude. I would like to keep playing around with manipulating this image and generate more popcorn as the sound plays.

An animated sample of the popcorn sound sketch.

Introduction to Computational Media: Week 6

Assignment

For week six, we were asked to build on the assignment from the previous week, such as adding additional shapes and controls, and to use arrays where appropriate.

Sketch

Building on the previous Create Your Own Wall Drawing sketch, I wanted to add an option for switching between a range of geometric shapes, again in reference to the original Wall Drawing 340. I created a fifth slider to choose a shape with one of three values: 1) circle, 2) rectangle, and 3) triangle. If I can keep going with further controls, I would like to add either a slider or a mouse press to toggle between the primary colors (red, yellow, blue) as well.

View the sketch in the p5.js Editor.

Introduction to Computational Media: Week 5

Assignment

The assignment for week five was to draw a complex design that uses multiple shapes with different parameters: 1) have at least two shapes move independently on the screen, 2) use DOM UI elements, slider to control some of the shape parameters, 3) reorganize "groups of variables" into objects.

Sketch: Create Your Own Wall Drawing

For this assignment, I continued to take inspiration from Sol LeWitt’s work, particularly Wall Drawing 340, which layered primary colors of geometric shapes and lines with crayon on similarly red, yellow, and blue walls, and made a sketch that would allow you to create your own Wall Drawing.

Wall Drawing 340 by Sol LeWitt at the MASS MoCA.

I recreated one of the blue wall drawings, but with a circle shape, and added a few sliders that could adjust some parameters as desired: the fill color of the circle, the size of the circle, the number of lines, and the color of the lines. My currently outstanding challenge with this particular sketch code is not knowing exactly how I can and should reorganize variables into objects.

You can try the sliders in the embedded sketch or view the sketch in the p5.js Editor.

Introduction to Computational Media: Week 4

Assignment

This week’s assignment: make something with a lot of repetition.

Sketch

We were provided were a few sources of inspiration for creating a sketch with repetition, including the large-scale wall drawings by Sol LeWitt. I had seen some of LeWitt’s drawings at Dia:Beacon a few years ago, and I remember being amazed by the incredible work creating so many graphite lines. I wanted to try my hand at practicing creating similar repetition with code. View the sketch in the p5.js Editor.

Introduction to Computational Media: Week 3

Assignment

Our week three assignment was to work with rule-based animation, motion, and interaction: 1) create or expand on a sketch with animated elements, 2) select one or more of the interface elements presented in class (such as rollovers, switches, sliders, or checkboxes), and 3) tie everything together and have the interface element(s) control the visual design or behavior of other elements in your animated sketch.

Sketch

For this assignment, I created a sketch with three sliders that controlled the visual design and animation on the canvas, which is a rotating square. The slider controls are as follows: 1) change the background color from black to white, 2) change the rotating object fill from black to white, and 3) change the speed of the rotating object from slower (starting at no movement) to faster. View the sketch in the p5.js Editor.

Introduction to Computational Media: Week 2

Assignment

The assignment following our second class was to create a sketch that includes these three elements: 1) one element controlled by the mouse, 2) one element that changes over time, independently of the mouse, and 3) one element that is different every time you run the sketch.

Sketch: Circles vs. Squares

I made a simple sketch that continuously draws randomly placed circles throughout the canvas, filled with a random color range of dark gray to black (the elements that are different every time you run the sketch, and changes over time, independently of the mouse). When you click anywhere on the canvas, you draw a white square in the same width as the circle. View the sketch in the p5.js Editor.