Skeleton Rave Baby

So last year. Like the other 20 odd millions people, I saw the great glowey zoey video and…now I’ve got a little baby aaaaaaand it’s Halloween….I HAD to roll my own.

I’ve added a few additions – Full RGB Leds that are driven from a Processing script. A Teensy3 and the OctoWS2811 library drive the LEDS.

If anyone is interested, I could write a tutorial on how to make one.

All the code is on GitHub

Read More

Taming your Gmail

I love my Gmail. But I never ever cared about pruning or organizing my inbox. It just became this mass of 50,000 emails and not much else.

Then I caught the inbox zero bug and discovered that cleaning up my inbox was an incredible chore. So having a programmer mindset, I thought there must be a better way.

Well. I think there is. Or.

Here are some things I’ve found to help you control your inbox

Disclaimer. They work for me. They might for you. I’ve found two major things that help. Labels & Filters (which you probably know about) + Automated Scripts (which you might not use). .

The other fairly new thing worth a mention are inbox tabs.

Inbox tabs

Turn them on. Trust me. As we’ll go through all of the tabs and mass delete anything you don’t think you’ll need, or archive it if you do.

You can also use a service like unroll.me to delete all your subscriptions, but personally I don’t like giving my gmail access to apps.

Mass deletes

If you don’t delete any emails and you probably read the subject but never open emails, this one is for you. Gmail has some really powerful searching to help crush those emails. Try the search :-

is:unread is:inbox

Ok so now scan through the page. Hit the ‘select all’ checkbox and you have a choice. ‘Archive’ or ‘Delete’. Archive will remove your emails from your primary inbox but still keep them. To find any emails in Archive you have to search for them or show ‘All Mail’. Delete will put the emails into trash and they’ll be deleted after 30 days.

Personally. I would delete anything that comes up here. The less in your archive the better. You can of course un-check anything or star anything you still need to follow up on.

You can also add a date operator onto your search and not select any emails newer than a week. Try the search :-

is:unread is:inbox older_than:7d

Labels & Filters

So now you should have an inbox clean of any unread emails and if you have turned on inbox tabs, you will have all your Social / Promotion / Updates / Forums tabs all full of junk.

Labels & Filters

Gmail doesn’t have folders to move emails into. Emails are actually labelled and then you can add a folder view to those labels so you can easily see them.

Let’s try a filter. Think of a something or someone you have a lot of emails from. Open one of those emails and then click on ‘more’ down arrow on the right hand side of the email.

Select ‘Filter messages like here’.

If you are happy with the search. Click ‘Create filter with this search’.

Now you have some options.

If you really want to read these messages then make sure ‘Skip the Inbox (Archive it)’ is unchecked. I get a lot of emails from kickstarter which I don’t want to read that often. So I check this box for those type of emails. Remember archiving emails just removes the ‘inbox’ label from the email and this prevents it from showing in your primary inbox.

Next select the ‘Apply the label:’ checkbox and select ‘New label’. Enter a new label name and then assign it to the filter you are creating. You might have loads of emails matching your current filter, so make sure you select the ‘Also apply filter to x matching conversation.’ checkbox.

Click ‘Create filter’. Any new emails matching that filter rule will be filtered how you’ve defined. You can go to ‘settings’ and then ‘filters’ to change them. Feel that warm glow and now set yourself a few hours to crushing your inbox and making filters for everything important. This is the painful bit I know. I’ve been there.

You can also drag and drop emails into ‘labelled folders’.

Hiding labels

Now you have a label you can choose to show this on the left hand column of gmail. Hover over the label and click the little ‘down arrow’ next to the label. Under ‘label list’ I normally select ‘Show if unread’.

Keyboard Shortcuts A.K.A Reading emails really fast

I showed above a filter that dumped all of my Kickstarter mails into a folder. I might take a peek at this once a week and I could get 20 emails. It’s actually pretty laborious to click to open every one of these emails for a few seconds. So I found out about Keyboard Shortcuts.

To turn them on, you have to go to settings and find the option.

Once they are on, you can now go use a sneaky press of the ‘j’ key to skip to the next email. You can use ‘k’ to move to new emails.

Close To Inbox Zero Nirvana

So now, you should have an inbox hopefully full of emails tagged with labels and an assortment of untagged other things. You really want to remove the ‘inbox’ label from tagged emails and there is a fast way.

Try the search :-

has:userlabels in:inbox

