FIS Graphics 2012-13 Blog

by  ,  Frankfurt International School  ,  Germany

Fun and Games - 18 June 2013

You should do one of the following:

- make funny pictures and hang them on the bulletin boards
- practice typing (probably better to do the typing games)
- exercise your brain with
- make a video game on

Typing Practice - 17 June 2013

** We will finish funny pictures on Tuesday and Wednesday **

Despite many rumors and claims to the contrary,
keyboards are still a major source of data input.
If you are   t   y    p    i    n    g        s    l     o   w    l      y
with 2 fingers, you are going to be disadvantaged
throughout your high school and college career -
even worse if you are doing your typing on a
flat screen like a smart phone or a tablet.

You should do your best to improve your typing speed,
preferably learning to type with all your fingers
without looking at the keyboard.  The time you spend
learning to "touch type" will be rewarded over and over
again throughout your life - or at least until we invent
a direct link between your brain and the computer.

Today we will practice typing - typing as fast as possible.
Here is a web-site with typing practice games: 

You can also take a test (or lessons) here:

Or try competing against other human beings at:

Yes - 45 minutes of typing practice.

Be sure to take a test at least once.

Funny Pictures - 13-19 June 2013

Here is a web-site with lots of programs/services that make funny pictures:

You can start with a picture of yourself. If you prefer, use a picture from Google images.

Use one of these services, or a different service if you wish, to make a funny photo.
It doesn't need to be a face photo - do any image you wish. But it should be interesting
and must NOT be offensive.

Make something interesting that we can PRINT and post on the BULLETIN BOARD in 276.
Use the Atrium-Color printer. Write your name on the printed picture before posting it.
The goal is not to make as many pictures as possible, but rather to make one or
two really interesting pictures.

Business Cards - 12 June 2013

Your task today is to make your own business cards.

You should make one page with 6 or 8 copies of the same card,
all on one single page. Then print the page and cut it up into
separate cards.  Give one card to the teacher. 
Tomorrow, we will make interesting pictures for the
bulletin boards in room 276, and you can label
your pictures with a business card.
Choose appropriate software for these tasks.

Here are some design ideas :

One More Day of Linux - 11 June 2013

Please spend one more day investigating Ubuntu Linux.

Here is a list of things to try:

Be sure to spend some time investigating the Educational software.
We will discuss this in class tomorrow.

Try Ubuntu Linux - 7 June 2013

We will investigate Ubuntu Linux, by using it on the PCs in our classroom.

Watch this video about why Linux is important:

Then watch this video about the Ubuntu Phone :

especially from 5:20 to 13:20.

Here is a list of things to try:

Try Sploder - 29 May 2013

Try this : 

Make a game - make several games.

If it's not fun, you're doing something wrong.

Exporting from Greenfoot - 27 May 2013

There are 3 ways to give a Greenfoot scenario (program) to other people,
to run without installing Greenfoot.  They are all available in [Scenario][Share]:

1.  Create a Stand-alone program.  That packages your program
     into a .JAR file (Java Archive).  This contains all the images
     and classes from your program. 

2.  Create a web-page.  This turns your program into an applet,
     then creates a web-page that will display the applet.

3.  Publish your program onto the official Greenfoot web-site.
     You need to make a user account at
     before you can do this.

Try each of these options with your puzzle program.
Find out how to make each option function successfully.
The main problem you may encounter is the SIZE of the applet
and the window for the application.  You need to make sure
that the first level (starting screen) is as large as all the other
levels, so the window size is big enough for the whole program.

Turn In Your Puzzle Program - 24 May 2013

To turn in your Puzzle Program (or web-site), you need to:

- make a .zip archive containing the FOLDER that contains your project

- send an email to with the .zip file as an attachment

Final Project - Animated Puzzles - 8 May 2013

Your final project is to create a program (or web-pages) with several
animated puzzles.  Each puzzle should require the user to THINK
in order to solve it.  For example, it might be "educational", requiring
some "school" knowledge.  On the other hand, it might be a
visual puzzle, where you need to observe closely and
"figure out" how to solve it.

You may use the tool you find most productive - processing or HTML or Greenfoot.
Whichever tool you choose, stick to using techniques that you understand.


This is a very open ended assignment - you should use your imagination, creativity and programming skills to make interesting and challenging puzzles.  Here are a few ideas:

-  Unscramble "wtasuohrcpraerdmbled" (words that are scrambled up).
-  Solve a math problem and guide a moving player to the right answer.
-  Move a player to collect objects in the right order to solve a problem.
-  Answer a math question then press a button to see the correct answer
    shown as an animation.

Here are a couple actual examples:

Math Translations

Click on Points

