Graphics Programming
- Frankfurt International School - - 2014-15

 Useful Links :  Processing-Online   Processing-WebSite   Getting Started with Processing
                        EzJS Editor   IO Gui for Processing
Next Graded Assignment : Dice Game Program - 15 June at 18:00

Last Day of Class - 22 June 2015

Only 20 minutes today.

Find something fun to do - suggestions:

Mac Webcam Games

Lots of Music Tools

Exercise your brain with

Competitive Typing

Something else?

VIDEOS Day! - 19 June 2015

Pixel Pioneers: A Brief History of Graphics, Part One
Sprite Supreme: A Brief History of Graphics, Part Two
Polygon Realm: A Brief History of Graphics, Part Three
Voodoo Bloom: A Brief History of Graphics, Part Four
Future Crisis: A Brief History of Graphics, Part Five


Cicret Smartphone Bracelet

Future Computers

Mac Webcam Games - try out some of these Web-Cam Controlled Games

GAME Day! - 18 June 2015

Here are lots of THINKING games, to exercise your brain and creativity.

Try various games, searching for the most challenging and interesting.

Turn in Dice Game Project - 15 June 2015

Your Dice Game Project is due today at 18:00.

No, you may not turn it in late.  If you are not finished,
you need to turn in the program that you have,
as it stands. 

- Find the folder containing your program
- Right-click on the folder and choose "Compress"
- Upload the resulting .zip archive into Haiku

If you finish early, you may do some work for another class
or share your program with some other students.

Reminder - 1 June 2015

Your project is due in 2 weeks, on 15 June.

Today is our last class before then.

If you have questions, try to ask them today.
Otherwise, you can come in to room 276 whenever
you don't have an exam and talk to Mr Mulkey (if he is there).
Otherwise, try sending an email.

Final Project - 18 May - 15 June

Write a program in either JavaScript or Java to make
a dice game, as described in these notes.

Be sure to ask questions if you are uncertain,
so that you get a good, productive start on the project.

GUI Dice Rolls - 8-11 May 2015

Read these notes and do the practice exercises.

Here is a second version of the GUIDice program.

Quiz Tuesday - Open notes, using your computer,
fixing and improving a program with GUI components.

GUI Text Controls - 6 May 2015

Here is a popular kids game called MadLibs.

You can try it out once online.

Then download this program, which is a first try
at a MadLibs game.

== Practice ==

- Add one more line to the [Adventure] story.
   It could be "And Mary had a cat, too."
    Your program some insert some word changes
     in this new line.

- Create a story for the [Funny] button.
   If you wish, you may take an idea from the madglibs web-site.
   You probably need to add extra TextField boxes
   to accommodate more changed words.
   Notice that  you can have EXTRA TextField boxes
   in case they are needed for another story.

- Write a new problem that has several labels and TextField boxes.
   Each label contains a question.  The user must type an answer
   into the TextField that is next to each Label question.
   Start with 3 questions and answers.  If the user types
   all 3 answers correctly, he WINS.  If not, the computer
   ERASES the contents of every incorrect answer box,
   using a command like this:


   That replaces the text in [answer2] with NOTHING.

Menues in Java - 5 May 2015

Download this sample program.

This will work on a MacBook (hopefully).  It might not work
so well on a Windows PC - ask for help if you have problems.

== Practice ==
- Fix the pictures to have a more suitable size
- Add one more item to each menu
  In the Video menu, it should be a video, etc.
- Add a new menu - it needs to be below the others (in the next row).
   This should be a MATH menu.  It should contain:
    - a formula that pops up
    - a picture of something mathematical
    - a video about math
    - If possible, make all 3 items refer to the same math concept.
- Add a SCIENCE menu with REVIEW information for
   your science class - it can be text and/or pictures and/or videos
- Add another menu of your own choosing

No More HTML - Back to Java - 4 May 2015

We have had too many problems with HTML,
so we will do some more work with Java.

GUIplusTimes example

The sample above shows how to use a GUI IO library - for Buttons and such -
to write a Processing program with Java AWT GUI components.
The teacher will explain how this works and make suggestions
for useful changes.

This page outlines how the flow-of-control functions.


Make the program better.

(1) Add a Button for subtraction, and one for division.

(2) Add a Button that displays a joke, e.g.:
        How many programmers does it take to change a light bulb?
        It doesn't matter - it's a hardware problem.

(3) Add a Button that asks for a password,
      then tells whether it is correct or not.

(4) Add a button to [Solve an equation].
       When clicked, the user must type the correct solution,
       and the computer tells whether it is correct.

(5)  Add another math problem button, then another, etc.

CSS Quiz - 29 Apr 2015

Download this file (or copy the source code)
and open it inside Kompozer - or you can
use Komodo if you prefer.  Follow the printed instructions,
then upload your finished .HTML page into Haiku -
in the assignment titled "CSS Quiz".

If you finish early (which is likely), please read
and explore this tutorial : Gradient Backgrounds

Menues - 28 Apr 2015

Read this page and do the experiments at the bottom of the page.

Navigation Bar with CSS - 27 Apr 2015

Read this page and do the experiments at the bottom of the page.

Making Buttons with CSS - 23 Apr 2015

Today we will learn to use CSS <style> commands to control colors and roll-overs.

Read these notes

CSS is good because you write less code - by using a CLASS name,
you get the corresponding STYLE information for free.

Plan on having a Programming Quiz on Wed 29 Apr
about buttons, CSS and other Dynamic Elements.
You will receive a partially finished web-page and
you will need to fix/finish it.

There is lots of information on the WEB about CSS.
If you want to learn more on your own,
you can try this tutorial:  W3schools CSS3 Tutorial
,,, for example :  Gradient Backgrounds

Here is another CSS tutorial, more like a textbook.

More Buttons - 22 Apr 2015

The teacher will give a brief introduction to Kompozer.

Here are some more sample buttons.

Use Kompozer and GIMP (or some other graphics program, maybe )
to make buttons like the ones on the sample page.

Tomorrow we will see how to make buttons AUTOMATICALLY,
rather than spending time using a graphics program.

Web Page Navigation - 21 Apr 2015

We will focus on various Dynamic HTML techniques for navigation in web pages.
This should "look nice" and ALSO function correctly.

Today we will focus on ROLL-OVER buttons.
Here is a very simple explanation of JS code for rollover buttons.

Here is a more interesting, fun example:
Funny Faces

To make an image button:

