Graphics Programming 2018-19 Links: Processing:http://processing.org               Processing Book:  cmuems.com/resources/getting_started_with_processing.pdf          Colors:https://www.w3schools.com/colors/colors_picker.asp           Online Photo Editor :  ipiccy.com       Online Drawing :  sketch.io Due Dates : In Class Programming Quiz - Monday 27 May 2019

## More Investigations - 14 June 2019

We will watch half of this video:
and then you can continue with these Investigations:

## Inquiry Driven Learning - 11 June 2019

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

## Illusions Test - 27 May 2019

Make all the changes listed on the test page.
You must finish by 13:15.

show the running program to the teacher

## Practice with Illusions - 24 May 2019

== Practice ==
(1) In First
- add two ears, shaped like ellipses
- add eyebrows by adding a thick black line above each eye

(2) In Second
- Change the gradient fill to have green at the top and
yellow at the bottom

(3) In Third
- change the strip of boxes to be vertical - up and down

(4) In Fourth
- change to 10 rows with 12 circles in each row
- change the random commands to make darker colors

(5) In Fifth
- change it to make this picture (with text):

(6) In Sixth
- add 2 more boards (6 left ends and 5 right ends)

*** Reminder ******************************************
Programming Test on Monday 27 May.
You will be changing an existing program.
You may use any notes that you wish to bring
as well as any old programs that you wrote.
**********************************************************

## Morphing Lines - 21-22 May 2019

Below is an example program that morphs lines to another set of lines.
The teacher will explain how it works.  You should make some changes:

1.  Change FIRST so that it draws a 5 line house (a square with an A-frame roof)
and SECOND so it is an upside down house with 5 lines.

2.  Change FIRST and SECOND to make 2 different 2 letter words,
like UP and OX.

3.  Make a single letter A and a single letter Z, but make them in the same space,
so the transformation happens in one space.

4.  Make a stick man with outstretched arms and change to a stick man
with the arms stretched up in the air.  The legs should start out
spread a part and the second with the legs closer together.

/******************************************************************\

int[] first =
{ 150,100,100,100,100,200,150,200,-1,-1,
180,200,220,120,260,200,260,200,260,200,-1,-1,
300,120,380,120,340,120,340,200,340,200,340,200
};
int[] second =
{ 200,250,260,300,200,350,200,250,-1,-1,
300,250,360,250,356,350,300,350,300,250,-1,-1,
460,250,400,250,400,350,460,350,460,300,420,300
};

void setup()
{
size(600,600);
textFont(createFont("Arial",32));
}

int count = -1;
int start = -1;
boolean running = false;

void draw()
{
background(255,255,255);
stroke(0,0,0);
strokeWeight(2);
fill(0,0,0);
text("Start          Move         End",100,30);
if(mouseX < 220)
{
running = false;
count = 0;
}
else if(mouseX > 400)
{
running = false;
count = 120;
}
else if( mouseX > 260 && mouseX < 320 && mouseY < 40)
{
if(running==false)
{
start = frameCount;
}
running = true;
if(count<120)
{ count = count+1; }
else
{ count = 0;}
}
else
{
running = false;
}

for(int c = 0; c < first.length-2; c=c+2)
{
float d = count / 120.0;
int x1 = first[c];
int y1 = first[c+1];
int x2 = first[c+2];
int y2 = first[c+3];

int x3 = second[c];
int y3 = second[c+1];
int x4 = second[c+2];
int y4 = second[c+3];
if(x1>=0 && y1>=0 && x2>=0 && y2>=0
&& x3>=0 && y3>=0 && x4>=0 && y4>=0)
{
float x5 = d*x3 + (1-d)*x1;
float y5 = d*y3 + (1-d)*y1;
float x6 = d*x4 + (1-d)*x2;
float y6 = d*y4 + (1-d)*y2;
line(x5,y5,x6,y6);
}

}
}

\***********************************************************/

## Morphing and Tweening - 20 May 2019

This week we will explore a few more graphical "tricks".
Then we will have an in-class programming quiz next Monday,
where you will need to change/fix a program during class.

Morphing

Morphing is a process which gradually and smoothly changes
one image into a different one.  Here is an example:

to experiment with morphing.

We can also do this with text:

Tomorrow we will do some experiments with morphing text.

## More Optical Illusions - 16 May 2019

Here is a program that draws some of the illusions from last class:

Here are a few more optical illusions that can be drawn with loops.
Choose an image and write a program that uses loops to draw it.
Then do another image.

This is made with 3 different parallelograms of different colors.

The code is a good first try for the cubes above.
You  need to change it to make it correct:
/=================================================\

void setup()
{
size(600,600);
}

void draw()
{
background(0);
noStroke();
for(int y=100; y<600; y = y+100)
{
for(int x=100; x<600; x=x+100)
{
cube(x,y);
}
}
cube(100,100);
}

void cube(int x, int y)
{
fill(255,255,0);
fill(100,100,255);
fill(255,100,100);
}

\===========================================/

This impossible triangle needs different shades of gray.
This is actually black and white squares, all the same size,
in straight lines.  Your brain only THINKS the lines are slanted.

This image contains 12 black dots, but you cannot see them all at once.
Nevertheless, your program needs to draw 12 dots.

## Optical Illusions - 14 May 2019

The idea of making more educational animations didn't seem so popular.
So we will study Optical Illusions this week and next.

We will discuss how this is related to the artist Victor Vasarely:
and what special techniques are used to create Optical Illusions.

Here are some simple example Optical Illusions:

 In each image, which is the longest line?

Are there 4 boards or 3?

Is the white triangle really there?

/===================================\

void setup()
{
size(700,600);

textFont(createFont("Arial",24));
}

void draw()
{
background(255);      // white
fill(0);
text("First       Second      Third       Fourth",30,30);
if(mouseX < 110)
{
firstPic();
}
else if(mouseX < 220)
{
secondPic();
}
else if(mouseX < 330)
{
thirdPic();
}
else if(mouseX < 440)
{
fourthPic();
}
}

void firstPic()
{
strokeWeight(5);
stroke(0,0,0);
for(int x=200; x < 400; x=x+10)
{
line(x,120,x,200);
}
stroke(255,0,0);
fill(255,200,200);
ellipse(300,300,300,300);
fill(0,0,255);
ellipse(250,250,30,30);
ellipse(350,250,30,30);
fill(255,0,0);
ellipse(300,300,50,100);
fill(0,0,0);
rect(250,380,100,20);
text("BART",270,90);
}