Eat Letters In Order to Spell a Word

Animation Drag/Drop

Matches Puzzle (this one is too simple - the matches should be clickable)

The Scientist
(this is a good example, but too long - sound is nice)

Various Logic Games

Those are just examples - many other things are possible.
But these are PUZZLES, not games or movies.
You could use ideas from games and movies, but your
puzzles must exercise the user's brain.

Keep your puzzles reasonably short and simple so that you
can make many pages - lets say at least four puzzles -
more if you want to earn a top grade.  Your various puzzle
pages should be different from each other - not 4 pages
that are different "levels" using the same ideas over and
over again.  Start with something simple, then work your
way up to something more complicated.

This assignment is due on Friday 24 May.

Further Investigations with Greenfoot - 6 May 2013

You will be writing a program in Greenfoot as your final year-end project.
You may need a few more skills for this task. 


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 :

Letter Quiz and Interactive Greenfoot - 2 May 2013

Download this Greenfoot program: 

As a homework assignment, you should investigate the Sonic program,
considering the following questions:

(1)  What commands are used to make the SONIC character
       turn at the corners of the screen?

(2)  What commands are used to detect and respond to a mouse click?

(3)  What commands are used to respond to keyboard keys?

(4)  What commands are used to detect a collision between 2 objects?

You may find the following summary helpful: 

More Turtle Figures - 29 Apr 2013

Here is another optical illusion from

Do the following:

(1) Create a turtle subclass that draws just the EDGES
      of the cube, without shading in the sides

(2) Draw another turtle subclass that draws the edges
       AND shades in the sides - use LOOPS to do the shading

(3) Put several copies of your classes on the page
       making several cubes next to each other in a row

(4) Make a PYRAMID cube.  Start simple, that make it better.
      Need a picture? Search in Google for PYRAMID IMAGES.

Plan on a QUIZ on Thursday, using the computer
to make turtle subclasses to draw specific figures.

Another Grid of Squares - 26 Apr 2013

Here is a nice optical illusion (might hurt your eyes a bit):

We can create this illusion using the following algorithm (plan):

Here is the code for a SquareDot turtle:

Practice -

(1)  Type this code in to create a SquareDot turtle.
(2)  In the TurtleWorld, write addObject commands to add
       8 SquareDot objects, one below the other.
       When you click [Act] 8 times, each SquareDot turtle shoule
        draw a row of 8 squares and dots.
(3)  In TurtleWorld, change the background color to a darker gray -
        that will make the optical illusion more effective.
(4)  Try changing SquareDot so that it draw a small white square
        instead of a white circle, and FILLS IN the white square.
(5)  Try making the SquareDot squares bitter, to creat a good optical illusion.

Filled In Squares - 25 Apr 2013

Make thicker lines by drawing lots of lines next to each other.
By drawing lots of lines, fill in an entire square.
Then make a 4x4 grid of 16 small squares.

More Turtle Shapes - 23 Apr 2013

Turtle Shapes

Turtle Shapes in Greenfoot - 22 Apr 2013

Download this starting project and open it in Greenfoot.

(1) Add 2 more Triangle objects, to draw 3 triangles that
      form 1 large triangle.  Then open the [Controls] menu
      and click on [Save the world].  This changes the program
      so that all 3 Triangle objects will stay on the page.
(2) Move the 3 Triangle objects inside the Hexagon,
      so that it draws a Hexagon divided into 6 Triangles.
(3) Right click on [Turtle] and choose [New subclass].
      Create a class called Square.  Edit the Square class
      Type in the following :

    public Square()

    public void act()

      Add a Square object to your page.  Then run the program
      to ensure that the Square object does indeed draw a square.

(4)  Add 3 more Square objects to draw 4 squares that fit together
       into one big square.

(5)  Open [TurtleWorld] and find the prepare() method.
      Type commands to add 5 more Square objects,
      to place 9 squares in a 3x3 grid, making one big square.      

Greenfoot - Java Objects - 19 Apr 2013

Homework -

(1) download and install Greenfoot from

(2) investigate the Balloons scenario

Combining Ads - 16-17 Apr 2013

** Here are the .zip archives of all the banner ads, as sent to the teacher. **

All the pairs of students have finished ads - so we have 10 ads total.
Now we need to combine these ads together into a single web-page.

This is a group project for the entire class.  The class needs to do the following:

-  Be sure that the AUTHORS' NAMES appear somewhere inside each page.
- Each pair (group) should create a .zip archive containing their page
   and send an email to the teacher with the .zip file attached.
    Be sure that all the images are included in the .zip file.
- Collect all the single pages containing the individual ads and
   make these available to the entire class.