(1) Get (or make) two nice pictures, like the red and green buttons here:


  Sample Button (rollover works slowly)

(2)  Save your 2 images in a folder where you will make a web page

(3)  Put an image on your page, using one of the button pictures

(4)  Make an .onmouseover function that changes the picture to the other picture.
      Also make .onmouseout to change the picture back when the mouse leaves.
      Also add an .onclick function so the button does something.

  apic.onmouseover = function()
   apic.src = "button2.jpg"

  apic.onmouseout = function()
   apic.src = "button1.jpg"

 apic.onclick = function()
   location = ""

For this to be useful, each button also needs some TEXT.
You can add the text by using a graphics editor to change
BOTH of the buttons. 

Another possibility is to use actual PICTURES
that have some meaning.  For example, for a link to the
CNN web-site, you could use the CNN logo as the picture,
and make a second copy that is BRIGHTER or has
some other change.

Make a web-page with 3 different ROLLOVER buttons -
(1) a button with text on it
(2) a button using a PICTURE or LOGO
(3) a button that gets BIGGER when the mouse rolls-over,
      then gets smaller again when the mouse leaves
Try to get all three done in an hour.  Don't waste lots
of time making very "pretty" buttons.

==== HOMEWORK ====
Before class tomorrow, make sure you have BOTH of the following installed:

Continue Rube Godlberg Machine - 13-17 Apr 2015

Continue "building" your Rube Goldberg Machine -
as assigned on 24 March (below).

This is due on 17 Apr at 18:00.
If you have problems - e.g. something is not working
as expected - you need to ask questions and get
help ASAP.

Coding Rube Goldberg - 26 Mar 2015

Rube Goldberg Example

In the example above, click on the [Atrium] box.
Then the arrow will move, hit the box and the box bounces.

The trick to making the coding easier is to make a FUNCTION
for each action.  Then make a START function, which uses
setTimeout to start each action at the right time.
If you do this, then each individual action can be coded
with the times starting at ZERO - that is the ZERO time
for that specific function.

Here is the code for the ATRIUM.ONCLICK (the starting function):

   atriumPic.onclick = function()    // this is the START
   atriumMove = function()
   arrowToBox = function()
   atriumBounce = function()


Rube Goldberg Machine - 24 Mar 2015

Below are a list of Rube Goldberg Machine ideas that turned
into projects that won a yearly contest.  You may select
one of these ideas, or make up your own, as you wish.

Build it Backward

Your assignment is to make a WEB-PAGE with a Rube Goldberg Machine.
There should be a [Start] button that starts a sequence of actions.
Each action will involve some object moving and touching another object -
then that will start the second object moving.

The best way to approach this is to start with one of the ideas below.
Make a web-page where that one single action happens.
THEN add the action that comes BEFORE that action, and triggers it to start.
Then add another action before that, etc.

Keep It Reasonably Simple - BUT INTERESTING!

You are not expected to create something as complex as the little
boy in the video.  This is due on the Friday after vacation, so you have
less than 2 weeks to complete it (not counting vacation time).
As a rough estimate, you could expect to add one action per day,
so a total of 9 actions altogether.  You do not need to make anything
more than that.  If some of the actions are complex, like involving
an animation as well as movement, then you can make fewer than 9.
Totally realistic actions are quite difficult.  For example, a hammer hitting
a nail should actually have the hammer rotating.  But you can keep it simple
by having the hammer just move down and up.

How Much is Enough

Let's say that the finished page should contain 5-9 actions.
And don't make them last too long - about 10 seconds maximum
for each action.

Here are the suggested topics - but feel free to do something else:

2013 Hammer A Nail
2012 Inflate A Balloon and Pop It!
2011 Watering A Plant
2010 Dispense an Appropriate Amount of Hand Sanitizer into a Hand
2009 Replace an Incandescent Light Bulb with a More Energy Efficient
          Light Emitting Design
2008 Assemble a Hamburger
2007 Squeeze the Juice from an Orange
2006 Shred 5 Sheets of Paper
2005 Change Batteries and Turn on a 2-battery Flashlight
2004 Select, Mark and Cast an Election Ballot
2003 Select, Crush and Recycle and Empty Soft Drink Can
2002 Select, Raise and Wave a U.S. Flag
2001 Select, Clean and Peel an Apple
2000 Fill and Seal a Time Capsule with 20th Century Inventions
1999 Set a Golf Tee and Tee Up a Golf Ball
1998 Shut Off An Alarm Clock
1997 Insert and Then Play a CD Disc
1996 Put Coins in a Bank
1995 Turn on a Radio
1994 Make Cup of Coffee
1993 Screw a Light Bulb into a Socket
1992 Unlock a Combination Padlock
1991 Toast a Slice of Bread
1990 Put the Lid on a Ball Jar
1989 Sharpen a Pencil
1988 Adhere a Stamp to a Letter
1987 Put Toothpaste on a Toothbrush

One Programming Trick

Notice that you will have a long sequence of setTimeout commands.
This is quite difficult if you try to do it in one long sequence of commands.
The teacher will show you a better, more "scalable" approach on Thursday.
For today, just start making the final action.

Quiz and Rube Goldberg - 23 Mar 2015

1.  Programming Quiz - write your solutions on paper and turn in (20-30 min)
      You may use any old programs or notes that you find useful,
       but do not communicate with other students.
       Web Page      Questions

2.  Starting Rube Goldberg Machines (Homework)

     -  watch the  Little Kid Video

     -  try out the Trap-o-matic Rube Goldberg Game

Eye Candy - 20 Mar 2015

We can add a nice, pretty SLIDE SHOW to our school map.
This keeps the viewer's interest. 
Look at this example page - click the [Slide Show] button.

The slide-show is implemented by the following code:


 <button id=slideShow style="position:absolute;left:100px;top:600px">Slide Show</button>

   <div id=showdiv style="position:absolute;left:300px;top:400px"></div>
   Resize(showdiv, 400,300)

   photos = Array('photo1.jpg', 'photo2.jpg', 'photo3.jpg')
   slideShow.onclick = function()
      Slideshow('showdiv', photos, 500, 2000)

   ....  the rest of the Javascript is down below ....

You will notice some problems with the slide-show.
You should add a slide-show to your school map,
but improve it.

- get at least 5 pictures from Google images
- use a Graphics Editor to resize your images to a standard size,
   for example 400x300 pixels.  If the images are different shapes,
   then resize them to make them all the SAME HEIGHT,
   and allow the widths to be different.
