Overview
To be honest, I was really worried about this assignment because I remember when I was studying C# I struggled a lot, especially with the for loop. I went over the practice exercises that we did during the week a lot and also looked at the books uploaded to search for some inspiration. I didn’t even start the code until I saw the Casey Reas video and went through the given books to look over for some inspiration, because I felt a little lost regarding what I am expected to do. But in the end, of course, I managed to make something that I actually quite like and am proud of.
Process
At first I wanted to make it just a grid of rectangles as seen in the image, which was my first inspiration photo that I picked out, and when a user would click somewhere, those rectangles would move to a random spot. I started working on that code, but I found it a little too complex for me right now, so I decided to look for another inspiration image. From the very beginning, this image of rectangles has stood out to me a lot, and I found this one with just a lot of random lines across the screen, and I thought, “What if I combined the two?”
I was very sure at this point that I wanted to work with lines and rectangles, but also, that I wanted to incorporate colours in some way. At first I had the idea of filling in the rectangles each time with a different colour, but when I tried it out it basically filled in the whole screen, so later I decided on just colouring the strokes. I also decided on that, because halfway through the code I realised that lines can’t have a fill, only a stroke.
It was also a very small fragment of the job, but I really loved picking out the colours that appear.
The Code
let colourPalette = ["#4B0082", "#FFF0F5", "#ADD8E6", "#808000", "#DB7093", "#FFFAFA", "#F0E68C", "#DAA520", "#FF1493", "#8B0000"]; //the array containing
function setup() {
createCanvas(500, 500);
}
function draw() {
background("grey");
frameRate(2); //how many frames are drawn per second
let numLines = random(30); //randomising how many lines are drawn on each frame
let num = 0; //how many I start with
while (num < numLines) {
//randomising where each line starts and where they end
let firstPointX = random(width);
let firstPointY = random(height);
let secondPointX = random(width);
let secondPointY = random(height);
//drawing the line itself
stroke(random(colourPalette)); //chooses a random colour for the lines each time from the array
line(firstPointX, firstPointY, secondPointX, secondPointY);
num++; //increase the num variable so the loop eventually stops
}
console.log('hellooo');
let numRects = random(15); //giving how many rectangles I wanted to draw
for (let num2 = 0; num2 < 15; num2++){ //same structure but with a for loop nos so I can see both kindsat the same time
let xCoord = random(width);
let yCoord = random(height);
let widthRect = random(width);
let heightRect = random(height);
noFill();
rect(xCoord, yCoord, widthRect, heightRect);
}
console.log ('went through');
}
The code is not too long or complicated, but it still took me a little to figure out. I am particularly proud of the way I realised that I can change the framerate of the code so I can control how many images get generated each second. At the start it was going very fast, but now I really like the pacing of it. I also feel proud of just the fact that I managed to incorporate both a while and a for loop, just so I am able to practice both a little. Like in the previous code, I also tried to make everything quite organised, and give the variables names that I would be able to recognise later.
I really enjoyed experimenting with the random variable. I used it for the colours and the drawing of the shapes, and honestly I didn’t expect it to work so well. There are also some console.log’s because in some previous codes I was practicing on they came in very handy.
Reflection and Ideas
As a reflection, I actually feel really proud of this exercise, not necessarily because I managed to write a long and complicated code but because I was finally able to understand the for and while loops. I had a really bad CS teacher back in high school, and I didn’t really learn anything from him, which made me really stressed to start this course. I thought I would be again just very confused about these loops, but I actually understand both of them now. I also quite like how the end result looks.
For the future, I think I will try to challenge myself a little more with both the code and the creative part. For this I had to use some reference images, but I would love to just think of something on my own.
References
For the colours:
https://www.w3schools.com/cssref/css_colors.php