void secondPic()
{
text("Second",250,90);
for(int y = 0; y < 256; y=y+1)
{
strokeWeight(1);
stroke(2*y/3,0,255-y/2);
line(100,y+100,500,y+100);
}
}

void thirdPic()
{
text("Third",250,80);
for(int x=100; x < 500; x = x+40)
{
fill(x/2,x,x/4);
rect(x,100,40,40);
}
}

void fourthPic()
{
text("Fourth",250,70);
noStroke();
for(int y=100; y < 500; y = y+40)
{
for(int x=100; x < 500; x = x+40)
{
fill(x*3 % 256, y*2 % 256, (x+y) % 256);
ellipse(x,y,40,40);
}
}
}

\=====================================/

## Animated Educational Review Video - 6 May 2019

This week, you should work with a PARTNER (groups of 2)
to produce a short presentation (about 1 min) that is a quick
and useful review of some topic you studied in a class this year,
preferably a topic that might appear in a final exam.

Here is an example about Muhammed Ali:

Here are the guidelines for your presentation:
- aim for about 1 min
- the result must be a video, prefereably .mp4 format
- ALL elements must be animated.  At the very least, each text piece
and each image should SLIDE or FADE into place, rather than just
sitting there as a static element
- Focus on what the VIEWER will see and experience.  Hence:
- be careful with timing - not to fast and not too slow
- use LARGE FONTS that are easy to read
- use small pieces of text that arrive one after another
- use images that are CLEAR, without tiny details
- use colors to enhance the experience

The Ali example is not particularly good from a graphics standpoint.
It was created with Google Slides, which does not have very many
interesting animation possibilities.  Your presentation must be
AT LEAST that interesting, but try for somethint a bit more exciting
if you can.

The Ali example was produced as follows:
- find good IMAGES and .GIF ANIMATIONS in Gooble Search
- used Google Slides to create a presentation
- uploaded images from hard-disk into the presentation
- use ANIMATIONS to make elements appear and move
- stick to the most IMPORTANT and ESSENTIAL details -
this is for exam REVIEW, it is not an entertainment video

If you wish to use a different tool than Google Slides, that is fine.
For example, Powerpoint has a lot nicer animation possibilities.

You must produce this quickly - it is due on Thursday 9 May at 18:00.
So find techniques that are fast and productive, and use them over and over.
You may upload the entire video into Haiku if you wish, but it is probably
simpler to save it in Google Drive (or a web-server) and just upload

On Friday we will review all the contributions in class, looking for
good ideas.

## The POWER of Graphics and Animation - 3 May 2019

Engaging Presentations (speeches)

Effective Starts

Secrets of Great Design

The Greatest Ted Talk Ever Sold

## GIF Animations - 16 Apr - 2 May 2019

== Examples ==

Take a look at these sample .GIF animations, made by last year's class.

== STYLES ==

Here are a few basic styles:-
- Stick-man figures
- faces (emojis)
- cartoons - like SouthPark :
- Monty-Python style with photographs and moving pieces :
- animated letters

== STEPS ==

Making your own animated .GIF involves 3 basic steps:

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 quite 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.  .PNG is a good format,
using decent compression and 32 bit color.

and create a .GIF animation. Adjust speed and size

== FIRST TRY PRACTICE ==

Today, make one or two examples.  For the first try just make
5 or 6 frames - not too many.  Then upload and make your .GIF animation.
After that you can work on a "really nice" one.
Then try a different style - e.g. if you made a SMILEY,
then try making a Stick-man.

## Finishing Software Review Project(s) - 9-15 Apr 2019

You should continue working in the same GROUPS that you had last week - 3 or 4 students per group.

Each group must produce 3-4 sets of Web-site Instructions.  These should be the same topics that you originally produced.  Each group will turn in all of the projects, and receive a GROUP GRADE for ALL the projects together.

You will need to add a bit more:

- finish each project, according to the comments produced by you Beta Test

- ensure that the 3-4 projects all follow general rules for appearance and presentation.  That does not mean that they should all be identical, but if you decide on text at the side of the page rather than over the image, then you should all do that - or vice versa.  Whatever you decide is GOOD PRACTICE, you should all follow those good practice rules.

- Make sure EACH PROJECT produces a VIDEO.  If you originally produced a Presentation, you will need to do a SCREEN CAPTURE VIDEO of you clicking through the presentation

- You must add a COVER PAGE that includes LINKS to all the videos.  This should be an attractive, interesting page.  You may do this as a WIX page if you wish, or as a Google Sites page, or as a web-page uploaded to an e-portfolio in Haiku.  In any case, it must be accessible by all students and teachers a FIS.

- At the end, EACH member of the group must upload the SAME LINK to your COVER page.

This is DUE ON MON 15 Apr at 18:00.

## Software Review - 8 Apr 2019

After the Beta test, programming TEAMS must review their software, connecting Beta Test comments to needed improvements in their software.  Some changes are probably needed to address some of the Beta comments. In the real world, this would be a long process, but we will do it quickly as we are not actually intending to sell our software.

We will discuss some of the comments and look at some specific examples.
We wish to create some GUIDELINES for producing successful software.

## Beta Testing - 4 Apr 2019

Most students turned in their first draft, but not all.  That is foolish, because it is not possible to continue to the next step.

The next step is a BETA TEST.  This means that the product is given to an actual user, who then uses the product and RESPONDS with suggestions/complaints/commendations about the product.

The teacher viewed all the Guides that were turned in on time (about half the students), and here are some possible responses:
- text is difficult to read because
- the font is too small
- the font color is too similar to the background
- the text disappears too quickly
- the entire presentation seems to short - surely there are more features
- the author did not write their name anywhere - normally it is at the end

The class should now split up into groups of 3 or 4 students.
In the group, ALL the products must be collected into a central place
where they are available to ALL the Beta Testers.  Now all the students
in the group should view ALL the presentations, including their own.
They must WRITE their reactions, which may be positive or negative.
These should include:
- questions if something is confusing, unclear or missing
- commendations if something is particularly useful or interesting
- suggestions for improvements (like those written above)

All the written feedback must be stored centrally, where it is available to the authors, the Beta Testers, and the teacher.  A simple method for this is to use a Google Doc that is shared, allowing access to all members of FIS.EDU.

