Having introduced the students to user input in week 2, this week we started to make things a bit more interesting with the addition of left and right clicks. As usual Simon kicked things off with a quick demo of what we're building towards. As well as demoing our very simple car game again, we also took a look at a simple but extremely cool shape-shifting demo (which we will be embedding below shortly). This simply draws a box at the location of the mouse, leaving a trail behind when the mouse pointer is moved. Left-clicking switches from square to circle, while right-clicking clears the screen. All quite simple, but very visually engaging!
It's always fantastic to see the reactions of students the first time they write a program that tracks the mouse pointer. The mix this term is about 70:30 new students to returning students, so there were plenty of big grins around the room when they got a circle drawing on the location of the mouse.
In Processing we can very easily set a refresh rate of 30Hz (simply by placing code inside the draw() block), so combining what they already know about the ellipse() command (used to draw circles/ovals) with this and the newly introduced mouseX and mouseY variables (which always give us the up-to-date location of the mouse) it's actually quite a simple exercise to make a shape follow the mouse. Simple as it might be, it's still a great confidence booster. It also really shows the power of combining a few separate pieces of knowledge to make something that's much more than the sum of its parts, and is a very solid introduction to the idea of program flow.
Working hard!
Even better is when they realise what the next steps are, and there was more than one student this week who was desperately trying to make those next steps come together before the final "save everything and shut down" call came! Most managed to make some use of stroke() and noStroke() functions to remove or change the outlines of their shapes this week, but the real power of all those tools (and more, like the briefly introduced void() function) are yet to be fully revealed.
Left and right clicks will continue to be in focus next week, as we keep up our relentless work towards mastery (or at least a decent grasp!) of coding computer graphics with Processing. Until next week, then!