Creative Coding Lab

The article explores generative art, an artistic approach using algorithms and randomness to create unique, often unpredictable, artworks. It highlights its history, key concepts, and showcases artists’ works, emphasizing the fusion of creativity and computation to produce dynamic and ever-evolving pieces of art.(This is a brief summary from ChatGPT)

 

According to my own understanding towards generative art, it is an art created by instructions. Even though it included randomness, it still inside the rules. I have made 2 projects on p5 Javascript, obviously, AI cannot think by itself which is definitely true. It just followed the code I had written. Somehow, my projects are aligned to this generative process, which contains thoughts, creativity and logic. The only difference might be, I am not using randomness frequently but concrete commands.

 

Instructions are solid, but human or even AI may filter some of them automatically which cause misinterpret. Here is a set of rules I created:

• Rock, paper, scissor, shoot(to decide who is going to draw)
• The one who wins can draw a random pattern

  The rest two people need to use a random vertex of the first pattern to draw two other vertex-based patterns.

• After completing the round, choose a new random center on the paper.
• Repeat steps.

 

During the drawing, me and my friends truly misinterpreted a instruction ‘draw two other patterns’. Does it mean respectively draw 2 patterns or each person draw one pattern? For this is a random process, we just let this move forward, because when it comes to computer, it won’t stop or just present syntax.

 

Before I created this rule, I did imagine the outcome. When misinterpretation happens, the process is unpredictable. However, the whole pattern’s outline may be similar and that is the representation in control. So how to balance the control and the unpredictability? First, write the right code or send out correct commands. Second, when unpredictable things happen, try to find out the wrong place( or ask Chatgpt for help). Third, make different prototypes and try again and again until we find the best solution.

 

After all, using the right logic is the most basic thing so that the AI can follow the direct rules. Randomness itself is making the process more convenient and more efficient and that is why we call generative.

Hopping Lattice

p5.js Web Editor | hopping lattice (p5js.org)

This is a design inspired by a new indoor activity called Hopping Lattice. The participants need to step on the colored squares and avoid the red lines. According to this scipt, I used ‘keyIsPressed’ to control the movement of the red lines. When pressing the right key, you will be able to make the decision.

However, I found it quite tricky that the keyboard can only output one key at one time, which means if I press ‘a’, the redline could only move from the bottom to the top. As keyboard and mouse are different devices, so when I press mouse and a key together, they could perform at the same time. Below is a part of the code.

if (mouseIsPressed){
fill(colorRedPink)
m = m + mSpeed
rect(0,m,width,a)
if (m > height) {
m = -25;
}
}

if (keyIsPressed){
if(key=="a"||key=="A"){
fill(colorRedPink)
t = t - tSpeed
rect(0,t,width,a)
if (t < 0) {
t = 725;
}
}
}

if (keyIsPressed){
if(key=="z"||key=="Z"){
fill(colorRedPink)
n = n + nSpeed
rect(n,0,a,height)
if (n > width) {
n = -25;
}
}
}

if (keyIsPressed){
if(key=="x"||key=="X"){
fill(colorRedPink)
s = s - sSpeed
rect(s,0,a,height)
if (s < 0) {
s = 500;
}
}
}

There are still something confusing me.

First, I had drew a grid on the canvas and I intended to generate random squares inside the grid, but I don’t know how.

Second, how to make the redline come from three or more differnt sides at the same time withiout puting them under the control of the same key.

Third, how to present the random suqares right after the countdown. I could manipulate these two parts seperately by using slashes, but there will be some problem to make them operate together.

According to this project I made, variables and ‘keyIsPressed’ are convenient for operation. Also, ‘keyIsPressed’ reminds me of computer games. Somehow, there could be some keys operate at the same time, that’s what I should dig deeper into.

Below is the entire code.

let a = 25
let colorRedPink = "#DB3065"
let colorGreen = "#4ADC4E"
let colorBlue = "#3A3AF0"
let colorRed = "#FA1713"
let m , n
let s , t
let mSpeed , nSpeed
let sSpeed , tSpeed




