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 : Optical Puzzles Project - due Tue 13 Oct at 18:00


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

h