Graphics 2017

,,Graphics Programming 2017-18,,
[[
%"background:#ddeeff"
Links: Processing:~http://processing.org~```Colors:~https://www.w3schools.com/colors/colors_picker.asp~
Processing Book:~http://cmuems.com/resources/getting_started_with_processing.pdf~
%
]]
[[
%"background:pink"
''Next Assignment : Final Project - Due 8 June 2018 at 18:00''
%
]]
###Next Year - 19-20 June 2018 \
''New Email''
email.fis.edu = is disappearing, you can use GMAIL with your same account (same user name and password)

''IB Computer Science''
If you are planning on taking IB Computer Science next year,
you might like to read this page and do some programming practice in the summer:
~http://fiscomp.weebly.com/prepareib.html~

Otherwise, do some BRAIN STRETCHING INVESTIGATIONS.
###Classic Aracade Games - 18 June 2018 \
What is some cool future graphics tech?
~https://www.youtube.com/watch?v=cFedYsrfIsw~

Try exploring the history of video games:
Video - ~https://www.youtube.com/watch?v=dzN2pgL0zeg~

How 3D rendering works:
~https://www.youtube.com/watch?v=cvcAjgMUPUA~

Try out some classic arcade games here:
~https://www.atari.com/arcade#!/arcade/atari-promo~
###Inquiry-Driven Learning - 12 June 2018 \
This week, we will be working on Inquiry Driven Learning
and how this is connected to the IB Programme next year.
~graphics/InvestigationsGr10.pdf~