This should be finished before the beginning of class on Monday 8 April.

## Continue Highlight GUIDES - 2-3 Apr 2019

Continue working on your Highlight GUIDE for your favorite Web-Site.  Turn in a first draft on Wed 3 Apr before 18:00.
After that we will look at several examples and talk about
how to make them better.

## Highlight GUIDES - 27 Mar 2019

 ** WARNING **   This is an OPEN-ENDED project.  You will need to use your own INGENUITY to produce a good result,  that answers the question :  "What are the BEST THINGS I can do at this web-site?

Wikipedia is HUGE - that is both a blessing and a curse.
Because it contains information about "everything", we can
always count on finding (some of) the facts we need,
like:
-  an actress' age
-  the location of Zimbabwe
-  the winner of last night's football match (??
Unfortunately, the sheer SIZE and DEPTH of Wikipedia articles
can make it DIFFICULT to find a specific fact.

To find a specific fact, we probably turn to Google and ask a question, like:
- when was the first automobile invented?
- how many automobiles will there be worldwide in 2020?
- will all those automobile drivers be happy?
The first question is no problem.  The second one is only
an estimate, so you may get a variety of answers from different sources.
The third question is probably more interesting than the other two,
partly because the answer is NOT really FACTUAL.
In any case, we are happy to use a SEARCH tool.

But when you use Google, you are using the ENTIRE WEB
as your source material.  Unfortunately, there is no EDITOR
for the World Wide Web, so the RELIABILITY is uncertain.
Still, there are LOTS of interesting OPINIONS.

What we all want and need is a BRIEF SUMMARY of whatever
sources we might need.  A Google search is a VERY BRIEF
summary, with just a couple sentences.  We really need something
that is a bit more attractive and interesting.  News sites sort of
do this, by showing a headline and the first few sentences,
and maybe an image.  For example:

Another advantage of summaries is that they encourage SERENDIPITY.
That means you find things that you were NOT looking for.  As you glance
through a news site, you are likely to see something interestng that
you were not searching for.

Now we have all these possibilities, but they all require a computer keyboard
and mouse - it's harder with your Smartphone.  But you cannot do these
search techniques on a TV display in a lobby, like the TVs we have in
the school's entrance ways.  Also, searching can be time-consuming
and does not always lead to a sensible conclusion in a reliable way.
So a summary that is just a bunch of links is not quite the best thing.

A summary that GUIDES you through some ideas is similar to
a movie preview - a specific sequence of short clips that present
exactly the BEST parts, with the intention of encouraging you to
go see the movie.  You could think of this as a GUIDED TOUR
of a web-site(s).  You see this sort of thing in short INSTRUCTIONAL VIDEOS,
that are introducing you to a piece of software or a service.

Now we want to make these GUIDES interesting and brief -
a Ted Talk is not the right thing, even though it might be very interesting.
Rather, a video that claims to be a SHORT INTRODUCTION is
the right thing.  Or a TRAVEL BROSCHURE.  Or a TOP TEN video.

You should base this project on a specific WEB-SITE that you visit often -
as long as it has LOTS of pages and LOTS of features.  Your GUIDE
presentation should make sensible suggestions about where the
viewer should look in the site, as well as a clear statement of
HOW TO GET THERE.  This is especially important if it is
DIFFICULT to find something.

Here are some example web-sites that would benefit from a GUIDE:
- Wikipedia
- Amazon
- Wolfram Alpha
There are many, many other possibilities.

Your GUIDE may be presented in a variety of ways -
as a video (with short clips), as a PowerPoint presentation,
as a slide-show with screen-captures and text,
as a new web-site with links into the big web-site.
DON'T present this as an essay, full of text,
although you may include short text statements.

Such GUIDES for web-sites don't really exist very much,

Your presentation must not depend on sound because
it should be viewable on a TV in the hallway, without sound.
The teacher will show a couple examples in class,
but don't copy these examples.  Use your imagination to
create something that is interesting and functional.

For example (not necessarilty good)

 Think of it this way: if you were going to SHOW your  favorite web-site to a FRIEND, what would you show themthat would convince them to use the site?  And what would you show them to make things easier? Your GUIDE should be viewable on a TV in the hallway. Your FIRST DRAFT Is due Wednesday 3 Apr at 18:00. After that, we will compare various attempts, decide  what worked well and what didn't, and then spend another week finishing something GOOD.

## Sites.Google - 25 Mar 2019

