IRL Chicago
Web Editor


"The idea becomes a machine that makes the art"
Sol Lewitt, Artforum, 1967.

drawing with code

intro to Javascript

just like there are different human languages, there are different programming languages. while the basic principles of programming are the same across languages the syntax and details change ( just like human languages ). we’ll be learning JavaScript ( the programming language of the web ) to create generative compositions.

writing a program is a lot like writing a recipe, you write your ingredients on top and your instructions below, and you follow your instructions from top to bottom. in a program your “variables” are your ingredients and your “functions” are groups of instructions.


we use variables to store data, this can be text, numbers and even other pieces of code. you can name them whatever you want, so long as you start with var and use the proper syntax, in this case the = after the name and the ; after the value.


if a program is a recipe, functions are where we put our instructions. we name each function whatever we want, just like we do our variables, so long as we add parentheses () at the end of the name. then between the { and the } we add our instructions.


you can also assign a list of values to a single variable, this is called an array. an array vaue begins with a [ followed by the values separated by , and then ends with a ]


an object is something that has its own “properties” ( which store data like variables ) and “methods” ( which are instructions that do things like functions ). you can access an object’s properties and methods by writing the name of the property followed by a . and the name of the desired property or method with a ; at the end.

in the example above I’ve written a few “comments”, a comment is a note the programmer leaves in the code to explain what’s happening in that particular part of the program. you can write a comment by first typing // and then whatever message you want. comments are really helpful, use them to make notes!

drawing with canvas

getting setup

we use the script element to add javascript to our html pages. you can do this in one of two ways. the first way is by creating a pair of script tags and then in the src attribute specifying the javascript file you want to load. for example we’ll be loading a small javascript library I made for demoing ‘canvas’ in class

the second way to add javascript to your code is to create a pair of <script> </script> tags inside your body and write your custom javascript between them.

before writing any code it’s important to open up your “error console”, chrome’s javascript console can be opened by clicking command+option+j or in the menu View > Developer > Javascript Console. the console will let us know if we made a mistake in our code and which line the mistake is on. the console is also a place for testing out javascript, for example if you type the follow code and hit enter canvas.width the console should return the length of your canvas ( which is different for everyone depending on how wide they have their canvas open )

drawing rectangles

to draw a filled rectangle use the ctx.fillRect() method. this method takes four parameters (1) the x position, (2) the y position, (3) the width of the rectangle, (4) the height

to erase a rectangle use the ctx.fillRect() method. this method takes four parameters (1) the x position, (2) the y position, (3) the width of the rectangle, (4) the height

to draw a stroked rectangle use the ctx.strokeRect() method. this method takes four parameters (1) the x position, (2) the y position, (3) the width of the rectangle, (4) the height

you can change the color of the rectangle by using the ctx.fillStyle property, and the stroke color by using the ctx.fillStroke property

drawing "paths"

drawing more complicated shapes ( or "paths" ) requres a few lines of code (1) ctx.beginPath() to start a new path, (2) ctx.moveTo(x,y) to specify where you want to start your path (3) ctx.lineTo(x,y) to draw a line to a new point ( create as many of these points as you want ), (4) then you can either stroke your path with ctx.stroke() or fill it with ctx.fill() or both, and finally (5) ctx.closePath()

drawing cirlces

to draw an arc or circle use the ctx.arc() method instead of the lineTo method, the arc method takes a few parameters explained in the diagram below

drawing images

you can use the ctx.drawImage() which takes three parameters, (1) the image element, (2) x position, (3) y posotion. to create an image element in javascript use the new Image(); and assign it to a variable, now set that object's ( the variable you made ) .src property to the path to your image.

before you can use the drawImage method you need to make sure the image has loaded, for this you need to crate an "event listenter"

creative math

the javascript Math object can do more than just output PI, it has lots of built in methods including Math.sin() and Math.cos() for sine and cosine, Math.round() to round a number, and my favorite Math.random() which outputs a random number between 0 and 1. Javascript ( like most programming languages ) has mathematical operators for doing arithmetic like + addition, - subtraction, * multiplication, / division and % modulus ( which returns the remainder of a division operation instead of the product )

we can use these in different ways to create algorithms for our sketch

controlled randomness

you can use Math.random() to create variables for positioning. the random method returns a value between 0 and 1, so if you want your range to be wider ( say between 0 and the width of your canvas ) you need to multiply it by some number

you can use Math.random() to generate a random integer ( whole number ) between 0 and some number and then use that to choose an item in an array. This is another example of controlled randomness.



watche these vids...

** SAIC Alumni **