Select all of the emails and then press ‘y’ key to archive the mails. Doing this can archive pages of emails in few minutes.

Again you can add a date modifier to skip over emails that are too new.

Inbox Zero Nirvana

So now you should be left with an inbox of uncategorized emails. So scan the sender and subject – discern if the email is worth filing away and repeat the above steps of creating a filter for that person. Or you can also drag and drop emails into ‘labelled folders’.

If you are feeling a little lazy, you can ‘star’ the emails and then use the following search :-

is:inbox is:starred

Label/Filter/Archive these final emails.

The final step is to select all the left over emails in your inbox and send them to the great email trash compactor in the sky. You really should be able to scan over these final emails very quickly as they hopefully should be junk.

Breathe a sigh of relief. You have now achieved email nirvana.

Scripts A.K.A Keeping on top of things

I love gmail scripts. They are an insanely powerful way for you to control your inbox. I’m just going to show a couple of examples how I use them (I think I’ll do a followup post on the more extreme cases soon).

Firstly you need google drive account. So go do that.

Then we are going to use the dark voodoo that is Google Scripts.

Label any unread emails in promotions tab as ‘delete’.

Firstly we need to create a label in gmail. Go to Settings -> Labels -> Create new label. Call it ‘delete’.

Then back in Google Scripts under ‘Create scripts for’ click ‘Blank Project’.

You’ll see some code in the main window. Delete all of this and past in the code below :-

[code lang=”js”]

function cleanUpPromo() {

// label I’m using – delete
var label = GmailApp.getUserLabelByName("delete");

// search the inbox for any unread emails in the promotions category
var threads = GmailApp.search(‘in:inbox is:unread category:(promotions)’);

// loop through all of the emails and add the label
for (var i = 0; i < threads.length; i++) {

threads[i].addLabel(label);

}
}

[/code]

Save the script. Enter the project name (anything will do here) – cleanUpPromo. Then press the ‘play’ button. The app will ask authorization to run. If everything went ok then you won’t actually see any changes until you go back into gmail. Check the ‘Promotions’ tab and hopefully you’ll some emails now labelled ‘delete’.

Wouldn’t it be cool if this was automated. Well yes siree that would be very cool.

Select ‘Resources’ -> ‘Current project’s triggers’ -> ‘No triggers set up. Click here to add one now.’

This then sets the script to run every hour but I like to set it once per day. Change ‘Hour Timer’ to ‘Day Timer and now the script will run one per day around midnight.

You can even set the script to send a notification if something goes wrong. Very very cool.

You can of course amend the script to add the ‘delete’ label to any emails in the other tabs or any emails (rather than unread emails). Just read up the advanced search to figure this out or ask me in the comments to help.

Trash any email labeled ‘delete’ older than 1 day old.

So now we’ve flagged emails for deletion we actually need to delete them.

Create a new project and then a new blank script. Again delete the default script and then paste in the script below :-

[code lang=”js”]

function sendDeleteToTrash() {

var delayDays = 1 // Enter # of days before messages are moved to trash
var maxDate = new Date();

maxDate.setDate(maxDate.getDate()-delayDays);

// the label to look for to delete
var label = GmailApp.getUserLabelByName("delete");
var threads = label.getThreads();

// loop through the emails and anything matching the label AND is older than the date – move to trash
for (var i = 0; i < threads.length; i++) {
if (threads[i].getLastMessageDate()<maxDate) {
threads[i].moveToTrash();
}
}
}

[/code]

Save the script. Enter the project name (anything will do here) – sendDeleteToTrash. Then press the ‘play’ button. The app will ask authorization to run. If everything went ok then you won’t actually see any changes until you go back into gmail. Check your trash and you should see emails labelled ‘delete’ in there – A good sign.

Again we set this script to run on a timer.

Select ‘Resources’ -> ‘Current project’s triggers’ -> ‘No triggers set up. Click here to add one now.’

This then sets the script to run every hour but I like to set it once per day. Change ‘Hour Timer’ to ‘Day Timer and now the script will run one per day around midnight.

Go forth and script!

So hopefully that got you interested in controlling gmail through scripts. Gmail has a great reference section. We could do some fun things like set emails with labels depending on how old they are, and in turn change the colour of labels. This could make it easier to see lingering emails. Just one of many little automated tasks gmail can perform.

Read More

Learn to Code – 3.0 Sol LeWitt Retrospective