- Figure out what needs to be copied and pasted in order to
   move an ad into a new web-page.
- Collect all ads into a well organized, understandable, single web-page.
- On Friday, 19 Apr, the entire class must submit the collection of
   all 10 single ad pages plus the big web-page containing all 10 ads.
- On Friday we will discuss the difficulties associated with this group work.

Finish Animated Ads - 15 Apr 2013

Finish your animated ad.
Bring it to class tomorrow. 
It must be finished at the beginning of class
so that we can put all the ads together during class.

Make-up Quiz - 11 Apr 2013

If you need to take a make-up quiz for the World Trips quiz,
download your pictures here.

Animated Ads Group Project - 9-12 Apr 2013

We will make "banner ads" for school events.  You must work with a partner - groups of TWO students.
Choose a future school event, for example:

You must create a JavaScript animated advertisement for the event. 
The ad must contain:

The ad should be interesting, attractive and informative.

You may use images downloaded from Google images or any other source.

Each programming pair must produce ONE advertisement.

Due Date : Tuesday 16 April - at the beginning of class

For more ideas, try reading these notes.

Animated Ads - 21 Mar 2013

After the break we will make animated ads for school activities.
Start by reading these notes and trying out the various fading and zooming commands.

Sliding Quiz - 20 Mar 2013

Click here to start your quiz.

Continue Practicing setTimeout and Slide - 18 Mar 2013

Continue practicing with Slide and setTimeout commands.
Remember, we will have a Quiz on Wednesday,
using the computer (and notes) to fix and/or create
animated web-pages.

Animated Map - 15 Mar 2013

Look at this example : Animated Map

Get an image of a map for a city that you know.
Choose some tourist locations, and create moving
arrows (or other objects) that show how to get
to each location, similar to the Animated Map above.
Use SLIDE and SETTIMEOUT to make the objects move
along streets from a starting point to the desired location
when a label or image is clicked.

Using Slide and Timeout - 14 Mar 2013

Read these notes.
Do the exercises involving setTimeout().

Eventually, we will make pages like this one: Animated Map

Quiz - plan on a quiz on Wednesday 20 March

     This will be a working quiz, using the computer
     to fix a web-page under timed conditions.
     You can use notes (including web-sites) during the quiz.

JS-Plugin Library - 12 Mar 2013

Read these notes.
Download the JS-Plugin Library.
Create the web-page described in the notes.

Another Drag-Drop Library - 11 Mar 2013

Draggable from Dynamic Drive

Making Math Pages - 6 Mar 2013

Look at these sample pages.

Here are some more sophisticated ideas for later -
these only in Internet Explorer.

We can make interactive instructional pages using a simple plan:

Drag and Drop Math - 5 Mar 2013

Try out this Drag & Drop Math page.
Then do the following:

Turn in Interactive Quiz - 4 Mar 2013

You need to turn in your interactive quiz.  This may not be as simple as you hoped. 

Find a partner.  Your goal is to EXCHANGE your quizzes, so that each person's quiz works correctly on the other person's computer.  Once you have done this successfully, you need to give your quiz to the teacher.  There are several possible methods for this to work correctly:

Next Topic  

We will be using some JavaScript Library Functions to perform various DYNAMIC
interactions in web-pages.  Here is the first example demonstrating Drag-And-Drop. 

Quiz Web-site - 1 Mar 2013

Remember - your interactive JavaScript quiz is due on Monday 4 March.
Interactive Quiz Notes

Homework -
Next week we will use BlueGriffon to create web-pages.
Make sure you download this before Monday 4 March.

Quiz with Input Boxes - 14 Feb 2013

Math Problem with Input Boxes

Continue Interactive Quiz - 13 Feb 2013

You will write a quiz web-site, with many pages.
Read these introductory notes.

Multiple Choice Quiz - 12 Feb 2013

Type this web-page into your editor (Kompozer).
Change the pictures and questions to make a quiz
about a topic of your choice.  Once you finish one page,
make another and LINK the first page to the second,
to open the second page after the first answer is correct.

Quiz and Joke - 8 Feb 2013

Quiz - make 4 animations run simultaneously - don't forget your name
           Show your program to the teacher when you have finished.


Running Animations from a Web-server - 7 Feb 2013

This version of the Grinch Animation can start and stop.
It can also run from a Web-server, because the pictures
are pre-loaded into invisible image tags.


Quiz Tomorrow

Efficient Code for Animations - 6 Feb 2013

Look at this sample web page. 
It probably won't work correctly due to bandwidth issues.
You can download this .zip archive and run it locally.  

The teacher will explain how to preload the images
so that the animation can run from a web-site.


Download the .zip archive.