We will look at what is possible in Google Sites.
What is NOT possible is JavaScript - that is not permitted by Google.
But you CAN do:
-  WYSIWYG Editing
-  HTML coding, with some limitations (you'll find out)

The good news with Google Sites is that it is IMMEDIATELY ONLINE -
just click [Publish] (after sharing it with the world).
Your web-page / web-site is constantly updated as you type,
but you still need to click [Publish].

If you really NEED to write some JavaScript, for a quiz maybe,
you can write this in a separate web-page, store it on a web-server,

== Practice ==
• In Google Sites, Create a New Site "in new sites".
• Try selecting a specific THEME
• Insert some images that you upload -
figure out where it stores the images
• Try to insert a MAP that shows your home
• Find out what you can do when you insert a BUTTON
• Try some of the other INSERT items (below BUTTON)
• Try EMBED with HTML code - is there anything useful
that you can create this way?

## Continue Kompozer - 22 Mar 2019

Continue exploring Kompozer. Do all the tasks listed yesterday.
Then you can try the following short project:
• find an interesting Wikipedia article
• COPY the text (at least several pages) and at least one image
into Kompozer
still work properly
• Make it look NICER - it won't look very nice after you
remove it from Wikipedia.  Add more pictures, a few more
links, reformat the text to make it look nicer.
• Look inside the source and decide whether it is possible
to make useful changes by typing HTML code directly.
• It doesn't need to be perfect - it's just practice.

## Kompozer WYSIWYG Editor - 21 Mar 2019

(If you have trouble installing Kompozer, you can use SeaMonkey instead.

Kompozer is a WYSIWYG HTML Editor - What You See Is What You Get
It edits HTML pages that are stored on your computer, just like Komodo,
but it lets you work in a VISUAL mode like a Word-Processor.
You can still switch to HTML Source Code view to make detailed changes,
but you can get a lot of work done in WYSIWYG mode.
For example, try to do the following:

- insert an image by finding an image in Google Images,
and then just DRAG it into your page.  Does that work?
If not, try it with copy and paste.  If that doesn't work,
try it with [Insert][Image] and then paste the URL in.
-Create a TABLE with 2 rows and columns.
Then insert 4 images into the table
Resize the pictures so they are all the same size.
- Add an .onclick function (JavaScript) to one of the picture.
You will need to assign an ID to the picture.
- Put a link on one of the pictures.
- Put a title on the page and change the FONT and the SIZE and Color.
- Find out how to insert special characters.
- Insert a BUTTON with .onclick function - the teacher will show
how to do this
- Make a COPY of your last project's index.html file,
and try opening this in Kompozer.  You may find that
some things don't work well.
- Find out what other features exist.

## Continue with WIX - 19 Mar 2019

Continue making a WIX site.  Be sure to explore images, slideshows, and videos.
Find out how to change BACKGROUND COLORS.

## WYSYWIG Web Editors - 18 Mar 2019

The World-Wide-Web was invented by Sir Tim Berners-Lee, around 1990.  He invented HTTP and HTML, along with the idea of web-servers.

At the beginning, we had HTML pages that only presented text, with colors and fonts, and images.  That was HTML ver 1. The Web became publicly available around 1995, when HTML 2 was introduced, with images and some other improvements.  The really big improvements happened in HTML 3.2, including videos and JavaScript.  HTML 4 happened around 2002, and HTML 5 around 2009 - but it is still being improved.

Along the way, developers got sick of writing HTML text codes, because it is very time consuming, involves lots and lots of little details, and is very error-prone (as you have probably seen now).  So, they decided to create WYSWIG editors that are very similar to using a Word-Processor.  Even better, they created Content Management Systems, that allow the developer to drag and drop design elements, and the software writes all the detailed HTML codes.

Generally, the really powerful CMS software systems make it very easy to make web-sites that look nice, but they don't make detailed work easier (in fact harder).  Many systems simply forbid JavaScript.  So if you need automation, CMS isn't the best solution.  So a WYSIWYG editor is a good balance, performing lots of the detail work automatically, but still permitted the developer to write JavaScript and to change details manually if they wish.

We will look at several HTML editing systems, including:

-  WIX = a very powerful CMS with lots of "widgets"
-  Google Sites = a straightforward WYSWIG editor, but without JavaScript
-  Kompozer = a very good middle-road compromise, that supports
WYSIWYG editing, HTML codes and JavaScript.

We will spend a couple days on each of these, to see the differences.

You can get started quite easily by logging in with your Google account.
Spend today exploring the [Add] items.

If you want to see a tutorial, you can try this:

Going LIVE! - 15 Mar 2019

Now we are going to put all the projects online.
It works like this:
- you must change the name of your main page to "index.html"
- in Haiku, click on [My ePortfolio]
- click on [+ Add Content Block] and choose [Minisite]
- Haiku will create a link to your index page, which is now stored on an Amazon Web Services server.
If you want someone to see your page, you must give them the link.

Today, we will start out like this:
- each student uploads their web-site into Haiku (AWS)
- then each student copies the link into a Google Doc which we will make and share together
- students should now investigate other students' web-sites
- if you find problems, you need to report them to the author,
by writing a comment below the link on the Google Doc page

Starting Monday, we will make a MASTER page with links to all the student sites.

## Information about IB Computer Science - 5 Mar 2019

If you are interested in taking IB Computer Science next year,

If you have further questions, you should ask Mr Mulkey and/or your counselor.

## Web-page Project - 1 Mar - 12 Mar 2019

We will work on this project in class from today until Tuesday 12 March at 18:00.
If you will be missing school during a sports tournament, your deadline is Friday 15 March.

HTML/CSS/JavaScript Project

You have seen a variety of sample web-pages, using external libraries (like for math),
HTML for buttons and divs and links, CSS for effective styles, etc.
All the examples were simple and had no real purpose.
Now you need to make a web-site that has a clear purpose.
Your web-site should have an EDUCATIONAL purpose.
Although it may also have interesting or entertaining elements,
the main purpose should not be entertainment.
The main goal is that the page is VERY EASY TO USE.

== Starting ==
• Choose a school subject - e.g. Math, English, History, Physics, etc.
You will stick to one single subject.  Choose something you enjoy.

One can be a Wikipedia page, but not all.  You may also
use textbooks to gather information, but that may be difficult.
You will notice that most web-sites are TOO BIG and nobody wants to
read all that stuff.  They prefer "snippets" of information.  For example,
if you are doing Math, then you might find a huge web-page about math,
but what people really want is something small, like the quadratic formula.
• Identify a particular topic - for example, solving quadratic equations.

• Find specific details, like formulas or definitions or lists of dates.
You will probably copy some text from your sources.

(use Google Images, or any other online source).

• Repeat these items for several topics - at least 5 topics.

== Main Page ==

Now you will need a MAIN PAGE for your project.
It needs to contain:
• A   BIG TITLE

• A brief explanation of what is contained in your page, presented as text.

• At least one IFRAME element, where you can display items
one at a time, in response to navigation events (.onmouseover, .onclick)

• Some objects (perhaps most) that are invisible at first, but they appear
when the user does something with the mouse
== Layout Issues ==
• Make everything clear and attractive

• Adjust sizes so images and other items fit where they belong

• Adjust fonts to be clear, attractive and understandable

• Use DIV and position:absolute to arrange pieces sensibly

• Use a variety of attractive colors that fit together welld

• Use CSS when possible to ensure consistent formatting
== ACTION! ==
• You must create some QUIZ questions about the content that was presented.
This will require JavaScript functions, and these will probably
be .onclick functions with alert and prompt commands in them.

• Use mostly HOVER and .ONMOUSEOVER to cause things to happen.
Some .onclick or link clicks are okay, but keep these to a minimum.

• Try to stay on the same page as much as possible, displaying information
in the IFRAME, but you may also use normal LINKS if necessary.
== SUB-PAGES ==
• It is often easier to put a small amount of information on a separate .html page,
and then display that page inside the IFRAME.  This is fast and easy,
as long as you keep all the sub-pages in the same folder as the main page.

• *** DON'T Create Content ***
Don't spend your time writing text or drawing pictures - and certainly
no creating videos.  You are COLLECTING and ORGANISING and
PRESENTING content from other sources.  If you want to take something
from a paper book, you can take a photo and use it rather than typing
a whole bunch of text.

## Slideshow - 28 Feb 2019

Try making some of the changes listed.

Do the practice exercises listed on the left side.

## Using CSS for Style - 25 Feb 2019

Look at this sample page:
Copy the source code into Komodo and make some changes:

- try clicking on all the right answers and make sure
they work correctly. Then try the wrong answers.
Some of them work sensibly, others don't work at all.
work like the first math question.

- Add one more question below the Greek question.
This can be any True/False question.
It needs two answer buttons : [True]   [False]
Make them work correctly.

- For the map question:

- At the bottom of the page, add this question:
1/2  + 1/4 + 1/8 + 1/16 + 1/32 .... forever
Use proper math notation to make proper fractions.
Make the div very wide, but narrow up and down.

## Stacked Divs - 15 Feb 2019

Using the same code ideas from yesterday,
create a page with 5 math questions.
These should be stacked on top of each other,
like a deck of cards.  After the user completes
the first question correctly, it should disappear
(use  divname.style.visibility = "hidden").
You should make all the divs the same size,
so use a size that is big enough for the biggest question.
Make some of your questions with COMPLEX
math formulas - not like sin(90), but rather
2               2
sin    x  +  cos    x
-------------------------
0.5

After vacation, we will learn some more powerful
and sophisticated programming ideas in JavaScript -
to avoid so much copying and pasting of code.

## Math Quiz - 14 Feb 2019

Here is a page with a simple math quiz:

## Math Libraries - 12 Feb 2019

MathJax practice: example on jsbin

You may find this Unicode Math page helpful:

And this page contains a complete list of special symbol abbreviations for MathJax:
http://docs.mathjax.org/en/latest/tex.html?highlight=special%20symbols

## Text Layout for Mathematics - 11 Feb 2018

Have a look at this web-site:

There are lots of issues here - the teacher will explain them.
Here are some suggested practice exercises, to complete using Komodo:
- Display a web-page titled Quadratic with the Quadratic formula on it,
like you see on this web-page: https://www.purplemath.com/modules/quadform.htm
You must create the formula as text, by using POSITION

- Write this puzzle problem:

- Write this series properly:  1/2 + 1/3 + 1/4 + 1/5 + ...

- Write this EXTENDED FRACTION:

## Letter Puzzle - 8 Feb 2019

We will work on this program:

You may find these Color pages helpful:

## Now We Start HTML+JavaScript - 6 Feb 2019

or borrow a USB stick from the teacher.

The teacher will explain how this all works, and we will do a little practice.

## Greenfoot Project - 30 Jan 2019

Your assignment is to write a Greenfoot program containing all of the following:
- at least 4 different classes of objects, all moving
- at least one of the classes must move using MOVE and TURN turtle commands
- at least one of the classes must move using ARRAYS of turns and moves
- at least one of the classes must move via PARAMETRIC formulas
and setLocation
- ALL classes must provide PARAMETERS in the CONSTRUCTOR
so the world can create several different OBJECTS from a class
that behave in different ways.  There may be some objects that move
in parallel, but not all of them should do that.
- there must be at least 3 Objects made from each class,
so a total of at least 12 Objects
- all Objects must start moving automatically when [RUN] is clicked
- the Objects must stay on the screen, not disappear off the edges
- some of the Objects must draw lines or dots
- the result should be an interesting combination of moving Objects,
and some interesting curves/lines on the screen
- the Objects should move at a reasonable speed, not jumping
extremely fast (unless the speed control is increased greatly)
- some of the Objects should move in curves, others should move in straight lines
- make it interesting and attractive, buy using images that fit together sensibly

The project is DUE on Tuesday 5 Feb at 18:00.

To turn in the project, you need to COMPRESS the folder containing it
and then upload the .zip archive into Haiku.

## Parametric Equations - 29 Jan 2019

One more possible approach to creating trajectories is called
PARAMETRIC EQUATIONS.

This is similar to a mathematical graph, but we create a formula for X based on time, and a separate formula for Y based on time.

For example, the formulas for a circle are:

Here is code for the APPLE to make it move in a circle:

/*********************************************\
import greenfoot.*;

public class Apple extends Turtle
{
double speed = 0.1;
double time = 0;
int centerx = 200;
int centery = 200;

public Apple()
{
penDown();
}

public Apple(int startx, int starty, double howfast)
{
penDown();
centerx = startx;
centery = starty;
speed = howfast;
}

public void act()
{
time = time+speed;

double x = centerx + Math.cos(time)*100;
double y = centery + Math.sin(time)*100;

setLocation(x,y);

move(0);
}
}
\***********************************************/

The command for creating the APPLE in the world is:

The teacher will show how to modify the circle to make
it more interesting, like a LISSAJOUS curve:

## Trajectories in Arrays - 25 Jan 2019

The program STEPS THROUGH the TURNS and MOVES array,
and executes each step one at a time.  After 16 steps,
it goes back to the beginning.

== Practice ==
1 - make an object that moves back and forth, left then right
2 - make an object that moves diagonally from the
top left to bottom right, and then back
3 - make an object that moves in a zig-zag, like this:
/\/\/\/\/\/\/\/\/\/\/\/\/\
4 - make an object that moves in a circle and then,
after completing the circle, moves around the circle
in the other direction
5 - choose a letter with straight lines and curves, like P.
Make an object that draws that letter.

/**************************************************\

import greenfoot.*;

public class Baby  extends Turtle
{
int[] turns  =  {90, 0,  0,  0, 90,  0,  0,  0, 90, 0,  0,  0,90,  0,  0,  0};
int[] moves = {50,50,50,50,25,25,25,25,50,50,50,50,25,25,25,25};

int maxmoves = 16;
int count = 0;

public Baby()
{
penDown();
count = 0;
}

public void act()
{
int dir = turns[count];
int speed = moves[count];

turn(dir);

move(speed);

count = count + 1;

if(count >= 16)
{
count = 0;
}
}
}

\**************************************************/

## Trajectories - 23 Jan 2019

We will be studying how to create INTERESTING TRAJECTORIES for objects.

We will look at this example:

We will use this Greenfoot program:

== Practice ==

In BOUNCER -
- keep the ball, get rid of the other objects
- make 4 rocks
- make the ball move in a parabola, so that it
bounces on each of the 4 rocks
- Once that works, make it BOUNCE off
the right wall and continue back across the screen
to the left, then bounce off left wall and back
across to the right

## Greenfoot Quiz - Space Battle - 21 Jan 2019

http://ibcomp.fis.edu/2018/graphics/SpaceBattle.zip

## Baby Catcher Practice - 18 Jan 2019

https://dl.dropboxusercontent.com/u/275979/graphics/Greenfoot/BabyCatcher.zip

This is the Baby Catcher game.

The player moves the ambulance left and right with the arrow keys,
trying to catch the babies as they fall.  You win points when you catch a baby.
If you catch a pig by mistake, you lose points.

Run the program, do some experiments, and answer the following

(1) Find the commands that make the pigs disappear when they
reach the bottom of the screen.  Write down these commands.
Also state which CLASS contains these commands.

(2) Put a second AMBULANCE on the screen.
(a) Does it move when the arrow keys are pressed?
(b)  Does it also catch babies?
(c) Explain how to make the second ambulance stay
on the screen after [reset] is pressed.
Just write a brief explanation - no Java code required.

(3) Find the code that makes the baby(s) move.
Change this code so the babies fall faster.
Write down the resulting code.

(4)  Pigs and babies are created inside the [Game] world.
Find the code that creates new pigs at the top of the screen.

(a) Change this so that HALF AS MANY pigs are created -
e.g. they are created less often.
Write down the changed code.

(b) Change the babies code so that LOTS MORE BABIES
are created - this makes the game a lot easier.
Write down the changed code.

(5) Add a new actor that is a horrible, evil monster.
Place one of these in the middle of the screen.
Whenever a baby touches the monster,
the baby should disappear (eaten by the monster!)
You may wish to use code that is similar to the
code in the AMBULANCE class that "catches" the babies.

All this code should be inside the MONSTER class.
Copy all the code from your MONSTER class.
It only needs to make babies disappear -
it does not need to move or change the score.

## Bouncer Practice Quiz - 17 Jan 2019

== BOUNCER - practice quiz ==

Your quiz Monday 21 Jan will be similar to the questions above -
you will use Greenfoot to INSPECT a program, and

## Movement and Keys - Frogger - 14-15 Jan 2019

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

• Make any simple changes that you can think of, like:
- scoring more points faster
- change the keyboard controls to ASDW
- change the frog to have a different picture
- etc
• Look in the FROG code
- What commands are used to move the FROG?
Change these commands to make the FROG move twice as fast
- What command is used to check whether the FROG touches a fly?
Remove the command that returns the FROG to the bottom of
the screen when he "eats" a fly
- What command checks how many flies have been eaten?
Change this so the frog must only eat 2 flies to get to the next level
- How many "lives" does the FROG have?
Change this so the frog has lots and lots of lives
• Look in the ROAD code
- Find the commands that create a new GREEN CAR.
Change this so that a new GREEN CAR comes more often.
Remove the command that makes an AMBULANCE
• Look in the CAR code and in the BUS
- Where is the code that makes the BUS move?
Change the code to move more slowly.
• Create a new actor called TRUCK.
This should be a sub-class of animal, so it is equivalent to CAR.
Copy code out of the CAR class to make the TRUCK
move like a CAR, except the TRUCK should move
in the opposite direction - from right to left
• Add a new MONSTER object.  The monster should move on the grass.
It should move slowly, so it is easy for the frog to escape.
But whenever the MONSTER touches the frog, the game should end immediately.
• Place POISON in various places.  These should not move at all.
Whenever the FROG touches POISON, they should lose a life
and move back to the grass at the bottom of the screen.
• Change one of the flies to some sort of fruit, like an apple.
Whenever the frog touches the apple, he gains 2 extra lives.
Notice that the apple must still count as a fly,
so that it is possible to get 5 flies total.

## Using Keyboard Keys - 11 Jan 2019

You should do these problems.  If you finish quickly,
go back and finish anything from the past 2 classes.

== Keyboard Controls ==

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

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

## Red Circles Patterns - 9 Jan 2019

== RED CIRCLES ==

http://ibcomp.fis.edu/239179/graphics/GreenFoot/RedCircles2019.zip

Unzip this archive and then open it in Greenfoot (click on Project.greenfoot)

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

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

1. Red-circles Fresnel Interference

• Change the BLAST actor so that the lines are a bit closer together.
Try closer together and further apart, until you find the amount
that makes the most interesting pattern.
• Make each BLAST circle smaller (smaller radius).
Then change the TurtleWorld so that it has 9 blast objects,
arranged in 3 rows and 3 columns.  Choose a radius
and a distance between lines that make the nicest pattern.

2. Spirals

• Change the SPIRAL object so the lines are closer together.
Choose the amount that makes the most interesting pattern.
• Change the TURN command in the SPIRAL class
so that it turns 120 instead of 90.  How does this change the
resulting picture?  Try various other amounts for the TURN command.
Make an interesting pattern.
• Make the 4 SPIRAL turtles use different colors -
not all the same color.  You do this in the TurtleWorld2
with commands like this:
spiral2.setColor("green");
Set a different color for each spiral object.
You must do this AFTER creating the object.

3. Squares

• Adjust the distance between lines (probably smaller) to
make the most interesting pattern that you can.
• What happens of you change the TURN command
in the SQUARE class?  Try different values, like
60, 90, 120, 135 ...  Find the amount that makes
the most interesting pattern.
• Try changing "if(count == 4)"  to some other amount.
Figure out what this is controlling.

• Make a new shape object - maybe a dodecahedron.
Or something simpler if you prefer.
Then create a 4th TurtleWorld.  Your new world
should contain several of your new shapes.
Adjust things to make an interesting pattern.

## Greenfoot - 7-8 Jan 2019

New Topic - Install Greenfoot from

Video for Total Beginner:

## Turtle Graphics Shapes 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()     {         setColor("black");         penDown();     }      public void act()      {         move(100);         turn(90);     }

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.

===============================================

More Practice with Turtle Shapes

(6) Make a CLASS for each of the following shapes -
test each class by putting an OBJECT on the program page.
(a) Triangle  (3 equal sides)
(b) Square  (4 equal sides)
(c) Pentagon  (5 equal sides)
(d) Hexagon  (6 equal sides)
(e) Octagon  (8 equal sides)

(7)  You can TILE (cover) the entire page with identical shapes
by placing lots of identical OBJECTS on the page.
Each object draws the same shape in a different place,
and all the shapes fit together to cover the page.
Make a "World" (program) for each of the following tilings:

(a) tile the page with squares
(b) tile the page with triangles
(c) tile the page with a combination of Octagons and small Squares.

(8)   Make a new class called VariableTriangle .  This class should
accept a PARAMETER in the CONSTRUCTOR that tells the SIZE
of the triangle.  It looks like this:

    import greenfoot.*;        public class VariableTriangle extends Turtle     {         int steps = 100;              public VariableTriangle(int size)         {             setColor("red");             penDown();               steps = size;   // copy SIZE into STEPS         }          public void act()          {             move(steps);             turn(120);         }         }

(a)  Make a program that draws one BIG triangle, then triangles
that are half as big and inside the BIG triangle.

(b)  Make a new VariableSquare that has a SIZE parameter in the constructor.
Make a BIG square, then 4 smaller squares (half as big) that fit in the
BIG square.

## Finishing Up - 12-13 Dec 2018

and make sure you turn it in no later than 13 Dec 18:00
(2) If you ARE finished, then:
(a) you may make some more improvements and
turn in a second copy
(b) show your game to another student (one who is finished)
and ask whether they can suggest some improvements
(3) You may explore this web-site:

## Board Games - 29 Nov 2018

Your game does not need to look "exactly" like Life or Monopoly or any other
specific game.  But it should have "squares" (positions) where the player moves
around.  You will find it difficult to make curved paths (like the picture of Life).
You should use a 2-D array to store data, and place squares in a grid.
Some positions might be "closed" and then do not appear on the display -
like in Monopoly, you only move around the outside edges of the board.

The squares should contain some sort of rewards or activities, like earning money
or answering questions to win a reward.  You might have dice or some other random
number generator that decides how far the player moves.  Or you can allow players
to move around one square at a time, using the arrow keys.  Or you can allow
the player to click on a square.

More ideas below on 19 Nov.

Your program is due on Tuesday 11 Dec at 18:00.

## Game 2048 - 21 Nov 2018

Here is Version 1 of the 2048 game:

- checking neighbors above and below
- sliding when an arrow key is pressed

## Last Kings Program - 19 Nov 2018

Here is a "finished" version of the Kings program -
it doesn't play "smart", but at least it obeys the rules:

There are lots of "board games" that involve a 2-Dimensional array (grid)
layout of positions.  For example:
- Monopoly - only plays around the outside edges
- Chess, checkers
- 4-in-a-row
- Tic Tac Toe
- Othello
- Mine-sweeper
- Candy Crush
- Memory
- Scrabble, Crossword puzzles
- Sudoku
- Minesweeper
- Battleship
- 2048

Unless there are objections, we will make a Candy Crush Clone.
CLONE means that it is similar to Candy Crush, but need not
be identical.

The class chose 2048 instead of Candy Crush.

## SMARTER Kings Game - 16 Nov 2018

We will try to add some Artificial Intelligence.

## Kings Game - 14 Nov 2018

The teacher will explain the game.

## Optical Puzzles with Colors - 5-13 Nov 2018

Here is a video with optical puzzles:

Here is a Processing program with similar puzzles:

*** PUZZLE PROJECT - due Tuesday 13 Nov 2018 ***
(If you are going to a tournament, due date is Thu 15 Nov)

keep any of those puzzles - you must make your own.
You should make 5 or 6 puzzles - not all the same idea.
For example, you can make puzzles similar to those
in the video above.  Here are some more suggestions:

-  the same word over and over, where one copy is misspelled:
wrong wrong wrong wrong worng wrong wrong
- lots of the same picture (like the faces) but one picture has a "mistake"
- lots of the same letter over and over, but one letter is different
- lots of copies of small photos, one of them is rotated or reversed
- two paintings next to each other, with one mistake in one painting
- any puzzle(s) that you find in videos similar to the one above
- use colors in some cases to make the puzzle more difficult,
like the flashing letters in the example

In each case, the user must be able to CLICK on the different object,
and then the program continues to the next puzzle.  It is not necessary
to run a clock or keep score.

## Pixel Colors with MouseOver - 31 Oct 2018

http://ibcomp.fis.edu/2018/graphics/pixelsV4.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.

## Stripes  - 30 Oct 2018

Using the same program from yesterday, try these 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 Germany 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.

## Pixel Level Formatting - 29 Oct 2018

Try changing the commands that alter the colors:

// make changes
r = r*2;          // more red
b = b/2;          // less blue

E.g.
b = 0

## Drawing PIXELS - 25 Oct 2018

(1) Change the colors of the lines in the top-left quadrant

(2) Reverse the bottom-left quadrant so pink and yellow are on the left side
and blue and green are on the right side

(3) Add an image in the bottom right quadrant - this should just be
an actual photograph loaded as a PImage

(4) Change the random static in the top-right to use darker colors

## Drawing with Loops - 23-24 Oct 2018

We can draw "optical illusions" by using LOOPS.

Look at this sample web-page.

(1) Make a program to draw the first effect -

(2) Make a program to draw the second GRADIENT FILL,

(3)  Make a program to draw the FRESNEL pattern -
the third image that is like a star

(4) Make a grid like below, by first drawing
all the horizontal lines, then all the vertical lines.

## Explore Processing - 19 Oct 2018

Processing was created by Computer Scientists at MIT,
intending to create a reasonably easy programming language
for graphic artists.  They included a large set of sample programs.

You can see all the sample programs in:
[File][Examples]
There are lots of folders in there.  You can look at any of the programs
in any of the folders, but a particularly good folder is:
[Topics][Motion]
For example: BounceBubbles.

Choose any program that you find interesting.
Then try to change some numbers to make it better.
For example, in BounceBubbles, try to add more bubbles

Please spend today's class exploring the Examples in Processing.

## Short In Class Programming Test - 18 Oct 2018

or

Make the required changes, then show your running program to the teacher.

or

## Jigsaw Puzzle - 15 Oct 2018

Try out this Jigsaw Puzzle.

Run it, and then do the practice exercises

You must first RESIZE your image to exactly 640x400 pixels.
Then you can chop your picture into pieces using:
http://imagesplitter.net/
you will need to rename your pictures,
or else change the names inside the Jigsaw program.

If you find better programs for these tasks,

## Controlling Variables - 10 Oct 2018

We have been using VARIABLES (count, change) to CONTROL what
is happening on the screen.  Sometimes these variables control HIDDEN
quantities - things we need but don't actually see.

Consider the problem of making the dice spin and then stop on their own -
like actually happens when you roll real dice.  You might keep track of:
- how many total times it should spin (this could random)
- how many times it spun so far (so it can stop when it is complete)
- the current picture being displayed, which could be random

We will make a new program, with "spinning" numbers instead of spinning pictures.

Here is a starting program:

int num = 0;
int max = 0;
int count = 0;

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

void draw()
{
background(255);
fill(0);
text(num+"",100,100);
num = int(random(20));
}

/****
Change the program:
- display numbers bewteen 1 and 99 (no 0, no 100)
- add 4 more numbers, displaying in a row of 5 numbers -->  17   23   12   98   5
- change the program so that it has a START button
(that could be text) and then chooses a RANDOM
number for each of the spinners, and then they
spin that many times and stop automatically
- check for matches (pairs) at the end
****/

## More Spinning Dice - 9 Oct 2018

If you have not finished the program from yesterday,
then continue with that.  Otherwise try to add any of the following:

Add another ROW of spinning dice.
It should also start spinning when GO is touched.
But this row of spinning dice must have a DIFFERENT way to win than the first row.

Then add ANOTHER row with a DIFFERENT way to win.

Suggestions -
- win if a specific total is reached, like over 20
- win if there is at least one PAIR (two dice the same)
- win if there are NO PAIRS (all dice different)

More interesting : make a 3x3 grid of dice
Then in each row and each column there will be a result.

## Spinning Dice - 8 Oct 2018

Here is a program that has 3 spinning dice:

## Sprites Project - 17-26 Sep 2018

Here is an interesting example game:  CookieMonsterB

Sound Effects
If sound is not working on your computer, you can try the following:
- Click on [Libraries] and choose [Video] and then [Install]
That should install the Video library so that "import processing.video.*" works.
After that, the sound commands should work.  If they still don't work,
you can create your project without sounds, or get help from the teacher.

=== Project - 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 Wed 26 Sep at 18:00.

- 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 two or more ENEMY objects
- include several 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.

## A Better Cookie Monster - 14 Sep 2018

Here is a more interesting example game:  CookieMonsterB

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

On Monday, we will start a small project that is due
at the end of September.  Today, do some more practice

The teacher will explain how you can EXTRACT a .GIF animation
into a sequence of pictures, and hence create a new Animated Sprite.
You may find the following notes helpful:
You should try to do some of the practice exercises at the end of these notes.

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

Here are complete notes about the Sprites Library:

## More BlueBlob Commands - 11 Sep 2018

We will work on some of the following:
- How can we make something disappear?
- How do the arrow keys work?
- How can we check for collisions?
For example, make the blue-blob destroy the other frogs?
- Can we make a "power-up", to make our player move faster?
- Can we make something move back and forth,
bouncing off the walls?

## Starting Video Games - 10 Sep 2018

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

## Programming Test - 31 Aug 2018

There are TWO programs requiring changes. Copy the code from the web-site
and then make the changes. You need to show BOTH programs to the teacher
as soon as BOTH are finished. That means you need to have TWO WINDOWS
open containing the two programs.

// ******* STARS ******************
void setup()
{
size(800,600);
star(0,0);
}

void star(int x, int y)
{
stroke(255,0,0);
strokeWeight(5);
line(40,40,80,80);
line(80,40,40,80);
line(30,60,90,60);
line(60,30,60,90);
}

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

(1) Copy this program into Processing and run it.

(2) Add more stars - there should be

at least 10 stars. They should not

be touching each other.

(3) Change the program so that half of

the stars are red and half are blue.

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

//********** PICTURES ****************

PImage clown,dog;

void setup()
{
size(800,600);
textFont(createFont("Arial",32));
}

void draw()
{
background(255,255,255);
image(clown,50,100);
image(dog,450,300);

if(mouseX > 450 && mouseX < 650 & mouseY > 300 && mouseY < 500)
{
fill(0);
text("dog",500,550);
}

}

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

(1) Copy this program into processing and run it.

(2) Add commands so that when the mouse is over the clown

then CLOWN appears beneath the clown.

(3) Add commands to display this picture

http://ibcomp.fis.edu/StopSign.jpg

It should be placed in the top-right corner,

above the dog and to the right of the clown.

(4) Add commands so STOP appears beneath the Stop Sign

when the mouse is over it.

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

## Review for In Class Programming Test - 30 Aug 2018

Tomorrow, Friday 31 Aug, we will have an in class timed programming test.  You will be given some programming tasks, similar to those you have practiced in the past 2 weeks.  You will have 35 minutest to complete these tasks.  Then you will show your results to the teacher and receive a grade.

During the test, you may use any notes your have collected, including the teacher's web-site.  You should use today to collect your notes, complete any practice tasks that you did not finish, and review for the test.

## Parameters for Colors (3rd Day) - 27 Aug 2018

We will work on the 3rd day of lessons in these notes:

## More Drawing with Curves - 24 Aug 2018

First the teacher will explain how CURVE commands work - this is not simple.

Second the teacher will explain how to use METHODS.

Then you should continue with these notes:
READ the notes, at least briefly, and then do the Practice at the end.
Stop at the "End of Second Lesson".

## Drawing Commands - Faces - 23 Aug 2018

The teacher will explain some of this.
Then you should copy the programs from the notes
and do the Practice Exercises at the end.

## Mouse Clicks on Images - 21 Aug 2018

Here is a program where the user must click on the right location.

 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 Images - 20 Aug 2018

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.
For example:
-  the bear at the bottom
-  the red car
-  the seal
- study the program THOROUGHLY and figure out
what each entry does
etc.

## Pictures in Processing - 17 Aug 2018

*** Daily Work - Computers Required - Bring Your Computer Every Day ***

- STARTING -

http://processing.org or borrow a USB stick from the teacher.
Many students already installed this last year.

Processing can display pictures, like this:

Here is the program that draws the picture above:

 PImage img1 , img2, img3;       // this must include one variable for each picture size(600, 400);         // the size of the window 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 small 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