Sol LeWitt was an artist. A very clever one at that. At some point, he questioned the value of art that was “created” by one hand – the artist. Instead of creating art – the output. He created the input – the rules. So his art became sets of rules by which his draftsmen used as a basis to create his art. Genius.

Sol LeWitt #289

WALL DRAWING #289: A SIX-INCH (15CM) GRID COVERING EACH OF THE FOUR BLACK WALLS. WHITE LINES TO POINTS ON THE GRID. 1ST WALL: 24 LINES FROM THE CENTER; 2ND WALL: 12 LINES FROM THE MIDPOINT OF EACH OF THE SIDES; 3RD WALL: 12 LINES FROM EACH CORNER; 4TH WALL: 24 LINES FROM THE CENTER, 12 LINES FROM THE MIDPOINT OF EACH OF THE SIDES, 12 LINES FROM EACH CORNER.

By using these rules you can your very own Sol LeWitt art. This is frankly quite awesome. The rules or the “system” are the art. It’s computational art without computers. But to subvert this idea…what if we used computers to create reproductions of Sol LeWitt art. Why would we do this? Well by recreating the art based on these rules, we might actually learn to code in the process.

Tutorials coming soon…

Read More

Intersections of Art, Code & Advertising.

At the recent Eyeo Festival I ran a panel with the theme “Intersections of Art, Code & Advertising”. I was bordering on a nervous wreck when you are presenting with your peers, and have the sharpest minds in the field sat in the front row. Grateful I had the brilliant minds of Stefanie Posavec, Memo Akten and Golan Levin there.

The reason why I wanted to talk about advertising at Eyeo (the best data viz / computational arts festival you could ever imagine) was that advertising is fastly becoming important in this space.

The TLDR summary is :- Advertising has evolved from the traditional. The internet has democratized creativity and new expressions of creativity by artists can be easily found. Don’t take other peoples work as your own and expect nobody to notice. The interactive arts community is small, vocal and many in the community would really like to work on exciting projects for brands (if it fits). They need a roof over their heads, food on the table and health insurance as do all of us.

Advertising can be a powerful way to communicate and sometimes a force for good. It can be useful or just straight entertainment. So don’t be afraid to talk. Get to work with each other. Make mistakes and hopefully one day we’ll along get along.

There is *so* much more that needs to be discussed further.

What is “good” advertising?

How can we all collaborate together?

How can we break down the layers in agencies (and at the client level) to get to better work, faster.

How can ideas on their own be protected or paid for?

How we creative an environment for artists to want to share their R&D efforts with agencies.

How do you even predict the output of your work when when your tools are generative. How do you even convince a client to fund this?

It’s taking a long time but the traditional ways of working are changing. Recently Cinder won the first Innovation Lions at the Cannes festival. Cannes is the advertising equivalent of the Oscars so this is very *very* big deal.

I hope this panel sparks a lively dialogue between interactive artists and advertising agencies. Feedback greatly appreciated…

Read More

What I’m looking for in a creative technologist

Recently I’ve been getting introduced to people who want to work as a creative technologist who don’t quite fit the mould. Rather than try and counter erroneous articles or set off on a rant about the vastly different experiences of what makes a creative technologist, I thought it best to put down my opinion in the hope I might attract the right folks.

As it is also coming up to end of year for many students, a little guidance might help out.

So.

What I’m looking for in a creative technologist (at an ad agency)

Let’s start by defining the part in parenthesis – the integrated advertising agency – BBDO NYC

BBDO NYC is an advertising agency that provides solutions to client problems that are generally creative expressions of an idea – TV, Print, Radio, Websites, Banners, Social Media things, Content things, Apps, Interactive installations, Shelf wobblers (maybe I’m making that up) etc etc .

Those things can work across all manner of spaces and places. We collaborate with our partners to produce those solutions. We don’t generally do in house production. This is an important distinction. A creative technologist for a company that does all their own internal production might be different to what I’m looking for.

  • Evidence of creative thinking AKA ideas

This sounds so incredibly obvious but it is amazing how many people fall at this hurdle. We are in the business of ideas. From big to little, slow to fast, expensive to cheap etc etc. We want ideas. You must be able to show that you able to come up with some sort of idea that is more than a utility.

But how do you show this? Good question. Let’s change the question.

  • Evidence of creative thinking + an ability to make them

