[Repost] Multi-Coloured Ink Blotting (Processing)

[This was originally posted last year, on an old blog to promote computational thinking and programming in schools. I’ll be reposting these over the next month as I think they’re still useful to schools embarking on the new Computer Science course]

blotty

This one is quite complicated but I thought I’d share how great Processing can be. This program creates an expanding circle (think ink blotting from a fountain pen) as long as the mouse click is held. Once the mouse is released, the colour of the next circle will be different (through a random colour generator). It will also appear on top of the previous circle should you click in the same place. You can make some pretty great graphics (see above) once you’ve made the program.

There’s not a lot of code, but it uses arrays which will be difficult for students to get their heads around. An array is best thought of as something like a series of containers ready to be filled with a value. Like a single-file ice cube tray or something. They’re particularly useful when using motion as they can store a sequence of values, such as a large set of x coordinates or y coordinates. In this case they store a sequence of circle sizes. A bit like a memory bank.

There’s a bit of code at the bottom which will clear the screen should it get too messy.

Note that the colour changer is random. Specifically it’s the fill (random (255), random (255), random (255)) bit of code, which assigns a random number up to 255 for the red, green and blue values of the colour respectively. All colours on a computer are a combination of these three elements, going to a max of 255.

blotty2

Hopefully the comments in the code make sense. If you plan on using this as a lesson, I’d provide the students with the code and ask them to alter parts of it, such as making rectangles instead of circles, or setting the colour randomiser to select one of four predefined colours, or get them to annotate the code to guess what it’s doing.

I’m pretty confident most students wouldn’t be able to create this from nothing in a secondary school. Congrats if you think they can!

They should be able to create a similar program that generates a single expanding circle just using ‘if’ statements rather than arrays.

Again, this post is more to showcase what Processing is capable of.

Copy and paste the code below the formatted screen print directly into Processing and run it. Comments are included on the copy-paste version.

(adapted from here)

code

colour splat

int num = 250;
int count = 0;
// Create array of type 'float' to store circle sizes in
// Size of array is var 'num' which is 250
// 250 is the max size of the circles. you can make these smaller if you like
float ms[] = new float[num];
void setup() {
size(800, 800);
noStroke();
fill(0, 255);
background(255);
}
void draw() {
if (mousePressed)
{
// count%num means 'remainder of (count / num)'
// this is a fairly standard way of ensuring a 'circular array' loops back around
// so when it is full, it starts filling up again (replacing values) from the start
ms[count%num] = 0;
// below is a 'for' statement that increases the size of the circle as long
// as the mouse is pressed
// below, 'i' needs to be less than the minimum value of 'count' or 'num' in order
// to ensure that the circle keeps 'growing' until it reaches a maximum size and then stops
// the for loop fills the arrays with appropriate values
// ms[i] changes (++) so that circle gets bigger (redrawn in a bigger size each time essentially)
for (int i = 0; i < min(count, num); i++) {
ellipse(mouseX, mouseY , ms[i], ms[i]);
ms[i]++;
}
count++;
}
}
// when mouse is released, var count is set to zero (reset essentially),
// this ensures that a new circle will be drawn when the mouse is pressed again
// and colour of circle is changed (fill) randomly (r,b,g values respectively)
void mouseReleased() {
count=0;
fill(random (255),random(255),random(255));
}
void keyPressed(){
background(255);
}
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s