- Save all 5 pictures in the same folder with your school map web-page.
- Change the ARRAY command so that includes your 5 pictures.
- Place the SHOWDIVE in a better place, at the bottom-right
   corner of the screen.
- Add the starter BUTTON to your page, and make sure it all works.

Invisible DIVs - 18 Mar 2015

This sample page contains an INVISIBLE DIV
that is placed directly over the Auditorium (#9).
The DIV is not actually invisible, but it contains no text
and has no background color, so you cannot see it.
But you CAN roll the mouse over it - that won't work with invisible divs.
This is done with .onmouseover and .onmouseout:

 <div id=auditorium style="position:absolute;left:370px;top:100px;width:55px;height:45px;"></div>
<script> Locate('box',ABS, 500,400)

auditorium.onmouseover = function()
{ = "lime"
auditorium.innerHTML = "Audi-

auditorium.onmouseout = function()
{ = ""
auditorium.innerHTML = ""


Add some more invisible divs over various items in the map.

Continue - 17 Mar 2015

We will look at ZOOM in a bit more detail:

example from the book

Book as PDF (ZOOM is chapter 6 #49)

Continue the assignment from yesterday - the animated/articulated school map.
It's practice.  If you succeed in adding one new item -
and that involves several changes - then add another item.

Using PJ.JS Again - ZOOM!! - 16 Mar 2015

******* BUG ALERT *********

The official PJ.JS library contains
a bug that stops the ZOOM command
from working correctly.

Here is a FIXED copy of PJ.JS.
Download this and use it
instead of the original version.

Plugin Javascript :

Look at this Sample Interactive Map with Slide, setTimeout and ZOOM!!!

You can download the .zip archive and do the practice tasks below
(the .zip archive contains the correct version of PJ.js):

FIRST:    Fix the construction area, including the green arrow going
   toward the bubbles.


Bird World Quiz - 12 Mar 2015

QUIZ - download this folder

When you have finished the quiz, please read/watch about
the future of programming and about IB Computer Science.

Continue with Parametric Trajectories - 11 Mar 2015

Start with this web-page, then make some changes.

You can download the whole folder here.

Let's try to do the following:
- change the penguin's circular path:
   - to continue 4 times around the circle
   - to be an ellipse, that is wider than it is high

- change the bear's trip :
   - to continue down to the bottom of the picture
      and then back to the starting point, make a triangle
   - make the bear "dance" by switching pictures back and forth
   - make the bear PAUSE for 5 seconds at each corner of the triangle
   - make the bear repeat the triangle several times

-  add another object that just moves back and forth
    across the bottom of the ice picture

- make one object that moves in an interesting path,
   then touches another object, and then that
   object moves in an interesting path.
   For example, the first object moves in a circle,
   ends up touching another object (top of circle)
   and the second object moves in a circle in the
   opposite direction

-  Make more objects moving in TRAJECTORIES - practice!

*** Plan on an in-class programming quiz on Thu 12 Mar ***

Class Cancelled - 10 Mar 2015

Class is cancelled today, as the grade 10 students
are attending Career Day Presentations.

Senior student should plan on doing some work,
either for this class (Friday's assignment) or work
for another class.

Parametric Controls - 6 Mar 2015

We will start with this web-page, then make some changes.

You can download the whole folder here.

Let's try to do the following:
- change the penguin's circular path:
   - to continue 4 times around the circle
   - to be an ellipse, that is wider than it is high

- change the bear's trip :
   - to continue down to the bottom of the picture
      and then back to the starting point, make a triangle
   - make the bear "dance" by switching pictures back and forth
   - make the bear PAUSE for 5 seconds at each corner of the triangle
   - make the bear repeat the triangle several times

-  add another object that just moves back and forth
    across the bottom of the ice picture

*** Plan on an in-class programming quiz on Thu 12 Mar ***

Walking AND Dancing - 5 Mar 2015

This page shows the dancing bear animation
that is also moving (walking) at the same time.

Here is a .zip archive containing the WALKING file.

Continue making animations (as you started yesterday)
and add moving commands to some of them,
so they are animated and also moving.

More Animation with Dancing Bears and Loops - 4 Mar 2015

Here is a solution to the assignment from last lesson:
   Dancing Bears

That probably won't run directly from the website - you can download it here:
   Dancing Bears Zip

Now that you know how to write LOOPS that make animations,
practice by doing the following:

- make another animation, some other animal, that is dancing
- using a graphics editor, like
     - start with a small picture of an animal
     - cut out pieces of the picture and move them around,
        like the arms
     - save several different copies with the arms in various positions - at least 4 pictures
     - make an animation displaying your pictures, on after another
- make another animation with even more pictures, and more things moving

Dancing Penguin - 2 Mar 2015

Look at this sample page
and then follow the instructions.

Slide with SetTimout - 18 Feb 2015

Continue with these notes
working on practice exercises #8, 9, 10.

Remember you need PJ.js, all pictures
and your web-page in one single folder.

Slide with PJ.js Library - 17 Feb 2015

We can make objects (probably pictures) slide around on a web-page.
Read these notes for more information.

** Note that the sample programs will only work
** if you have the web-page, the images (ex.gif , oh.gif)

Practice : Do #1,2,3,4,5,6,7 in the NOTES above

Interactive Multiple Choice Quiz - 11 Feb 2015

We are going to make an interactive multiple-choice quiz.
You have 3 days of class to do this - that should be
relatively easy, so you don't need to hurry too much.

Read these instructions and look at the sample quiz.

The quiz (with many pages) is DUE  Tues 17 Feb at 9:30 am.

Make sure that all the web-pages and all the images
and IBIO.js are all in ONE SINGLE FOLDER.
Then COMPRESS the folder and UPLOAD the .ZIP file in Haiku.

Start Using Komodo - 9 Feb 2015

Here is an ANIMATED Math Problem web-page.

You can download the page, but you must save it
inside a folder that contains IBIO.js - otherwise it won't work.

You will notice that a SPAN element has been written in HTML
rather than using the MAKE command.  That is because
it contains an = sign, which messes up the MAKE function.

Open this file in KOMODO and do the following practice exercises:

(1) Add a nice TITLE at the top, in big text, using the H2 tag.

(2) Move all the Buttons and Input boxes down 50 pixels.
     You must also move the SPAN tag down 50 pixelse.

(3) Add another fraction and 2 more buttons, to make this problem:

      1            3           4           7  
    -----  +  -----  +  -----  =   ------
      2            9          12          6

(4) Make a similar page, but with WORDS instead of numbers.
      Each of the words in SQUARE BRACKETS below
      corresponds to an INPUT object and a BUTTON for the answer.

          [Mary] had a little [lamb]
          Its [fleece] what white as [snow]
          And everywhere that Mary [went]
          The lamb was [sure] to [go].

(5) Make up your own math problem or poem
      and make a corresponding interactive web page.
     At the end, it must say "right" or "wrong".

Robot Colors - 6 Feb 2015

Looking Ahead

Next week, we will look at a variety of LIBRARIES,
especially with GRAPHICS functions.
Using these will be easier with a standard editor. 
So, before class on Monday, you should download
and install KOMODO from (choose Komodo Edit, not IDE)
(Faster download from this server)

==== TODAY ====

Copy the program below and follow the instructions in the PRACTICE section.

You might find this list of color names useful:

// This program makes a robot head.
// It contains a SELECT list with color.
// Choosing an item in the list changes 
// the color of the eyes.
// Notice that the program uses an extra BOUND function
// for setting LEFT,TOP,WIDTH,HEIGHT.  This makes it
// easier to create new DIVs, because there is less
// typing required - the BOUNDS function automatically
// adds "px" to each number and assigns it to the
// correct PROPERTY.  This use of a FUNCTION is typical
// of PROCEDURAL languages.  It is not a typical
// Object-Oriented-Programming technique, and
// hence requires slightly different syntax:
//    using      bounds(leftEye,110,70,30,30)
//  instead of   leftEye.bounds(110,70,30,30)
// Also notice the SYNTAX of the make("select..) command.
// The words for the list are entered like this:
//     Eyes|red|green|blue|orange
// This is not standard Javascript or HTML,
// but a convenience supplied by the IBIO.js library used in EzJS.

eyes.onchange = function()
   var c = eyes.value = c = c


bounds = function(obj,l,t,w,h)
{ = "absolute" = l + "px" = t + "px" = w + "px" = h + "px"




* === PRACTICE ===
* 1 - Add another SELECT list, with colors, that changes
*      the color of the MOUTH when clicked.
* 2 - Add more DIV objects to make the following:
*       - a body
*       - 2 arms
*       - 2 legs
*     Then add a COLOR list for each item, e.g.:
*      body color, arms color, legs color
* 3 - Make a BUTTON that can make one eye "wink",
*     by making it smaller (use bounds).
* 4 - Add a HIDE function - it looks like this:
*       hide = function(obj)
*       {
* = "hidden"
*       }
*     Make a button that can hide the legs, by executing:
*        hide(leftLeg);
*        hide(rightLeg);
* 5 - Make a corresponding SHOW function, using:
* = "visible"
*     and add a BUTTON that makes the legs visible again.

Animals Page - 5 Feb 2015

Download this .zip file : EzJS with Animals

To make this work properly, you must open the EzJS.HTML page
that is in this folder, so that it can successfully find the picture.
Then copy the Ez code from the Animals.txt file.

The Animals page uses BUTTONS and DIVS to identify specific animals.

(1) Add another BUTTON for another animal -
     the BUTTON should move orange box on top of the animal

(2) Add another colored-div that appears on top of another animal.

(3) Change the buttons so that the orange box always
     changes size to match the animal correctly.

(4) Add an IF command like the following:

      if( == "")
          this.innerHTML = "<H1>ELEPHANT</H1>"
 = "rgba(255, 0, 0, 0.2)" 
          this.innerHTML = "";
 = "";

       Then the elephant box turns on and off when you click.

(5)  Make the Butterfly DIV turn on and off when you click.

(6)  Now make a new page with a different picture,
       where the picture has numerous objects or people in it.
      Add some locator buttons and some colored DIVs.
      Make sure you save the new picture in the same folder
      with the EzJS.html file.

Objects, Browsers and Security - 3 Feb 2015

We will discuss how objects and browser security function,
specifically in connection with this program:

showPage.src = ""

make("button;id=spiegel;innerHTML=der Spiegel")
make("button;id=bing;innerHTML=Bing Search")

abc.onclick = function()
   showPage.src = ""

spiegel.onclick = function()
   showPage.src = ""

bing.onclick = function()
   showPage.src = ""




world.onclick = function()
   showPage.src = ""

friday.onclick = function()
   showPage.src = ""

You can escape the http vs https annoyance by downloading EzJS
and running it from the local hard-disk.  This also has the advantage
that you can put image files into the local EzJS folder,
and then include them EzJS web-pages.  Here is a downloadable version:

Buttons and Links - 2 Feb 2015

Here is an EzJS program that has 4 buttons,
which link to pictures, web-sites and videos:

make("button;id=clown;innerHTML=Happy Clown")
make("button;id=frogs;innerHTML=Ugly Frogs")
make("button;id=crash;innerHTML=Chair Crash;left:40px;top:60px")
make("button;id=big;innerHTML=Big Video;left:200px;top:10px;width:200px;height:100px;")

clown.onclick = function()

frogs.onclick = function()

crash.onclick = function()

big.onclick = function()

There is not too much mysterious about these commands,
but the teacher will present a brief explanation.

== Practice ==

  1. Copy the code above into EzJS Simplified Online Editor
    Then run it with [Test it] and check that it works properly.
    Be sure you are using a proper browser like Chrome (not Safari)
  2. Add 4 more buttons that link to :
    - an image
    - a web-page
    - a YouTube video
    - a YouTube video that starts in the middle

Now add the following code that clicks-through 3 pictures:

You will need to TYPE this code - you cannot copy and paste.

== More practice ==

3.  Check that your code works properly and clicks through
     3 evil clown pictures when you click on the image.

4.  Add another picture to the "stack".  You will need to make
     several changes in the code to make 4 pictures work.

Starting Javascript - 30 Jan 2015

Overview of Javascript

We will be using Javascript to create Web-Pages.
We will concentrate on GUI controls and other
business oriented graphics.

We will start by using a simplified JS editor,
that includes a helpful LIBRARY of non-standard functions:

EzJS Simplified Online Editor

Here is a simple program with 3 buttons,

using ALERT and PROMPT and IF..

 make("button;id=riddle;left:100px;top:50px;innerHTML=Elephant riddle")
 riddle.onclick = function()
    alert("Why are elephants fat?")
    alert("from eating too many marshmallows")

 make("button;id=haiku;left:200px;top:50px;innerHTML=Haiku poem")
 haiku.onclick = function()
    alert("To err is human \n but to really foul things up \n use a computer")

 make("button;id=math;left:150px;top:100px;innerHTML=Math problem")
 math.onclick = function()
    guess = prompt("Add up :  1+3+5+7+9+11+13+15+17+19")
    if(guess == 100)
        alert(", try again..")
Copy the code into EzJS.
Then add more buttons -
riddles, poems, math questions,
anything else you can think of.

Baby Catcher Quiz - 28 Jan 2015

Download this program : 

Do your quiz and turn it in (on paper).

== Javascript ==

Here is a simplified Javascript editor:

It has sample programs in [Samples],
with instructions for practice exercises.
Start with a simple program (near the top)
and do what the instructions say.

You will notice the Javascript looks very much
like Java, but ; semicolons are not required.
There are some other things that are simpler,
like no need to write "int" or "String" when
you create a variable.

If you have something else to do (math homework?)
you can do that instead.  We will start learning
Javascript seriously on Friday.

Bouncer Practice Quiz - 27 Jan 2015

Download this Bouncer program

Answer these questions about Bouncer

Your quiz tomorrow will be similar to the questions above -
you will use Greenfoot to INSPECT a program, and
then answer questions ON PAPER.

Frogger - Collisions - 26 Jan 2015

Reminder - Quiz on Wednesday

Download this .gfar file : Frogger.gfar

Do the practice tasks listed below (in any order you like).

Multi-Level with Gif Animations - 22 Jan 2015

Download this SonicLevel4 program.

Adding a new Animated Gif

You can add a new Animated Gif to your project.
Use a relatively small gif image, under 200 pixels.

1- download the animated .gif file, e.g. runner.gif
    and save it into the project folder, in the [images] sub-folder

2 - create a new Turtle sub-class, e.g. Runner

3 - include the following code in your Runner class:

       public Runner()
           // any other code here

       public void act()
         // movement code here

Now you can use your new Turtle as normal,
and it will appear as an animation.

Adding Another Level

You can add another level to the game, for example  [Level5].
You should "insert" this, so that [Level4] starts [Level5] when it finishes.
And then Level5 should start [Ending] when it finishes. 

Today's Practice

1 - Play the game until you understand how it is played.

2 - Inspect the code until you understand how it works.
     Especially find out how to detect collisions.

3 - Find a new animated GIF online (search in Google).
     Then create a new Turtle sub-class that uses this .gif image.

4 - Add a copy of your new Turtle object into one of the levels.

5 - Add a new [Level5].  Create this as you wish,
     but use your new Turtle object, along with others.

     It should include all the following:
     - [Level5] should start when [Level4] finishes
     - use the mouseClick to control your new character
     - make the goal to have your player collide with something else
     - when finished, [Level5] should jump to [Ending]

6 - If you finish early, add another level .gif animation and
     another level for practice.

Multi-Level Greenfoot Programs - 21 Jan 2015

Download this SONIC program and open it in Greenfoot.

When it is running, you need to:
- compile all
- make a new [TurtleWorld] - don't start at Level 1 or Level 2

Add more worlds (levels) and more classes (objects)
so it's possible to click from one level to another to another,
and possible to go to all the levels.  You will need to add
more Turtle Actors and objects to make this work.

Make all your Turtle Actors move, otherwise it is boring.
Try to make another one like sonic, that moves around
the edges of the screen, maybe in the other direction.

Make some Turtle Actors that move back and forth,
or up and down, like the dolphin.

If you want to add an animated GIF, you must IMPORT
that into the Images library.

Investigating Greenfoot Commands - 20 Jan 2015

The students who did not complete the quiz on Friday
will have another chance today.

Students who are not working on a quiz should INVESTIGATE
the following Greenfoot programs (investigate means to
run the program, read the code, make small changes in the code,
until you understand how the programs work and what the code means).
Find new commands that do something interesting, then try
changing the commands to figure out how they work.

You will need to [Open in Greenfoot] to download each program.


Open this project :
- Find out how to make a mouse-rollover that changes the color of some text.

Open this project :
- Find out how to make sound effects.

Open this project :
- Find out how to shoot a bullet

Open this project :
- Find out how to drag-and-drop an object while the program is running

Open this project :
- Find out how to make objects bounce off of each other when they collide.

You might also find this page helpful :

Quiz and More Greenfoot - 16 Jan 2015

You must finish your quiz and show the running program to the teacher.
You may only work for a maximum of 30 minutes on your quiz.

After finishing, go to the main Greenfoot web-site:   

Find an interesting "scenario" (program).
Click the [Open in Greenfoot] button
to download the program and run it.
Investigate the program.  Look at the source code
for each actor.  Try to make small changes that
you understand and that work correctly.
Take notes about what you found out,
and we will have a class discussion on Tuesday.

Keyboard Controls - 15 Jan 2015

Download this scenario (program):  LTA

If you run it, you can use left and right arrows to steer the car.

  1. Look in the CAR class and find out what commands make the arrows work.
  2. Change the program so that the car moves more slowly.
  3. Change the program so that A and D steer the car.
  4. Make a DIFFERENT car class that works the same as the original CAR class,
    but this one is steered with the arrow keys.
  5. Now add an original CAR and one of the NEW CARS,
    and try playing this as a 2 player game.
  6. Go back to your drawing program from last class.
    Add a CAR actor, that is controlled from the keyboard
    and it draws lines as it moves around.
  7. Change one of the normal shapes so that
    it only draws lines (penDown()) when the D key is held down,
    and it stops drawing (penUp()) when the D key is released.
  8. Go back to the LTA program.  Make a 2 player game where
    the cars are both drawing lines when a specific key is pressed,
    but stop drawing lines when the key is released.


During the quiz, you may use your computer and any notes or
old programs you find useful (including web-sites).
You will receive a starting program, and you must follow instructions
to change/improve the program.  The teacher will check your
program when you are finished.

More Patterns and More Worlds - 14 Jan 2015

Download the Greenfoot Scenario (program):
Unzip this archive and then open it in Greenfoot.

This contains 3 different "TurtleWorlds".
You can choose which program you wish to see
by right-clicking on the "world", then choose [New TurtleWorld].

There are 3 different worlds.  Try out each one.
Then do the practice described below.

1. Red-circles Fresnel Interference

2. Spirals

3. Squares

4. Your World

Greenfoot Objects and Movement - 12 Jan 2015

Here are some notes about Greenfoot:

Starting with Greenfoot - 18 Dec 2014

To start with Greenfoot, try out the Lunar Lander Scenario.
It is in the Greenfoot/Scenarios folder.

You might also wish to download the following scenario and INVESTIGATE it.
To download the scenario, click on [Open in Greenfoot].
Then you need to EXTRACT the archive file,
and open the folder in Greenfoot.

Here are some notes for a first practice assignment involving Turtle Graphics.

Bouncing Orbs - 17 Dec 2014

New Topic - Install Greenfoot from

We will start using this on Thursday.

Today's Assignment - a little more Arrays practice

In Processing, click on File/Examples.
Open Topics/Motion/Reflection2.

This program contains an ORB that falls and bounces off the ground.
The ground is irregular, randomly tipping up and down.
So the ball bounces off in unpredictable ways.

Make changes to do any of the following - or anything else you find interesting.

Shape Arrays - Lots of Stars - 12 Dec 2014

Copy this program and do the practice exercises at the bottom.

Remember you have a test on Monday - about using ARRAYS.
Be sure to bring a working computer - you will need it.

Parameter Arrays - 11 Dec 2014

Load this program and do the exercises at the bottom.

Funny Words Stories - 9 Dec 2014

A famous word game is called Mad Libs.
Players choose "random" words and these are
placed into blanks in a story.  Then the story
is usually funny, because the words don't fit.

You can try it on this web-site: 

Here is a Java program that does something similar.
Copy this program into Processing, then do the
practice exercises.

Automated Jigsaw Puzzle - 8 Dec 2014

Download this program.

Read these notes and do the Practice excercises.

Using ARRAYS of Images - 5 Dec 2014

Here is a version of JigsawPuzzle that uses ARRAYS to store the pictures,
and then uses LOOPS for all of the commands.

The teacher will explain how to use Loops and Arrays sensibly.

== Practice ==

Download the program above.
FINISH the CHECK method, so that it checks ALL pieces
before displaying "Finished".

Dragging Only One Piece - 3 Dec 2014

To make sure that only one piece moves at a time,
you need to change the keyPressed method like this:

void mousePressed()

void tryDrag(DragImage im)
   if(!clown.dragging && !dog.dragging)
   {  im.clicked(mouseX,mouseY); }

If you have more than 2 puzzle pieces, then the IF(..) command
will be longer, with one item for each piece.

If you already finished your puzzle from yesterday,
you can make it better by splitting a large piece
into two smaller pieces.

"Snapping" Pieces Together - 2 Dec 2014

The teacher will show how to "snap together" pieces,
so the puzzle can be solved without moving the mouse
to the exact single correct pixel.  This is tricky, but only
requires some small changes to the DrawImage library.

  // Stop dragging
  void stopped() {
    {  snapped();
       dragging = false;
  void snapped()
     float sx = (float)Math.floor(x / 40)*40;
     float sy = (float)Math.floor(y / 40)*40;
     x = sx;
     y = sy; 

=== Second Practice ===

Now if you have a puzzle with 8 square pieces,
it is quite easy to solve.  To make it more challenging,
you can make more pieces in a variety of sizes.
Since "snapping" into position requires standard measurements,
you must be sure that all the pieces are "standard", like
a multiple of 40 pixels.  It could look like this:

If your whole picture isn't an exact multiple of 40 (in each direction),
you can either resize the image before chopping it up,
or leave off some of the edges. Now chop up another picture,
but this time make pieces of various sizes.  Then make the "snap"
changes in DragImage and check that your puzzle is solvable.

Draggable Puzzle Pieces - 1 Dec 2014

Try out this Jigsaw Puzzle.

Then download this Click-and-Drag Processing program.

Finish your Picture - 27 Nov 2014

Finish your interactive picture and turn it in.

You need to:
-  compress the FOLDER containing your program
-  upload the .zip archive in Haiku

Continue Making Interactive Picture - 26 Nov 2014

Continue making your attractive, interactive picture (due tomorrow).

Saving Pictures to Disk - 25 Nov 2014

Continue making your attractive, interactive picture.

You might wish to save copies of your picture(s) in graphics files.
You can save a copy of your picture to a graphics file
on the disk (in the sketch folder) like this:

int picnum = 0;

void mouseClicked()
     picnum = picnum + 1;

Pixel Colors Project - 19-27 Nov 2014

== Assignment ==

DUE DATE = Thursday 27 Nov at 18:00

Make an ATTRACTIVE and INTERESTING interactive picture,
using pixel-color changes and any other effects you wish.
DON'T use the Mountain Goat picture from the examples -
choose some other image. 

Spend time trying out various ideas, as well as various pictures.

Gradient Fill - 18 Nov 2014

Here is one more idea for pixel-oriented color change -
a "Gradient Fill".  It changes the color shading gradually,
one pixel at a time from top to bottom.

PImage img,img2;

void setup() {
  size(600, 450);
  img = loadImage(""); 
  img2 = createImage(img.width, img.height, RGB);

void draw() 
  for (int y = 0; y < img.height; y++)
    for (int x = 0; x < img.width; x++)
       int p = y*img.width + x; // pixel position
       color c = img.pixels[p];
       float r = red(c);
       float g = green(c);
       float b = blue(c);
       b = b * (y/200.0) ;
       r = r * ((400-y)/100.0);
       if(mouseY < 2*g)
       {  g = g - mouseY/2; }
       img2.pixels[p] = color(r,g,b);

  image(img2, 0 , 0);   // saves entire picture into a file on disk

void mouseClicked()

== Practice ==

Stripes - 17 Nov 2014

Copy the text into Processing, and then
make the changes described at the bottom.

PImage img,img2;

void setup() {
  size(600, 450);
  img = loadImage("");
  img2 = createImage(img.width, img.height, RGB);

void draw()
  for (int y = 0; y < img.height; y++)
    for (int x = 0; x < img.width; x++)
       int p = y*img.width + x; // pixel position
       color c = img.pixels[p];
       float r = red(c);
       float g = green(c);
       float b = blue(c);
//======   Here are the effects   ======      
       if(x < 200)
          r = 255;
       else if(x >= 200 && x < 400)
          r = r/2;  // this removes half of the red
          b = b/2;  // and half of the blue
                    // the result looks green
          b = b*3;
//====== end of EFFECTS section =======      
       img2.pixels[p] = color(r,g,b);


  image(img2, 0 , 0);  

(1) Try applying different effects to the 3 sections.

(2) Change the IF.. commands to make 6 stripes
    instead of just 3 stripes.
(3) Change the IF.. commands so the stripes
    are horizontal instead of vertical.
    That means you check the Y value instead of
    checking the X value.  You need to use
    different numbers for Y, because the picture
    is not as large up and down as it is across.
(4) Try writing "x+y" instead of "y".
    This will make diagonal stripes.
(5) Try writing "2*x-y" instead of "y"
    (or whatever you have.)
(6) Try various COEFFICIENTS, like 2.5*x - 1.2*y   


Pixel Distortions with the Mouse - 13 Nov 2014

Download pixels ver 2
Make the changes and improvements described by the teacher.


(1) Try changing the calculations in the CHANGE method
     to produce some other interesting effects.

(2) Add a couple more words at the bottom of the screen,
     and make the picture change when you roll-over
     these new words - use different, interesting effects.

Pixel Manipulations - 12 Nov 2014

Today we will be manipulating lots of PIXELS .

Here is a simple example program:

PImage img;

void setup() {
  size(1200, 500);
  img = loadImage("");    // Load the original image

void draw() {
  image(img, 0, 0); // Displays the image from point (0,0)

  PImage newImg = createImage(img.width, img.height, RGB);

  for (int y = 0; y < img.height; y++)
    for (int x = 0; x < img.width; x++)
      color p = img.pixels[y*img.width+x];
      float r = red(p);
      float g = green(p);
      float b = blue(p);

      b = b*4 ;
      newImg.pixels[y*img.width + x] = color(r,g,b);

  newImg.updatePixels();     // puts pixels array back into the image

  image(newImg, width/2, 0); // Draw the new image

  1. Copy the program (above) into Processing.
    Save it and run it.  Make sure it works.
  2. Try different values for "b = b*4 ;"
    Find one that looks nice.
  3. Get a different picture.  Get one that is roughly the same size.
    If it is a different size, use GIMP or some other graphics editor
    to resize the image.
  4. " b = b*4 ; "  changes the BLUE part of each pixel.
    Try also changing the red and green parts.
  5. Find a good combination of red, green and blue changes,
    together with a good picture, that produces a nice result.

Turning in your Multi-level Game - 11 Nov 2014

Today you need to turn in your finished game.
Finished does not mean "perfect" - but it should be mostly working.

To turn in your game, you need to:

  1. COMPRESS the FOLDER that contains your game.
    This - contains your .PDE file, as well as the DATA folder with all the pictures.
  2. Upload (hand-in) your .ZIP archive into Haiku.
  3. Write a description of your game.  The description should include:
    - explain how to WIN the levels, if it is not obvious.
       For example, if a special object should be collected, write that down.
    - describe the feature(s) of the game that you are most proud of.
    - describe the feature of the game that you found most difficult to program
    - describe any features that you tried to program, but did not finish
  4. Upload (hand-in) your description in Haiku

If you need a bit more time, you may turn in the game any time today before 21:00.
But you must still do the description page, and it must be written after the game is finished.

Games with Different Levels - 29 Oct 2014

Download this sample multi-level game :

You might wish to study these notes that present
the overall STRUCTURE of a multi-level game.

== Assignment ==

Due Tue 11 Nov 2014 at the end of class (9:30).

Create a Video Game using Sprites, and using MOST (or all)
of the following programming techniques:
You are NOT required to use ALL these techniques, but you should
use MANY of these techniques SENSIBLY to achieve a high grade.
Further, your game should be:

On 11 Nov, you should bring a finished program to class with you.
You will spend the period writing a description of the game -
don't plan on finishing the game during that class.

To turn in the game, you need to:

Arrays - Collections of Many Sprites - 27 Oct 2014

Download this program :

The teacher will explain how ARRAYS work.

== Practice ==

(1) Open the program and check that it works properly.

(2) Add 5 more bugs - now it is easier to win.

(3) Take away the middle bomb.
     This may cause an error in another part of the program.
     You need to change the BOMBS ARRAY so it only has 4 items.

(4) Add another ARRAY (collection) of objects -
     maybe 3 stars that are worth 200 points each.

(5) Add another key - K - that kills one of the bombs -
     you can do this with something like  bombs[2].hide();

(6) Use a loop to .hide ALL the bombs, not just one.

(7) Make another object that moves around the screen,
     and give 300 points if the user touches it.

(8) Change the random positions of the bugs so that they
      are all over the entire screen.

(9) Make any other changes that you can think of.

Suggestion - when there are lots of objects,
you should keep them pretty small. 

Continue 2 Player Game - 24 Oct 2014

Keyboards are not well designed for 2-player games.
If you hold a key down, you can lock the other player out -
until he/she releases their key and presses it again.

Forcing players to release their key(s) is the best strategy.
So instead of using if(keyPressed) inside the draw() method,
we make an extra method for keyReleased :

void keyReleased()
    if(keyCode==UP && player.y > 10)   // use KEYCODE for control keys
    { player.move(0,-10); }
    if(keyCode==DOWN && player.y < 500)
    { player.move(0,10); }
    if(key == 32)                // use KEY for normal letters
    {; , player.y);
    if(key == 'q')
 ,500);  // random jump

So all the KEY commands that were inside the draw() method
should be removed and pasted into the void keyReleased() method.

Continue working on your 2-player game.  Try to add several more key commands
and check how well these work when 2 players are busy pressing and releasing keys./

2 Player Game - 23 Oct 2014

Here is a 2-player game with gravity, bullets and bouncing.  

Work with a partner to make a better 2-player game.

Gravity and Bullets - 22 Oct 2014

Download and unpack this .zip archive:  Gravity and Bullets

The program demonstrates how to create GRAVITY.
The cookie "bullet" and the bouncing boy follow
the law of gravity.  Try the game - you need to
hit the rat 5 times and hit the bouncing boy as well.
Press the SHIFT key to fire a cookie bullet.

The teacher will explain how GRAVITY works in a video game.

== Practice ==

(1) Download the program, play the game a couple times.

(2) Change GRAVITY to make it stronger, so the cookie
      falls more quickly.

(3) Make a different player.
      Put this player on the RIGHT side of the screen.
      Make the cookie fly to the LEFT instead of the right.
      Move the bouncing boy so he is on the LEFT side.

(4) Make a new plane that flies across the top of the screen.
      It should bounce off of the edges and go back in the other direction.
       When the player presses the CONTROL (command) key,
       the plane should drop a "bomb".  This could be another
       cookie if you wish.  Keep both the first player and the plane.
       It should be possible to shoot a bullet and drop a bomb
       so they are both flying at the same time.

Timer Variables - 20 Oct 2014

Read these notes about TIMER VARIABLES
and do the practice exercises.

Background Image - 17 Oct 2014

Read these notes about background images.

Clever Programming Ideas - 15 Oct 2014

We will make a list of clever ideas and requests.
For example:
-  How can I make a scrolling background?
-  How can I make a "bullet" that goes from the player to a target?

Sharing Games - 14 Oct 2014

Exchange games with another student.
Run their game.  Figure out how it works.
Then read their JAVA CODE, looking for:
-  clever ideas that you didn't know
-  commands or ideas that you don't understands

Bring a list of clever ideas and questions/requests
to class tomorrow.

Finish Sprites Video Game - 13 Oct 2014

Finish your Sprites Game Project.  Today is the last class period
to work on your video game.  It is due at 12:30 tomorrow.

Continue Sprites Game Project - 29 Sep - 13 Oct 2014

Here is a more interesting example game:  CookieMonsterB

The monster is bouncing off the walls, moving diagonally,
making the game a bit more challenging.

Remember - don't use any of the sample images in your project.

Sprites Game Project - 25 Sep 2014

Your assignment (project) is to create a Video Game
using the Sprites library in Processing.  Read the following
notes and design the game according to the requirements.
--->  Sprites Game Assignment

Adding Animated Sprites - 24 Sep 2014

We will look at how to add more animated Sprites.

You can find lots of GIF animations at :

Using Sprites - 23 Sep 2014

Read these notes about using Sprites for games

Game with Collisions - 19 Sep 2014

Game #2 with Collisions

Keyboard Control - 18 Sep 2014

Keyboard Control Program

Mouse Quiz Project - 12-17 Sep 2014

Mouse Quiz Project

If you finish early, and you have uploaded your project into Haiku,
you can exercise your brain with some of these Brain Games:

Transparent Shading - 11 Sep 2014

Transparent Shading Notes

Clickable Map - 9 Sep 2014

Clickable Map notes

Clicking and Printing - 8 Sep 2014

Here is a sample program:

PImage pic,smile;   // this must include one variable for each picture

void setup() {
  size(900, 600);
  pic = loadImage("");
  smile = loadImage("");

  background(250,180,250);       // background color = pink
  image(pic, 0, 0);      // draws the picture on the screen   
  text("Click on WALDO ----- [HINT]",100,580);

void draw()

void mouseClicked()
    if(mouseX > 400  &&  mouseX < 440  &&  mouseY > 250  && mouseY < 280)
    if(mouseX > 400 && mouseX < 500 && mouseY > 550 && mouseY < 580)
       text("Yellow shirt + glasses",550,580);

Funny Photos - 1-2 Sep 2014

For SENIORS only :

Use PIZAP to make a funny picture, or
investigate some of the tools on this page:

If you use a face, it must be YOUR face or a famous person from Google Images.
You are NOT ALLOWED to use a photo of a friend or someone at FIS.

Make some funny pages, print them and hang them on the bulletin board(s) in 276.

Loading Pictures in Processing - 28 Aug 2014

Processing can load and display images (pictures), like these 3 images:

Here is the program that draws the picture above:

PImage img1 , img2, img3;   // this must include one variable for each picture

void setup() {
  size(600, 400);
  img1 = loadImage("");
  img2 = loadImage("");
  img3 = loadImage(""); 

void draw()
  background(250,180,250);        // background color = pink
  image(img1, 0, 0,300,300);      // draws the image on the screen
  image(img2, 320,200,300,200);   // image(variable,x,y,width,height)
  image(img3, 250,140,150,200);    

You might notice that image #3 is on top of images #1 and #2.  
Since image #3 has a transparent background, we see through
the background to see the other images.

Notice that each image requires a variable that is listed in the first line of the program.
Then each image must be loaded in the setup method.
Finally the images are displayed by the "image" command in the the draw method.
The image command is very similar to a rectangle command, but it starts
with an image variable.

Do the following practice tasks:

After trip week, we will use pictures and GIF animations to make a video game.

Drawing Faces with Methods - 26-27 Aug 2014

Learn to write METHODS to draw lots of copies of a picture.

Read these notes about methods.

Quiz on Basic Drawing - 22 Aug 2014

Quiz on Basic Drawing Skills

If you finish the quiz early, look through the EXAMPLES (in the File menu)
in processing and find a program that does something interesting.
Try changing some of the numbers in the program and see what happens.

Starting Faces - 21 Aug 2014

Test Tomorrow (reminder) -
Tomorrow (Friday) you will have a test.  It will be designed for about 40 minutes.
You will receive a starting program and instructions.  You must fix the program
as described and then answer some questions on paper.  Be sure to bring
a working computer and a pen for writing your answers.  During the test
you may use any notes, web-sites, or old programs that you wrote.


The teacher will explain briefly how to use the CURVE command.
For example:


We will start drawing some faces.
Read these notes and do the practice exercises #1-11,
stopping when it says "End of First Lesson".

Finish the Olympics - 20 Aug 2014

Finish these notes.

Curves - the Olympics - 18 Aug 2014

We will be drawing CIRCLES and ARCS.
Read these notes.
Finish the Olympic Rings today and
start working on the RUNNER.

More Flags - 15 Aug 2014

Continue with these notes.

We will discuss how to make the Sweden flag and how to start the Israel flag,
as well as how to draw a triangle.

Today's Assignment

Finish a Sweden flag, a Congo flag, and Israel flag.
If you have extra time, try the Scotland flag.

First Day - 14 Aug 2014 

Today's Assignment
-  install Processing on your computer before our next class
read these notes and do the sample programs up to and including
    #1 - German flag
    #2 - Austrian flag
    #3 - Belgian flag
-  read the notes below as time permits (over the next few days)

Welcome to Graphics Programming

Daily Work - Computers Required -
Bring Your Computer Every Day

Each student needs a computer for class every day
.. more ..

Course Description

In Graphics Programming we will be writing programs
that create graphical displays. We will use several different programming
languages, including Java and JavaScript.   .. more ..

Rube Goldberg Machine - 2 Mar 2015

Here are some examples of Rube Goldberg Machines.

Greenfoot Dominoes Program

Little Kid Video

Trap-o-matic Rube Goldberg Game

10 Videos