Most advertising creatives have a ‘book’. Their portfolio in other words. Some of it is work they’ve managed to get made coupled with with amazing yet technically impossible ideas. This is what I don’t really want to see unless it is wrapped in some sort of understanding that you know it is impossible or you tried and failed. I love seeing evidence of ‘failure’ but I always like to reframe failure as not quite succeeding. Feels a bit more positive.

A real portfolio is so easy to make by hand (a list of links) or use one of the many free portfolio solutions that I would expect to see some sort of collection of work and an explanation of how you were involved.

So what sort of work?

If you’ve been lucky to work on bigger scale projects, then I would like to see ideas that mix technology and art with the real world in a seamless way. Some recent things I like ->

smart – EBALL

Great installation showcasing the agility of the Smart with a fun mashup of the real world and a digital experience.

5th Avenue frogger

Another simple mashup of the real world and a digital experience.

Hack Projects

I always like to see fun little projects e.g breakuptext.me or iQuit, or things people make at hackdays like The Infinite Jukebox. The more of these the better. It shows you are actively getting mucky with making little ideas.

Prototyping

Examples of prototyping are always great. Especially if you are pushing at the envelope of a new technology. You can’t just rely on this type of experimentation. Prototyping should lead to ideas.

A link to your Git Hub would be the cherry on top.

  • Summary

Be curious.
Always be making (with friends if possible).
Go to hackdays.
Release your projects into the world.
Drop me a line.

Read More

Learn to Code – 2.4 Damien Hirst Spot Paintings – Random

Continuing our learn to code tutorials, we are going to take a look at Randomness.

In the last tutorial we finished recreating the Damien Hirst spot painting seen below but with if statements.

We also started to recreate the larger scale piece below (but we didn’t quite get around to adding colour).

We’ve mentioned that setting the colour of each spot individually would be tedious and setting these randomly would be super awesome.
So let’s investigate randomness.
Start with the JSFiddle from the last tutorial, fork it and then rename the title to say ‘2.4 Damien Hirst Spot Paintings’.

Task – Create a random number