Make sure the animation runs sensibly.

Add a SECOND COPY of the same animation, next to the first one.
It needs it's own START button.

Now add a STOP button for each animation,
and make the buttons all work correctly.

Homework -
You will need to upload some web-pages to a Web server.
You can use DROPBOX for this purpose, so you will need an account.
Make sure you have a DROPBOX account before class tomorrow.

Animations - 4 Feb 2013

We will spend one more day practicing writing slide-show animations the hard way.
Actually, this is the simple way, but it produces lots of code.
It's possible to achieve the same thing with much less code, but that's TRICKY.
We will start learning that next time.

We made animations for video games a few months ago.  Here are the instructions from before:

You can make your own animated Sprites. 
You could draw them, but that is an awful lot of work. 
A better idea is to find Animated GIF files on Google images. 
Then extract the single frames using the tool at
This will create a sequence of images named pic0000.jpg, pic0001.jpg, pic0002.jpg ... 
Then you need to add them to the SAME FOLDER where you save your WEB PAGE. 

Today try downloading a GIF animation, extracting the frames,
and making a page similar to this one:

You can find lots of GIF animations at :
Or search in Google Images.

Stopping and Starting - 1 Feb 2013

Now add a [Stop] button for your slideshow.
You need to add a stop variable to keep track
of whether the show is running or stopping.
You will need a separate [Stop] Button and a
separate stop variable (stopA, stopB, etc)
for each slideshow.  Be sure to set the stop
variable back to 0 whenever the [Start] Button
is pressed, and set it to 1 whenever the
[Stop] Button is pressed.  Then your setTimeout
commands must look something like this:

     if( stopA == 0)                     // the show is running
     {  setTimeout("running2()",1000)  }

