Graphics Programming - Frankfurt International School - - 2015
Next Graded Assignment : Finished Class Web-site - due 27 May 2016 at 18:00
                                            Two Mini-Site web-pages - due 31 May 2016 at 18:00

Last Day of Class - 20 June 2016

Find something fun to do - suggestions:

Lots of Music Tools

Exercise your brain with

Competitive Typing

Try an amazing drawing tool (e.g. Flame Painter):

Something else?  You can decide, but please DO something -

don't just sit around watching videos.

3D Effects - 15 June 2016

This is an interested web-site with a programming language that makes 3D effects:

You can try to change some numbers, then press the "go" arrow at the bottom
to see your changes in the display window.

Then try to find some other interesting programs (in Browse) and try changing them.

Embedded Games - 14 June 2016

Click on this Amazon Link about Embedded Games.

Notice that the original AmazonWS link won't work,
because it is a SECURE httpS link.
You need to remove the 'S' to make it work properly.

You COULD try embedding this code into a web-page
and see what happens:

<div align="center"><embed src="" width="641px" height="554px" autostart="true" loop="false" controller="true"></embed><br /><a href="">Tron Game</a></div>

Embedded Video Page - 27 May 2016

Here is a Bungee page with EMBEDDED videos:

"Embedded" means that we see the video in the page, rather than a link,
and the video runs inside the page when we click on [Play].

Embedding YouTube videos is quite easy.

-  find a YouTube video that you like
-  below the video, click on [Share] and then [Embed]
-  copy the HTML code
-  in BlueGriffon, click on the [Insert] menu and choose [HTML Markup]
-  insert your copied code into the small box and click [OK]

Now BlueGriffon is NOT a browser, so it cannot actually display the video page.
Instead, it will display an error message.  But when you save your page
and open it in a browser, the video will appear and will work properly.

In the example page, the text is lined up nicely to the left of the video.
That is because the text and videos are all in a TABLE.
You don't see the Table because the Table/Properties/Border is set to 0 (zero).

Now make your own page:
-  choose a topic that appears in Wikipedia
-  create a web-page in BlueGriffon
-  type a HEADING on your page with the name of your topic
-  insert a table below the Heading, maybe 3 rows and 2 column
-  copy paragraphs from Wikipedia and insert them into the table left column
-  find corresponding videos (preferably short, under 5 minutes)
-  embed the Video code into the cells in the right column\
-  save the page as "index.html"
-  compress the folder and upload it into a Mini-Site in Haiku

Work QUICKLY.  Finish 2 pages like this by Tuesday 31 May.
Then turn in the .amazonws URL addresses in Haiku.

Enhanced Web-pages - 24 May 2016

Wikipedia is very useful, but not particularly attractive.
Here is an improved version of a Wikipedia page:

You are allowed to do this because ALL of Wikipedia content
is licensed under the Creative Commons License.
Not all web content is so flexible, but Wikipedia is.
You might be interested in some more reading:
- On Walden Pond ("The tragedy of the commons") by David Thoreau
- Is Copying Legal?

Use Blue Griffon to make a similar improved Wikipedia page:
-  choose a topic
-  find the Wikipedia article
-  copy a small portion of text out of Wikipedia, into your page
-  add a link to a video OR a nice image
-  add another small bit of text plus a corresponding video
-  put the copyright information at the bottom of the page, as well as your name
-  add any other visual improvements that you can think of, e.g. colors
-  save the page and name it "index.html"
-  compress the folder and upload it to a Mini-site in Haiku

Try to figure out how to do this QUICKLY.

Uploading Web-sites into Haiku - 23 May 2016

The teacher will show how to upload content into a Mini-Site in Haiku.

== Practice Today ==

This is a first try.  We will make a more complicated page tomorrow.

Last Web-site Class - 20 May 2016

This is our last class-period to work on the web-site.

Here are useful things that you could work on TODAY:
(1)  make a nice LOGO for ALL the pages (for the entire web-site)
(2)  make sure YOUR NAME appears on EVERY PAGE that you created
(3)  clean up all the links that either don't work or that have meaningless text
(4)  clean up text that is too small
(5)  clean up pages where the content is too wide for a normal browser
(6)  refactor any pages that are still a mixture of HTML and JavaScript
       to make Pure Javascript pages that are easier to change
(7)  add some nice colors to your pages to make them prettier
(8)  anything else to make the pages:
       clearer, easier to understand, easier to use, more attractive
(9)  HELP OTHER STUDENTS and/or ask them to help you

