Final Project Prototype: Generative Art

 

For my final project, what I think about is to make a piece of interactive artwork. Users can create unique patterns through interacting with the artwork. When I googled "interactive art p5.js" for inspirations, I saw a concept that is mentioned many times -- generative art. The pictures above are examples of generative art by Katharina Brunner. According to Wikipedia,

Generative art refers to art that in whole or in part has been created with the use of an autonomous system. An autonomous system in this context is generally one that is non-human and can independently determine features of an artwork that would otherwise require decisions made directly by the artist.

 Therefore, I would like to say what I want to explore in my final project is generative art.

STEP 1 Connect microBit to p5.js

In the beginning, I revisited last week's resources to connect microBit to p5.js. At the trial stage, I used three input values from the sensors and button: roll, pitch, and button A. I followed the instructions, downloading the MakeCode file and sending it to microBit. Luckily, it did not take too much time to get this step done. 

STEP 2 Set up p5.js environment

Next step is to set up the p5.js environment. It incorporates some basic elements, like the function setup(), function mousePressed(), function microBitReceivedMessage(message). 

In function setup(), I set up a canvas and assigned it to a variable called img. The function mousePressed() and function microBitReceivedMessage(message) are copy-and-pasted functions from Jaymes' resource. The former one is to make sure the microBit would have connected to p5.js. The other one is to process the input values and assign them to variables in the code. 

STEP 3 Think about the interactions 

At this stage, what I did was to think about the interaction content in detail and convert ideas into functions. I searched for many generative artwork and learned a lot from them. I was fascinated by some creative ideas, like the below one.

1️⃣ Save function

Since I want every use can keep the pattern that they make at the end, I need a save function to enable them to do so. In this rough prototype, users can easily press the save button to save work. The new skill I apply here is how to change the styles using CSS code. 

2️⃣ Draw different patterns when users rotate microBits 

Here, the first question is what kind of pattern it is. I decided to allow users to use basic shapes, like ellipse, rectangle, to form complicated patterns, so I tried ellipse here. The second question is how users make complicated patterns. I used rotate function, Objects are always rotated around their relative position to the origin and positive numbers rotate objects in a clockwise direction. The third question is how users interact with it. This artwork will get the input values of rotation from microBit and assign them to variables, X and Y. While users tilt microBits, the shape of ellipses will change accordingly and the ellipse will be rotated in different angles. Button A functions as a controller of color. When it is pressed, the color of the strokes will get changed. 

Here is the link to the rough prototype

https://editor.p5js.org/hh2871/sketches/b-eKieMLF