Posted: July 21st, 2012 | Author: Sermad | Filed under: Code, learntocode | 4 Comments »
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 -
alert( random () );
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 -
alert( random (1,4) );
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.
alert( round( random (1,4) ) );
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 -
colour = round ( random (1,4) );
Task – Finish up
So now we have a colour variable, we can write those If statements to set the colour.
if(colour == 1) {
fill(blue);
}
if(colour == 2) {
fill(yellow);
}
if(colour == 3) {
fill(purple);
}
if(colour == 4) {
fill(red);
}
Task – Increasing the canvas
Let’s wrap up by increasing the site of the canvas and reducing the spotsize.
spotsize = 10;
numberofcolumns = 30;
numberofrows = 20;
We’ve successfully used random numbers to colour the spots.
Posted: July 19th, 2012 | Author: Sermad | Filed under: Code, learntocode | 1 Comment »
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.
spotsize = 150;
numberofcolumns = 2;
numberofrows = 2;
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 -
alert(x + " " + y);
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 -
if(x == 0 && y == 0) {
fill(blue);
}
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 -
if(x == 0 && y == 1) {
fill(yellow);
}
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 -
if(x == 1 && y == 0) {
fill(purple);
}
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 -
if(x == 1 && y == 1) {
fill(red);
}
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.
Posted: July 19th, 2012 | Author: Sermad | Filed under: Code, learntocode | 2 Comments »
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 -
for() {
}
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.
for(x=0;x}
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.
for(x=0;xalert(x);
}
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.
for(x=0;xfill(blue);
ellipse(75,75,spotsize,spotsize);
}
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.
for(x=0;xfill(blue);
ellipse(x*30,75,spotsize,spotsize);
}
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.
spotsize = 30;
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 -
numberofcolumns = 10;
numberofrows = 1;
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 -
canvaswidth = numberofcolumns*spotsize;
canvasheight = numberofrows*spotsize;
We just need to replace the fixed size in size(450, 450) code with the variables we’ve now created.
size(canvaswidth, canvasheight);
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 -
ellipse(x*30,0,spotsize,spotsize);
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 -
ellipse(x*spotsize+spotsize/2,spotsize/2,spotsize,spotsize);
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
for(x=0;xfill(blue);
ellipse(x*spotsize+spotsize/2,spotsize/2,spotsize,spotsize);
}
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) -
for(x=0;x for(y=0;y fill(blue);
ellipse(x*spotsize+spotsize/2,y*spotsize+spotsize/2,spotsize,spotsize);
}
}
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.
numberofrows = 10;
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.
ellipse(x*spotsize*2+spotsize/2,y*spotsize*2+spotsize/2,spotsize,spotsize);
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.
canvaswidth = numberofcolumns*spotsize*2;
canvasheight = numberofrows*spotsize*2;
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.
canvaswidth = numberofcolumns*spotsize*2-spotsize;
canvasheight = numberofrows*spotsize*2-spotsize;
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.
Posted: July 12th, 2012 | Author: Sermad | Filed under: Code, learntocode | 2 Comments »
Continuing our learn to code tutorials, we are going to take a look at variables.
In the last tutorial we recreated the Damien Hirst spot painting seen below.
Task – Create a variable
We learnt how to put spots on the canvas but we really should tidy up our code before we move on, and learn how to use variables.
A variable is way to store information (be it numbers, text or other things) inside of it.
Before we start, we should FORK
Let’s make one to see. Inside the setup function add the code -
spotsize = 150;
Now instead of setting the width and height of the spot to be 150, we can now use spotsize.
Task – Replace spotsize
Go through the code and replace the width and height of every spot. If you run the code now, you’ll see the the four spots we had originally.
Task – Change the spotsize
Change the spotsize variable to 15 -
spotsize = 15;
If you run the code now, you’ll see the the four spots but they are now TINY. Amazing huh.
Task – Change the colour
Change the spotsize variable back to 150 so we can be to back where we were originally. Making a variable to store the colour is slightly different than before, as colour is stored as numbers e.g fill(243,205,252);
We can’t store three numbers in one variable without doing something slightly different. Below your spotsize code, add the code -
blue = color(36,128,253);
Here we have created a new variable – blue and stored the correct the blue colour in it. As we mentioned before, uou’ll notice the syntax for doing this is not the same as setting the size. We have had to surround the three colour numbers with the ‘color’ type.
In the code, replace the first fill with the code -
fill(blue);
If you run the code now, you’ll see the the four spots as before.
Task – Change all of spot colour
We’ve changed the blue, but now we need to change the purple, yellow and red. Below the blue colour code, add the following code -
purple = color(243,205,252);
yellow = color(226,244,60);
red = color(224,28,66);
Then go through and change the fill colour of each spot to use their corresponding variable. If you run the code you should have the same four spots again.
We’ve completed our little look into the wonderful world of variables. You’ll agree they have huge amounts of benefits and we’ll build on these principles by introducing other uses for variables in further tutorials.
Posted: July 11th, 2012 | Author: Sermad | Filed under: Code, learntocode | 2 Comments »
Continuing our learn to code tutorials.
Love or loathe the works of Damien Hirst, we are going to ‘recreate’ a spot painting and explore how you put things on screen exactly where you want.
Task – Set the canvas
As always start with the base JSFiddle.
Let’s set the size of the canvas. Hopefully you’ll remember this must go in the the setup function -
size(450,450);
Set the background colour of the canvas to be white -
background(255,255,255);
Task – Change the page background with CSS
Right now the result of all your code should might look like nothing has changed. This is because the default background colour of a webpage is white and we’ve set our canvas to white.
So I’m going to introduce something called CSS or Cascading Style Sheets. This is another way to change the colour of a web page.
In the CSS box in the top right of JSFiddle. Paste in the following code -
body {
background-color:rgb(192,192,192);
}
If you run the code now, you’ll see a white canvas on a grey background.
CSS is beyond what we’ll learn in these tutorials because but if HTML is the masonry of the web, then CSS is the decoration.
Task – Draw a circle
To draw a circle is thankfully pretty straight forward. We use the function – ellipse
We need to give this ‘ellipse’ a postion on the canvas and a width and a height (of course using the same width and height creates a circle). So in total we require four parameters.
In the setup function, paste the following code -
ellipse(0, 0, 150, 150);
If you run the code now, you’ll see the outline of a semi circle in the top left of the canvas.
So why is this? The code placed the middle of a circle, width and height 150 pixels at position top left of the canvas (this is position 0,0). If we want the circle to fit exactly in the top left hand corner we need to move the circle to the right a bit and down a bit. By how much you say? Well if only half the circle is being drawn now, we need to move the circle to the right by half of its width and down by half of its height.
Replace the current circle code with the following code -
ellipse(75, 75, 150, 150);
If you run the code now, you’ll see the outline of the circle in the top left of the canvas.
Task – Set the colour of the circle
Setting the colour of a circle, using a function called fill
We need to pass in a colour to the fill function and we do this in the usual way – By passing in R, G, B
For this code to work, it must be in the code the line before the ellipse function.
fill(33,127,249);
If you run the code now, you’ll see the a blue circle with a black outline in the top left of the canvas.
Task – Remove the black outline on the circle
You will have noticed there is a black outline on the circle. This is technically called a ‘stroke’. We can remove this with a really simple function – noStroke
For this code to work, it must be in the code before the fill function.
In the line above the fill function, paste the following code -
noStroke();
If you run the code now, you’ll see the a blue spot in the top left of the canvas.
Task – Understanding the canvas
As we have one nice coloured spot, we need another three. This is easy enough to do. We just repeat the previous code changing the colour and the position in turn.
Before we do this, let us try and understand how the canvas knows where to draw things.
Look at the image below which defines the canvas. It might ring some bells from something you did in school many moons ago. We know from before that the canvas is made up of pixels and is basically a giant grid.
The top left of the canvas is the origin and is set as 0,0 pixels.
The top right corner of the canvas is 450 pixels to the right of the origin and is 450,0 pixels.
The bottom left corner of the canvas is 450 pixels below of the origin and is 0,450 pixels.
The bottom right corner of the canvas is 450 pixels below and 450 pixels to the right of the origin and is 450,450 pixels.
We pretty much always use the top left corner of the canvas as our starting point when placing anything on the canvas. We can now think of the canvas as having two axis – the x – horizontal axis and the y – the vertical axis.
Task – Drawing the spots
To add in the spot in the top right corner, if we draw it at 450 pixels along the x axis it will be half off the canvas. So we need to draw it 450 pixels minus half of the width of the circle.
As like the previous spot, we also need to draw it 75 pixels from the top of the canvas.
After the previous spot code, paste the following code -
fill(243,205,252);
ellipse(450-75, 75, 150, 150);
You’ll notice I’ve written the position of of the spot as 450-375 instead of 375. Thankfully programming languages can do these sort of sums for us.
If you run the code now, you’ll see the two spots.
For the third spot we need to draw this in the bottom left of the canvas.
After the previous spot code, paste the following code -
fill(226,244,60);
ellipse(75, 450-75, 150, 150);
If you run the code now, you’ll see the three spots.
For the fourth spot we need to draw this in the bottom right of the canvas.
After the previous spot code, paste the following code -
fill(224,28,66);
ellipse(450-75, 450-75, 150, 150);
And if you run the code now, you’ll hopefully see our replica of the Damien Hirst.
In the next tutorial we’ll look at how you can save your work using jsFiddle.
Posted: July 11th, 2012 | Author: Sermad | Filed under: Code, learntocode | 1 Comment »
We’ve been using jsFiddle for a little while now and we should really delve into it a little so we can get some of it’s extra benefits.
First thing is to register if you don’t have an account.
The dashboard let’s you see all your fiddles and also let’s you delete one.
As you code, you can save your code by pressing the ‘update’ button. If you press the ‘update’ button again you’ll get a new version. This is an amazing feature as it let’s you go back to previous versions of the code. If you are eagle eyed you will notice the web address has a number – this updates every time you press ‘update’.
If you want to create a new fiddle but based on a previous fiddle, press the fork button.
If you click on the Info panel on the left, you can change the title of your fiddle.
On the left is a panel with ‘Choose Framework’. We always have this set as Processing.JS 1.3.6
Posted: June 22nd, 2012 | Author: Sermad | Filed under: Code, learntocode | 1 Comment »
In the colour tutorial we did a little background into jsFiddle, colour theory and a tiny bit of coding. We didn’t deconstruct the code in anyway so let’s step through this.
Task – Understand scripting
Open this blank colour tutorial in jsFiddle. In the HTML panel put the code -
<script type="application/processing">
</script>
All our code needs to be put in something that tells the browser what type of code it is. So we do this by using the <script> HTML tag. There is a specific syntax of HTML (HyperText Markup Language) and it is really easy.
I wont go too much into HTML (HyperText Markup Language) but it is the the masonry of the web. All websites need this to work and this is why I’ve chosen jsFiddle for the tutorials as it hides a lot of the HTML and let’s us get on coding without worrying about this. A good thing to know is when you start a tag e.g. <script> you have to close it somewhere. You do this by repeating the tag but this time with a backslash e.g </script>
To draw nice coloured squares or anything we need a canvas.
After the previous code, in the HTML panel put the code -
<canvas></canvas>
We now have a web page made with HTML and we are going to be writing javascript & processing.js that displays inside a canvas. (Press HTML below to see the code).
Task – Add the setup code
Between the <script></script> tag, in the HTML panel put the code -
void setup() {
}
This ‘setup’ code is something called a ‘function’. You’ll meet these a lot in programming. This setup code runs once (and only once) – as soon as you press ‘Run’. Think of this as when you turn on the ignition of your car and the engine starts, the car needs to do all sorts of things before you can drive away.
What does the ‘void’ mean? This means the function doesn’t return anything. We’ll explore this further in another tutorial.
What do the brackets after setup() mean? This means the function doesn’t accept any values. We’ll explore this further in later in the tutorial.
What do the curly brackets {} mean? Any code inside the curly brackets means it belongs to that function and it will run when we call that function.
Task – Set the size of the canvas
We need to set the size of the canvas.
Inside the setup function, put the code -
size(400,400);
So here we are using a function – size and this sets the size of the canvas we want to draw on. We need to give the canvas a width and and a height, and we do this by passing the function two numbers – 400 and 400
The first number corresponds to the width (in pixels) and the second number also to the height in (also in pixels).
If you want to, you can read more detailed background into this size function or if you really want to, try and change the width or height of the canvas. You should see a grey box.
You might notice at the end of the line is a semicolon ; - These signify you’ve finished the code for that line. It’s a good habit to do this.
Now you should have the following code on screen.
Task – Set the background colour
We need to set the background colour of the canvas. After the size function, add on a new line -
background(10,55,171);
As we’ve seen before, we are using a function. In this case the function is background and we are passing in numbers which set the red, green and blue colour. Remember from the last tutorial?
So in this tutorial we went into some syntax and also alluded to some bigger concepts – functions being the main one.
The next tutorial we’ll be looking at the works of Damien Hirst.
Posted: June 21st, 2012 | Author: Sermad | Filed under: Code, learntocode | 2 Comments »
So here is the first in a series of ‘learn to code’ tutorials.
Let’s start with something incredibly basic as you really want to get comfortable with the tools at hand.
Task – We are going to change the colour of a square
Open your your favourite web browser and visit this jsFiddle page.
Looks a bit confusing right? So let’s just quickly look at JSFiddle.
This is a way for you to code directly in your web browser.
Everything in the purple box is the menu and we’ll go through some of these features as and when we need them.
Everything in the blue box is where you code. This is really where we’ll play.
Everything in the orange box is where you see the result of the code. The pretty pictures we create.
Everything else (such as the menu on the left, the CSS box and the JavaScript box) is extra so let’s not complicate things by going through all of that.
P.S. You can make the boxes bigger/smaller to suit your screen.
Colour
So you see the blue box on the right hand window. This is copy of klein international blue made famous by Yves Klein.
TV’s,computers, mobile phones etc display graphics as millions of tiny dots (pixels) and they show colour as a combination of three colours - Red, Green and Blue. If you grab a magnifying glass and look at your computer monitor you’ll see these pixels. So by mixing red, green and blue of all of the the pixels together, you can display a lot of colours (16.7 million I think).
So let’s have a fiddle with the code to understand this a little more. Find the line :-
background(10,55,171);
This command ‘background’ tells the computer to draw funnily enough the background colour.
It needs three colours – Red – Green - Blue
They are each represented by a number. Starting at 0 going to 255 (You can if you wish go deeper into why this is but for now it might be too much).
Task – Change the colour
Change the first number from 10 to 150 then press ‘Run‘. This causes jsFiddle to try and run our code again.
If you run the code now, you’ll see a purple box (you can see this below if you press ‘result’ below.
Task – Set any colour
Visit the website colorpicker, pick a colour of your liking and then copy some the R,G,B values into the JSFiddle and then press ‘Run’. Try this a few times to get a sense of how the colour changes depending on how much Red, Green and Blue you have.
What colour do you think background(0,0,0) is?
Pat on the back there. You’ve completed task 1 and in the next task we are going to go through each line of code to understand everything…
Posted: June 20th, 2012 | Author: Sermad | Filed under: Code, learntocode | 5 Comments »
So here we are. I said I would write some tutorials on how to learn to code through some simple exercises.
We are going to try to learn some practical coding concepts. Nothing like building a website. Just small snippets that might be fun.
We are going to cut a lot of corners to get up to things working fast. The tutorials are aimed at a coding beginner.
The tutorials will always have a clear goal to create some sort of visual / graphic art. I believe that clear visual results breed curiosity and more curiosity will let keep people interested.
Each tutorial will try and teach you atleast one programming concept and hopefully you’ll get something nice and visual to go with it.
We’ll writing our code in a combination of the JavaScript language and processing.JS.
I’ll try to keep the jargon to a minimum.
We’ll also be using jsFiddle for the coding environment. This helps get you started quicker as you don’t need to download anything to get started as you can code from your web browser.
Disclaimer
I’m not a trained ‘teacher’ or have huge amount of experience teaching programming. I just wanted to try out some ideas on how to teach some principles of coding. If you want an amazing book on learning programming principles and processing then please take a look at Learning Processing by Dan Shiffman.
So if something is too easy/too hard/not explained then please comment. Then i’ll fix it.
Please also understand there are many many ways to code. There is no ‘right’ way and do not take what I write as such. It’s about getting excited and then hopefully you’ll go off and try some things.
Posted: February 10th, 2012 | Author: Sermad | Filed under: Code, Random Musings, Web | 8 Comments »
Via Murat on twitter, I saw this article today about Kaitlyn Trigger, the girlfriend of Instagram co-founder Mike Krieger. She wanted to understand more about his world and so she set herself a challenge to learn to code. With some friends she came up with this super cute idea – Lovestagram
She spent weekends and countless hours learning Python and how to make the idea a reality. She is obviously a smart lady and huge props to her for not giving up. But the thing (for me) that was the really *really* telling and interesting part, was this quote.
“Learning to program isn’t the hard part. The biggest challenge is figuring out how all the moving parts of a web application fit together. There’s no book for that.”
This is so spot on. The coding of the frontend is one matter. The backend is another. Linking the APIs together. Then it’s buying a domain. Setting up the domain. Ftping the files in. Testing it out across all your web browsers and phones. Making sure all that stuff works. This is what making things for yourself and putting them live in the real world teaches you. It opens questions that you hopefully can answer but trying it out. As Aristotle put it -
For the things we have to learn before we can do, we learn by doing.
It also highlights the slight problem I have with ‘learning to code’ initiatives like Codecademy. Don’t get me wrong in any way. Getting people to learn to code is awesome. But having been through a heck of alot of the exercises on that site, I’m just not sure it is really that useful. On one hand the exercises are not really task based but syntax based. E.g. learning the syntax of a ‘for’ loop.
The other issue for me is that they teach you javascript – the client side scripting language created for web, yet they teach you no practical web based tasks.
A better approach in my opinion is to set clear fun tasks and you learn to code by proxy. So to try to answer this question, I’m going to commit myself to developing a short set of tutorials that will try and teach some practical code by recreating art. Because I believe this is a really easy metaphor to understand, and people respond really well to visual outputs of coding.
I’ve already sketched out a few tutorial ideas so hopefully these will start rolling out in a few weeks.