You can continue working at home if you wish next week,
but the web-site must be FINISHED and FUNCTIONING
with YOUR NAME ON ALL YOUR PAGES, due on 27 May 18:00. 

Test and Logo - 18 May 2016

(1) TEST - 30 minute limit

(2) Once you have finished your test,
     please try to make a LOGO for out web-site.
     Try this web-site:

     There are lots of other web-sites that claim
     to make logos for free.  But be careful -
     they might try to trick you into spending money.

Web-site Design Tips - 17 May 2016

Web-site Design Tips

==Today's Practice ==

(1) Search the web for "bad web-sites" that violate the tips above.
      You can try searching Google for "bad web-sites".

(2) Search for VIOLATIONS of the Web-site tips in our class web-site.

(3) Review the notes below to prepare for tomorrow's test.

== Tomorrow's Test ==
It will be a WRITTEN test - no computers, no notes.
It will take about 30 minutes to complete.

Pure Javascript - 13 May 2016

Here is code for a "PURE JS" web-page.
That means it virtually no HTML code.
HTML objects, like Buttons, are created by document.write(..) commands.

By using VARIABLES to determine the text that appears on the page,
it is very simple to change the text to do a different problem.
You can try this out today.

1 - copy the code below into a new web-page in Komodo

2 - check that the page works correctly

3 - use this as a TEMPLATE to quickly create 2 new problem web-pages (save them)

4 - Using one of your existing problem-pages from our big web-site,
     change that page to be a JavaScript driven template,  
     replacing all HTML code lines with document.write(..) commands
     at the beginning of the Javascript section, and replacing
     changeable text with variables. 

