Last Day of Class - 20 June 2016

Find something fun to do - suggestions:

Lots of Music Tools

Exercise your brain with  www.gamesforthebrain.com

Competitive Typing      http://play.typeracer.com/

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:
https://www.shadertoy.com/view/MsGSRd

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:

Embedded Video Page - 27 May 2016

Here is a Bungee page with EMBEDDED videos:
https://s3.amazonaws.com/files.haikulearning.com/data/frankfurt_international_school/minisite_78536426/b536617be5bf/Bungee/index.html

"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:
https://s3.amazonaws.com/files.haikulearning.com/data/frankfurt_international_school/minisite_78421840/b97bc183f470/Bungee/index.html

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.

• download and install Blue Griffon (a WYSIWYG web-page editor)
  You can borrow a USB stick from the teacher if you prefer.
  
• download 3 images from Google, save into a FOLDER
• use Blue-Griffon to make a web-page with the 3 images
  like this (but don't use clowns):
  https://s3.amazonaws.com/files.haikulearning.com/data/frankfurt_international_school/minisite_78346644/c28b09808e/pics3/index.html
• save your page IN THE SAME FOLDER with the images,
  and name the page INDEX.HTML
• the images must be stored in the SAME FOLDER with your web-page
• COMPRESS your FOLDER to a .zip archive
• in Haiku, go to your E-Portfolio and [+ add] an entry
  that is a [Mini-site].  Then upload the .zip archive file.
• open the Mini-Site and make sure it works correctly
• after opening the Mini-Site, copy the URL and turn it in
  in Haiku in the Mini-Site assignment. 
  You turn this in by using [Write a Message]
  and paste the URL of your Mini-Site.

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: http://www.logogarden.com/

     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

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 :

Making Things Pretty - 9 May 2016

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

http://fisgraphicsproject.pancakeapps.com/

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:
http://conversionxl.com/why-simple-websites-are-scientifically-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:

https://docs.google.com/spreadsheets/d/13XuN0m-qfC2dSnmzViIb6IYl4220dzpAV9VdNjBjwBs/edit?ts=5715e94b#gid=2013125012

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).

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

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.

Weebly.com (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 http://www.google.com  ?
- http://www.theinquirer.net/inquirer/news/1558680/berners-lee-regrets-double-slash
- http://stackoverflow.com/questions/4659345/is-there-any-downside-for-using-a-leading-double-slash-to-inherit-the-protocol-i 

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 : https://dl.dropboxusercontent.com/u/275979/graphics/javascript/Dynamic/simpleGame2.zip

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://ipiccy.com 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

Making a Menu - 11-15 Mar 2016

Try Out Swimbi - 9 Mar 2016

Small Quiz on CSS + HTML - 8 Mar 2016

Better Menues - 7 Mar 2016

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
-  HongKiat
-  Wikipedia List of Javascript Library Sites

Menues - 3 Mar 2016

Lots of Buttons - 2 Mar 2016

More CSS - 19 Feb - 1 Mar 2016

Making Buttons with CSS - 17 Feb 2016

Make Slideshows - 15 Feb 2016

-  Book as PDF (use the Download version)

-  examples from the book

Rollover Navigation - 12 Feb 2016

Rube Goldberg Machine - 3-11 Feb 2016

Rube Goldberg Machine Project 

Your assignment is to make a page similar to this one:
https://dl.dropboxusercontent.com/u/275979/graphics/javascript/RubeHack/RubeHack.html

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.

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:

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

Make Your Own Silly Animation - 1 Feb 2016

Cheap, Silly Animation - 28 Jan 2016

Quiz on Slide and SetTimeout - 27 Jan 2016

More Practice with Slide and SetTimeout - 26 Jan 2016

Using SetTimeout with Slide - 22 Jan 2016

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)
** and the PJ.js library ALL STORED TOGETHER IN ONE FOLDER.

Download ALL these files in this .zip archive.

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

Using SLIDE - 21 Jan 2016

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)
** and the PJ.js library ALL STORED TOGETHER IN ONE FOLDER.

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

Interactive Quiz - 18 Jan 2016

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 http://komodoide.com/download/ (choose Komodo Edit, not IDE)
(or borrow a USB stick from the teacher - that's a bit faster)

Today

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

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:
http://www.w3schools.com/tags/ref_colornames.asp

Buttons and Picture Clicking - 12 Jan 2015

which link to pictures, web-sites and videos:

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:

== 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

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:

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

Random Numbers Total Game - 1 Dec 2015

Continue Dice Game - 25 Nov 2015

Cheating?  -  24 Nov 2015

Even More Spinning Dice - 23 Nov 2015

More Spinning Dice - 19 Nov 2015

Spinning Dice - 18 Nov 2015

Jigsaw Puzzle - 17 Nov 2015

Crazy Colors Assignment - 9-13 Nov 2015

Saving Pictures - 6 Nov 2015

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:

Gradient Shading - 5 Nov 2015

• Try using different colors for the gradient fill
• Try making a gradient fill from left to right by changing Y to X
• Try replacing Y with  (y + mouseY) - then move the 
  mouse up and down over the picture.
  
• Replace X (or Y) with a LINEAR COMBINATION like (X/2 - Y)
• Add some if( .. ) commands to do different gradient fills
  in different parts of the image
• Use frameCount to make the to make the image change 
  with the clock, for example:    b = b * (y/ (frameCount)) ;
• You can also try using mouseX and mouseY in your calculations.
  That means the shading changes as you move the mouse
  around on the image.  Be careful not to divide by zero.

Stripes - 3 Nov 2015

make the changes described at the bottom.

Using the Mouse for Effects - 2 Nov 2015

Make the changes and improvements described by the teacher.

== PRACTICE ==

(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

Here is a simple example program:

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

Sprite Game Assignment - 19-26 Oct 2015

Continue with Animations - 15 Oct 2015

Animations - 14 Oct 2015

Sprites - 13 Oct 2015

Blue Blob Program - 9 Oct 2015

Keyboard Control and Methods - 7 Oct 2015

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:

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:

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:

• copy the program, run it and check that it displays the images correctly
• use Google to find 3 other images and replace the original images in the program
  by copying the URL of each image into the loadImage commands.
• add more images to make a nice display, using at least 9 images of various sizes
  that fit together properly to fill the window
• find an "animated gif" image and find out whether you can insert
  it into your program and get an animated image as a result
• add as many images (large, small, animated) as you can do in one class period

Quiz With Parameters - 14 Sep 2015

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

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  http://processing.org

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 http://processing.org after downloading and installing the program.

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

  without installing anything : http://sketchpad.cc .

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

        https://processing.org/download/?processing

-  read the notes below as time permits (over the next few days)

~~~~~~~~~~~~

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 ..