SHORT DESCRIPTION:
In week 2 of intro to IM we were introduced to the concept of for and while loops in class and was asked to create a small project using these concepts. For my project, I decided to create a simple generative art program that selects a random shape and fits them onto the screen based off a given coordinate point. In order to achieve randomness in my project, I had used the Math.random() * n + 1 to generate number between 0 to n inclusively.
Design Concept
Initially, I had wanted my design to be static, pure black and white piece with square grids that are filled with semi-circles rotated to different degrees, but I felt li
ke this concept has been used or seen before, so I decided to try something new. When I started the project, I knew I wanted to keep it simple, yet complex at the same time. My goal was to create a portrait that resembles modern contemporary art with color, where someone can make their own subjective opinions about the piece.
In the end, I created a dynamic and colored piece that changes what the individual sees on the screen every 2-seconds, and when the users press their mouse, the piece turns black and white. While I diverted from my original concept, I am still extremely happy with my final result and was still able to incorporate the black and white feature into my project.
Coding Processes
To achieve a structured, yet random pattern, I started by designing a grid pattern, where each square is 50 x 50 pixels. Then, in each square, there would be a randomly selected shape in the center of that grid. For the program to select a random shape, I created a function (getRandomShape) that would return a type:string from a shapes array (type: string).
The function that I wrote to select a random shape is as follows:
function getRandomShape() {
const shapes = ['circle', 'triangle', 'square', 'ellipse', 'rect'];
let randShape = shapes[Math.floor(Math.random() * shapes.length)]
// console.log(randShape)
return randShape
In the code, I had taken advantage of the Math library function .floor() and .random() in order to generate an integer that is within the length of the shapes array. Later I could also use the same functions to randomly assign the size of the shape. After which, running the code created a simple static design.
Some examples of the shapes bound within each 50 x 50 grid :
While I could have stopped there, I decided to play around more with the Math library and decided to shift the shape’s center, so it wasn’t restricted within each 50 x 50 square grid. As a result, it led to complex and unpredictable placements of the shape size and centers.
Some example of the randomized shape center
The Hardships
On top of the unpredictable pieces, I wanted to go further and implement an interactive “water ripple” effect that would emerge from where the user clicked on the screen. Unfortunately, I didn’t realize how complicated that process was because I had used the noLoop() in the draw() function to only produce one image at a time. Therefore, I couldn’t have the shapes stay static which the background continues to refresh (or at least I couldn’t figure how…). I spent a couple frustrating hours trying to get my idea to work before realizing the noLoop() was the issue. To future me and anyone else, understand the affect noLoop() will have your project and background, especially when working with for and while loops.
Eventually, I did get rid of the noLoop() in my draw() function and reduce the framerate to 2 fps because I didn’t want to give up on making my project interactive. [Another pro tip: the default framerate (60 fps) will make a project like this incomprehensible because the canvas is changing constantly.]
Achievements
After dropping the ripple effect idea, I went back to my original idea of a black and white canvas. Using the mouseClicked() function, I set a variable “colorChange” to true if the mouse is pressed and make the canvas black and white, otherwise it would return to its default state of false and make the canvas colored. I really enjoyed this process because it exposed me more to p5’s library and allowed me to incorporate another idea I originally wanted to do. I also felt like it added more depth and cool composition to my project.
let colorChange = false
...
function mouseClicked(){
return mouseIsPressed
}
...
function drawShape(x, y){
colorChange = mouseClicked()
if (colorChange){
circleColor = '#FFFFFF'
rectColor = '#FFFFFF'
circleColor = '#FFFFFF'
squareColor = '#FFFFFF'
triangleColor = '#FFFFFF'
rectColor = '#FFFFFF'
ellipseColor = '#FFFFFF'
}
}
Final Design
Below is my final design. I am happy with how it turned out and made me appreciate the process behind generative art and randomness. In the future, I hope to figure out how to implement a ripple effect and ability to create more generative projects.
[Press anywhere to make it black & white!]