So I’m finally watching Daniel Shiffman videos on YouTube after years (7 years now) of having them in my ‘Watch Later’ queue. (Ikr what an idiot imagine how far I could’ve been if I just did it back then)
In todays lesson (3.2) we focussed on how we can use the mouse to interact with our canvas.
Toward the end he gave us a challenge to have a rectangle drawn onto the screen but have the fill colour change based on the mouse previous/current position.
So I did this
With this code, the display is set to a size of 640x360 pixels, and the ‘background’ is drawn once, which means we can see a history of the shapes we draw (like back in windows 97/Vista/XP? when you won solitaire and the cards left a trail over the screen).
Then, I set the stroke (rectangle border colour) to white (RGB=255,255,255). And the fill colour is calculated by subtracting the mouses previous Y position from its previous X position.
The parameters for drawing the rectangle make it so that a 20x20 pixel square is drawn at the mouses exact x,y position.
And then I got the interesting colour spectrum above
Here’s the same thing but with the square size set to 10x10.
Isn’t it strange how the yellow comes through? (Also this looks like one of the pride flags?)
If you give fill only one argument/parameter, then it assumes you meant to give that same value for all parameters. So if I say
fill(0);
This means Red = 0, Green = 0, and Blue = 0. So the colour you get is black. And all numbers upward give a greyscale value until you get to 255 which is just white.
fill(100);
fill(73);
fill(204);
These^ are all grey, with higher numbers being brighter grey, and lower numbers being darker grey. Notice how the background is a dark grey because it has ‘50’ as the argument/parameter.
So if you give fill a value that’s, say, negative… what happens?
(Idk apparently you get yellow)
The section where the rect has a yellowish fill is when pmouseX is less than pmouseY (360), so for a certain range of negative values (e.g. 250-360= -110).
Let’s just make the background -110 to check something. 0mg….
How bizarre. What about positive values OVER 255.
*deep inhale* woowwwwwwwww
I don’t understand why this is happening (he’ll probably explain in the next video) but this is so cool!!!
If only I could figure out how to make the background colour each pixel based on its coordinates, so like background(x-y);
