This post in continuation to an interactive poster that I made in July, 2021.
I'd been juggling the idea for a poster like this for quite a while but never really liked the subsequent visual that it formed in my head. To add visual appeal, I realised that making the lines shift gradually between colours would give rise to a more dynamic visual.
Initially, I started to surf the web to figure out a way to do this. However, to my surprise, there were no tutorials for this. I found a couple of existing forum posts that used a for() loop but because of my code structure, I couldn't use a for() loop for this poster.
This posed an interesting logical challenge & I felt like even without a Computer Science education, I could indeed solve this problem all by myself. And that's what I did.
I started to look at the RGB colour wheel in order to identify a logical pattern.
What I understood here is that the values have two break points, i.e 0 & 255. When the value of a certain variable (R, G or B) reaches either of these two breaking points, the value of another variable (R, G or B) starts to go from 0-255 or vice-versa.
Theoretically, something like this makes sense right?
For example, say that the initial value of r = 255. You first statement would tell the computer that if the value of r is 255, increase the value of b by 1. This would keep increasing the b value from 0 to infinity.
The second line is where the problem lies in this piece of code. The second line says that if b = 255, r = 255 & r=r-1. The value of this equation being 254. However, the value of r will remain stuck at 254 because that loop has been completed and it is not going to loop again.
I scratched my head wondering why r was getting stuck at 254 and how I could get out of this. I realised that the computer did not know "till when"; i.e till when should r keep subtracting 1. In this case, till it reaches 0.
In simple words, I used an AND operator. I wrote if the value of b=255 (which it will remain for the duration of this if() loop AND the value of r is greater than 0, r=r-1. Now when it does subtract 1 from 255, the resulting output will be 254 which is obviously greater than 0. So, it'll keep subtracting 1 till the point r reaches 0; when this condition will no longer hold true and therefore, stop running.
Another problem came when I wanted to loop the code; i.e go from the last if() statement to the first if() statement. To solve this without causing confusion, I wrote down the output of each if() loop in my program.
You can view the breathing element here below. Move your mouse to change the location of the dot.
So, what did I learn while solving a code problem all by myself for the first time?
Computers only work on hard logic. You have to understand that if your program does not make arithmetic sense, it'll not execute properly.
Nested loops. The computer runs loops in order. It runs one then your next one & then the next one. There is a definite flow which you yourself can define while writing your code. The draw() loop in Processing runs over & over again and anything inside that goes one by one.
Each problem can have multiple solutions. You are never crippled by something you do not know. If you understand the basics of a computer programming language, you can definitely make the ideas in your head work. They might just take a little more effort.
On a personal note, it felt like a mini triumph. From always being intimidated by the technical side of computers, I was finally able to understand it & solve a problem all by myself. I'm happy & proud. This summer been quite productive.