If none of those ideas capture your interest,
here are some other suggestions:
- 3D Printing (go look at the Atrium)
- Self-driving cars
- Drones
- Personal Data Security (e.g. Facebook's problems)
- Social Networks
- Rockets to Mars
... or anything that you find interesing ...
###Inquiry-Driven Learning - 11 June 2018 \
This week, we will be working on Inquiry Driven Learning
and how this is connected to the IB Programme next year.

Today, we will visit the library and listen to some
suggestions from the librarian.

Tomorrow we will investigate the topics in this document (or others):
~graphics/InvestigationsGr10.pdf~
###Final Project - 23 May 2018 \
Read these notes about your final project:
~graphics/GraphicsFinalProject.pdf~
This is due on Friday 8 June at 18:00
###Moving with Sin and Cos - 18 May 2018 \
Download this demo program:
~graphics/MoveSinCos.zip~
There are several shapes moving around on the screen.
Some use SIN and COS to calculate positions, others don't.
The teacher will explain how various parts of the program work.

We will work on this for 2 or 3 days.
You should change and/or add shapes and pictures.
You may make up your own goals, but here are some suggestions:
- make the Kong picture move at the bottom of the screen instead of the top
- change the square to a different shape, maybe a star
- make the new shape (e.g. star) spin in the opposite direction
- make the bouncing circle (the squashy one) move faster,
  but it should still be continuous motion - should not suddenly
  jump from the top to the bottom
- add another shape that travels in a circle at the 
  top right of the screen
- make a new shape (your choice) that simply sits at the 
  bottom of the screen, not moving, but it squashes down and up
- make two objects that move from left to right and the other
  from right to left, and when they meet in the middle they 
  bounce off of each other and move back
- make the two bouncing objects squash when they collide
- by using IF commands, make a circle that travels along
  the top of the screen, then down the right edge,
  then across the bottom and then up the left side.
  The IF commands need to separate 4 sections -
   0 - 25 , 25 - 50 , 50 - 75 , 75 - 100
###Moving Arrow - 16 May 2018 \
The program below draws an arrow and then moves it
around the screen.  The arrow follows the TRACK
that is defined at the top of the program.
Each TRACK entry contains X and Y coordinates,
as well as a ROTATION value.  These values
are use in the DRAW method to place the arrow
in the correct position, with the correct direction.
You should copy the program and then make the following improvemnts.
In all cases, make the shape move in relatively small steps
so it is not jumping too much.
- make the arrow skinnier - it is too fat
- change the TRACK to move in exactly the opposite direction
  You cannot just reverse the order of the entries,
  because the DIRECTION (rotation) values are different
- Add another TRACK list (maybe TRACK2) that moves the arrow
  around the edges of the screen - along the top, then 
  down the right side, back across the bottom and up the left side.
  Use the rotation values to make the arrow turn at each corner,
  but it should turn in 2 or 3 steps, not just "jump".
  You also need extra commands in the DRAW method for
  moving this new arrow - copy the ones for the first arrow,
  it should not require very many changes.
- make a red circle (a new method) that moves across the middle
  of the screen and then back to the left, back to the right, etc.
- Make another circle that moves in a circular TRACK -
  around like the edges of a clock face
[[
float angle = 0;

float[][] track =
{
   {100,200,PI/6},
   {250,250,PI/6},
   {400,300,PI/6},
   {400,300,PI/2},
   {400,400,PI/2},
   {400,400,PI+PI/6},
   {250,350,PI+PI/6},
   {100,300,PI+PI/6},
   {100,300,PI+PI/2},
   {100,200,PI+PI/2},
   {100,200,PI+PI/2+PI/4}
};

int t = 0;

void setup()
{
  size(600,600);
  textFont(createFont("Arial",36));
  frameRate(4);
}

void draw()
{
 background(255,255,255);
 translate(track[t][0],track[t][1]);
 rotate(track[t][2]);
 fill(0,0,140);
 drawArrow();

t=t+1;
 if(t >= track.length)
 { t = 0; }
}

void drawArrow()
{
float[][] arrow =
{
 {-50,-25},
 {0,-25},
 {0,-75},
 {50,0},
 {0,75},
 {0,25},
 {-50,25},
 {-50,-25}
};

beginShape();
for(int p=0; p < arrow.length; p++)
{
  vertex(arrow[p][0],arrow[p][1]);
}
endShape();
}
]]
###Lots of Shapes - 15 May 2018 \
This program draws lots of crosses.
We will change it to draw stars.
[[
int count = 1;

void setup()
{
   size(800,600); 
   textFont(createFont("Arial",36));
   frameRate(1);
}

void draw()
{
  background(255,255,255);
  translate(400,300);
  fill(0);
  text(count+"",-10,10);
  
  for(int c=0; c < 12; c++)
  {
    fill(c*40,c*20,0);
    drawCross();
    rotate(PI/count);
  }
  count = count + 1;
  if(count >= 12)
  { count = 1; }
}

void drawCross()
{
 float[][] cross = 
 {
  {0,50},
  {50,50},
  {50,0},
  {100,0},
  {100,50},
  {150,50},
  {150,100},
  {100,100},
  {100,150},
  {50,150},
  {50,100},
  {0,100},
  {0,50}
 };

beginShape();
 for(int p=0; p < cross.length; p++)
 {
   vertex(cross[p][0],cross[p][1]);
 }
 endShape();
}
]]
###Tumbling Words - 9-11 May 2018 \
''Remember: Test on Monday 14 May''

Here is another practice program:
~graphics/tumblein.zip~
There are instructions at the end of the program.
###Word Cloud - 8-9 May 2018 \
You may continue the program you started on yesterday.
Or work on this Word Cloud program:
[[
PFont big,small,medium;

float x = 0;
float y = 0;

void setup()
{
    size(800,600);
    big = createFont("Arial",48);
    medium = createFont("Arial",32); 
    small = createFont("Arial",20);

frameRate(20);
}

void draw()
{
   background(255);

textFont(big);
   pushMatrix();
   fill(0,0,255);
   translate(100,150);
   fill(150,0,0);
   text("FRANKFURT",0,0);
   popMatrix();
   
   textFont(medium);
   pushMatrix();
   translate(400,100);
   rotate(PI/2);
   fill(100,100,100);
   text("International",0,0);
   popMatrix();
   
   textFont(medium);
   pushMatrix();
   translate(100,220);
   rotate(PI/4);
   fill(0,150,0);
   text("Oberursel",0,0);
   popMatrix();
   
   pushMatrix();
   translate(380,300);
   fill(200,200,200);
   text("School",0,0);
   popMatrix();
   
   textFont(big);
}

/********************************************************************
This is the start of a WORD CLOUD
for Frankfurt International School.
You could add more words like:
 Warriors
 ISST
 Ms Wood
 Forest
 Taunus
 Da Vinci Wing
 Stroth Center
 Waldlust
 etc.
 
Make them fit together nicely.
Use various font sizes.
You a variety of colors.
*************************/
]]
###Spinning Words - 7 May 2018 \
Download this program:
~graphics/spinwords.zip~
The teacher will explain how the commands work.
Then try to do the following:
- make the SPINNING word spin in the other direction.
- below SPINNING, add 8 more words that are rotated
  in various directions, using various font sizes,
  and make the words fit together nicely 
  like the word cloud shown at the bottom right
- remove the words at the top right, 
   and replace it with 4 spinning words
###Transformations - 3 May 2018 \
Here is a sample program that demonstrates Transformations:
[[
PImage clown;

float r;

void setup()
{
   size(400,400);
   clown = loadImage("https://s.hswstatic.com/gif/how-clowns-work-360x240.jpg");
}

void draw()
{
   background(255,255,255);
   pushMatrix();
   image(clown,20,150,r*30,240);
   popMatrix();
   pushMatrix();
   translate(300,100);
   rotate(r);
   shape1(0,0,100,50);
   r = r + 0.1;
   popMatrix();
   
   pushMatrix();
   translate(100,100);
   shape2(0,0,100,r*10);
   popMatrix();
   if(r>12.56)
   {
      r = r - 12.56; 
   }
}

void shape1(float x, float y, float w, float h)
{
   stroke(255,0,0);
   strokeWeight(3);
   ellipse(x,y,w,h); 
}

void shape2(float x, float y, float w, float h)
{
   beginShape();
   stroke(0,0,255);
   strokeWeight(4);
   vertex(x-w/2,y-h/2);
   vertex(x+w/2,y+h/2);
   vertex(x,y);
   vertex(x+w/2,y-h/2);
   vertex(x-w/2,y+h/2);
   endShape();
}
]]

Try to do the following:
- Change the X so that it is ROTATING instead of GROWING
- Change the O so it is not ROTATING, but GROWING instead
- Change the picture so that it is growing VERTICALLY instead of HORIZONTALLY
- Make the window bigger and add some more objects (at the bottom or right)
  - Add a triangle that is ROTATING
  - Add a STAR (5 pointed), using beginShape and VERTEX commands
  - Add another picture - it should be small and should be rotating
  - Add the letter H, it should be GROWING
  - Add the letter O so that it says OH, and the whole word is rotating
  - if you finish, add more shapes for practice
  - 
###Arrow Shape - 2-3 May 2018 \
Download this program:
~graphics/mapAnimation4.zip~ 
Then download these notes:
~graphics/newShapes.pdf~
###Sparkly Colors - 27 Apr 2018 \
Download this Version 3 of the Animated Map:
~graphics/MapAnimation3.zip~
###2nd Java Animated Map - 26 Apr 2018 \
~graphics/MapAnimation2.zip~
###Java Animated Map - 24-25 Apr 2018 \
Download this sample program:
~graphics/MapAnimation.zip~
###Marquees - 23 Apr 2018 \
We will make a web-page containing MARQUEE boxes.
Read these notes:
~graphics/marquees/marquee3.html~
###Animations and Transitions in Google Slides - 20 Apr 2018 \
In your Google Slide Show (with questions), 
change all the clickable answers so they are ANIMATED,
and add a TRANSITION for each page.
###Using Animated GIFs - 17-19 Apr 2018 \
We are going to make Slideshows in Google Drive.
Look at this example:
~https://docs.google.com/presentation/d/1DKXQC6imP5rcMHDjGsNFh754Wba9yBn_QDDri6DSPuw/edit?usp=sharing~
You should spend 2 class periods making a similar presentation.
Make as many questions as you can, but at least 4.
You should have a GIF animation in each question.
You may use any of the GIF animations that any of
our students made, but please don't spend time
downloading extra animations.
Turn this in to Haiku doing this:
- SHARE your slideshow with all members of FIS.EDU
- upload the LINK into Haiku
###GIF Animation Library - 9-16 Apr 2018 \
We will make a LIBRAY full of .GIF animations on this page:
~https://docs.google.com/document/d/19FBPywCs1DjD5AQIGj3BAjt8j-VSMMLi0th-83zmHn8/edit?usp=sharing~
We will spend one week on this assignment.
###More animated .GIFs. - 22-23 Mar 2018 \
Look at this set of animated gifs:
~graphics/animations/ani1.html~

Continue practicing making animated .GIFs.

On Friday, 23 Mar, turn in the BEST animated .gif
that you made this week.  After the holiday,
we will make a LARGE LIBRARY of animated .gif files.
###Using SKETCH.IO - 20-21 Mar 2018 \
The animated GIF below was created with:
~http://sketch.io~
<img src="graphics/bear.gif" style="height:250px">
You should try to make an animated gif in Sketch.io,
starting with one of the CLIP-ART pictures.
###Vector Graphics and GIF Animations - 19-20 Mar 2018 \
You can make your own EMOJI easily, if you have the right tools.

1 - Vector Graphics Editor
    You must use a Vector Graphics Editor, not a photo editor.
    You will make many frames and they will all be quite similar,
    with only minor changes.  The changes involve moving
    or changing a few small pieces.  If these pieces are
    vector-oriented, the changes are easy.  If they are
    pixel-oriented, like photos, it is qutie difficult.
    
    There are many Vector Graphics editors available.
    One simple example is the Google Drive Drawing editor.
    
2 - Save a sequence of images, using names like pic1, pic2, pic3, etc.
    But DON'T save them as .SVG files, as the next tools needs
    to receive bit-mapped (pixel) images.
    
3 - Use  ~https://ezgif.com/maker~ to upload your images,
    and create a .GIF animation. Adjust speed and size 
    before downloading. Then download your finish .gif file.
    
Today, make one example EMOJI.  For the first try just make
5 or 6 frames - not too many.  Then upload and make your .GIF animation.
Then you can work on a "really nice" one.
###Technical Drawings - 16 Mar 2018 \
We will spend a week using online drawing tools,
as well as discussing file types.  
We will start with technical diagrams using:
~http://draw.io~

1 - find a way to draw a MIND MAP with draw.io
2 - figure out how to draw a PIE CHART with draw.io
3 - figure out how to draw a BAR CHART with draw.io
4 - search the web for a BETTER TOOL for each of #1, #2, #3
###Last Day - Turn in your Board Game - 15 Mar 2018 \
Today is the last day to work in class on your Board Game.
To turn in your board game:

In Haiku:
- find the assignment
- type a MESSAGE containing the names of all your group members
  plus the title of your Board Game
- ONE group member needs to 
  - COMPRESS the folder and upload the .zip archive to Haiku
  - create a MINI-SITE that puts your game online
  - Write a message with the amazon address of your online game

###Board Game Groups - 5-6 Mar 2018 \
Please write a MESSAGE in Haiku and write:
- the names of all the members of your group
- a one-sentence description of the game you are writing
###Board Games Assignment - 26 Feb 2018 \
We will be making Board Games, following these notes:
~graphics/BoardGames3/boardgames18.html~
###Online JS Editor(s) - 15 Feb 2018 \
Click on this link and try the page.
~https://jsfiddle.net/davemulkey/hnczr8op/12/show/~
Then click on [Edit in JSFIDDLE]
The teacher will demonstrate how to use this editor.

You can try out some other online JS editors.
Try the ones listed on this page.
~https://www.sitepoint.com/7-code-playgrounds/~
###Random Numbers - 13-14 Feb 2018 \
Here is a sample page about random numbers :
~graphics/animations/index.html~
###Board Games 3 - 12 Feb 2018 \
Here is a third sample board game.
~graphics/BoardGames3/index.html~
Try out the game and then make the improvements listed.
###Board Games 2 - 9 Feb 2018 \
Here is a simple second example of a board game:
~graphics/BoardGame2/index.html~
Try out the game.  Then download the Source text into BlueGriffon
and make the improvements outlined on the page.
###Board Games - 8 Feb 2018 \
We will be making Board Games - similar to Monopoly or The Game of Life.

Here is a very simple first example of a board game:
~graphics/BoardGame1/index.html~
Try out the game.  Then download the Source text into BlueGriffon
and make the improvements outlined on the page.
###Game Exploration - 7 Feb 2018 \
    Watch this video featuring Jane McGonigal:
    ~https://www.ted.com/talks/jane_mcgonigal_gaming_can_make_a_better_world~
Today please test any or all of the following games.
While playing each game, ask yourself:

'' "Is this game bringing out the best in me?" ''

On that basis, decide whether you find each game good, bad or medium.

~https://beinternetawesome.withgoogle.com/interland~

~https://www.cia.gov/kids-page/games/world-exploration~

~https://geoguessr.com/~

~http://explorers.mrdonn.org/games.html~

~http://www.coolmath-games.com/~

~http://www.gamesforthebrain.com/~
###Educational Pages - 29 Jan - 6 Feb 2018 \
We will be making educational web-pages.

Look at the example page (it is not very good):
~http://ibcomp.fis.edu/2017/graphics/menus/menuquestions.html~

READ THIS ASSIGNMENT :
~graphics/menus/EdMenus.html~

<h2>Your Ed-Page is due on ''Tuesday 6 Feb at 18:00''</h2>
###Modern Navigation with CSS - 26 Jan 2018 \
We will use the code on this web-site to build a nice, modern menu-bar:
 ~http://www.cssportal.com/css3-menu-generator/#~
 
We will change our page to look like this:
~graphics/Menus/menus4.html~
###Continue Better Navigation - 25 Jan 2018 \
Continue making a navigation bar using SELECT/OPTION menues.
It's practice - make lots of menues to get faster and more reliable.
###Better Navigation - 24 Jan 2018 \
Here is a page with a more sophisticated NAVIGATION BAR.
~graphics/menus/Menus2.html~

###Web Page Navigation - 23 Jan 2018 \
Here is a page with a very primitive NAVIGATION BAR.
~graphics/menus/Menus1.html~

The teacher will explain how to use a TABLES and IFRAMES
to create such a page. Today you should create a page like this.
You should choose a TOPIC where you can find INFORMATION pages,
that you display on your NAVIGATION page.  
It doesn't matter if it is completely finished or perfect,
but we will use this as the basis for a more complex page.
Be sure you have a starting page before next class.
Your page should just LINK to existing web-pages -
you should not create any CONTENT yourself.
###Illustrated Wikipedia Page - 16 Jan 2018 \
Look at this sample web-page:
~https://s3.amazonaws.com/files.haikulearning.com/data/frankfurt_international_school/minisite_78536426/b536617be5bf/Bungee/index.html~

You can right-click to show the Page Source.
But that is the HARD way to create the page.
Instead, you should use a Wysiwyg web-page editor (BlueGriffon)
and construct the page the easy way.  Your page should be
similar to the example, but don't use 3 videos.

- Choose a topic that has a good Wikipedia web-page (NOT Bungee Jumping)

- Create a FOLDER for this project,
    create your HTML 5 page in BlueGriffon
    and save it into your folder as "index.html"
    
- Write a TITLE at the top and change it to HEADING 1 format

- create a TABLE with 3 rows of 2 columns

- Copy some text into each of the left-column
    Choose small, significant amounts of text for each CELL.
    Don't write any text - just copy it.
    
- Write a CITATION at the bottom of the page,
    ackowledging the source of your text.
    You should also write YOUR NAME at the bottom of the page.

- For ONE of the rows, create a JavaScript animation
    to put into the right-hand CELL.  You may either create
    your animation directly in your web-page, or you may 
    create it in a separate page and include it as an iframe.
    
- for one of the rows, find a good IMAGE and place that in
    the right-hand cell
    
- for one of the rows, find a good YouTube Video
    and place the video in the right-hand cell

- when finished:
    - make sure your page is named "index.html"
    - compress the folder containing your page
    - upload your .zip file into a Mini-Site in Haiku

Turn in your page into Haiku on or before Mon 22 Jan 
-  upload your .zip archive into Haiku
-  Also, write a message in Haiku containing the LINK to your Mini-site

###BlueGriffon Web-Page Editor - 12-15 Jan 2018 \
Download BlueGriffon from:
~http://bluegriffon.org/#download~
or copy it from a USB stick.

The teacher will explain how to use this
to create a web-page containing iframes.
###Collection Page - 11-12 Jan 2018 \
Here is a sample web-page that displays nine animated ads:
~graphics/ads.html~

The teacher will explain how you can make a page like this.
###Collecting Ads - 10 Jan 2017 \
Once you have an ad finished (more or less),
you need to upload it into a Mini-site and add a link to this document:
~https://docs.google.com/document/d/1ZYH25njGeswVnpsrC0qrzUTXoLSVvPDlzuY9dXOvd-4/edit?usp=sharing~

Tomorrow we will start building a nice interface page
that displays all the ads (or at least many of them).
###Flashy Advertisements - 8 Jan 2018 \
Look at these sample FLASH ads:
~http://ibcomp.fis.edu/graphics/FlashAds/jsAds.html~

Here is a more realistic example, done in JavaScript:
~http://ibcomp.fis.edu/239179/graphics/javascript/moving/rugby/rugby.html~

Read these notes. 
~../239179/graphics/javascript/moving/animatedads2013.html~

We will be making lots of ads/announcements this week and next week.
Together with your partner, you need to make ONE GOOD AD
by Wednesday.  Make sure that your ad fits into a box
that is 400px wide and 200px high.  If your pictures are
too big, you will need to make them smaller.
Your ad can be mostly pictures, but must include at least
some text that tells the name of the event and when it happens.
On Wednesday, you will need to save your ad as a mini-site
in Haiku, and then put a link to it on a central document (more later).  
Then on Thursday and Friday we will continue with some
other ads and build a nice interface page.
###Optional Programming Practice - 15 Dec 2017 \
If you want to have a bit of fun and do some
programming practice in Javascript, so you don't
forget too much during the holiday, you can try this tutorial:
~https://www.khanacademy.org/computing/computer-programming/programming~
This is not an assignment - purely optional.

If you prefer something that is just fun, try this:
~https://santatracker.google.com/village.html~

###Putting your Greeting Card On-Line - 13 Dec 2017 \
The teacher will show how to upload content into a Mini-Site in Haiku.

Here is a sample web-page that has been uploaded into Haiku.
Actually, it is uploaded THROUGH Haiku, and ends up
stored on Amazon's Web Server (AWS).
~https://s3.amazonaws.com/files.haikulearning.com/data/frankfurt_international_school/minisite_107697539/9a1f314249/GreetingCardsFlashyMusic%206/index.html~

You can upload your Greeting Card.  You need to follow these instructions:
- Rename your page as index.html
- COMPRESS your FOLDER (containing index.html and all the other files)
    into 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
  If it does NOT work correctly, then you MUST ask for help.
- after opening the Mini-Site, copy the URL and turn in
    a MESSAGE in the Greeting Card 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 more complicated pages later.

Now all of your Greeting Card pages are open to the public -
to anyone who knows the URL.  The teacher will collect all
the URLs from all the students and create a web-page with
all the links.

If you finish early (this shouldn't take more than 10 minutes),
you can play with the following:  
~https://santatracker.google.com/village.html~
###Adding Animated GIF - 5 Dec 2014 \
Here is one more demo - including fireworks:
~Graphics/GreetingCardsDemo/card3.html~

You may wish to add one or more Animated .GIF images.
These must be saved in your project folder,
then loaded with make("img..."), like this:
[[
  make("button;id=startfireworks;left:380px;top:20px;innerHTML=Start Fireworks");
   make("button;id=stopfireworks;left:480px;top:20px;innerHTML=Stop Fireworks");
   make("img;id=fireworks;left:550px;top:20px;");
   
   startfireworks.onclick = function()
   {
      fireworks.src = "fireworks.gif";
   }
   
   stopfireworks.onclick = function()
   {
      fireworks.src = "";
   }
]]
You can see the sample page by downloading this and then open card3.html:
~graphics/GreetingCardsFlashyMusic6.zip~

###Adding Music - 4 Dec 2014 \
Here is the latest example file demonstrating MUSIC (open card3.html in Komodo):
~graphics/GreetingCardsFlashyMusic.zip~

There are also some notes in this file in Day 3:
~Graphics/GreetingCards.html~
= = = = = = =
<font size=+1><b>Project Goals
- There should be pictures and text that fit with a common theme.
  For example, if your greeting card is about New Years,
  then you would have text and pictures about New Years.
- The should be a variety of ANIMATED text and/or pictures.
- You should use a variety of Javascript techniqes, like:
    make
    function
    button
    img
    Slide
    setTimeout
    Slideshow
    Audio (music)
    .style.visibility, .style.left, .style.width, etc
- at least 10 programming techniques    
- at least some objects (Buttons or IMGs) should be clickable
- some animation should happen in place
- some animation should involve changing locations
- the greeting card page should be INTERESTING and ENTERTAINING and ATTRACTIVE
</b></font>
###Flashy - 1 Dec 2017 \
Here is today's example, with a flashing star:
~graphics/GreetingCardsFlashy.zip~
Today's example is in card2.html.
It has a picture of a tree,
with a small picture of a star on top.
The star was cut out and repainted with:
~http://www.lunapic.com~
You might like this better than ipiccy,
or whatever graphics editor you have been using.
###Animated Greeting Cards Project - 30 Nov-12 Dec \

Today's example : Santa Talking
~Graphics/GreetingCards/card1.html~
Download the example here:
~Graphics/GreetingCards.zip~
Then open CARDS1.HTML in Komodo.
Make your own example, with a picture you like.
Then start planning your greeting card.
Read the project notes here:
~Graphics/GreetingCards.html~
###Animated Greeting Cards - 28-29 Nov 2017 \
Today is a RESEARCH day.  You should explore
online animated greeing cards, looking for good ideas.
Here are a couple examples:
~http://www.123greetings.com/birthday/happy_birthday/the_beak_boys_birthday_song.html~ (music, dancing)
~https://ecards.myfuncards.com/myfuncards/ComposeCard.jhtml?cardID=20100638~ (falling snow)

Your ASSIGNMENT is:
- find a greeting card that does something interesting (but simple)
- in Haiku, upload a MESSAGE containing the interesting idea
  along with the URL where you saw the interesting page
###Slide Shows - 27-28 Nov 2017 \
We will make Slide-Shows, like this one:
~http://ibcomp.fis.edu/275979/graphics/javascript/SlideShow/slideShow.html~

(1)  Download the folder containing the sample web-page, libraries and images
       ~http://ibcomp.fis.edu/275979/graphics/javascript/SlideShow.zip~

(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) Change the slideShow to display 4 pictures that YOU chose.
      You will need to :
      -  find 4 pictures in Google images
      -  download these into the Slideshow folder
      -  change the name of the images files to match your Javascript Array
      -  ensure that the pictures are all the same size,
          by using ipiccy.com or GIMP (or some other graphics editor)
          to resize the pictures to a standard size.

###Better Sliding Text - 21-22 Nov 2017 \
Look at this web-page:
~http://ibcomp.fis.edu/2017/graphics/slideShow3/slideShow.html~

Download the web-page above:
~http://ibcomp.fis.edu/2017/graphics/slideShow3.zip~
###Sliding Text - 20 Nov 2017 \
Here are some notes about "drawing" text into a Canvas object:
~https://www.w3schools.com/graphics/canvas_text.asp~

Try out this web-page:
~http://ibcomp.fis.edu/2017/graphics/slideShow/slideShow.html~

You can download the web-page above, in a folder with all files:
~http://ibcomp.fis.edu/2017/graphics/slideShow.zip~
Open slideShow.html in Komodo and do the practice exercises.
###Slide Commands - 16-17 Nov 2017 \
Look at this web-page
~http://ibcomp.fis.edu/275979/graphics/javascript/world2016/worldmovequiz.html~

Download this .zip archive:
~http://ibcomp.fis.edu/275979/graphics/javascript/world2016.zip~

Then use Komodo to open WorldMoveQuiz.html and make
the changes outlined below.

- Run the program 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 to China, waits, and then 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) - you need to copy it into the World2016 folder

- 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.
   It's all good practice.
###Canvas Drawing - 15 Nov 2017 \
Read these notes:
~http://ibcomp.fis.edu/275979/graphics/javascript/drawingCanvas/index.html~
###JavaScript instead of Java - 14 Nov 2017 \
We will make a WEB-PAGE with clickable images, using JavaScript.
Example: ~http://ibcomp.fis.edu/275979/ibcomp/webScience/javascript/jsLessons/EzJS/SlideShow.html~
You will need to use a TEXT-EDTIOR to write the code 
in this web-page.  A good choice is Komodo:
~https://www.activestate.com/komodo-ide/downloads/edit~
You can install Komodo from this web-site,
or borrow a USB Stick from the teacher.
###Difference Puzzles Project - 8-13 Nov 2017 \
''*** Due Date = Mon 13 Nov at 18:00 ***''
Download this program:
~Graphics/different3.zip~
###Faces and Letters - 7 Nov 2017 \
[[
void setup()
{
  size(800,600);
  textFont(createFont("Arial",32),32);
}

void draw()
{
  background(255);
  if(frameCount < 300)
  {
      faces();
  }
  else if(frameCount >= 300 && frameCount < 600)
  {
      letters(); 
  }
}  
 
void letters()
{
    fill(255,0,0);

for(int x = 0; x < 800; x = x+20)
    {
          if(x == 200)      
          { text("Y",x,30); }
          else
          { text("X",x,30); }           
    }
}
 
void faces()
{
  for(int left=0; left < 800; left = left + 100)
  {
    face(left,0); 
  }
  for(int left=0; left < 800; left = left + 100)
  {
     face(left,100);
  }
 
  for(int left=0; left < 800; left = left + 100)
  {
     face(left,200);
  }
 
  for(int left=0; left < 800; left = left + 100)
  {
     if(left!=400)
     {
       face(left,300); 
     }
     else
     {
       if(frameCount > 500)
       {  fill(250,250,0);
          noStroke();
          rect(left,300,100,100);
          noFill();
       }
       face2(left,300);
     }
  }
 
  for(int left=0; left < 800; left = left + 100)
  {
     face(left,400);
  }
 
  for(int left=0; left < 800; left = left + 100)
  {
     face(left,500);
  }
}

void face(int x, int y)
{
  stroke(255,180,180);
  strokeWeight(4);
  noFill();
  ellipse(x+50,y+50,100,100);
  fill(0,0,255);
  ellipse(x+35,y+40,10,10);
  stroke(0,0,255);
  line(x+65,y+40,x+75,y+40);
}

void face2(int x, int y)
{
  stroke(255,180,180);
  strokeWeight(4);
  noFill();
  ellipse(x+50,y+50,100,100);
  fill(0,0,255);
  ellipse(x+70,y+40,10,10);
  stroke(0,0,255);
  line(x+30,y+40,x+40,y+40);  
}
//================================================
]]
###Loops for Multiple Pictures - 6 Nov 2017 \
Watch this video with lots of multiple images:
~https://www.youtube.com/watch?v=xjp0Y9PTg0A~

Below is a sample program that does something similar.
== PRACTICE ==
(1) Download and run the program below.
(2) Add a mouth and a nose to the FACE method.
(3) Change the program to put the "different" face in the
    second row.
(4) Change the program so that the eyes are NOT switched.
    Instead, the "different" face should have a different mouth or nose.
(5) Change the FACE method to draw something else - 
    maybe a dog or a frog or a car. You will also need to
    change the FACE2 method, so it does almost the same as FACE
    but with some small difference.
[[
void setup()
{
   size(800,600);
}

void draw()
{
   background(255);
   for(int left=0; left < 800; left = left + 100)
   {
      face(left,0);
   }
   
   for(int left=0; left < 800; left = left + 100)
   {
      face(left,100);
   }
   
   for(int left=0; left < 800; left = left + 100)
   {
      face(left,200);
   }
   
   for(int left=0; left < 800; left = left + 100)
   {
      if(left!=400)
      {
         face(left,300);
      }
      else
      {
         face2(left,300); 
      }
   }
   
   for(int left=0; left < 800; left = left + 100)
   {
      face(left,400);
   } 
   
   for(int left=0; left < 800; left = left + 100)
   {
      face(left,500);
   }
}

void face(int x, int y)
{
   stroke(255,180,180);
   strokeWeight(4);
   noFill();
   ellipse(x+50,y+50,100,100);
   fill(0,0,255);
   ellipse(x+35,y+40,10,10);
   stroke(0,0,255);
   line(x+65,y+40,x+75,y+40);
}

void face2(int x, int y)
{
   stroke(255,180,180);
   strokeWeight(4);
   noFill();
   ellipse(x+50,y+50,100,100);
   fill(0,0,255);
   ellipse(x+70,y+40,10,10);
   stroke(0,0,255);
   line(x+30,y+40,x+40,y+40);  
}
//================================================
]]
###Methods 1 - 1-2 Nov 2017 \
We will work on this program today:
[[
void setup()
{
size(1000, 600);
}

void draw()
{
  background(204);
  smooth();
  robot(0,50);
  robot(100,150);
  robot(200,250);
}

void robot(int x, int y)
{
strokeWeight(2);
ellipseMode(RADIUS);
// Neck
stroke(102); // Set stroke to gray
line(x+66,y+107, x+66, y+12); // Left
line(x+76, y+107, x+76, y+12); // Middle
line(x+86, y+107, x+86, y+12); // Right
// Antennae
line(x+76, y+5, x+46, y-48); // Small
line(x+76, y+5, x+106, y-54); // Tall
line(x+76, y+5, x+142, y+20); // Medium
// Body
noStroke(); // Disable stroke
fill(102); // Set fill to gray
ellipse(x+64, y+227, 33, 33); // Antigravity orb
fill(0); // Set fill to black
rect(x+19, y+107, 90, 120); // Main body
fill(102); // Set fill to gray
rect(x+19, y+124, 90, 6); // Gray stripe
// Head
fill(0); // Set fill to black
ellipse(x+76, y+5, 45, 45); // Head
fill(255); // Set fill to white
ellipse(x+88, y+0, 14, 14); // Large eye
fill(0); // Set fill to black
ellipse(x+88, y+0, 3, 3); // Pupil
fill(153); // Set fill to light gray
ellipse(x+63, y-2, 5, 5); // Small eye 1
ellipse(x+96, y-20, 4, 4); // Small eye 2
ellipse(x+105, y+12, 3, 3); // Small eye 3
}

//=== Practice ==============================
//(1) Add 2 more gray stripes on the robot's body.
//(2) Add one more hair (line) straight up on top of the head.
//(3) Change the DRAW method so it draws 6 more robots
//    to the right of the 3 robots, in 2 diagonal lines.
//(4) Change the robot method to make a really simple square robot,
//    using only 6 rectangles - head, body, 2 legs and 2 arms.
//    Use colors, different colors for head, body, arms, legs.
//    There should still be 9 robots in the program.
//(5) Add a new METHOD (void frog) that draws a frog, using
//    4 ellises - head, body and 2 legs/feet.  Then add commands
//    in DRAW to make 6 frogs, fitting them in between the robots.
//===========================================
]]
###Colors Quiz - 30 Oct 2017 \
For the quiz, you need to copy the following program
and then do the tasks listed at the bottom (or on your paper copy):
[[
PImage img,img2;

void setup() {
  size(1200, 500);
  img = loadImage("http://www.goldengeopark.fi/assets/Uploads/_resampled/ResizedImage600450-geoparks2014-tumbler-ridge06.jpg"); // Load the original image
  img2 = createImage(img.width, img.height, RGB);

textFont(createFont("Arial",18,false));
}

void draw() {
  image(img, 0, 0); // display img in top-left corner

for (int p = 0; p < 600*450; p = p+1)
 {
     
  if(mouseY>450)
  {
      if(mouseX<100)
      {
        img2.pixels[p] = img.pixels[p];
      }
      else if(mouseX>=100 && mouseX < 200)
      {
        img2.pixels[p] = img.pixels[p] * 3; 
      }
      else if(mouseX >= 200 && mouseX < 300)
      {
        int pix = img.pixels[p];
        
        float r = red(pix);
        float g = green(pix);
        float b = blue(pix);
        
        r = r*2;
        
        img2.pixels[p] = color(r,g,b);
        
      }
   }  
 }

img2.updatePixels();

image(img2, img.width, 0); // display img2 in top-right corner
  fill(0);
  text(" Normal      Messy         Red",10,480);
}

// (0) Load the program and run it.
//
// (1) Change the NORMAL picture to be PURPLE,
//     shading the right-side picture with bright purple.
//
// (2) Add a new word to the right of RED.
//     It should say NEGATIVE. When the mouse
//     rolls over this, it makes the right picture 
//     into a negative image.
//
// (3) CHANGE the RED image so that it only makes the TOP HALF
//     of the image red.  The bottom half should be normal.
//
// (4) Change the word MESSY to say NEW. When this is touched 
//     by the mouse, it should display a DIFFERENT IMAGE
//     on the right side. You may display any image you wish,
//     but it should fit the space, being 600x450 pixels,
//     or at least close to that size. This does NOT need to
//     make the new picture messy - just display it as normal.
//
// (5) When finished, show your program to the teacher.
]]
###Double Exposures - 26-27 Oct 2017 \
We can use the TINT command to make a transparent image.
Then display that on top of the original image,
but moved a little bit, to make a "double exposure".
Try this program:
[[
PImage img,img2;

void setup() {
  size(600, 500);
  img = loadImage("http://athleticlab.com/wp-content/uploads/2014/04/volleyball.jpg"); // Load the original image
  img2 = createImage(img.width, img.height, RGB);   // extra image

image(img, 0, 0);  // display img on left side
  img.loadPixels();  // get all the pixels into pixels[] array

for (int p = 0; p < 600*450; p=p+1)
  {  
     int pixel = img.pixels[p];
     
     // get colors
     float g = green(pixel);
     float b = blue(pixel); 
     float r = red(pixel);   
     
     // make changes
     r = r*2;          // more red       
     
     img2.pixels[p] = color(r,g,b) ;   // put color in img2
  }

img2.updatePixels();

image(img2, 0, 0);        
  
  tint(255,120);
  
  image(img2, 80 , 0);     // display on top, but moved over 80 px
  
  tint(255,80);
  
  image(img2, 160, 0);     // another lighter copy, moved over again
  
  noTint();                // turn off the tint settings
  
}
]]

Notice that the normal image(img2,0,0) command
has more commands followed.

tint(255,120);      makes a 50% transparent image.
image(img2,80,0);   puts the transparent image on top, moved over
tint(255,80);       is even more transparent, about 33%
image(img2,160,0);  moves over some more.
noTint();           turns the tint settings back to normal

== Practice ==
Try adding tint and extra image commands
to some of your other effects programs.

Keep practicing - make more interesting images.
We will have a programming quiz on Monday 30 Oct.
###More Interactive Colors - 25 Oct 2017 \
Continue adding more letters, more pictuers,
and more interactive effects the the program
that we had yesterday:
~graphics/pixelsV7.zip~

''=== Quiz Monday ===''
We will have a TIMED PROGRAMMING QUIZ
on Monday 30 Oct.  You will receive a 
program, containing a picture with some
color effects.  You will need to change
the program in a specific way.  Then you
will show the teacher your result 
after about 30 minutes.
Keep practicing.
###Interactive Colors - 24 Oct 2017 \
Download this program:
~graphics/pixelsV7.zip~

''=== Quiz Monday ===''
We will have a TIMED PROGRAMMING QUIZ
on Monday 30 Oct.  You will receive a 
program, containing a picture with some
color effects.  You will need to change
the program in a specific way.  Then you
will show the teacher your result 
after about 30 minutes.
###Colors with Mouse Rollover - 23 Oct 2017 \
Download this program:
~graphics/pixelsV2.zip~

== PRACTICE ==
(0) Make the changes and improvements described by the teacher.

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

(2) Add a few more words at the bottom of the screen,
     and make the picture change when you roll-over
     these new words - use different, interesting effects.
     
###Using X and Y - 19-20 Oct 2017 \
Using the same program we have been using,
try inserting the following code:
[[    int pixel = img.pixels[p];
    int x = p % 600;
    int y = p / 600;
   
   
    // get colors
    float r = red(pixel);
    float g = green(pixel);
    float b = blue(pixel);
     
    // make changes
    r = x;          // more red      
    b = y;          // less blue

]]
###Stripes - 18 Oct 2017 \
Insert the following code into the same program from yesterday:
[[    // make changes
    if(p<600*150)
    {  
        b = b*4;
    }
    else if(p >= 600*150 && p < 600*300)
    {
        r = r*2;          // more red      
        b = b/2;          // less blue
    }
    else
    {
        g=0; 
    }
]]

''=== PRACTICE ===''
1.  Change the stripes to 3 other colors.
2.  Make stripes that look like the Germanuy flag -
    Black-Red-Gold
3.  Make stripes like the Austrian flag.
4.  Make 6 stripes, all different colors.
5.  Now do all this on a DIFFERENT image.
    Your new image must be smaller than the goat,
    but not too much smaller.  You need to change
    lots of numbers to accomplish this.
###Pixels and Colors - 17 Oct 2017
Today we will investigate this program:
[[
PImage img,img2;

void setup() {
  size(1200, 500);
  img = loadImage("http://images.nationalgeographic.com/wpf/media-live/photos/000/006/cache/mountain-goat_635_600x450.jpg"); // Load the original image
  img2 = createImage(600, 450, RGB);   // extra image

image(img, 0, 0);  // display img on left side
  img.loadPixels();  // get all the pixels into pixels[] array

for (int p = 0; p < 600*450; p=p+1)
  {  
     int pixel = img.pixels[p];
     
     // get colors
     float r = red(pixel); 
     float g = green(pixel);
     float b = blue(pixel); 
      
     // make changes
     r = r*2;          // more red       
     b = b/2;          // less blue
     
     img2.pixels[p] = color(r,g,b) ;   // put color in img2
  }

img2.updatePixels();        // put pixel colors into img2

image(img2, 600, 0);        // display img2 on right side
}
]]
###Pixels - 16 Oct 2017 \
Read these notes:
~http://ibcomp.fis.edu/275979/graphics/pixels/pixelnotes1.pdf~
You can download the program here:
~http://ibcomp.fis.edu/275979/graphics/pixels/pixels0.zip~

###Your Own Song/Story - 9 Oct 2017 \
You should write a program similar to this one: 
~http://ibcomp.fis.edu/2017/processingGraphicsTutorial/christmasSong.zip~

but your program should present a different song/poem/stor
y.
Your program should contain at least 10 lines of text.
Each line of text must contain at least one clickable word(s).
When clicked, a clickable word changes to a different word,
and these words should be contained in ARRAYS -
one array for each list of clickable words -
put at least 3 alternative words in each array - 
with a counter that counts 0,1,2,.... then back to 0.
You must use colors to highlight the clickable words.
Your program is due on Friday 13 Oct at 18:00.

###Words Game - 26 Sep 2017 \
Download this sample program:
~http://ibcomp.fis.edu/2017/processingGraphicsTutorial/christmasSong.zip~
We will discuss this in class.
###Finishing Jigsaw Puzzle - 25 Sep 2017 \
Please remember to turnin your Jigsaw Puzzles today (in Haiku).
If you finish early, you can open
this web-site and try out the word-games:
~http://www.eduplace.com/tales/~
###Jigsaw Project - 19-25 Sep 2017 \

''*** Due : Monday 25 Sep at 18:00 ***''

1. Start with this program: ~http://ibcomp.fis.edu/2017/processingGraphicsTutorial/jigsaw1.zip~
2. Find TWO different pictures on Google Images
3. You must make TWO puzzles, each with 3 rows and 3 columns 
4. Use http://imagesplitter.net/ to chop up your images into pieces.
   Make sure the piece sizes are a multiple 40 in both directions,
   for example 160x200.
5. Save all your pieces into the Processing Jigsaw folder,
   and rename them appropriately.  
6. Make all the necessary changes in the program to use your pieces -
   you will have 18 pieces altogether.
7. Change the program so that the top-left piece of EACH puzzle
   stays in a specific place and cannot be moved.
8. Place each bottom right piece in it's correct position
   and prevent it (them) from being moved.
9. All other pieces should be scattered around the window.
10. The user can move the pieces to solve the puzzles.

The program should check whether the puzzle is FINISHED
by checking the positions of TWO of the pieces in each puzzle -
the bottom left corner and the top right corner in each puzzle.
So there are 4 things to CHECK before displaying FINISHED.

Turn in your finished program into Haiku on Monday by:
1 - find the folder containing the program and all the pictures
2 - compress the folder into a .zip archive
3 - upload your .zip archive into the assignment dropbox in Haiku  
###Jigsaw Puzzle - 18 Sep 2017 \
We will discuss this program:
~http://ibcomp.fis.edu/2017/processingGraphicsTutorial/jigsaw1.zip~

The web-site to use for splitting a picture into pieces is:
~http://imagesplitter.net~
###Continue Sprites Video Game - 11-15 Sep 2017 \
Don't worry about using Sounds in your game.
We may work on that next week.

''Turning In Your Game''
To turn in your Sprites game, you need to:
- find the FOLDER that contains the program and all the pictures
- right-click and COMPRESS the folder,
  creating a .ZIP archive file with the same name
- in Haiku, find the Sprite Game assignment
  and upload/attach the .ZIP archive file
  
###Splitting GIF Animations - 1 Sep 2017 \
Today you should practice SPLITTING a GIF ANIMATION
and putting it into your Sprites game.
The teacher will demonstrate this.
You should use the web-site:
~http://ezgif.com/split~
There is a brief explanation in these notes:
~http://ibcomp.fis.edu/2017/processingGraphicsTutorial/Lesson06-Sprites/CookieMonsterApplet/index.html~
### Sprites Game Assignment - 29-31 Aug 2017 \
Here is a more interesting example game:  CookieMonsterB
~ProcessingGraphicsTutorial/CookieMonsterB.zip~

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

== 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 Fri 15 Sep 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 lives 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

Be CREATIVE!  Be INVENTIVE!  Take RISKS!
But finish on time - you have 6 class days to complete this.
### Notes about Sprites - 28 Aug 2017 \
Here are very complete notes about the Cookie Monster game:
~processingGraphicsTutorial/Lesson06-Sprites/CookieMonsterApplet/index.html~

Do the practice exercises at the end of these notes.

Next class, we will look at a more interesting example
and start a project that we will work on for the next 2 weeks.
### Games with Sprites - 24-25 Aug 2017 \
INVESTIGATE the following program (the teacher will help):
~http://ibcomp.fis.edu/275979/graphics/processingGraphicsTutorial/Lesson06-Sprites/CookieMonsterApplet/CookieMonster.zip~

INVESTIGATE means
- run the program and figure out how it works
- read the program and try to understand the commands
- make simple changes to see whether you really understand the commands
- make ADDITIONS, for example another Sprite (picture)

We will investigate Sprites in detail and you will write a game
and turn it in a week from Friday (1 Sep).
### QUIZ about Mouse-Clicks - 23 Aug 2017 \
Copy the following program into Processing and run it.
Then make the changes as written at the top.
Copy ALL your changes onto the paper copy provided -
you can cross things out, draw arrows, etc.
Just make it clear - please write clearly.
[[
//====================================================================
//  (1) Switch the positions of the clowns, so that the 
//       juggling clown is on the right side and
//       Krusty the Clown is on the left side.
//
//  (2) Add commands in mouseClicked to make the left clown clickable.
//      It should say "Krusty Clown" when clicked.
//
//  (3) Add commands so the juggling clown is also clickable.
//      It should say "Juggling clown" when clicked.
//
//  Write all changes on the paper page provided.
//  You may cross things out, draw arrows, etc -
//  whatever is clear to read.
//====================================================================

PImage img1 , img2, img3;

void setup()
{
   size(600, 400);
   img1 = loadImage("http://sunnysideprimaryacademy.org/wp-content/uploads/2013/05/clown.png");
   img2 = loadImage("http://static.guim.co.uk/sys-images/Guardian/Pix/pictures/2012/6/4/1338797575737/Staffordshire-bull-terrie-008.jpg");
   img3 = loadImage("http://images1.wikia.nocookie.net/__cb20090329034449/simpsons/images/e/e5/Krusty_The_Clown.png");

background(250,180,250);  
 
   image(img1, 0, 0,200,200);

image(img2, 160,200,300,200);

image(img3, 450,0,150,200);
}

void draw()
{
}

void mouseClicked()
{
  if(mouseX > 160 && mouseY > 200)
  {
     output("doggy");
  }

}

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

After you finish, you should INVESTIGATE the following program:
~http://ibcomp.fis.edu/275979/graphics/processingGraphicsTutorial/Lesson06-Sprites/CookieMonsterApplet/CookieMonster.zip~

We will investigate Sprites in detail and you will write a game
and turn it in a week from Friday (1 Sep).

### Mouse-clicks on Images - 22 Aug 2017 \

''**** We will have a quiz next class period.        ****''
''**** It will be done with your computer and notes. ****''

Here is a sample program where you CLICK on a picture.
[[

PImage pic;

void setup()
{
     size(1000,700);
     textFont(createFont("Arial",32,true));
     pic = loadImage("http://img1.etsystatic.com/000/0/6014389/il_fullxfull.301779451.jpg");
     background(255);
     image(pic,0,50,600,600);
     fill(0);
     text("Click the best fruit          HINT",20,40);
}

void draw()
{
   // this does nothing, but is required for mouseClicked to work
}

void mouseClicked()
{
   if(mouseX >= 350 && mouseX < 450 && mouseY > 380 && mouseY < 480)
   {
      output("No, apples are sour");
   }   
   if(mouseX >= 100 && mouseX < 200 && mouseY > 440 && mouseY < 550)
   {
      output("YES!  Grapes are SWEET!");
      exit(); 
   }
   if(mouseY < 50)
   {
      output("HINT : the best fruit is used to make purple juice"); 
   }   
}

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

/**********************************************

(1) Add a response for the CARROT -
     NO, CARROTS ARE NOT FRUIT
     
(2) Find your own picture.
    Make a similar QUIZ program - with lots of various
    responses and TWO correct answers.
    One answer outputs "correct" ends the program.
    The HINT button should provide information for this answer.
    The second answer outputs "FANTASTIC!" and ends the program.
    The click-boxes should be well aligned with the picture,
    but must not fit "perfectly" - you are just using rectangles.
    Put lots of boxes around lots of items, with
    a suitable response to each WRONG item,
    like the Apple response above.
  
***********************************************/
]]
### Mouse-over on Images - 18-21 Aug 2017 \
Here is a sample program where you "roll over" a picture with the mouse.
[[
PImage pic;   // this must include one variable for each picture

void setup() {

size(900, 600);

pic = loadImage("http://www.albinoblacksheep.com/flash/960/waldo.jpg");

textFont(createFont("Georgia",32));

}

void draw()
{
        background(250,180,250);

image(pic,0,0);

if(mouseX > 400  &&  mouseX < 440  &&  mouseY > 250  && mouseY < 300)
       {
             fill(0,0,0);

text("Waldow",100,580);
       }

if(mouseX > 500 && mouseX < 570 && mouseY > 0 && mouseY < 60)
      {
            fill(0,128,0);
            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 Images in Processing - 16 Aug 2017 \
Starting - you will need to download and install Processing from:
~http://processing.org~ or borrow a USB stick from the teacher.
Many students already installed this last year. Processing can load and
display images (pictures), like these 3 images:
@"https://lh3.googleusercontent.com/lm3C3Sp6u7hMVxVYas6o1RRIlozRHI_Vi6DQM4Ymq94eMmRU-etaFOZDZg9E4TajYS9mhVjJ3i6uNviyFNKjHeQD_3U252HZ-NoQ8M3EwGfiJsO6AYytetfwVo0-uFvD=s1600"

Here is the program that draws the picture above:
[[
PImage img1 , img2, img3; // this must include one variable for each picture

size(600, 400);

img1 = loadImage("http://www.clker.com/cliparts/P/k/2/t/6/1/pink-and-blue-monster-md.png");

img2 = loadImage("http://static.guim.co.uk/sys-images/Guardian/Pix/pictures/2012/6/4/1338797575737/Staffordshire-bull-terrie-008.jpg");

img3 = loadImage("http://images1.wikia.nocookie.net/__cb20090329034449/simpsons/images/e/e5/Krusty_The_Clown.png");

background(250,180,250); // background color = purple
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 (the smaller clown) 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.
The program will run in Processing from: ~http://processing.org~
Alternatively, you can get a copy from a USB Stick from the teacher.
== PRACTICE - 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
== --- 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)
[[
'' Daily Work - Computers Required - Bring Your Own Computer Every Day ''
We will mostly be ''writing programs'' that create ''graphical displays''.
Each student needs a computer for this work. Since there are no computers
available in the classroom, you need to bring your own computer to class :
[(
- bring your laptop to class every day````````
- in working condition (not broken)
- with the battery charged
- containing your current project
- and containing all required software
][
@"https://lh3.googleusercontent.com/YmmiEUxzLPmavweZBgBVXGURe-7CeIAXQTMdqKcI2O7-zqky8wsUABaYwWfDD3dcOutVHEo9VsBRQKaoKHiuceFScrvrs27VEL2GXPxj7Lq225sFmYiVnx-CGTZaprKFUj1ZpUY"
]]

We
will have lectures, but you will also be practicing and developing
projects. A normal lesson will start with a 20 minutes lecture explaining
some technical skills, followed by 30 minutes of trying to use those
techniques in your own project. If you don't bring a computer, you will
waste 30 minutes doing nothing or watching another student do something
useful.
Projects will build up slowly for several days, so you will normally be
continuing to add new pieces to the project you started previously.
You need to bring your own computer, which contains your project work from
the previous day.
You will be using non-standard software - programs that are not installed
on every computer. So you need to bring a working computer with the
correct software installed.
Some homework is required. That requires you to take your computer home
and continue working there, working on the same project you were writing
in class.
So you see, ''bringing your own computer with you to class is an absolute
necessity'' - every day. Borrowing a computer from someone else does not
help very much, so it's not really an option.
]]