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


Last Day of Class - 17 June 2019

Today is the last day of class.  Use it to learn
something useful.  In case you have last minute work to do, like getting signatures,
you may do that.


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

Download this starting program:

Make all the changes listed on the test page.
Then UPLOAD your program into Haiku.
You must finish by 13:15.

If you have problems uploading, then you may
show the running program to the teacher
and have it graded immediately.


Practice with Illusions - 24 May 2019

Download this starting program:

== 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);
   quad(x,y,x-50,y-25,x,y-50,x+50,y-25);
   fill(100,100,255);
   quad(x,y,x+50,y-25,x+50,y+25,x,y+50);
   fill(255,100,100);
   quad(x,y,x,y+50,x-50,y+25,x-50,y-25);
}

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


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 can start with this common example:

http://4.bp.blogspot.com/-d2stb7czn5s/UegN_YMaQXI/AAAAAAAAEvo/6r9KGUSxB9E/s1600/Logo06.jpg

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?


We will start with this sample program:

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

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
  and download copies into a folder
- used Google Slides to create a presentation
- uploaded images from hard-disk into the presentation
- use ANIMATIONS to make elements appear and move
- adjust timing to make it readable and hold the reader's attention
- 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
a LINK into Haiku.

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

Headlines and Grabbing Attention



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 : 
      https://www.youtube.com/watch?v=2AxiATxLofk
- 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.
   
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.
   
== 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.


Turn in your Project - 15 Apr 2019

EACH member of the group must upload the SAME LINK to your COVER page - upload into Haiku.


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

- if your presentation was too short, then add more

- 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
- Google
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,
except maybe as YouTube videos.  

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)
https://www.youtube.com/watch?v=JPaTYZew1b8 (Wikipedia)

Think of it this way: if you were going to SHOW your 
favorite web-site to a FRIEND, what would you show them
that 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,
and then link to it from Google Sites.

== Practice ==
  • In Google Sites, Create a New Site "in new sites".
  • Try selecting a specific THEME
  • Try using <embed> to add a YouTube video and a Wikipedia page
  • 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
  • check whether all the links (including internal links)
    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

Download Kompozer here:

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

We will start with WIX at  http://www.wix.com
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"
- COMPRESS your folder
- in Haiku, click on [My ePortfolio]
- click on [+ Add Content Block] and choose [Minisite]
- click [Choose File] and upload your .zip file
- 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
https://docs.google.com/document/d/1jvAHMxKnB96dQCPlo-RJ7cCPPwAuejLBJ_ufcYBEa3M/edit?usp=sharing
- 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,
you will find a lot of information on this page:

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.

  • Find several information web-sites about your subject.
    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.

  • Find IMAGES that illustrate important ideas about this topic
    (use Google Images, or any other online source).

  • Find VIDEOS that illustrate important ideas about your topic.

  • 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
      
  • Your name

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

  • NAVIGATION ELEMENTS - these can be DROP-DOWN MENUES,
    normal links, images with links, buttons, DIV's wit .onmouseover function, etc.
     
  • 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.


Links and Menues - 27 Feb 2019

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.
  Add FUNCTIONS to make all the wrong answers
  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:
  -  add a background color
  -  add functions for the right answer and wrong answers

- 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.
  The possible answers are [1][2][3][4]
  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:
We will improve this page.

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

You need to download this .zip file and uncompress it.

Then you need to download and install KOMODO, an HTML editor:
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:
   x = centerx + cos(time)*radius
   y = centery + sin(time)*radius

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:

    addObject(new Apple(200,200,0.1),300,200);

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

Download this program for your quiz:
http://ibcomp.fis.edu/2018/graphics/SpaceBattle.zip 


Baby Catcher Practice - 18 Jan 2019

Download the Greenfoot program at:

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 
questions, writing your answers clearly on the answer page (white paper):

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

Download this Bouncer program

Answer these questions about Bouncer

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


Movement and Keys - Frogger - 14-15 Jan 2019

Download this .gfar file : Frogger.gfar

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.
        What about the other vehicles?
  • 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 ==

Download this scenario (program):  LTA

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

Download the Greenfoot Scenario (program):
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.

4. Your World

  • 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 
http://www.greenfoot.org/download 

Video for Total Beginner:

Turtle Graphics Shapes in Greenfoot

Download this starting project and open it in Greenfoot.

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

    public Square()
    {
        setColor("black");
        penDown();
    }

    public void act() 
    {
        move(100);
        turn(90);
    } 

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

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

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

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

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

(1) If your Board Game is not finished, please finish it
     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

Read this assignment:

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 Ver 2 - 26 Nov 2018

Download this program and do the tasks outlined:


Game 2048 - 21 Nov 2018

Here is Version 1 of the 2048 game:

We will try to add:
- 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

Download this program:

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)

You may start with the sample program above, but do not
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

Download this program:
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.

The teacher will help you get started on the following:

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

(2) Make a program to draw the second GRADIENT FILL,
      fading from blue to yellow

(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

To start your test, download the sample program:
or

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


Clickable Words - 17 Oct 2018

or

Jigsaw Puzzle - 15 Oct 2018

Try out this Jigsaw Puzzle.

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

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

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


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
   instead of sequential

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:
- open the [Tools] menu and choose [Add Tool]
- 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.

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 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
- (optional) add sound effects

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 
starting with CookieMonsterB.

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:
processingGraphicsTutorial/Lesson06-Sprites/CookieMonsterApplet/index.html
You should try to do some of the practice exercises at the end of these notes.


Sprites Video Game Library - 12 Sep 2018

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:

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.


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.
Download the program, try it out, then
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);
  clown = loadImage("http://ibcomp.fis.edu/clown.jpg"); 
  dog = loadImage("http://ibcomp.fis.edu/Dog.jpg?itok=Sw7bkqa_");
  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

Read these notes.  
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 -

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