The examples below can be used to teach an introductory class to computer science. I currently use them in a High School (grade 10) Computer science class. The course is one semester long.
All of the examples have been written using P5js. For beginners, OpenProcessing is an easy to use editor. Examples of students work can be seen on here. The code files for each of the codes can be downloaded from this github rep.
Many examples have been based on some of the many great videos from Daniel Schiffman.
All of the examples have been written using P5js. For beginners, OpenProcessing is an easy to use editor. Examples of students work can be seen on here. The code files for each of the codes can be downloaded from this github rep.
Many examples have been based on some of the many great videos from Daniel Schiffman.
Paintbrush
This is an easy sketch to introduce the idea of interactivity and in particular using the position of the mouse to change different parameters. It is also useful for students to develop a better intuition of how to use a coordinate system to create symmetry.
Some of the important functions used are:
mouseX, mouseY : the current x (horizontal) and y (vertical) position of the mouse.
pmouseX, pmouseY: the x (horizontal) and y (vertical) position of the mouse of the previous frame.
map(): easy way to 'map' the range of a variable to a different range.
dist(): this function returns the distance between two points.
mouseDragged(): the function is only called when the mouse is mouse and pressed.
A good challenge for the students can be to find different ways to add more symmetries or to change the colors.
The sketch is adapted from the course work from the coursera course on creative programming for digital media and mobile apps.
Some of the important functions used are:
mouseX, mouseY : the current x (horizontal) and y (vertical) position of the mouse.
pmouseX, pmouseY: the x (horizontal) and y (vertical) position of the mouse of the previous frame.
map(): easy way to 'map' the range of a variable to a different range.
dist(): this function returns the distance between two points.
mouseDragged(): the function is only called when the mouse is mouse and pressed.
A good challenge for the students can be to find different ways to add more symmetries or to change the colors.
The sketch is adapted from the course work from the coursera course on creative programming for digital media and mobile apps.
Generating random numbers
There are different ways to generate random numbers in processing. The random() function returns numbers over a uniform distribution. The randomGaussian() function returns a number close to the mean with a spread given by the standard deviation. The noise() function return a value along the Perlin noise curve.
This animation can be useful to demonstrate the different functions to generate random numbers and how the different parameters affect the numbers generated.
A simple first sketch to explore how random numbers can be used is to make a random walker as shown below.
This animation can be useful to demonstrate the different functions to generate random numbers and how the different parameters affect the numbers generated.
A simple first sketch to explore how random numbers can be used is to make a random walker as shown below.
Below is an animation that shows how Perlin noise is generated through time.
The random walker sketch can then be combined with the paintbrush sketch to create beautiful symmetrical drawing.
For Loops and grids
Below is one of my favorite example to teach for loops. It is inspired by the work of Jared Tarbell on space invaders.
It is an interesting example because it uses nested loops, some element of randomness and symmetry. This connects well between the previous examples. Every time the sketch is refreshed a new character is formed.
Possible extensions can be asking students to have more than two colors, make a bigger grid (for example 7 by 7) etc
It is an interesting example because it uses nested loops, some element of randomness and symmetry. This connects well between the previous examples. Every time the sketch is refreshed a new character is formed.
Possible extensions can be asking students to have more than two colors, make a bigger grid (for example 7 by 7) etc
It is possible to do a similar project on arduino using the MAX7219 LED Matrix. The code is on github. See demo below.
The Chaos Game - Sierpinski Triangle and fractals
The chaos game is simple way to get a better understanding of coordinate systems and to introduce the concepts of iteration and fractal geometry.
Following a simple rule over and over an interesting pattern can emerge.
The rule is as follows:
1) Have three points (A, B and C) of known coordinates that form the vertices of a triangle.
2) Choose a starting point inside the triangle X.
3) Pick one of A, B or C at random
4) Draw the mid-point between X and the vertex chosen. Make this new point your new X.
5) Repeat step 3 and 4 a few (hundred thousand times).
So all that is needed to follow the rule is to know how to find the mid-point of two points in a coordinate system.
It is possible to get other pretty fractal patterns using a square, pentagon or hexagon in step 1 and different ratios than half the distance (some suggestions are made at the end of the code on the sample below.
The numberphile youtube channel has a great video about the chaos game.
Following a simple rule over and over an interesting pattern can emerge.
The rule is as follows:
1) Have three points (A, B and C) of known coordinates that form the vertices of a triangle.
2) Choose a starting point inside the triangle X.
3) Pick one of A, B or C at random
4) Draw the mid-point between X and the vertex chosen. Make this new point your new X.
5) Repeat step 3 and 4 a few (hundred thousand times).
So all that is needed to follow the rule is to know how to find the mid-point of two points in a coordinate system.
It is possible to get other pretty fractal patterns using a square, pentagon or hexagon in step 1 and different ratios than half the distance (some suggestions are made at the end of the code on the sample below.
The numberphile youtube channel has a great video about the chaos game.
Below is a short video (made using processing) that demonstrates the fractal nature of the pattern obtained. This is a good example to show how computers can be used as both telescopes and microscopes to explore numbers.
PONG
A fun project for students to work on is trying to reproduce one of the first video game, Pong. It is a simple game but when the students have to program all of it from scratch it is not easy. To help the students develop the game, it might be a good idea to break it down into small chunks, such as getting the paddles to move when pressing keys, then getting the ball to bounce etc. The difficult part is to get the collisions working. Using a physics engine would make it easier but the point is to practice the different concepts learnt so far. When the students are done reproducing a game that is similar to the original they can try to improve it by designing new features.
A simple example of a functional (but not optimal) Pong game can be seen here.
Examples of students work can be seen on our class gallery.
A simple example of a functional (but not optimal) Pong game can be seen here.
Examples of students work can be seen on our class gallery.