If you want, you could also add this:

     if( stopA==1)                // the show has stopped
     {   hide(pic01);

Then the pictures will all disappear when you
press [Stop], and only reappear when you press [Start].

Timed Slideshows - 31 Jan 2013

Download :

The teacher will explain the code in SlideShow4.html


A few things to remember :

More Slideshows - 29 Jan 2013

1.  Collect all the photos from all the students into one place
where all the students can access them.  The class should discuss
the best way to accomplish this.

2.  Using the photos that the class collected, create a web-page
with 3 slide shows next to each other.  Notice that the bottom photo
in each stack of photos must make all the pictures in that stack visible -
it should not show all the pictures in the entire page.
Put at least 5 pictures in each stack.

Pay attention that you may need to use different SCRIPT FUNCTIONS
for the different slide-show stacks.  Then again, maybe you can
reuse the same function for several slide shows.

3. Bring your slide-show page to the next class on Thursday.

Slideshow - 28 Jan 2013

Click here to see a sample Slide-Show

Today's Practice

  1. Copy the SlideShow sample page
    You also need to download all 3 pictures (right click and choose Save As)
    You'll need to save the HTML file and the 3 pictures together in the same folder

  2. Add one more China picture -
    - use Google Images to find a picture of China
    - use an image editor like GIMP or Paint to resize your image to exactly 600x450
    - save your picture in the same folder with the others
    - modify the web-page to display all 4 pictures

Use a camera to take 10 pictures around the school (or at home if you prefer).
These must be pictures that you can share with someone else - nothing private.
Tomorrow we will start making slide-shows with the pictures you have taken,
so bring them with you to class.  If you don't have a camera, you can use the
photos that someone else brings to class.

Hiding Divs - 25 Jan 2013

We will use JavaScript to HIDE questions (divs) after
they have been answered correctly.  Something like this: = "hidden"

For this to work properly, you can put it in the LIME method.
But then you will need a separate LIME method for each DIV.

Make a web-page with lots of multiple-choice questions
that are all STACKED UP on top of each other.  Each time the
user clicks the right answer, the question should DISAPPEAR,
and then they see the next question.  When they get it right,
it disappears too, and they see the next question.

Clickable Quiz Page - 23 Jan 2013

Try this multiple-choice quiz page.  Then make the changes listed below.


HTML Standards and Browsers and Fonts - 22 Jan 2013

Stop Sign Page

Try this : HTML5 Compatibility Test

Note for today's lecture about TEXT formatting

SNOW DAY - 21 Jan 2013

*** SNOW DAY ***

Watch these videos.  Write down WORDS that you don't understand -
technical words that sound important.  We will discuss them in class tomorrow.

We Are All Cyborgs     All Your Devices Can Be Hacked   10 Mindful Minutes  

Use some time today to make BACKUPS - extra copies
of anything that is important to you.

Test on HTML and JavaScript - 17 Jan 2013

Here is your test

After you finish your test, turn in the printed page.

If you finish early, you can begin doing your homework -
you need to do this reading BEFORE Monday.

Homework Reading:

... keep pressing the [Read More] button (and keep reading)
    until you reach the [Color Samples] page.

RollOver Effects - 16 Jan 2013

We can make a "rollover effect" by changing the background color
of a DIV whenever the mouse passes over it.  Here is sample code:

  <div id="google" onclick="goGoogle()"

 onmouseover="redbg()"  onmouseout="normalbg()"     

      style="background:#aaccff; position:absolute;
             left:20px; top:24px; width:120px; height:50px">

    <font size="+3" face="Courier"><b>Google</b></font>
     function goGoogle()
     function redbg()
     { = 'red'
     function normalbg()
     { = '#aaccff'


But it's probably better to use more specific names for the functions, like:

    function redbgGoogle()

    function normalbgGoogle()

because you will want to make functions for ALL your DIVs,
and they cannot all have the same names.

Div Boxes Windows 8 Style - 11-15 Jan 2013

Read these notes about using DIV boxes to make a Windows 8 Style interface.

Test Announcement - we will have a TEST on Thur 17 Jan
You will need to answer questions about HTML and JavaScript.
      You may use the computer and your notes to help.

Clickable Pictures - 9-10 Jan 2013

Read these notes and make a web-page with clickable pictures.
Make a web-page with clickable pictures, with a joke on each picture.
Do as many as you can today - practice to get faster and remember more.

JavaScript Programming - 7 Jan 2013

We will start programming in JavaScript and HTML to create interactive web-pages.

JavaScript is a very similar language to Java.  The main difference is that Java programs run like a normal application, whereas JavaScript programs are part of a web-page, automating actions inside the page.  Java programs run inside the operating system, while JavaScript programs run inside a browser.

When writing JavaScript, you will need an editor for typing the code, and then use a browser to test it.  The following tools are recommended:

Different browsers execute JavaScript slightly differently.  Internet Explorer will probably have more problems than other browsers.  Google Chrome also has noticeable incompatibilities with Firefos.  If you choose to use a different browser, you may need to do a lot of research to deal with the resulting problems.

Read these notes about making your first JavaScript page.

Tic-tac-toe Rules - 14 Dec 2012

There are two sets of rules to worry about:
1. You cannot play in an occupied square
2. When is the game over, and who won?

Here are some example if.. commands - you will need more.

if( board[row][col] != '-')
{ output("Illegal move - try again"); }

if( board[0][0]==board[0][1] && board[0][1]==board[0][2])
   if( board[0][0]==1 )
   { output("X wins!"); }
   { output("O wins!"); }

Add more if.. commands to prevent illegal moves
and to check who wins.  Be sure these commands
will execute at an appropriate time, like after each move.

More Kings - 13 Dec 2012

Kings version 2 - this is the semi-finished Kings game.

Tic-Tac-Toe (noughts and crosses)

Now we will make a Tic-Tac-Toe game for 2 players.

  1. You will need image files for X and O

  2. Make the board 3x3 (that is a normal board)

  3. Change the program so that the user must
    first click on an X or O, and then click on a square.
    Clicking on X "chooses" the picture that will be used.
    Then clicking on the square must place that picture.
    In the array, you will need to put different numbers,
    maybe 1 for X and 2 for O.  Don't use zero for O,
    as zero represents an empty square.

Get that much finished before tomorrow.
Tomorrow we will add RULES to the game -
to prevent O from playing on top of an X,
and checking whether there is a winner.

2-D Arrays - Kings - 10-11 Dec 2012

To turn in your gambling game, do the following:
- make a .zip archive containing the ENTIRE FOLDER of your program
- attach the .zip archive to an email and send it to:

Next topic - 2 D Arrays

A 2D array is the typical organization of a board game, for example:
- MineSweeper
- TicTacToe
- Bingo
- Chess
- 4 in a row

We will start this topic by investigating a game called KINGS.

Making a Gambling Game - 27 Nov 2012

Try out this card game program:

Then read these notes:

Gambling Game with Mouse-Clicks - 21 Nov 2012

Programming in Processing (or Java) is a bit tricky,
as the mouse-clicks are ASYNCHRONOUS - that means
they can happen at any time.  This interferes with the
normal DRAW loop that is running continuously.
The best way to coordinate these two parts is
through the use of VARIABLES storing VALUES and STATES.

Here is a sample program that is a basic start
of a useful gambling game:

  Gambling Game 1

Here are some ideas for gambling games -
- rolling dice (craps)
- cards (poker, black-jack, etc)
- roulette (spinning wheel)

All these games have similar ideas:
- the player makes a bet
- some random result occurs
- the user gets money or loses money
   depending on the result

Quiz - 20 Nov 2012

Download for your quiz:

PImage imgA , imgB;

PFont font = createFont("Arial",24,true);
void setup()
  imgA = loadImage("");
  imgB = loadImage("");

void draw()
  if(mouseX<240 && mouseY<180)

Payoffs - 19 Nov 2012

Remember - Programming Quiz Tomorrow

Today - We will add payoffs to the game (below),
including various combinations of results, betting,
and paying winnings.

Jackpot Game - 15 Nov 2012

You can download a working Jackpot game here:

You hold the mouse over each picture and it starts "spinning".
Move the mouse away to stop spinning.
The goal is to get 3 green pictures.

Your programming goal today is to change this program
(or use your own program if you prefer) to do the following:

  1. The "spinning" pictures should all be spinning when the program starts.
  2. Rather than using a mouse-over action,
    you should use mouse-click to stop them from spinning.
  3. After a spinner has been clicked, it should not start spinning again.
    You should make a [Reset] button that starts them all
    spinning again, so you could have a second try.
  4. After you have clicked on each of the 3 spinners,
    the program should announce one of the following:
    - Jackpot = 3 green pictures
    - 3 Matching = for any 3 pictures that are all the same
    - 2 Matching = if 2 pictures match but 1 is different
    - 1 Green = if you have 1 green picture and no matches
    - BUSTED = if none of the ones above happen

= Quiz on Tuesday =
you will have a programming quiz on Tuesday, 20 Nov.
You will receive a program that is similar to this one
and a list of required changes that you must make.

== Project Starts Wednesday ==
On Wednesday, we will start a project that will last 2 weeks,
to produce a program that will be graded.  It will be a
gambling game based loosely on what we have been
doing with the spinning pictures.

Game of "Rolling" Pictures - 14 Nov 2012

We can use mouse control of flickering slide-shows to make a game.
Read these notes about the Flicker Game.

Slide-show with Mouse Control - 13 Nov 2012

Read these notes

Practice -

1. Copy the program and run it

2. make YOUR SLIDE SHOW run continuously

3. copy part of the code in the notes
    into your slide-show to make your slide-show
    CLICKABLE, so it starts when you click it

4. Make your click into a TOGGLE,
    so you can click to start and click to stop

5. Change it so that it starts when the mouse
    is over the picture, and stops when the
    mouse is not over the picture

Slide-show Transitions BLEND and TINT - 8 Nov 2012

Read these notes and make a simple slide-show before class next Tuesday.

This won't be graded, but next week we will make a nice program with
slide shows and animations.

Interesting Examples - 7 Nov 2012

We will discuss the interesting examples that students found,
and what they discovered about how to change the programs.

Next Topic?? - 5 Nov

We will discuss the interesting Processing examples and
choose the next topic to study.

Written Quiz - 1 Nov

1.  Written quiz - this probably takes about 30 minutes

2.  Homework - In Processing, look at various EXAMPLES (in the Files menu).
                         Search for an interesting graphics effect.
                         Be prepared to identify your interesting example on Monday during class.

Quiz Tomorrow - 31 Oct

Today: Practice making quiz questions.

Tomorrow : You will have a written quiz (on paper, without a computer)
with questions about the quiz program you have been writing.
It will be a short quiz, maybe 25 minutes.

Next Week : a new topic and new techniques.
               Maybe a math program?

Adding Red X's - 29 Oct

See the paper distributed in class.

Make a Quiz - 26 Oct

Now make your own quiz. 
It needs AT LEAST 3 questions
each with a picture and some text.
Each question must have AT LEAST
4 boxes where you can click,
and each box must have an OUTPUT command.
Finish this BEFORE MONDAY at the beginning of class.
On Monday, we will add some red X's and green check-marks
to make the quiz more attractive.  If you don't bring a working
quiz with you, it will be difficult to continue.

More Work on Quiz Program - 25 Oct

How can we make more than one question?
We will make an example that uses one picture for an entire question.

Start with this program - you will also need a couple pictures with questions.

PImage pic;
int question = 1;

void setup()
   pic = loadImage("fruits.png");

void draw()
   noLoop();         // so that it only draws once
                     // otherwise OUTPUT won't work

void mouseClicked()
   println(mouseX + " , " + mouseY);
   if(question == 1)
      if(mouseX >= 50 && mouseX < 150)
         output("No, apples are sour");
      else if(mouseX >= 150 && mouseX < 250)
         output("No, bananas are bland");
      else if(mouseX >= 250 && mouseX < 350)
         output("Right, cherries are sweet"); 
         pic = loadImage("australia.gif");
         question = question+1;
         output("You missed");
     // need to check various regions here

public void output(String message)
{  javax.swing.JOptionPane.showMessageDialog(null,message);  }

Of course, you will also need the pictures:


Multiple Choice Quiz - 22 Oct


1.  Download the program below
2.  Change it to have 4 pictures in a row, next to each other
3.  When the user clicks on a "wrong" picture, the picture should disappear.
     When they click on the "right" picture, the program should end.

We will be creating a multiple-choice quiz with pictures - it will look something like this:

What is world's most popular fruit?

Your assignment is to make a multiple choice quiz.
For this to work, we need to learn the following techniques:

Here is a sample program (you can download it here):

PImage left, right, dice;

void setup()
   left = loadImage("but0-left.png");
   right= loadImage("but0-right.png");
   dice = loadImage("tombud999.png");

void draw()

void mouseClicked()
   if(mouseX > 50 && mouseX < 100 && mouseY > 100 && mouseY < 150)
   {  dice = loadImage("but0-left.png"); }
   if(mouseX > 300 && mouseX < 350 && mouseY > 100 && mouseY < 150)
   {  dice = loadImage("but0-right.png"); }
   if(mouseX > 100 && mouseX < 150 && mouseY > 200 && mouseY < 300)
   {  exit(); }

Here is an example quiz - give it a try
The sample quiz is written in JavaScript, not in Java.
But we will write our program in Java, using processing.

Step 1 - Planning

Start by thinking of 5 questions. 
Write them on a sheet of paper, together with the correct answers.

Step 2 - Collecting Resources

Collect all the pictures for your answers. 
If you can't find appropriate pictures, you may need to change a question.
You also need green and red check-marks for marking correct/incorrect answers.

Finish Your Game - 19 Oct

Friday is the absolute last day in class to work on your video game.
You must turn in the finished game BEFORE Monday 22 Oct -
that means sometime on Sunday at the latest.

To turn in your game:

  1. Right-click on the FOLDER containing the game
  2. Compress the folder to a .ZIP archive
  3. Send an email to the teacher with the .ZIP archive attached

If you cannot figure out how to create the .ZIP archive, you will
need to turn in your program.  That's not catastrophic, but please do TRY
to email a zip archive.

A Couple More Ideas - 15-17 Oct

Be sure that your game is keeping score somehow.
Make sure that the game has clear goals -
put instructions on the screen at the beginning.
At least 2 of your characters should be animated.
Remember that you have 3 class periods left -
no class on Thursday and the game is
due on Friday at the beginning of class.

Continue Your Video Game - 9-11 Oct 2012

Continue building your video game.
Class is cancelled Wednesday for ISA testing.
If you are in grade 11, you should go to
the library and work independently on Wednesday, Pd 3.
On Thursday Pd 5, all students come to class as usual.

Your Video Game - 27 Sep 2012

== Assignment ==
Create a video game by using the Sprite library and changing/improving the CookieMonster.
You do not need to keep any of the CookieMonster Sprites.  You should create your own
animated (or still) Sprites.  Make them move in interesting and challenging directions.
Use the .hit command to detect collisions and respond in meaningful ways - e.g. by
gaining or losing points, being put back to start, etc.  Your game should have a goal -
to reach a particular object, kill all the enemies, collect enough points, etc.
Your game should have a consistent theme - e.g. all the Sprites are animals, or they
are taken from a story like Harry Potter, etc.  You should use keyboard keys to control
at least one of the Sprites.  If you want to make a 2-player game, that's fine - it should
work okay as long as the players don't hold down the keys for long periods of time.

You can use ideas from existing games, like Frogger, Pacman, Space Invaders, etc.
Don't try to make a 3D game - you don't have enough programming skills yet.

== Due Date ==
Your game is due on 19 Oct AT THE BEGINNING OF CLASS.  That gives you 5 days
of class (including today) spread over 3 calendar weeks.  So you probably need to
do some work at home.  You can decide how to organize your time.

Extracting Animated GIFs - 26 Sep 2012

You can make your own animated Sprites.  You could draw them, but that is an awful lot of work. 
A better idea is to find Animated GIF files on Google images. 
Then extract the single frames using the tool at
This will create a sequence of images named pic0000.jpg, pic0001.jpg, pic0002.jpg ... 
Then you need to add them to the Sketch folder in the DATA sub-folder. 
Read the notes in Cookie Monster Sprites .

Today try downloading a GIF animation, extracting the frames, and adding an
ANIMATED sprite to the CookieMonster program. 

You can find lots of GIF animations at :

Sprites - 24 Sep 2012

Cookie Monster Sprites

Collisions - 20 Sep 2012


Keyboard Control of Movement - 18 Sep 2012

Keyboard Control

Using PImage for Photos - 17 Sep 2012

You can improve your screen-saver by using photographs or cartoons
instead of the drawing commands in Processing.  You will need to find
a picture in Google Images and save a copy on your hard-disk.
You probably want a small image. 

Next you must add the image to your project, like this:

Then search for your file and add it.

Then use it in your program as shown below:

PImage frogPic;            // create a variable

void setup()
  frogPic = loadImage("frog.gif");   // load the image


void frog(int x, int y)

   image(frogPic,x,y);               // display the image

   fill(0,255,0);             // remove these
   stroke(0,0,0);             // if you are
   strokeWeight(1);           // using an Image
   ellipse(50+x,50+y,50,30);  //
   ellipse(30+x,60+y,20,15);  //
   ellipse(70+x,60+y,20,15);  //
   ellipse(75+x,40+y,30,20);  //

Screen Saver Animation - 13-17 Sep

Spend 3 class periods doing this assignment - it needs to be finished
at the end of class on Monday 17 Sep.

Create a "screen-saver" animation program.
This should have lots of "sprites" moving around in various directions.
Include some "special events" at specific times, like one of the sprites
disappears after 5 seconds, or a new sprite appears after 10 seconds.
Some interesting patters would be nice, like 2 soldiers marching along
side-by-side, or a stupid little turtle moving very slowly in the middle, etc.

You need to make your own "sprites".  Don't use the robot from yesterday -
it's too big and too complicated.  Keep your sprites simple.

Make at least one of the sprites change colors occasionally.

Here is a sample program, just so you see the basic commands.
Add lots more sprites. 

Robot Animation - 11 Sep 2012

We will be working on animating the movement of
the robot in this book : Getting Started With Processing (p. 35)
Here is the original robot program.

Homework :
Finish the 4 Robots program, with 4 robots moving in 4 directions.
In case your notes are incomplete, the entire program is shown below
(no, you cannot copy and paste).

Methods Test - 10 Sep 2012

Click here to start the test (after 10:50 on Monday 10 Sep)

Homework : Type the Robot program from the hand-out.
                     Bring the program with you to class tomorrow.

How to Create Letters - 7 Sep 2012

You may need a clear set of steps for creating methods for letters.
For example:

Drawing the letter P
 - Sketch it in the corner on paper
 - Write approximate coordinates
 - Create a METHOD that draws one P in the corner
 - Add X and Y parameters to make it movable
 - Draw several P's in various places
 - Add an S parameter to control the size
 - Change the sizes of various P's
 - Add R,G,B parameters to control the color
 - Make the various P's have different colors

The teacher will demonstrate how to follow these steps.

Fonts and Letters - 5 Sep 2012

We can use a method to draw any shape we wish.
This is especially interesting if we need many copies of the shape.
A typical example is letters. We can make a method for each
letter of the alphabet.  It's tempting to name the methods
A, B, C ..., but that can cause confusion.  It's better to use
names like :  letterA , letterB , letterC ...

Of course, if you are making several copies (e.g. writing words)
you will need some parameters that move letters to other locations.
It's also nice to include color parameters.

Here are some more extensive notes on this topic.
The second page is more important - the first page is an introduction.

Test Announcement -
We will have a test on Monday 10 Sep.
Again it will be open book, open notes,
use anything you have written before.
You will have a specific programming task
to accomplish in 45 minutes.

Colors in Parameters - 4 Sep 2012

The teacher will show how to add parameters for colors in the grimFace,
so we can make a set of faces like the Andy Warhol poster.
Then read these notes

Using Methods in Java - 3 Sep 2012

Faces and Methods

First Test - The Yellow Submarine - 24 Aug 2012

Write a program to draw the required picture.

If you finish early, find something interesting to read on - click on the icons under [Latest Tech Ideas]

Drawing Circles and Arcs - 20-23 Aug 2012

The flags project only drew straight lines and rectangles.  We also need curves sometimes.

Click here for notes about drawing circles and arcs.

TEST - plan on a test on Friday 24 August.
The test will have both a written section (writing answers on paper)
and a practical programming section, where you must write a program.
This test will be open book, as most tests in this class.
That means you may use your notes and any old work
that you have saved in your computer.  Too bad if you don't have any notes.

First Day of Class - 15 Aug 2012

We will be using Processing to write programs that create graphics displays.
We will start with a program that draws flags.
The teacher will show how to draw lines and rectangles in Processing.

Read these notes and get started drawing some flags.

What is Computer Science?  Try watching this video.

How is that connected to our Graphics Programming class?
We will discuss this sometime in the future.