5 - Use your own template (from #4) to create 2 more problem pages

<!DOCTYPE html>

    question = "Where is FIS?"
    ans1 = "Oberursel"
    ans2 = "Germany"
    ans3 = "Frankfurt"
    ans4 = "Korea"
    document.write("<h2>" + question + "</h2>")
    document.write("<h3 id=message>Two answers are correct</h3>")
    document.write("<button id=r1>" + ans1 + "</button>")
    document.write("<button id=r2>" + ans2 + "</button>")
    document.write("<button id=w1>" + ans3 + "</button>")
    document.write("<button id=w2>" + ans4 + "</button>")
    r1.onclick = function()
    { = "hidden"

    r2.onclick = function()
    { = "hidden"
    w1.onclick = function()
    { = "visible" = "visible"
    w2.onclick = function()
    { = "visible" = "visible"
    checkDone = function()
      if ( == "hidden"
       && == "hidden"
     message.innerHTML = "SUCCESS!" = "hidden" = "hidden" = "hidden" = "hidden"     
    move = function(b)
       x = Math.random()*300 + 100
       y = Math.random()*300 + 100 = "absolute" = x + "px" = y + "px"

Designing for Automation - 11 May 2016

How can we AUTOMATE the construction of our web-site?
-  templates
-  CMS
-  ???

Scalability - 10 May 2016

Today's Notes :

Cognitive Fluency
- more white space
- CONSISTENT color, layout (organization)
  - layout is things like
    for example:
      one question per page
       some put 5 questions 
   Maybe this should be consistent
When is the project due?
- it WAS due on Monday 9 May
- did we FAIL?
  - not sufficiently organized (search function)
  - not enough questions
Real Software Projects
-  should be a BETA test
   ..  50% development (writing)
      + 50% Testing
   ..  90% TESTING, 10% writing
In reality Individual Question Web-pages - 3 May
- 25% projects delivered + successful
- 50% delivered but unsuccessful  
  (either fix it or give up)
  - wrong hardware
  - wrong design
  - defective
  - features are MISSING
    - feedback system - SUPPORT
    - no OFFLINE access
- 25% never delivered
If you are in the 50% category (near the top),
   = rewrite the pages without changing them
     to make the CODE more understandable
   this makes MAINTENANCE and SCALBILITY easier
   = unreported error
   Error = reasonably unexpected malfunction

Making Things Pretty - 9 May 2016

Now we have a web-site with lots of working question pages.

Unfortunately the various page work in a variety of different ways.
So the users have an unpredictable USER EXPERIENCE (UX).

Here is a good article about why SIMPLE is BETTER:

It is up to each individual author to organize his problem pages
so that they work SIMPLY - that means no extra clicks are required.
We made some suggestions for improvements at:

SIMPLE is good.  Most users agree that simple is also PRETTY.
People like pretty things.  More important, "pretty" is similar to UNDERSTANDABLE.
So we want to make our web-site easy to understand.
The index pages that we have so fare are quite simple, and hence understandable,
except that in many cases the links have mysterious labels, like "prob1".

We need to AGREE on a STANDARD format and strategy for these pages.
We will discuss this and agree on some STANDARDIZATION
that will make the entire web-site simpler, understandable and hence
EASIER TO USE - that means improving the USER EXPERIENCE (UX).

Class Notes:

- it's ok, just fix it
- or maybe give up
- but at least try

--> ERRORS in computer systems
- CasE sENsiTIVE (no = cause)
- REASONABLY unexpected malfunction

- unknown or unreported error

WARNING (not an error message)
- comes BEFORE the error happens

Continue Integration Test - 26-29 Apr 2016

We need to finish our integration test.
If you have not finished a working page
and uploaded it to Dropbox, you need to do it today.
If you are not succeeding you MUST ask for help
and get something finished.

Once you have finished your first web-page,
and uploaded it, you should continue with the next task,
which is to make more questions about your subject.

OR - make a nicer Index page for your subject.
But you do need to have several pages next week.

Next Deadline : Tues 3 May - working index page
                           with at least 5 questions

Integration Test - 25 Apr 2016

We need to collect all the single web pages together
and copy them onto the Web Server.  Then we need
an INDEX page that links to all the single pages,
and then we perform an INTEGRATION TEST
to confirm that all these pieces work together.

First Page - 21 Apr 2016

Everyone must finish ONE web-page the presents a problem
for your topic.  This can be simple or complex, as you wish.
You will be making lots more pages next week.  But we NEED
a collection of pages so that we can do the initial ASSEMBLY
of the system on Monday, and then upload this to our
Web Server.  Whoever is working on the Web Server(s)
can just do that and get it working by Monday, but everyone else
must bring a working Web Page on Monday.

In case you "don't know what to do", try one of these:
-  make something similar to one of the pages in a sample Math Practice Page.
-  make multiple-choice question with 4 pictures
    where the user must click the correct picture
-  present a paragraph of text, the user needs to read the text,
    and then answer a question about the content

Educational Practice Pages - 20 Apr 2016

Here is how our project looks so far:

GP10 Web page plan (Google Doc)

Time Plan : 
-  Web Server working :  Mon 25 Apr 2016
-  One problem from each student : Mon 25 Apr 2016
    - submitted to Haiku as .zip file
    - sent to Server Operators as .zip file (how?)
-  Front page (index.html) linked to all problem files : Wed 27 Apr
    - created by whom?
    - multiple topic pages?
-  Further individual pages finished : Tue 3 May
-  Finished : Mon 9 May 2016

Educational Practice Pages - 19 Apr 2016

Our goal over next few weeks is to make educational practice pages,
that are both challenging and interesting - hopefully animated and interactive.
These will be a large collection of small, individual web-pages.

For this to work sensibly, we must be able to store ALL the pages
in one place, and make them available to lots of students to use.
Hence, the eventual goal is to store them on a Web Server.

We must discuss HOW TO STORE these pages.

File-names Quiz - 15 Apr 2016

Do your quiz - time limit is 30 min (you probably need less time).

== After Finishing the Quiz ==

Here is a sample Math Practice Page.

We are going to make web-pages like the sample above.
These will be aimed at REVIEW WORK for high school students.
ALL the pages, made be individual students, will be stored
together on a Web Server.  We must organize the files and
file-names so that the pages can all work together, without
confusion or conflicts.

You might be tempted to use Google Drive (docs) to store these pages.
Unfortunately, Google Drive is not actually a Web Server,
so you cannot store web-pages there if they contain JavaScript -
well, you can store them, but they won't function.

DropBox DOES work as a Web Server.  It is also relatively
simple to upload files and to share them. (where the class web-site is located) is a Web Server
and you can make a free account there.  However, uploading
and sharing files there is not so simple.

Another possibility is to ask the IT Support Staff (tech deck)
whether they have a Web Server that you can use.

If anyone has a better idea, we can discuss it (on Tuesday).

Your goal is to do the following before class on Tuesday:
-  make a DropBox account (or an account on some other Web Server)
-  modify the Sample Math Page (above) so that it contains one problem
    that you created - whether that is a graphical question or a text
    question doesn't matter
-  upload your FILES into your Web Server account
    and check that the Math Practice Page works correctly as a Web Page
-  be prepared to REPORT about your experience on Tuesday,
    explaining to the class what worked correctly or what did not work

If you wish to use DropBox for this work, you will need to store your files
in a PUBLIC folder.  This used to be quite easy, but is now tricky.
You may need to read the HELP files on DropBox.

URL and FileName Syntax - 13 Apr 2016

We will discuss these notes about file-names and character codes.

Why double slash // in  ?

Math Practice Page - 11 Apr 2016

Here is a sample Math Practice Page with
several different problems displayed in an iFrame.

Here is an example Menu with educational links.

About half of the menu pages turned in to Haiku did not work.
This is mostly related to LINKS and FILE LOCATIONS.
We will spend a week learning more about file locations
and how to make links work correctly.

We will have a QUIZ on Friday 15 Apr,
where you can demonstrate that you can
locate and link to files correctly.

Next week we will do some more work on Math Game pages,
using the ideas learned this week.

Buttons and iFrame - 23-24 Mar 2016

You can download this .zip archive containing several .html files.

You can try the game directly here.

You should do the following:
- copy the index.html file into YOUR folder containing several problem.html files
- make a button for each of your games
- add javascript functions to make your buttons load your games
- add several games and several buttons, as time permits

Finally ... MATH! - 21 Mar 2016

Download this game :

You can play it here directly if you wish.

This is a MATH "game".  You need to answer the math question
by moving the player around to collect digits
in the correct order - the right answer is 42, not 24.

== Practice ==

(1) Rename the program to problem1.html.

(2) Change the problem to something different,
     where the correct answer is 24.  Then change
     the program so that if rewards the correct answer of 24.
     Save this as problem2.html.  Save in the SAME FOLDER with problem1.html.

(3) Make another problem with answer 60, like "How many minutes in an hour?"
     The images for 6 and 0 are already in the images folder.
     Save this as problem3.html .

(4) Find a picture containing all digits 0,1,2,3,4,5,6,7,8,9
     Use html:// or some similar tool to chop this up
     and save an image for each digit (in the images folder).

(5) Make another problem using odd digits.
      Save this as problem4.html .

(6) Make a new problem:  "How many sides does a pentagon have?"
      The correct answer is 5.  Put 5 and three other digits on the screen
      in random positions.  Now the player wins if they touch 5,
      but touching anything else causes a RESET().
      Save this as problem5.html .

(7)  Add one more problem that includes a PICTURE that illustrates
       the problem.  Save this as problem6.html.

Tomorrow we will make BIGGER problems, with longer answers.

More, Bigger, Better - 18 Mar 2016

Some suggestions for improving the game:

- make the "board" bigger - that needs a bigger BACKGROUND picture and a bigger CANVAS (CTX)
- add more "sprites"
   - make some sprites that are obstacles (like walls)
      -  they are bigger
      -  they never move
      -  the player resets to the center if he/ahw touches them
   - make some sprites that jump around randomly, but in a smaller area  
      that means the random numbers are chosen differently

   - make an invisible sprite (?)
      if the player touches it, he/she gets lots of points

Games in Javascript - 17 Mar 2016

By popular request, we will write some GAMES in JavaScript.
We will start with JUST JavaScript - no HTML, no CSS.
But we may work up to a more complicated game that uses more techniques.

Here is a very nice, simple tutorial that makes a fun game,
using all the normal components that a game requires:

You can try out the game here: Play the game

You can download the game here:

Making a Menu - 11-15 Mar 2016

We will spend a few days making a menu page like this one:

In your page, the menu must be a small entry in the top-left corner of the page.
You may use any menu system that you like.
Unlike the example, your menu entries must link to a web-page somewhere.
You should make your menu as extensive as possible in the time available -
that would be at least 4 topic areas in the first level, and at least 20 links total.
Your page does not need to contain anything except the menu.
But the menu should have an interesting appearance, using interesting colors
or icons or an interesting font or something.
The page is due on Wed 16 Mar at 18:00 (no class that day).

If you decide to use Swimbi, you should DOWNLOAD the application.
Working online, at their web-site, is a bit unreliable.
With the downloaded application, you can save various versions
of your menus directly on your hard-disk.

Try Out Swimbi - 9 Mar 2016

Today please try out: 
Thisd is a menu-builder program.  It lets you design your menu
using a nice WYSIWYG editor, with INSTANT PREVIEW.
Then you can PUBLISH and DOWNLOAD the resulting code.

On Monday, we will discuss how this can be used sensibly -
today, just try it out.  Add more menu items, delete some items,
change some names, change some links, change color (???),
change icons, etc.

Small Quiz on CSS + HTML - 8 Mar 2016

Here is the HTML file for the quiz :

You must write your answers on the printed pages,
but you may use the actual HTML file to check your answers.

You have 30 minutes to do the quiz (it won't take that long).

When you have finished the quiz, please continue with
your experiments from yesterday, searching for a good
LIBRARY that creates a MENU BAR for a web-page.

Better Menues - 7 Mar 2016

- Today's Task -

Investigate various downloadable (free) Javascript library systems
that create pop-up menues.  Choose one that you like, and that
looks relatively easy to use, and implement the same links
that you did on yesterday's page - e.g. 3 sports links, 3 news links,
and 3 music links - in a new web-page.  You will need to read the
instructions to understand how to use the library.  If you can't
manage to get it working, get help from the teacher.

You can try the following sites:

Dynamic Drive
Javascript Kit
Wikipedia List of Javascript Library Sites

Menues - 3 Mar 2016

Copy the HTML code from this page
and do the practice tasks listed at the bottom
of this page.

Lots of Buttons - 2 Mar 2016

Start again with this web-page.
Now add a second row of buttons, below the first row.
To do this, you need another <ul> structure.

Now add a 3rd row of buttons, but these should use different
colors than the first 2 rows.  That means you must use "class" names,
so that a differents set of CSS  formats can be specified.

Now add another row, with still another set of CSS behaviors.

More CSS - 19 Feb - 1 Mar 2016

Here is another example page using CSS for a Navigation Bar.

You might also find these reference pages useful:

Color Picker :

Color Names :

CS3 Tutorial : W3schools CSS3 Tutorial

Gradient Background Tutorial : Gradient Backgrounds

Making Buttons with CSS - 17 Feb 2016

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

CSS is good because you write less code - by using a CLASS name,
you only need to write the corresponding STYLE information one time,
and then use it many times throughout the page.

Read these notes and try to do the practice exercises.
You will need a copy of this file to start :

In case you find this too difficult,
you can try this tutorial:  W3schools CSS3 Tutorial
...  for example :  Gradient Backgrounds
...  or  here is another CSS tutorial, more like a textbook.

Make Slideshows - 15 Feb 2016

Here is lots more info about the PJ.js library:

Book as PDF (use the Download version)

examples from the book

We will make Slide-Shows, like this one.

(1)  Download the folder containing the sample web-page, libraries and images

(2)  Load the slideshow.html page into Komodo.

(3)  You will find the following command in the page:

           photos = Array('photo1.jpg', 'photo2.jpg', 'photo3.jpg')

      This is the list of the pictures displayed in the slide-show.
      Add one more image to the list, like this:

           photos = Array('photo1.jpg', 'photo2.jpg', 'photo3.jpg','photo4.jpg')

      Then download another image and save it in the project folder.
      Then change the name 'photo4.jpg'  to match the file-name of your image.
      Then browse the page and check that it now works, including your image.

(4) Create another Button and another Div so that you can make another new slide-show.
     You will also need a new list, maybe: photosB = Array('photo11.jpg','photo12.jpg'....)
     Now you need an .onclick = function()  to match your button.
     The function must contain a slideshow command just like the other one.
     Your new Button and Div must be moved about 300 px  to the right.
     Then download images for the second slideshow. 
     Make sure that the photosB  list contains names matching the new images.
     Browse the page and make sure it funcitions -
       find out whether you can run both slide-shows simultaneously.

(5) Try to change the original Buttons to be roll-over buttons, like you did last class.

Rollover Navigation - 12 Feb 2016

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 some nice pictures.

Then cut out the pieces you need, 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.

Rube Goldberg Machine - 3-11 Feb 2016

Watch this video :

This is fun, but DON'T try to build this.

Try out the 
Trap-o-matic Rube Goldberg Game

Rube Goldberg Machine Project 

Your assignment is to make a page similar to this one:

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. You should have 5-9 actions total.
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.

== Due Date : Thu 11 Feb at 18:00 ==

Turn in your finished Rube Goldberg Page on Thursday 11 Feb.

Continue - 2 Feb 2016

Add more animated pieces to your web-page from yesterday.
Do as many as you can in one period.

Make Your Own Silly Animation - 1 Feb 2016

Study this page, read the instructions,
and then make your own silly animation picture.

Cheap, Silly Animation - 28 Jan 2016

Download this file, unpack it,
and then to the tasks described.

Quiz on Slide and SetTimeout - 27 Jan 2016

 You may use your computer and any web-sites
 or notes or old practice projects that are useful.

 Download and follow the instructions.
 Once it is working, show it to the teacher to receive a grade.

If you finish early, you may do any of the following:
-  homework for another class
-  read any of the [Latest Tech Ideas] at
-  anything else that uses your BRAIN in some productive fashion

More Practice with Slide and SetTimeout - 26 Jan 2016

We will have a QUIZ tomorrow.  During class you will
need to fix/improve a web-page containing Javascript.

Today we will do some more practice Slide and SetTimeout.
Download and upack it - you can view it here.

Then use Komodo Edit to change the .html file, as follows:

- Browse the file and find out what is wrong with the [canadaChina] button
  Change the Slide command so that the bird goes to the right country.

- For the CanadaChina trip, add a setTimeout command so that
   the bird also flies back to Canada.

- Add another Button for a "round trip" from Canada to Australia to South Africa to Canada.

- Add a picture of a boat (a small boat)

|- Add a button for a BOAT trip from England to India.
   This must stay in the water, traveling around the south end of Africa
    and then back up to India.  You will need several Slide/SetTimeout commands
    to make sure the boat stays in the water.

- Add more Buttons and trips, as time permits.
   This is very good practice to prepare for tomorrow's QUIZ.

Using SetTimeout with Slide - 22 Jan 2016

We can make objects (usually 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)

Download ALL these files in this .zip archive.

Practice : Do #8,9,10 in the NOTES above

Using SLIDE - 21 Jan 2016

We can make objects (usually 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)

Download ALL these files in this .zip archive.

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

Continue Interactive Quiz - 20 Jan 2016

Continue working on your interactive quiz.

Interactive Quiz - 18 Jan 2016

Now use KOMODO for today's work (and all assignments in the future).

We are going to make an interactive multiple-choice quiz.
Read these instructions and look at the sample quiz.

You need to download this ZIP archive
that contains the Sample Quiz files and all the images.

More Robots - 15 Jan 2016


Tomorrow we will start looking at a variety of LIBRARIES,
especially with GRAPHICS functions.
Using these will be easier with a standard editor (not EzJS). 
So, before class tomorrow, you should download
and install KOMODO from (choose Komodo Edit, not IDE)
(or borrow a USB stick from the teacher - that's a bit faster)


Continue working on the robot program that you started yesterday.
Using make("div...") com- mands, make some other figures, like:
- a dog/horse/animal
- a car (with square wheels)
- a tree with a rectangle for the trunk and several rectangles for branches/leaves
- etc
Add more make("select.....") commands to make more lists
that control colors of various pieces of your picture.

Practice so that you get better and faster at writing JavaScript.
You will have a quiz next Wednesday, where you will need to
write a JavaScript program during the half hour quiz during class.

Robot Colors - 14 Jan 2016

==== TODAY ====

Copy the program below, paste into EzJS Simplified Online Editor,
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.

Buttons and Picture Clicking - 12 Jan 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.

Animals and Divs - 17-18 Dec 2015

Try this page:  Animals.html
Click around and see what happens.

Then copy the code below into EzJS Simplified Online Editor.

Then do the practice exercises below the program code.

//==== AnimalDivs ============================================================

animals.src = ""
make("div;id=box;left:0px;top:0px;width:100px;height:100px;border:solid 2px orange")



lion.onclick = function()
{ = "400px" = "60px" 

giraffe.onclick = function()
{ = "400px" = "270px" = "180px"

elephantDiv.onclick = function()
   this.innerHTML = "<H1>ELEPHANT</H1>" = "rgba(255, 0, 0, 0.2)"

butterflyDiv.onclick = function()
  this.innerHTML = "Butterfly" = "rgba(0, 255, 0, 0.2)"

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 add more buttons and boxes.
      Do as many animals as you can in one class period.

Starting JavaScript - 14-15 Dec 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 buttons and images
that link to other web-pages:

//  PRACTICE Exercises
//  (1) Change each of the BUTTONS to show different web-pages.
//  (2) Change each of the IMAGES to show different web-pages
//        including one YouTube video for the [Friday] image.
//  (3) Add one new BUTTON below the [Radio] Button.
//       This requires LEFT and TOP settings to place it correctly.
//  (4) Add one new IMAGE to the right of [Friday].
//       Be sure to use LEFT, TOP, WIDTH and HEIGHT values.
//  (5) Add more buttons and more images, as time permits.
//  (6) Move the <iframe> to the middle of the screen
//  (7) Add buttons and images around the outside of the <iframe>

showPage.src = ""

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

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

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

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




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

friday.onclick = function()
   showPage.src = ""
Copy the code into EzJS.
Then make the changes
indicated in the PRACTICE
shown at the top of the program.

Gambling Game Project - 2-11 Dec 2015

Here is one more example of a gambling game with cards :

== Gambling Game Project ==
    Due : Fri 11 Dec at 18:00

Your assignment is to create a Gambling Game Program.
This could involve dice, cards, random numbers, or any other random event.

The user should be able to click in order to:
- make a bet
- roll dice/choose cards/create random numbers

The game must have rules about when the user wins or loses, for example:
- matching numbers/dice/cards
- a large total of several items
- a specific result, like a 6 or an ace or a 9
- etc.

Each winning combination should pay an amount according to how likely it is.

There should also be combinations that are losers.

The program must keep track of money, paying when the user wins,
and subtracting money when they lose.

Make the rules so that the game is INTERESTING -
that means it is not immediately obvious whether you will win or lose.

Use pictures wherever you can to make the game attractive and interesting.

You may start with one of the sample programs the teacher wrote,
but you must also add new features to make it better.
For example, more dice or more ways to win or more items to click.

Random Numbers Total Game - 1 Dec 2015

Here is a game where the user must make higher and higher totals.

Download the program and do the practice exercises.

Continue Dice Game - 25 Nov 2015

Continue improving your dice game.
The goal is to get up to 5 dice,
with appropriate payoffs for things like:
- a pair
- 3 of a kind (3 the same) - 3 6 4 3 4
- Two pairs -  2 5 6 2 6
- 4 of a kind (4 the same) -  2 2 2 3 2
- 5 of a kind (all the same) - 4 4 4 4 4
Use "cheat" buttons so you can easily
test your program, even for improbably
results like 4 of a kind.

Cheating?  -  24 Nov 2015

Today we will discuss GOOD vs BAD cheating,
then you can continue improving the dice program.

Even More Spinning Dice - 23 Nov 2015

Spinning 3 Dice Program

More Spinning Dice - 19 Nov 2015

Spinning Dice Program

Spinning Dice - 18 Nov 2015

Spinning Die Program

Jigsaw Puzzle - 17 Nov 2015

Try out this Jigsaw Puzzle.

Then download this program.
Run it, and then do the practice exercises
to make your own puzzle.

You must first RESIZE your image to exactly 640x400 pixels.
You can do that with:

Then you can chop your picture into pieces using:
After downloading and unzipping the .zip archive,
you will need to rename your pictures,
or else change the names inside the Jigsaw program.

If you find better programs for these tasks,
go ahead and use them.

Crazy Colors Assignment - 9-13 Nov 2015

This example program has 2 different pictures called 'a' and 'b'.
Press 'a' or 'b' to change pictures.
Each picture does different color transformations.

** Due Monday Mon 16 Nov at 18:00 ** "
Create a program like the sample program (above).
It must contain the following features:
- at least 6 "levels" that change when 'a','b','c','d','e','f' are pressed
- at least 6 different pictures - you need to choose pictures that
   are all the same size.  If a picture is not the right size,
   use a graphics editor (like to resize it
   and save it in the Sketch Folder.
- each picture uses different color effects than the others
- at least one of each of the following effects:
   - gradient colors that change as the mouse moves across the picture
   - "stripes" that apply different effects to different areas of the picture
      this must work WITHOUT using the mouse
   - negative or other "crazy" effects
   - some bright colors and some dark colors

You may use either web images or images stored in the Sketch folder.

-- Turning in the program --
- COMPRESS the folder that contains the program (and perhaps images)
- upload the .ZIP file into Haiku

Saving Pictures - 6 Nov 2015

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 keyPressed()
   if(key == 's')
         picnum = picnum + 1;

This saves a picture every time you press the 's' key,
automatically numbered 1,2,3,...

Add this to your program from yesterday.
Then continue with your experiments from yesterday.

Gradient Shading - 5 Nov 2015

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)            // use mouse position to change colors
       {  g = g - mouseY/2; }
       img2.pixels[p] = color(r,g,b);

  image(img2, 0 , 0);  

void mouseClicked()
// saves entire picture into a file on disk

== Practice ==

Stripes - 3 Nov 2015

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    


Using the Mouse for Effects - 2 Nov 2015

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.

Manipulating Pixels - 29 Oct 2015

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.

Timers - 27 Oct 2015

Download this starting program.

Read these notes and do the practice exercies at the end.

Sprite Game Assignment - 19-26 Oct 2015

== Sprites Video Game Assignment ==

Your assignment is to make a 2-D video game, using the Sprite library in Processing.

Your game is due on Mon 26 Oct at 18:00.

Your game MUST :
- use the Sprite library
- do NOT use any of the pictures or animations that were provided in the CookieMonster examples
include a PLAYER object that is controlled by the keyboard
- keep score somehow
- include some ENEMY
- include some FRIEND objects (e.g. food, power-ups)
- include some objects that move around the screen automatically
- include at least 2 objects that display ANIMATIONS -
   that you created by converting (or drawing) single frames
- lose points or lives when an ENEMY is touched
- gain points or when a FRIEND is touched
- use all of the following commands sensibly:
  -  setSpeed
  -  place
  -  show
  -  hide 

To get a top grade, you should
- make a game that is fun, interesting, and winnable
- make a game that is not boring or too easy
- include enough objects to make things interesting and/or exciting
- use attractive or interesting or effective graphic images

But you only have 1 week, so be efficient and finish on time.

Continue with Animations - 15 Oct 2015

Continue PRACTICING putting ANIMATED SPRITES into your program,
including animations that you found with Google and converted
and downloaded into your Sketch Folder and renamed to 0000, 0001, etc.
Make several that:
- move in various directions
- some should bounce off the edges
- some should "wrap around" at the edges
- some should move fast
- some should move slow
- some should not move at all
- some should HIDE (disappear) when they touch a specific Sprite
- some should award POINTS when the player touches them
   before they disappear
It's practice.  Add as many as you can during class.

Animations - 14 Oct 2015

The teacher will explain how to add extra ANIMATIONS to your program.

Sprites - 13 Oct 2015

Download this program and run it in Processing.

Then read these notes.

Start doing the practice exercises at the bottom of the notes.
Work carefully - we will be working on this for a couple weeks.

Blue Blob Program - 9 Oct 2015

This Blue Blob Program uses very simple tricks
to find out when a player has touched a target.
Download the program, try it out, then
read the notes at the bottom and do the
practice exercises.

Next Tuesday we will learn how to ACTUALLY
detect collisions between players and targets.

Keyboard Control and Methods - 7 Oct 2015

Read these notes and do the practice exercises at the end.

Clickable Pictures Assignment - 21-25 Sep 2015

Pic-Click-Project (due 25 Sep at 18:00)

Clickable Pictures - 18 Sep 2015

Read these notes and do what is suggested at the end.

Mousable Pictures - 17 Sep 2015

The following program displays names for various objects in a big picture:

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

void setup() {

  size(900, 600);


  pic = loadImage("");



void draw()






        if(mouseX > 400  &&  mouseX < 440  &&  mouseY > 250  && mouseY < 300)





        if(mouseX > 500 && mouseX < 570 && mouseY > 0 && mouseY < 60)



       text("Big Bear",100,580);        



Copy this program into Processing.

Then add more names of other items in the picture.

Add as many names as you can in one class period.

 Loading Pictures in Processing - 15 Sep 2015

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:

Quiz With Parameters - 14 Sep 2015

Start with the following program.  Then do what is described on the quiz.

void setup()







void robot(int x, int y)


   fill( 0,0,255 );

   rect( 0+x , 0+y , 100,100);

   fill( 255,0,0 );

   rect( 20+x, 70+y, 60 , 10);

   fill( 255,255,255);

   rect( 20+x, 20+y, 20, 20);

   rect( 60+x, 20+y, 20, 20);


More Parameters - Colors - 11 Sep 2015

One more day working with parameters.

** Remember - QUIZ on Monday 14 Sep

** Read description in Haiku.

Methods and Parameters - 8 Sep 2015

Continue with these notes.

Faces and Methods - 7 Sep 2015

Read these notes and do the practice exercises.

The teacher will demonstrate how to write methods

in a Processing program.

The Olympic Rings - 24-28 Aug 2015

We will be drawing CIRCLES and ARCS.

Read these notes.

Finish the Olympic Rings today and

start working on the RUNNER.

Make the Olympic rings.

Then add as many sports icons as you can.

Continue with Flags - 21 Aug 2015

Continue with these notes

The teacher will explain how to draw triangles and lines.

If you have not installed Processing from

then borrow a USB stick from the teacher and install it today.

First Day - 20 Aug 2015

Today's Assignment

-  read these notes and do the sample programs up to and including

        #1 - German flag

        #2 - Austrian flag

        #3 - Belgian flag

  The programs in these notes will run in Processing

  from after downloading and installing the program.

  Alternatively, you can run the code directly in the following web-page

  without installing anything : .

-  HOMEWORK - install Processing on your computer before our next class


-  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

to create graphical displays. We will use several different programming

languages, including Java and JavaScript.  .. more ..