function setup() {
createCanvas(500, 700);
background(0);
m=0
n=0
s=width
t=height
mSpeed=8
nSpeed=6
tSpeed=8
sSpeed=10

}

function draw() {
//First, undouble-slash the if loop, double-slash the rest of the code
//Draw the countdown
stroke(colorRed)
strokeWeight(30)
if(keyIsPressed){
if(key=="p"){
line(pmouseX, pmouseY, mouseX, mouseY)
}
else if(key=="o"){
background(0);

}
}

//Then, double-slash the if loop above, undouble-slash the rest of the code
//Follow the key pressing rules to make a simple Hopping Lattice

background(0);
fill(colorGreen)
rect(25,25,25,25)
rect(25,100,25,25)
rect(75,50,25,25)
rect(125,125,25,25)
rect(0,300,25,25)
rect(425,150,25,25)
rect(225,225,25,25)
rect(100,325,25,25)
rect(300,275,25,25)
rect(300,300,25,25)
rect(25,325,25,25)
rect(325,0,25,25)
rect(375,425,25,25)
rect(125,525,25,25)
rect(275,400,25,25)
rect(425,475,25,25)
rect(325,625,25,25)




fill(colorBlue)
rect(525,25,25,25)
rect(325,125,25,25)
rect(475,300,25,25)
rect(250,350,25,25)
rect(325,450,25,25)
rect(25,625,25,25)
rect(50,425,25,25)
rect(250,375,25,25)
rect(275,500,25,25)
rect(25,675,25,25)
rect(375,350,25,25)
rect(125,75,25,25)
rect(325,550,25,25)
rect(200,650,25,25)
rect(125,350,25,25)
rect(325,450,25,25)
rect(25,625,25,25)

if (mouseIsPressed){
fill(colorRedPink)
m = m + mSpeed
rect(0,m,width,a)
if (m > height) {
m = -25;
}
}

if (keyIsPressed){
if(key=="a"||key=="A"){
fill(colorRedPink)
t = t - tSpeed
rect(0,t,width,a)
if (t < 0) {
t = 725;
}
}
}

if (keyIsPressed){
if(key=="z"||key=="Z"){
fill(colorRedPink)
n = n + nSpeed
rect(n,0,a,height)
if (n > width) {
n = -25;
}
}
}

if (keyIsPressed){
if(key=="x"||key=="X"){
fill(colorRedPink)
s = s - sSpeed
rect(s,0,a,height)
if (s < 0) {
s = 500;
}
}
}

for (i=0;i<31;i++){
stroke(0)
line(0,i*a,width, i*a)
}
for (i=0;i<21;i++){
stroke(0)
line(i*a,0,i*a,height)
}

}

p5.js Web Editor | Yellow Crane Tower (p5js.org)

The sunset is smudging the sky and the tower that is surrounded by mountains. This painting is a brief sketch of  Wuhan’s famous landscape, Yellow Crane Tower. 

There is still one thing that confuses me.  Just look at the archways on the left hand side, they are in the similar pattern and I have to change the data of each figure. I am still trying to figure out how to copy and paste or using the ‘for’ loop to draw.

What makes me reflect on my work is if I need to draw quite a lot of elements, then I need to use more skills to let the code present in a easier way and make the process simpler. Wait for my further study!

The first painting is to represent the floating ocean with gradient fill. Inspired by some Chinese traditional patterns, especially the fish scale pattern which symbolizes the luck and the worship towards the water, I turned it into waves in the sea. 

The second painting is a more transparent version because the strokes are clear. This is really by accident. However, I found the math beauty in it. As  you can see the circles just apply to each other in a neat way, it displays a geometry mode.

While I was designing the code, I found one part really tricky. Just imagine, when you are trying to apply a layer of patterns onto the other, you have to let the latter layer drew first. What I had been mistaken was the step of drawing different layers, that took me a long time to revise my code……

So the left one is correct but the right one is wrong.

The reflection on this progress is using ‘for’ loop to save time and how to get the sequence of those layers correct. Hope I will do better on next project!