Creating random numbers on computers is really really hard. Lot’s of really clever people spent years trying to do this and lucky for us, Processing.js has a random() function already for us to use.
Let’s try an experiment. In the loop below the code – for(y=0;y<numberofrows;y=y+1) {
Add in the following code –

[sourcecode language=”javascript”]
alert( random () );
[/sourcecode]

If you run the code now, you’ll see a popup alert where each alert will be a rather long random number.

Task – Randomness within a range

Right now we have four colours for our spots – blue, yellow, purple and red. To pick one of these at random, we’ve got to figure out a way to associate a random number with a colour. The first step would be generate random numbers between 1 to 4 and each number would be a whole number – 1, 2, 3 or 4.

In the random code we’ve added, we can change it so it only generates numbers between 1 and 4 –

[sourcecode language=”javascript”]
alert( random (1,4) );
[/sourcecode]

If you run the code now, you’ll see a popup alert where each alert will be a rather long random number but now between 1 and 4.

We need to round these numbers to be whole numbers and we can use the round() function to do this for this.

[sourcecode language=”javascript”]
alert( round( random (1,4) ) );
[/sourcecode]

If you run the code now, you’ll see a popup alert where each alert a number between 1 and 4.

Task – Associate a random number to a colour

Perhaps you can sense where we are going with this as now we need to associate a number to a colour. Let’s create our own associations.

1 = blue

2 = yellow

3 = purple

4 = red

We then need to write some if statements that compare the random number we’ve generated to the numbers we’ve defined, then we set the colour accordingly.

Let’s create a variable to store the random number in. Replace the code alert( round ( random (1,4) ) ) with the following –

[sourcecode language=”javascript”]
colour = round ( random (1,4) );
[/sourcecode]

Task – Finish up

So now we have a colour variable, we can write those If statements to set the colour.

[sourcecode language=”javascript”]
if(colour == 1) {
fill(blue);
}
if(colour == 2) {
fill(yellow);
}
if(colour == 3) {
fill(purple);
}
if(colour == 4) {
fill(red);
}
[/sourcecode]

Task – Increasing the canvas

Let’s wrap up by increasing the site of the canvas and reducing the spotsize.

[sourcecode language=”javascript”]
spotsize = 10;

numberofcolumns = 30;
numberofrows = 20;
[/sourcecode]

We’ve successfully used random numbers to colour the spots.

Read More

Learn to Code – 2.3 Damien Hirst Spot Paintings – If

Continuing our learn to code tutorials, we are going to take a look at If Statements.

In the last tutorial we started to recreate the Damien Hirst spot painting seen below but with loops.

We didn’t quite finish from the last tutorial as we left the colour of every spot to be blue. Let’s find a way to set the correct colour of every spot and for this we are going to use the If statement.

Start with the JSFiddle from the last tutorial, fork it and then rename the title to say ‘2.3 Damien Hirst Spot Paintings’.

Task – Set the spotsize

We should start by showing just four spots with the spotsize to be 150.

[sourcecode language=”javascript”]
spotsize = 150;

numberofcolumns = 2;
numberofrows = 2;
[/sourcecode]

If you run this code you’ll see four blue spots.

Task – Figure out the spots

In the loop code we are setting all the spots to be blue – fill(blue)

We can replace blue with red, purple or yellow and this will change the colour of all of the spots. So we need to tell the code to only set a certain colour for a certain spot. So we need a way for the code to understand which spot we are drawing.

As we have a loop in a loop and we have two variables  x & y which increment – we can use them to figure out which spot we are drawing.

Let’s try an experiment. In the loop below the code – ellipse(x*spotsize*2+spotsize/2,y*spotsize*2+spotsize/2,spotsize,spotsize);

Add in the following code –

[sourcecode language=”javascript”]
alert(x + " " + y);
[/sourcecode]

If you run the code now, you’ll see each spot drawn in turn and also an alert will pop up showing the x & y for that spot.

So we now know :-

The top left spot is drawn when x = 0 and y = 0;

The bottom left spot is drawn when x = 0 and y = 1;

The top right spot is drawn when x = 1 and y = 0;

The bottom right spot is drawn when x = 1 and y = 1;

Task – Set the blue spot

Now we know the values of x & y for each spot, we can set the colour

To do this we finally use the If statement. It is really simple to understand.

We need to write some code which works like this – if some value is equal to some other value else then do some stuff.

More specifically – if x is equal to 0 and y is equal to 0 then set the spot colour blue

In the code, remove the alert line we just added. Now where the fill(blue) code is, replace this with the following code below –

[sourcecode language=”javascript”]

if(x == 0 && y == 0) {
fill(blue);
}

[/sourcecode]

If you run the code now you’ll see the same four blue spots. Our code specifcally set the top left spot blue but a quirk in the way the code works has set all the others blue also. This is because the code uses the last fill colour we’ve used to draw the spots.

Let’s just step through this If statement because there are a few new things here to understand.

So the code – if(x == 0 && y == 0) { – This means if x is equal to 0 and y is equal to 0 then do the code inside the curly bracket.

The == means equal to. Why write x == 0 and not x = 0? Well x = 0 actually sets x to be 0. While x == 0 means check if x is equal to 0.

The && means AND. Both x  == 0 AND y == 0 have to be true before the code in the brackets will run.

These are called operators. There are loads of them. Dead useful.

Task – Set the yellow spot

We’ve set the top left spot to be blue, now set the bottom left spot to be yellow. From before we know that – if x is equal to 0 and y is equal to 1 then set the spot colour yellow.

Below the if statement for the blue spot, add in the following code –

[sourcecode language=”javascript”]

if(x == 0 && y == 1) {
fill(yellow);
}

[/sourcecode]

If you run the code now, you’ll see we’ve set the bottom left spot to yellow (along with the two other spots – remember that quirk).

Task – Set the purple spot

Now to set the top right spot to be purple. From before we know that – if x is equal to 1 and y is equal to 0 then set the spot colour purple.

Below the if statement for the yellow spot, add in the following code –

[sourcecode language=”javascript”]

if(x == 1 && y == 0) {
fill(purple);
}

[/sourcecode]

If you run the code now, you’ll see we’ve set the top right spot to purple (along with the last other spot – remember that quirk).

Task – Set the red spot

Now to set the bottom right spot to be red. From before we know that – if x is equal to 1 and y is equal to 1 then set the spot colour red.

Below the if statement for the purple spot, add in the following code –

[sourcecode language=”javascript”]

if(x == 1 && y == 1) {
fill(red);
}

[/sourcecode]

If you run the code now, you’ll see we’ve set all the spots to their correct colour.

We’ve successfully recreated the spot painting with another different way of doing so. The way we’ve just completed is fine for small amounts of spots but it isn’t really very useful if you want to colour 100 spots. To put an if statement for every spot would take a while.

A way to colour a large amount of spots very quickly is to randomly pick the spot colour. So for the next tutorial we will look at randomness.

Read More

Learn to Code – 2.2 Damien Hirst Spot Paintings – Loops

Continuing our learn to code tutorials, we are going to take a look at loops.

In the last tutorial we recreated the Damien Hirst spot painting seen below but with variables.

Let’s onto something larger scale.

You can imagine just how tedious it would be to fill out the code for every single spot. You would be typing for days. Luckily computers are pretty darn good at repeating things and for this, we are going to learn about loops.

I should say this is a pretty lengthy tutorial so get yourself a nice cup of tea and time to tackle this one.

Task – Loop the Loop

One way for our code to repeat so we can draw hundreds of spots is to use a For Loop. We draw a spot, we set it’s position and colour and repeat this code a set number of times. This is the essence of a loop. Let’s just try to create one to understand how to use one.

Start with the JSFiddle from the last tutorial, fork it and then rename the title to say ‘2.3 Damien Hirst Spot Paintings’.

Let’s clean out all of the code that draws the spots. This is the code under – // draw the spots

Where you previously had code to draw spots, add in the code –

[sourcecode language=”javascript”]
for() {

}
[/sourcecode]

This is the start of our For Loop. Notice it has brackets () that need some values and it also uses curly brackets {}. Anything inside these brackets is part of the loop.

We need want to tell it what number we want to start at and how many times to repeat.

[sourcecode language=”javascript”]
for(x=0;x}
[/sourcecode]

To recap –

x=0 – means we’ve set a variable x to equal 0.
x<10 – means we loop only while x less than 10.
x=x+1 – means every time we loop, add 1 to x.

Add in the alert(x) code into the for loop.

[sourcecode language=”javascript”]
for(x=0;xalert(x);
}
[/sourcecode]

If you run the code now, a popup window will launch with the copy – The page at fiddle.jshell.net says: 0

As you press OK, you’ll notice the number increase by 1 until 9. Which is exactly how we’ve described the for loop to work in the code.

Task – Draw a line of spots

So we have a way to loop through code and we can now use this to draw a line of spots.

We know to create a spot we need two lines of code.

One to set the colour e.g. fill(blue);
One to set the position, the width and the height e.g ellipse(75,75,spotsize,spotsize);

In the For Loop you’ve already created, remove the alert code and add in the code to draw a blue circle at position 75,75.

[sourcecode language=”javascript”]
for(x=0;xfill(blue);
ellipse(75,75,spotsize,spotsize);
}
[/sourcecode]

If you run the code now, you’ll see one blue spot. You might wonder why this is the case, afterall we are looping 10 times and making 10 blue circles. The reason is super simple. We are drawing 10 circles on top of each other.

To see 10 different circles we need to draw them all in a different position. In the For Loop we have the variable x incrementing from 0 to 9. If we use this variable and multiple it by another number, each circle can then have a unique position.

[sourcecode language=”javascript”]
for(x=0;xfill(blue);
ellipse(x*30,75,spotsize,spotsize);
}
[/sourcecode]

If you run the code now, you’ll see a rather strange elongated blue shape.

We can make the spotsize smaller to see individual spots.

[sourcecode language=”javascript”]
spotsize = 30;
[/sourcecode]

If you run the code now, you’ll a line of spots.

Task – Make the spots fit

Now I think it’s a good time to tidy up the code with some variables and also to make the canvas only be as big as the amount of spots we need. We need a variable to set the amount spots going horizontally and vertically. Add the following variables inside the setup –

[sourcecode language=”javascript”]
numberofcolumns = 10;
numberofrows = 1;
[/sourcecode]

If we have a spot size and the number of spots then we can figure out the size of the canvas by multiplying them together. Before the size(450, 450) code, add the following code –

[sourcecode language=”javascript”]
canvaswidth = numberofcolumns*spotsize;
canvasheight = numberofrows*spotsize;
[/sourcecode]

We just need to replace the fixed size in size(450, 450) code with the variables we’ve now created.

[sourcecode language=”javascript”]
size(canvaswidth, canvasheight);
[/sourcecode]

If you run the code now, you’ll see a white strip as we’ve lost our spots.

Because we’ve shrunk our canvas, we need cropped out the spots so we need to draw them from the top left corner. Hopefully you’ll remember the ellipse code controls this. We need to change the vertical position of the spot and right now these are being drawn 75 pixels from the top of the canvas. In the ellipse drawing code, replace the 75 with 0 –

[sourcecode language=”javascript”]
ellipse(x*30,0,spotsize,spotsize);
[/sourcecode]

If you run the code now, you’ll see 10 cropped spots.

We now need to move the spots down and to the right a little so they fit the canvas perfectly. By how much is pretty easy to see. We use spotsize as our variable for controlling the size and we can simply divide this by 2 to get the right amount to move the spot by.

So we are essentially adding a little bit extra to where we are currently draw the spots to put them in the right place.
We should also change that ‘x*30′ to be ‘x*spotsize’ to clean things up too. Your changes to the code should look like the code below –

[sourcecode language=”javascript”]
ellipse(x*spotsize+spotsize/2,spotsize/2,spotsize,spotsize);
[/sourcecode]

If you run the code now, you’ll see all ten spots fit the canvas perfectly.

We should finally tidy up the for loop as currently it is fixed to draw up to 10 spots. In the for loop, replace x<10 with x

[sourcecode language=”javascript”]
for(x=0;xfill(blue);
ellipse(x*spotsize+spotsize/2,spotsize/2,spotsize,spotsize);
}
[/sourcecode]

You can change the numberofcolumns variable and hopefully you’ll see the canvas resize to fit any number of spots.

Task – Loop in a Loop

We’ve made a horizontal line of spots fit the canvas and now we can do the same for the vertical lines of spots. For this to work, we are going to put a loop in a loop or properly known as a Nested Loop.

If the loop we have now is using a x variable and it counts up to numberofcolumns, then the new loop should use a y variable and count up to number of rows. We also should increment the y value by 1 every loop we make. We also need to adjust the ellipse code to draw the ellipse with the correct y position.

Remember you need to close the loop with a curly bracket }.

If you’ve followed the tutorial I think you should be able to figure out how to add this new loop. The code below is a reference if you get stuck (try to not copy and paste this) –

[sourcecode language=”javascript”]

for(x=0;x for(y=0;y fill(blue);
ellipse(x*spotsize+spotsize/2,y*spotsize+spotsize/2,spotsize,spotsize);
}
}

[/sourcecode]

If you run the code now, you’ll see a line of 10 blue spots. Which isn’t helpful in any way because nothing has changed. You might remember we have a variable which controls the number of rows. Please change this to 10.

[sourcecode language=”javascript”]
numberofrows = 10;
[/sourcecode]

If you run the code now, you’ll see a nice 10 by 10 grid of blue spots.

Task – Perfect the spot spacing

If you compare the grid of spots we’ve created to the actual painting you’ll notice that our spots are all touching each other while the spots should be spaced exactly one spot width away from each other.

We can accomplish this pretty easily by multiplying the amount of spacing by 2.

[sourcecode language=”javascript”]
ellipse(x*spotsize*2+spotsize/2,y*spotsize*2+spotsize/2,spotsize,spotsize);
[/sourcecode]

If you run the code now, you’ll see the 5 by 5 grid of blue spots with the correct spacing.

Task – Making the canvas fit

Just a couple more tweaks to get everything perfect. Because we’ve doubled the spacing between the spots, we need to increase the canvas by double also.

[sourcecode language=”javascript”]
canvaswidth = numberofcolumns*spotsize*2;
canvasheight = numberofrows*spotsize*2;
[/sourcecode]

If you run the code now, you’ll see the 10 by 10 grid of blue spots with the correct spacing.

Task – Making the canvas fit

The last tweak we have to make is to make the canvas fit perfectly to the spots. You’ll notice this on the right and bottom of the canvas. By the looks of things, we seem to be one spot too big. So the easiest would be to subtract the spotsize from the canvas width and canvas height.

[sourcecode language=”javascript”]
canvaswidth = numberofcolumns*spotsize*2-spotsize;
canvasheight = numberofrows*spotsize*2-spotsize;
[/sourcecode]

If you run the code now, you’ll see the 10 by 10 grid of blue spots which fit perfectly into the canvas. Changing the size of the spots, the colour of the spots, the number of rows of columns is as simple as changing the value of a variable now.

We’ve learnt some really really important concepts in the this tutorial. Some pretty hard things to wrap your head around. So feel really happy you got this far.

The next tutorial, we should look at how we colour individual spots so we can complete the picture.

Read More