Brief Description:
In this mini-project I navigated generative art by designing different patterns that could resemble the ocean, sand, and waves. By using this week’s knowledge regarding iteration for loop, which I used in all of the sketch to create a repetition effect of primitive shapes such as triangles, circles, rectangles, ellipses and spirals. Besides that, I played around with randomness within the fill() function to have different shades of the same pallet.
Coding Process:
I started by trying out different nested loops that were not how I envisioned the background of my Project A to be; but provided a space for experimentation on how I could create patterns. Then, I explored several different designs, and focused more on the repetition of shapes or forms to create the pattern.
Based on my Project A proposal I continued to make a background that looked like a beach (since this will be the habitat of my generative creature): which can be seen in image in the following three images. At first, I was struggling in differentiating between rows and columns, and I could only code single row.
Code Snippet
let numRows=10
let numCols=9
function setup() {
createCanvas(400, 400);
background(255)
for (let i = 0; i < numRows; i++) {
for (let j=0; j<numCols; j++){
let x = 20 + j*50;
y=20+i*50
Although I tried to achieve more of a wave pattern by looping the circles I figured out it looked more like a mermaid tail.
My second experiment was combining shapes to have a different effect where the circles were the sky, the rectangles the sand and the triangles imitate the shore, however I thought this image was too abstract for my liking.
In my next try I wanted to have a simpler but more realistic approach by using triangles and forming waves with the sin and cos functions.
The patterns that I experimented more with were sin and cos function and giving the shape with ellipses to form waves. Out of all my designs, these ones I found most interesting. I started with a series of horizontal waves with a significant space between them. Next I decreased the frequency and increased amplitude value which was an unexpected result but the shape resembled the ocean wave. Finally, I also played around with the amplitude and frequency but this time I made emphasis on the color palette by using the random() function to have different shades of blue.
Code Snippet: (I changed the amplitude and frequency argument in each trial) for (let y = 0; y < height; y += 20) { for (let x = 0; x < width; x += 5) { let oceanwave = 10 * sin(0.08 * x + y * 0.05);
At the end I mixed two shapes on the left side I used the stardust effect and on the right using sin() function to simulate the waves, to have a beach background (this is the closest I want my Project A background to be)
It was definitely challenging to split the canvas to simulate two different environments (land and water). Here is a snippet of my coding process for this design.
//sand for (let i = 0; i < 20000; i++) { let x = random(0, width / 2); let y = random(height); fill(255, 229, 153); noStroke(); ellipse(x, y, 2, 3); } //ocean for (let x = width / 2; x < width; x += 5) { for (let y = 0; y < height; y += 10) { let ocean = 10 * sin(0.01 * y + x * 0.05); fill(138,238,213); noStroke(); ellipse(x, y + ocean, 5, 5); } }
Reflection:
Through the multiple sketches made for this mini-project I believe that the a good pattern is a combination of creativity, randomness and mainly simplicity; because I noticed that the more elements you try to convey in one image it just looks clustered. In the process of coding contrasting it with hand drawing now that we are doing generative art is much easier to portray my ideas in a digital canvas since you can easily manipulate the variables, by changing the arguments within a function.