home

media type="custom" key="10427288" Mr Mulkey's Graphics Programming Blog

**Reference : Getting Started with Processing Learning Processing Book**
 * Processing Constants ****[|Try Java]**
 * [|Script Programming]****Greenfoot**


 * Processing Games - 20 Jun 2012 **

Here is a simple side-scroller game in Processing. https://dl.dropbox.com/u/239179/graphics/processing/scrollerGame.zip [|Here is an explanation](if you need it). > - different pictures > - faster action > - a second enemy > - anything else you can think of
 * Download the game and run it.
 * Make some useful changes, for example:

You might prefer trying out some 3D commands. Try some of the programs on this page: http://processing.org/learning/3d/

Or maybe you want to "play" with some of the sketches on OpenProcessing: http://www.openprocessing.org/

If none of those are appealing, you can make some funny pictures and print them out to add to the collection on the bulletin board. Try out these services: []

Please post some comments about programming/graphics systems that you tried out recently - or comments about software that we used this year. These comments will be helpful for next year's Graphics Programming class.
 * Discuss Easy Beginners' Languages - 19 Jun 2012 **

media type="custom" key="19370892"


 * Investigate Easy Beginners' Languages - 13-18 Jun 2012 **

Finish rating all the Gambling Game programs.

When you have finished, try out some of these fun programming environments. http://www.techsupportalert.com/content/best-free-ways-learn-programming.htm Here are some other possibilities: [|Small Basic] [|DarkBasic] [|Scratch] [|OpenProcessing] Or you can explore these videos and learn more about Processing: http://funprogramming.org/ And there are lots more possibilites in the following list (stick to graphics software, please): http://cooltoolsforschools.wikispaces.com/

Look for something that is **FUN and EASY**, or **INTERESTING and CHALLENGING.**

We will have an **ONLINE DISCUSSION** tomorrow and collect comments about your experiences.


 * JAR Games - 12 Jun 2012 **

Here is the finished web-page with links to the games' JAR files: @https://dl.dropbox.com/u/39452697/index.html


 * Assignment**

You must **evaluate** all the gambling game programs by assigning scores to each of the following. Use the numbers 0-5 for each question, with 5 being the best score and 0 being the worst.
 * Fun
 * Visually attractive
 * Easy to use
 * Functions correctly
 * Overall rating

For each of the following questions, find one example (preferably the best example.)
 * A bet where you lose a lot very rapidly
 * A bet where you win a lot very rapidly
 * A bet that stays "even" most of the time
 * A bet that "sounds good" but you actually lose a lot
 * A bet that doesn't seem to work correctly
 * The program with the most different possibilities

[|Use this page] to record your results. Turn it in on Wednesday.


 * Packaging for Portability - 30 May 2012 **

The [Run][Clean and Build] tool creates a .jar file (Java ARchive). You will find the .jar file in the "dist" folder.

The .jar file contains all the the files from the src folder So if your pictures are in src, then they will also be in the .jar file. Unfortunately, our programs were not set up to load their images from the .jar file.

A small change to the **loadImage** method will make the program load it's images from the .jar file. That means you can BUILD a jar file and then run it on any computer (as long as Java is installed). That means your applications is PORTABLE - to any machine that has Java installed. code format="javascript" public void loadImage(JLabel jl, String filename) { ImageIcon im = new ImageIcon(Dice.class.getResource(filename)); int c = 0; do    { c++; } while (c<100000 && im.getImageLoadStatus!=MediaTracker.COMPLETE); jl.setIcon(im); } code For example, try downloading and running this .jar file: http://dl.dropbox.com/u/239179/graphics/netbeans/DiceGame/dist/DiceGame.jar

Alex's game : http://dl.dropbox.com/u/239179/graphics/gambling/gambling_game.jar


 * Turn in your Gambling Game - 30 May 2012 **

You need to turn in your game today, The easiest way is to create a .zip archive, containing the entire folder of your program, and send it as an email attachment to the teacher. We will all play all the games tomorrow in class.


 * Continue Your Gambling Game - 23 May 2012 **

Continue working on your gambling game.

For a top grade, make your game more interesting. For example: - put a nicer background on the window - protect the program with a password - let the user decide which set of pictures they want - maybe they want blue dice - at random times, ask a question - if they get the answer right, they get a bonus. You might want to use input and output commands: **[|IBIO Functions]**


 * Your Gambling Game - 21 May 2012 **

Now you should make a gambling game similar to this dice game.

= > This is **due on Wed 30 May** at the beginning of class.
You can start with[| this game]and make it better, but you must get your own pictures. You must also add more betting possibilities, and your game must have at least 5 dice (or cards or whatever). Choose some payoffs (bets) that are profitable, and others where the user generally loses money. Here is some sample code for calculating the payoff for 2 different bets:

code format="javascript" void payoff {   int bet = Integer.parseInt(jTextField1.getText);

if(jCheckBox1.isSelected) {      if(a==b && b==c)              // 3 identical numbers {         money = money + 9*bet; }      else { money = money - bet; }

jLabel1.setText(money + ""); }

if(jCheckBox2.isSelected) {      if(a==b || b==c || a==c)     // one pair of matching numbers {         money = money + 2*bet; }      else { money = money - bet; }

jLabel1.setText(money + ""); } } code

The following notes might be helpful, but the code is written in a different programming language.

[]


 * More Gambling Games - 11 May 2012 **

The following notes were written for Visual Basic, but the basic concepts are still useful: []

Start your gambling program by doing the following: - decide what pictures you need - collect (or extract or chop-up) images for all the parts of the game - using your Dice game, change it so that it displays your images instead of displaying numbers (the teacher will show how to do this)

code format="javascript" public void loadImage(JLabel jl, String filename) { ImageIcon im = new ImageIcon(filename); int c = 0; do    { c++; } while (c<100000 && im.getImageLoadStatus!=MediaTracker.COMPLETE); jl.setIcon(im); }

private void jButton1ActionPerformed(java.awt.event.ActionEvent evt) {

a = roll; b = roll; c = roll;

jTextField1.setText(a+""); loadImage(jLabel2,"dice"+a+".gif"); jTextField2.setText(b+""); loadImage(jLabel3,"dice"+b+".gif"); jTextField3.setText(c+""); loadImage(jLabel4,"dice"+c+".gif");

payoff;

}

code


 * Rolling More Dice - 11 May 2012 **

Now make the following changes to your Dice program:

(1) Add 2 more dice - now there are 5 dice. (2) Make several [Play] buttons, each with different rules. For example: [5 matching] ==> pays 1000 * the number, 4-4-4-4-4 ==> 4000 [4 matching] ==> pays 400 * the number, 5-5-5-5 ==> 2000 [3 matching] ==> pays 100 * the number, 6-6-6 ==> 600 [2 pair] ==> pays 10 * TOTAL, 3-3-4-5-5 ==> 200 [1 pair] ==> pays 20, 2-2-3-4-5 ==> 20 [Total over 20] ==> pays 50 Whenever you DON'T get the required match, you lose 30.

Now use your simulation to play lots of times by pressing one button lots of times. Keep track of whether you are winning or losing over the long run. Then try another button many times.

(3) Try to AUTOMATE the button pressing, so that when you press a button it plays (and pays) 100 times. Then you can do experiments a lot more easily. (4) Figure out which of the buttons described above is the best, e.g. which one pays the most money over the long run. (5) Adjust the payments so that all the buttons are roughly equal over the long run.


 * Rolling Dice - 10 May 2012 **

Below is the **functional code** for a dice rolling program (see picture above). in this case, rolling the dice and deciding how much money you win. code int a = 0; int b = 0; int c = 0; int money = 1000;
 * Functional code** is the Java code that does the useful bits -

private void jButton1ActionPerformed(java.awt.event.ActionEvent evt) { a = roll; b = roll; c = roll;

jTextField1.setText(a+""); jTextField2.setText(b+""); jTextField3.setText(c+"");

payoff;

}

int roll {   int num ; num = (int)Math.floor(Math.random*6+1); return num; }

void payoff {   if(a==b && b==c) {      money = money + a*100; }

jLabel1.setText(money + ""); }

code

The teacher will show how to construct this program in NetBeans. You might want to copy the code above, or parts of it, into your NetBeans program.

Notes for Making the Dice Rolling Simulation
> Java + Java Application [Next] > Project Name = Dice > Do NOT create a Main Class [Finish] > - New - JFrame Form > - Class Name = DiceSim > this will work fine with FreeLayout > Add to the form, then stretch bigger > Right-click - Properties > Change Font to 36 > Change Horizontal Alignment to CENTER [Close] > Edit Text ==> 0 > Edit Text ==> 1000 > or right-click - Events - Action - ActionPerformed > Add commands to roll 3 dice and > display the resulting numbers > in the TextFields > for good results, like matching numbers
 * Start NetBeans
 * File - New Project
 * Right-click Source Packages
 * Don't change to Null Layout -
 * Add 3 large square TextFields
 * Select all 3 TextFields
 * Right-click each TextField
 * Add a Button to ROLL the dice
 * Add a Label to display MONEY
 * Double-click the Button
 * Add more commands to pay money

= **Practice =**

After re-creating what the teacher did, do the following:

(1) Add another possibility for winning - if 2 numbers match (a=b or b=c or a=c) then the payoff should be twenty times the matching numbers. For example: 4-6-4 --> pays 4*20 = 80 But if there are 3 matching numbers, the payoff should still be *100, and there will be no *20 payoff.

(2) Add a third possibility - if there are not 3 matching numbers, and there are not 2 matching numbers, then the payoff is the LARGEST number times 5, e.g.: 1-4-3 --> 4*5 = 20 Notice that this ONLY happens if there are no matching numbers. For example: 4-6-4 --> pays 4*20 = 80, NOT 6*5 = 30 1-6-1 --> pays 1*20 = 20, NOT 6*5 = 30

(3) Next time we will EXPAND the game to use 4 dice, and then add a variety of winning options.


 * Graphics Programming will meet in 284 on Wed 9 May. **

Birthday Matches http://www.youtube.com/watch?v=98OTsYfTt-c&feature=related

Rolling Dice http://www.youtube.com/watch?v=x7V43V6OtPQ

The Monty Hall Problem - Explanation Video: http://www.youtube.com/watch?v=mhlc7peGlGg&feature=related

Question: You play a game where you role 4 dice. After rolling the dice you calculate the total. Now you can decide whether you wish to roll again. If you roll again and get a HIGHER total, you may continue. If you roll the dice again and the total is NOT HIGHER, your score is FOUR. You can stop any time you wish, and take the highest score you have achieved. Clearly if you roll 1-1-1-1, you should roll again as there is nothing to lose. If you roll 6-6-6-6, you should NOT roll again, as you will not get more. After you finish, the opponent does the same thing. Whoever gets the highest score is the winner. Questions: (1) If you roll 10, should you roll again? (2) If you roll 12, should you roll again? (3) At what score is it smarter to stop than to continue?

You can try this out with real dice, playing the game maybe 100 times. It might be better to write a computer program that can play the game thousands of times and report the results - a SIMULATION.


 * NetBeans Picture Game - 7 May 2012 **

Use NetBeans to make a game like this one: http://dl.dropbox.com/u/239179/graphics/netbeans/PictureGame/dist/PictureGame.jar

> This requires changing the order of the components in the [Inspector] > on the left-bottom of the IDE. Put the Jlabel at the bottom of the list. > Now you should see the Button sitting on top of the picture. > Right-click on the Button and choose [Events][Action][ActionPerformed]. > Type this command in the jButton1ActionPerformed method: > **jButton1.setVisible(false);** > and that they hide when they are clicked. > the TextField matches the correct name of the picture. > Here is a method that checks this correctly: code format="javascript" private void jButton10ActionPerformed(java.awt.event.ActionEvent evt) { String guess = jTextField1.getText; if(guess.equals("Berlin")) {           jTextField1.setBackground(new Color(150,250,150)); jButton10.setText("RIGHT!"); jButton10.setBackground(new Color(150,250,150)); }       else {           jTextField1.setBackground(new Color(250,150,150)); }
 * 1) Create a new project for a Java Application
 * 2) Add a new JFrame Form
 * 3) Right-click on the Form, choose Set Layout and choose Null Layout
 * 4) Add a Jlabel to your form and make it as large as the form
 * 5) Get a picture from Google images - save it in the **SRC** folder in your project
 * 6) In the Jlabel properties, chose [Icon] and set it to your downloaded image
 * 7) Add one big button, covering the center of the picture.
 * 1) Now make the Button hide when you click it.
 * 1) Now run the program and check that the Button hides when clicked.
 * 2) Now add more buttons. Make sure they are on top of the picture
 * 1) Add a TextField, where the user can type the name of the picture.
 * 2) Add a [Check] Button. This should check whether the name in

} code If you get this finished and working, change the Buttons so they are not all the same size. Each one should cover up a key part of the picture.

You should finish this before class on Wednesday.


 * Starting NetBeans IDE - 4 May 2012 **

NetBeans is a professional IDE (Integrated Development Environment). "Integrated" means that it contains lots of tools that work together to make it easier write Java programs. It contains all the following:
 * GUI Designer tools build the user interface quickly, easily and flexibly
 * the IDE writes GUI Java commands automatically, without any typing
 * compiles and runs Java programs
 * checks syntax automatically and constantly as you type
 * helpfulsuggestions pop-up as you type
 * various tools help to build and debug programs

NetBeans does have a couple disadvantages. > and they won't have all those really nice graphics commands
 * the interface is complicated and can be confusing
 * complex tools don't always do what you expect
 * the auto-generated code is complex and a bit difficult to understand
 * Processing users will need to learn something new,

In any case, NetBeans is certainly worth investigating, so we will do so.

Further Overview of NetBeans: http://dl.dropbox.com/u/239179/ibcomp/netbeans/Overview.htm

Program Notes: http://dl.dropbox.com/u/239179/ibcomp/netbeans/FirstTimeNetBeans.pdf

Try this program : http://dl.dropbox.com/u/239179/graphics/netbeans/PictureGame/dist/PictureGame.jar

The teacher will demonstrate how to create this program. Then you should try to create the program yourself, using NetBeans.

More hints for Getting Started with NetBeans http://dl.dropbox.com/u/239179/ibcomp/netbeans/StartSimpleHints.html


 * Test - 2 May 2012 **

Here is the test - you need to copy code from this page: http://dl.dropbox.com/u/239179/graphics/processing/GUIquiz2012/GUIquiz2012.html


 * More Practice for Thursday's Test - 30 April 2012 **

Write a program with 4 Panels. > If they type "magic", the TextField turns green - otherwise it turns red. > you click on them. The other two turn green when you click them. > 4 numbers into the TextFields. Then they click a Button and > the program adds up the 4 numbers and puts the answer > into a fifth TextField. > When the user clicks on one of the colors, the background > of the Panel changes to that color.
 * 1) The first Panel asks for a user's password (in a TextField).
 * 1) The second panel has 4 Buttons. Two of the Buttons disappear when
 * 1) A third panel has 4 TextFields. The user is supposed to type
 * 1) The 4th panel contains 1 Choice list. It has 3 colors listed.

/= = = = = = = = = = = = = = = = = = = = = = = = = = = = \ We will have a **programming test** on Thursday 3 May. You will be required to fix and change a program that the teacher has written, and then show the fixed program to the teacher when you are finished. \= = = = = = = = = = = = = = = = = = = = = = = = = = = =/
 * GUI Panels and NullLayout - 27 April 2012 **
 * TEST Announcement**


 * Today's PRACTICE -**

[|Panels2] - Add 2 more questions in 2 more panels. - For each question, add a [check] Button that checks just that question. - Change the bottom [check] Button so that it displays the number of correct answers (out of 4). You will need to add a TextField where the number of corrrect answers can be displayed.

[|Panels] - In each panel, add a [Hide] button that hides just that panel. - Put a CHOICE box at the top, replacing the Hide/Show button. It should contain 4 entries : Panel1, Panel2, Panel3 and Panel4 When clicked, the correpsonding Panel should become visible. - Add anything else that you think is interesting.

GUI Panels and NullLayout - 26 April 2012


 * http://dl.dropbox.com/u/239179/graphics/processing/panelNotes.pdf**


 * Download the two sample programs here:**
 * http://dl.dropbox.com/u/239179/graphics/processing/panels.zip**
 * http://dl.dropbox.com/u/239179/graphics/processing/panels2.zip**

Easier GUI Commands - 24 April 2012 **

Rather than typing the same commands over and over (or copying them), we can use a METHOD for formatting a GUI Control. Compare the two programs below. code void setup {  size(400,400); answers.setFont(new Font("Arial",0,24)); add(answers); add(instruct); light.setFont(new Font("Arial",0,24)); add(light); ans1.setFont(new Font("Arial",0,24)); add(ans1);
 * ................. Simpler but longer ...........................

tri1.setFont(new Font("Arial",0,24)); add(tri1); ans2.setFont(new Font("Arial",0,24)); add(ans2); tri2.setFont(new Font("Arial",0,24)); add(tri2);

space.setFont(new Font("Arial",0,48)); add(space); check.setFont(new Font("Arial",0,24)); add(check); score.setFont(new Font("Arial",0,24)); add(score); background(255,255,255); } code || ................. Cleverer and shorter ................... code void ad(Component comp) {  comp.setFont(new Font("Arial",0,24)); add(comp); }

void setup {  size(400,400);

ad(answers); add(instruct); ad(light); ad(ans1);

ad(tri1); ad(ans2); ad(tri2);

ad(space); ad(check); ad(score); background(255,255,255); } code || The **ad(Component)** command automatically changes the Font of the component. By placing setFont inside a method, it can be repeated without copying so many times. For the **instruct** label, we want to keep a small font, so we use the normal **add** command.

Take a program that you have already written, that contains some text. Substitute TextField boxes in various places, leaving out words or numbers. Add a Button at the bottom to check the answers. It should change correct answers to green and change wrong answers to red. Your quiz should contain at least 10 TextFields.
 * - Practice -**

Your program should look like this one, but with more boxes: http://dl.dropbox.com/u/239179/graphics/processing/GUIinputs/applet/mathinput.html


 * GUI Inputs - 23 April 2012 **

http://dl.dropbox.com/u/239179/graphics/processing/GUIinputs/applet/mathinput.html


 * GUI - 18 April 2012 **

No class on Thursday. Class is cancelled on Friday.

Before Monday, write a program that works similarly to this web-page: http://dl.dropbox.com/u/239179/comptech/webpages/review/europe.html
 * Homework -**

If you can figure out how to put map images on the page, that's great. Otherwise, you can just write text on the page. For each Button, when it is clicked your program should display either a map or some text information about the country. Do 4 or 5 countries. Be sure to bring a working program to class on Monday, as you will need it for the work on Monday.


 * GUI - 17 April 2012 **

- Investigate this web-page: http://dl.dropbox.com/u/239179/comptech/webpages/review/europe.html Think about how this could be programmed in Processing. Quiz tomorrow at the beginning of the period.
 * HOMEWORK**

First GUI program: http://dl.dropbox.com/u/239179/graphics/processing/GUIone/applet/GUIone.pde


 * Inputting Text - 16 April 2012 **

Read these notes and do the practice exercises in these notes: []


 * More Scrolling Text - 28 March 2012 **

Here is a solution to the problem of scrolling text from the bottom to the top: code format="javascript" int p = 0; int max = 5; int slidex = 490; int slidey = 290;

void setup {  size(500,300); textFont(createFont("Arial",32)); frameRate(10); }

void draw {  if(p==0) { background(255); } if(p<26) {     slideFromBottom("Why is Thomas Edison",0,40); }  if(p>=26 && p<48) {     slideFromBottom("the most important inventor",0,80); }  if(p>=48 && p<67) {     slideFromBottom("who ever lived?",0,120); }  if(p>=94 && p<109) {     slideFromBottom("Without light bulbs, we'd need",0,160); }  if(p>=120 && p<130) {     slideFromBottom("candles for watching TV.",0,200); }

p = p+1; if(p>150) { p = 0; slidey = 290; } }

void slideFromBottom(String message,int x,int ylimit) {    stroke(255); fill(255); rect(0,slidey-30,500,slidey+10); fill(0); text(message,x,slidey); if(slidey > ylimit) { slidey = slidey-10; } else { p = p+1; slidey = 290; } }

code This is actually easier if we have lots MORE text. [|Read these notes about scrolling more text.]


 * Scrolling Text - 27 March 2012 **

Here is a program that scrolls text from the right to the leftÖ code format="javascript" int p = 0; int max = 5; int slidex = 490;
 * Scrolling Text Methods**

void setup {  size(500,200); textFont(createFont("Arial",32)); frameRate(10); }

void draw {  if(p==0) { background(255); } if(p<50) {     slideFromRight("If you see an elephant in your car,",40); }  if(p>=50 && p<=100) {     slideFromRight("what time is it?",80); }  if(p>=150 && p<200) {     slideFromRight("Time to get a new car",120); }  p = p+1; }

void slideFromRight(String message,int y) { stroke(255); fill(255); rect(0,y-30,500,y+10); fill(0); text(message,slidex,y); if(slidex > 0) { slidex = slidex-10; } else { p = p+1; slidex = 490; } } code > put in a longer joke or perhaps a **limerick** > up from the bottom, one line at a time, stopping at the top. > Increase the frameRate and decrease the amount > that the text moves each time (less than 10) > so that it scrolls more smoothly. > as possible, moving one single pixel each time.
 * Practice**
 * 1) Copy the program above and get it running in Processing
 * 2) Change the program so that it has 5 lines of text -
 * 1) Write a similar program where the text scrolls vertically
 * 1) Go back to the original program.
 * 1) Make the vertical scrolling program work as smoothly

Finish as much as possible in one period. Tomorrow we will work on some other text effects.


 * Methods for Printing - 21 March 2012 **

A better approach to the text display problem is to create a METHOD that does the printing. This has the advantage that changing the one method can change lots of screens at once. For example, like this: code format="javascript" ..... .....  if(p==4) {    fourLines(        "I can't remember if I cried",        "when I read about his widowed bride",        "but something touched me deep inside",        "the day the music died"        ); }

if(p==5) {    fourLines(        "",        "... still need to finish the song ...",        "",        ""        ); } }

void fourLines(String a,String b,String c,String d) { text(a,10,80); text(b,10,120); text(c,10,160); text(d,10,200); } .... .... code Notice that the **fourLines** method REQUIRES 4 lines of text. If you only need to display one or two lines, then call the method with "" to indicate a blank String.


 * Practice**

> We will be making more interesting text-display methods, > similar to the graphics transitions and filters from last week. > We need some good ideas. Look at YouTube > and find some lyrics videos that display lyrics. > Find some BAD ones (e.g. boring or hard to read). > Find some good ones (e.g. interesting, easy to read). > Think of an ORIGINAL IDEA that might be possible to program. > Bring these ideas with you to class tomorrow.
 * 1) Convert your song from yesterday to use a METHOD like fourLines.
 * 2) Make another song lyrics program using the same METHOD from #1.
 * 3) **INVESTIGATE**


 * Interactive Interface in Processing - 21 March 2012 **

Below is a Processing program that displays the lyrics for a song. Change this to show all the lyrics for a song that you know - or a poem if you prefer. It needs to have at least 6 pages. Bring this to class with you tomorrow - you will need it for our next programming task. code format="javascript" // making a clickable (interactive) interface

int p = 0; int max = 3;

void setup {  size(480,320); textFont(createFont("Arial",24)); }

void draw {  background(255); fill(0); text("--> next -->",10,40);

if(p==0) {    text("Click 'next'",10,80); text("to start",10,120); text("reading lyrics",10,160); }  if(p==1) {    text("Long, long time ago",10,80); text("I can still remember",10,120); text("how that music used to",10,160); text("used to make me smile",10,200); }  if(p==2) {    text("And I knew if I had my chance",10,80); text("that I could make those people dance",10,120); text("and maybe they'd be happy",10,160); text("for a while",10,200); }  if(p==3) {    text("... still need to finish the song ...",10,80); } }

void mouseClicked {  if(mouseY<40) {    p = p+1; }  if(p > max) { p = 0; } }

code


 * Programming Quiz - 19 March 2012 **


 * Programming Quiz on Filters and Transitions**
 * Be sure to download the CORRECT quiz**
 * to match the page you received.**


 * [|Quiz-A.zip]**


 * [|Quiz-B.zip]**


 * Practice Transitions - 16 March 2012 **

The teacher will explain HOW the SOLAR filter calculation accomplishes it's surprising solar effect.

Practice some more making transitions, using P as a **control** variable that changes a number in the filter. Try this on various filters that you already wrote. For example, you can change the TINT command to do various colors.

Try to figure out a way to make the SOLAR Bruce Springsteen effect use other colors instead of red and yellow.


 * QUIZ MONDAY**


 * Inventing Transitions - 15 March 2012 **

The teacher will show two more examples of using numbers to control filters and transitions.

Keep practicing making transitions and filters that do various tasks.

You will receive a pre-written program to run on your computer. You will need to explain (on paper) how parts of the program function. and then fix other parts of the program to achieve a particular result. This will involve transitions/filters like we have been programming.
 * QUIZ MONDAY 19 MARCH**


 * "Wipe" transitions - 13 March 2012 **

Finish the "wipe" transitions. There are 8 ways to make images appear and disappear by "wiping" black across the screen - 4 ways vertically and 4 ways horizontally. Make a method for each way.


 * More Pixel Filters - 12 March 2012 **

[|Filters Notes] [|Download the Filters ver 2 Program Here]


 * Pixel Filters - 9 March 2012 **

[|Filters Notes]


 * Fading Slideshow - 7 March 2012 **

Looping Through Pictures
 * Fading Slide Show (do this in ONE class period + time at home) **

You must bring a working slideshow to class on Friday. We will start making **custom transitions** that make the slideshow a bit more exciting. But for this one day, stick to TINT and BLEND commands.


 * Processing TINT Command - 6 March 2012 **

[]


 * Processing Again - 5 March 2012 **

Back to processing? Well, for a while. Read this about fading and coloring effects in Processing: []


 * Greenfoot Test - 23 Feb 2012 **

[]


 * Waterworks - 21-22 Feb 2012 **

Remember - Test on Thu 23 Feb
You will receive a Greenfoot program. You will need to answer questions about the program, including how to make some meaningful changes. You may use any notes you wish during the exam, including online reference notes.

Significant Concepts
In the [|Waterworks] simulation, water drops fall down, bounce off a plate (board) and land in a bucket (hopefully). It's a pretty simple idea, but the programming is quite complex.


 * 1) What are the important physical principles that must be simulated?
 * 2) What physical laws will help us in the simulation?

The Program
(1) Download the program and run it. Make sure you understand how to play the game.

(2) Now print out the two most significant classes : drop and plate.

(3) Read through each code listing. Write notes about the meaning of each part of the code.

(4) Try to make meaningful changes. For example: > happens automatically > happens automatically > Add some more text, for example documenting your turning key. (5) Find out what some of the other actors do, like "funnel"
 * make the drops bounce higher
 * in level 1, put the bucket in a different position - write code so this
 * in level 1, make the plate start directly under the faucet - write code so this
 * make a key that turns the plate 10 degrees (in addition to the mouse control)
 * in level 1, it says "start", but that does nothing.


 * Simulations - 17 Feb 2012 **

How can we create a **simulation**? What is that anyway? **Investigate:**

[] []

WaterWorks on Tuesday

Plan on a **TEST** on **Thurs 23 Feb.** It will be done using the computer to modify and/or write a program with timed animation. Bring your notes!
 * Test Announcement**


 * Changing Colors - 16 Feb 2012 **

Practice with Changing Colors


 * Trajectories in Greenfoot - 15 Feb 2012 **

[|Trajectories in Greenfoot]


 * Programming Library - 13 Feb 2012 **

Looking at the sample informational pages, we ask questions about HOW TO do certain things. For example:


 * How can you draw lines and circles in Greenfoot?
 * How can you make a Sprite move in an irregular path?
 * How can we make a picture fade-in or fade-out?

As you learn new techniques, like those listed above, you should **collect** them in a **notebook.**

We will start with moving a Sprite in an irregular path. This requires ARRAYS to keep track of where pieces of the path begin and end.


 * Using Greenfoot for Simulations - 7 Feb 2012 **

You need to .zip your Greenfoot game into an archive. Then send an email with the .zip archive attached to: Dave_Mulkey@fis.edu If you need help creating a .zip archive, ask the teacher.
 * Turn in your Greenfoot Game Program**

The only difference between a **GAME** and **INFORMATION** is that a game is primarily for fun, while an informational page can be used to solve problems or gather information.
 * Informational Pages**

Study these examples: When looking at these pages, try to answer the following questions: > information clearly and effectively?
 * Algebra Demos (web-pages - only viewable with Internet Explorer - don't use Firefox)
 * Sample Math Problem Presentation (requires Open Office Impress)
 * [|Science and Travel Pages](web-pages - only viewable with Internet Explorer - don't use Firefox)
 * 1) What is the purpose of the page?
 * 2) What techniques were used to achieve **animation** and/or **interactivity?**
 * 3) Was the page effective? Does it achieve the goals of presenting
 * 1) Are there any questions that I should ask the teacher?
 * 2) How could I make a similar page, perhaps a better one?


 * Last Day for Game Programming - 7 Feb 2012 **

This is your last day in class to work on your Greenfoot game. Be sure to get help from the teacher if you need it.


 * Greenfoot Notes - 1 Feb 2012 **

Summary of Useful Greenfoot Commands


 * Greenfoot Project - 30 Jan 2012 **

Due Date : Thursday 9 Feb 2012 (beginning of class)
Your assignment is to create a multi-level video game in Greenfoot.

It should be similar to this example, but longer: []

Try to do all the following: > Some levels should have more than 2 Actors > like sending it back to a starting point > in order to win the level, like eating "power-ups" > so that the whole thing makes some sort of sense - it's not just random > types of movements, a variety of characters > to too simple and not impossible.
 * Make at least 8 levels
 * You should also have a starting screen with some instructions
 * You should also have an ending screen saying that the game is over
 * Each level must have at least 2 characters (Actors/Sprites)
 * Some levels (preferably most) should have some .GIF Animation actors
 * At least one level must have enemies/targets that are moving around
 * At least one level should have obstacles/enemies that disappear when you touch them
 * At least one level should have enemies that do something to the player,
 * At least one level should have points (score) that the player collects
 * The whole game should have a story or theme that connects the level,
 * Don't make all the levels the same - there should be a variety of different
 * It's better if the levels are interesting and challenging -

If you finish early, go back and make some of the levels more interesting. For example:
 * add sound
 * add a background image
 * or add more levels

The Monster Eats the Cookies - 26 Jan 2012
[|Here is Mr Mulkey's finished 4-level game (click to download).] You should download it and try it out.

Now YOU should finish your own version (as described yesterday). Use Mr Mulkey's code to help you. Starting Monday, you will each program your own game that will be turned in the following week.
 * HOMEWORK -**


 * Making The Cookies Disappear AND Keeping Score**

It's tricky to figure out the best place to put the code for eating cookies, counting the cookies and ending the level. It turns out that it's simplest to put all the code in the monster, like this: code .... ..... int score = 0;

public void act { super.act;

Actor actor = getOneIntersectingObject(Goldball.class);

if(actor != null) { score = score + 1; getWorld.removeObject(actor); }

if(score == 3) { Greenfoot.setWorld(new Ending); } .... ... code

Multi-Level Greenfoot - 25 Jan 2012
Start with the sample multi-level game. > - the same Bartboard2 Sprite from level 2 that catches the dolphin > - some other Sprite that is a target > - the target should sit still in the bottom right corner > - Bart should start near the top left corner > - the goal is to click on Bart and move him to the bottom of the screen > to touch the target Sprite > - make sure your new level starts after Level 2 ends > > like cookies in Pacman. Make a Sprite that you can control with > the arrow keys. When you move it around the screen it "eats" the > cookies - they must disappear whenever they are touched. > When all the cookies are gone, the game ends by going to the > final screen. Make sure this level starts after Level3 that you made before.
 * Practice**
 * Add a new level 3. The new level should have:
 * Add another level 4. This one needs to have lots of identical targets,

Interactive Greenfoot - 24 Jan 2012

 * Making an interactive page (e.g. a game)**

There are 6 brief tutorials on the left side of this page: Greenfoot Reference Page

Here is a sample multi-level game.

They show how to use the keyboard to control characters, plus some other things. The teacher will demonstrate these ideas - then you can give it a try.

Greenfoot - 20 Jan 2012
This week is just practice, getting used to how Greenfoot works. Next week we will start building a useful program. For today, if you've run out of things to try, then try doing the following: > Be sure to add the required code in the editor so the animation works. > say betwenn y=100 and y=200 > The .act method needs a .move command and a .turn command. > but in the opposite direction.
 * 1) Get a copy of the Sonic Project
 * 2) Add another new object that contains a GIF animation
 * 1) Make your new animation move up and down in a small area,
 * 1) Add another new animation. Make this animation move in a circle.
 * 1) Add another new animation. It needs to move in a square, just like Sonic,

Greenfoot - 19 Jan 2012
Turn in your 5 GIF animations in a .zip archive attached to an email.

Sonic Project

[|Click here to download the Sonic project in a .zip archive.]

Greenfoot - 18 Jan 2012
Greenfoot Notes 1

Greenfoot - 16 Jan 2012

 * Greenfoot** is a Java IDE (Integrated Development Environment). It is used for developing graphical models of simulated "worlds". Greenfoot was developed by Michael Koelling and Poul Henriksen. It is distributed as a free product under the GNU license - more info and downloads at [|http://www.greenfoot.org].

Greenfoot concentrates on 3 main concepts: > Actors are controlled by Java commands > Worlds contain moving characters that are implemented as Java Objects > Greenfoot provides a ready-made framework with an animation engine and a GUI interface for basic control
 * **Introductory Java Programming**
 * **Object Oriented Programming (OOP)**
 * **Animation**

Our first example is an animated dolphin swimming through animated water. Download the dolphin example here.

GIF Animations - 9 Jan 2012

 * Making .GIF Animations**

SVG Animations - 13-16 Dec 2011
[|http://www.openclipart.org](or @ftp://ftp.osuosl.org/pub/openclipart/downloads/) [|http://clipart.nicubunu.ro] [|www.clker.com] [] [|http://clipartist.net] Make sure you get an .SVG image (scalable vector graphics).
 * Try downloading clip-art from any of these sites:**

Then run INKSCAPE and load your clipart image. UNGROUP the image so that you can move things.

Move pieces and save several images to make and animation. EXPORT to a bit-mapped format like .PNG. Use names like : pic00.png, pic01.png, pic02.png..

Then add your new animation to your game. It doesn't need to "do" anything - it can just sit there - animating.


 * FINISHING YOUR GAME**


 * Get your game FINISHED and TURNED-IN**
 * before the end of the week (16 Dec at the latest).**
 * If you cannot upload it to the ASSIGNMENTS drive,**
 * then make a ZIP archive and email it to the teacher.**

Holiday Video Game - 12 Dec 2011
The teacher will explain how to turn in your game to the Assignments folder (W:) in **home.fis.edu.**
 * Turning in your game -**

Once you finish uploading your game to the server, you need to add **INSTRUCTIONS.** That means an explanation of how to play the game, how you win and lose points, and how to win - including any strategy hints that would help. We will see how to add a button to the program that displays these instructions.

When finished, you can upload the resulting a functioning game web-page like this one.
 * Java Applet** to a web-server and you will have

Holiday Video Game - 28 Nov - 12 Dec 2011
We will be creating a **Holiday Video Game.** It will include **animated** **Sprites**. Here is a simple example - yours should be better than this: @http://dl.dropbox.com/u/239179/graphics/processing/Sprites.zip

The teacher will demonstrate how to do the following:
 * download animated figures from http://www.gifanimations.com
 * convert an animated .GIF into separate **frames** at http://gifninja.com/split-animated-gif/new
 * use the Sprite library class in Processing

You will need to invent a creative idea for a game - it should have a **HOLIDAY THEME.** That could be Christmas, New Years, skiing or anything occurring in December or January. It should consist mostly of Sprite figures and a few drawings that have specific behaviors: player, enemies, friends, blockers, etc.

We will spend 2 weeks on this assignment.

Cookie Quiz - 23 Nov 2011
Copy the following program into Processing. Then make the changes described.

code // This program has three circular enemies // and a square player. The circles are moving. // // Make the changes (improvements) described here: // // 1 - Change the color of the square to BLUE // 2 - Add commands so the square player // can also move left and down // 3 - The player must "die" if he touches // one of the red enemies. Then the game // should end. Make this happen. // 4 - The goal is for the player to eat the cookie. // When the player touches the cookie, // it should disappear. The player should get // 100 points when he touches the cookie, // but this does not happen yet. Add a POINTS variable // that adds 100 when the player eats the cookie. // 5 - Add 3 more cookies, each worth 100 points. // They must disappear when they are touched. // Place the cookies in the 4 quadrants of the screen // (top-left, top-right, bottom-left, bottom-right) // 6 - Make the game end when the player has 400 points.

void setup { size(800,600); background(255,255,255); smooth;

frameRate(20); }

int x=50; int y=300;

int x2=400; int y2=500;

int x3=500; int y3=300;

int px=100; int py=300;

int fx=500; int fy=50;

void draw { background(255);

if(overlap(px,py,50,50,fx,fy,50,20)) { fx = -100; fy = -100; }

food(fx,fy);

target(x,y);

x = x + 10;

if(x > 750) { x = 0; }

target(x2,y2);

y2 = y2 - 9; if(y2 < 0) { y2 = 550; }

target(x3,y3);

x3 = x3 + 10;

if(x3 > 750) { x3 = 0; }

player(px,py);

if(keyPressed) { if(keyCode==UP) { py = py-10; } if(keyCode==RIGHT) { px = px+10; } } }

boolean overlap(int x1, int y1, int w1, int h1, int x2, int y2, int w2, int h2) { if(x2>x1-w2 && x2y1-h2 && y2<y1+h1) { return true; } else { return false; } }

void food(int x,int y) { // this is supposed to be a cookie

fill(200,100,0); ellipse(x,y,50,15); fill(0,0,0); ellipse(x-10,y-2,3,3); ellipse(x+2,y+1,3,2); ellipse(x+11,y-1,2,2); }

void target(int x,int y) { strokeWeight(1); stroke(0,0,0);

fill(250,0,0); ellipse(x,y,50,50); strokeWeight(3); line(x-5,y+5,x+5,y+5); line(x-5,y+5,x-7,y+7); line(x+5,y+5,x+7,y+7); line(x-8,y-8,x-5,y-5); line(x+8,y-8,x+5,y-5); }

void player(int x,int y) { fill(0,255,0); rect(x,y,50,50); } code

Keep Practicing - 22 Nov 2011
We will have a **QUIZ tomorrow 23 Nov**. You will use the computer to **change** and **improve** a program provided by the teacher. It will be similar to the game that you have been programming.

Here is an example of what the quiz will be like:

code // This program has two circular targets // and a square player. The circles are moving. // Eventually the circles will collide // and the game ends. // // Make the changes (improvements) described here: // // 1 - Change the color of the square to RED // 2 - Add commands so the square player // can also move left and right // 3 - The goal is for the player to "survive" // without being touched by the circles. // So the game should end when a circle // touches the square. Add OVERLAP commands // to make the game end whenever one of the // circles collides with the square. // 4 - Change the OVERLAP command for the circles // so that whenever the circles collide with // each other, the circles jump back to their // starting positions and the game doesn't end. // 5 - Add one more circular target that is moving // straight across the screen (horizontal). // It must also end the game if it collides // with the square player.

void setup { size(800,600); background(255,255,255); smooth;

frameRate(20); }

int x=50; int y=50;

int x2=600; int y2=50;

int px=100; int py=300;

void draw { if(overlap(x,y,50,50,x2,y2,50,50)) { System.exit(0); }

background(255);

target(x,y);

x = x + 10; y = y + 5; if(x > 750) { x = 0; } if(y > 550) { y = 0; }

target(x2,y2);

x2 = x2 - 8; y2 = y2 + 9; if(x2 < 0) { x2 = 750; } if(y2 > 550) { y2 = 0; }

player(px,py);

if(keyPressed) { if(keyCode==UP) { py = py-10; } if(keyCode==DOWN) { py = py+10; } } }

boolean overlap(int x1, int y1, int w1, int h1, int x2, int y2, int w2, int h2) { if(x2>x1-w2 && x2y1-h2 && y2<y1+h1) { return true; } else { return false; } }

void target(int x,int y) { strokeWeight(1); stroke(0,0,0);

fill(250,250,0); ellipse(x,y,50,50); fill(0,0,250); ellipse(x,y,30,30); }

void player(int x,int y) { rect(x,y,50,50); } code

More Variables - 18 Nov 2011
We use variables like X,Y to keep track of the position of an object. We can have the program "remember" other things in variables.

A common thing to keep track of is LIVES. Every time you touch a dangerous enemy, you lose a life. You might start with 3 lives. Then when you get down to 0 lives, you lose the game.

Another common problem is to make an enemy disappear. You might do this by moving the enemy off the screen, but the program might put him right back on the screen because his position is negative.

A similar idea is ENERGY. Every time you move, it uses energy. Touching an enemy might cost a lot of energe (healing).

A more complex idea is involves SOLVING something. For example, you need to GET A KEY, then OPEN A DOOR, and then TOUCH THE RIGHT THING to escape.

The teacher will quickly demonstrate how to use VARIABLES to solve some of these problems. Then you should try to add these same ideas to your program. The code will not be written here, so you need to TAKE NOTES during the teacher's demonstration.

More Obstacles - 16 Nov 2011
Continue working on the program you started last time. Add some friends. Friends are obstacles that do something GOOD when you touch them. For example, they give you points. You can make a game where the goal is to touch 5 friendly targets, collecting 1000 points for each target when you touch it. When you get to 5000, you win and the game is over. You will need a variable named POINTS. When you touch a friendly target, you get points:

if( overlap(px,py,20,50, f1x,f1y,50,50) ) { points = points + 1000 ; }

if( points >= 5000) { System.exit(0); }

Checking Collisions - 14 Nov 2011
Checking for collisions between players and robots
 * ROBOTS4**

Using the Keyboard - 10 Nov 2011
Using the keyboard to move a player
 * ROBOTS3**

You might find it useful to read Ch 7 in **Getting Started with Processing**

Moving Robots - 10 Nov 2011
We can make our robots move around. To do that, we need to change the **coordinates** from numbers into variables.
 * ROBOTS2**

More Robots - 7 Nov 2011
and **variables** to clone objects. Round Robots || ||
 * Using **methods**

Quiz and Robot - 3 Nov 2011
Do your quiz. Show the finished program to the teacher. Then start on your homework.


 * Homework : type the program for the robot on pages 34-35**
 * of your printed notes.**

Arcs and Lines and Letters - 31 Oct - Nov 1 2011
Think of a 4 letter word with 4 different letters in it. At least 2 of the letters must have curves (arcs) in them. Write a program to draw the word once using 4 colors. Then write the same 4 letters in a different order, again using 4 colors. It should look like this: ** L O S T ** ** S L O T ** Use strokeWeight to make all the lines thicker than normal.

You have 2 days in class to complete this. If you finish early, practice drawing more letters so that you are fast and efficient, ready for the test on Thursday. Look for tricks. For example, if 2 letters are mirror images, like d and b, is there an easy way to change one to the other?


 * TEST announcement -**
 * We will have a TEST on Thursday 3 Nov.**
 * You will be using Processing to draw some letters**
 * and/or other shapes on the screen. Make sure you**
 * know how to use all the following commands:**
 * line, ellipse, rect, arc, stroke, fill, strokeWeight**

Arcs and Lines and Letters - 28 Oct 2011

 * Today :** Using ARCS and LINES to draw LETTERS

[]
 * Reference :** Chapter 3 in **__Getting Started with Processing__**

about drawing shapes in Processing.
 * Future :** Plan an a **TEST** next Thursday, 3 Nov,

Drawing a House Continued - 26 Oct 2011
Java with Processing

Java with Processing - 24 Oct 2011
1. Start Java with Processing. Download (or copy) Processing onto your computer. Then download the sample program in the notes and start doing the practice exercises listed.

2. Turn in your Daily Bulletin announcement by compressing the folder into a ZIP archive, and then sending an eMail to Dave_Mulkey@fis.edu.

Fading and Zooming - 18-20 Oct 2011
Create an animated Daily Bulletin announcement, using the Plugin-Javascript library functions - Deflate, Reflate, Slide, FadeIn and FadeOut.
 * Due beginning of class on Monday 24 Oct**

Fading and Zooming - 14 Oct 2011
Ads and Announcements

Collisions - 29 Sep 2011
Bouncing and colliding

Bouncing - 28 Sep 2011
The teacher will show how to turn the wrap-around page into a Bouncing page, where the images bounce off the sides in the opposite direction. Look at this page: Bouncing You can also look at the JavaScript code inside the page. Add commands to make all 4 images bounce around the screen.

Animation with Coordinates - 27 Sep 2011
Moving with Coordinates

Animation in JavaScript - 19-23 Sep 2011
Sliding with Javascript Plug-in Library

Your goal is to make a page with many objects "flying" around in various directions. Next week, you will learn how to respond sensibly when two objects collide with each other.


 * EXTRA** : Gamers Solve Retrovirus Problem

@http://www.sciencedaily.com/releases/2008/05/080508122520.htm

@http://www.sciencedaily.com/releases/2011/09/110918144955.htm

Using GIMP - Mon 13 Sep 2011
Today's assignment - clickable faces.

Using GIMP - Mon 12 Sep 2011
Make sure you leave your Multiple-choice quiz on your computer, stored under your name.


 * Today's assignment**- Investigate GIMP

Figure out how to create a .png image with a face surrounded by a **transparent** background.

You might find the following tutorials helpful: []

Multiple Choice Quiz - 5-9 Sep 2011
You will be creating a multiple-choice quiz with pictures - it will look something like this: || Here are the instructions.
 * What is world's most popular fruit?

More MouseOver Events - Fri 26 Aug 2011
You can make some very interesting **.onmouseover**effects by doing a bit of clever work with a graphics editor. For example, have a look at this site: []. The faded pictures are created with a graphics editor, like GIMP.

The teacher will show you how to use GIMP to add some EFFECTS to an image, so you can create a more interesting rollover effect.

MouseOver Events - Thu 25 Aug 2011
The demonstration page has been improved to include ROLL-OVER events. Look at the page and the below. Then add some ROLL-OVER events to your web-page. code magic.onclick = function { window.open("http://www.magicmgmt.com/gary/welcome2/index.html") }

castle.onclick = function { window.open("http://www.mcescher.com/Gallery/gallery.htm") }

castle.onmouseover = function { castle.style.cursor = "pointer" }

magic.onmouseover = function { magic.src = "http://www.allstarpartypros.com/images/magic-hat.jpg" }

magic.onmouseout = function { magic.src = "http://www.magicbob2000.com/resources/Hocus%20plate%20small0003_edited-5.jpg" } code

Writing JavaScript - Wed 24 Aug 2011
If you tried putting a link onto one of your pictures, you may have found that this causes problems in Seamonkey. But we can use **JavaScript** to create the links and there won't be any problems. Read these notes about how to create an **onclick** event handler in JavaScript.

Writing HTML - 22 Aug 2011
Assignment : [|Writing HTML]

Unfortunately, BlueGriffon seems to have some unexpected bugs. We will switch to Seamonkey. It's a bit older, and doesn't have quite so many features, but it is a bit easier to use and should cause fewer problems. You may continue using BlueGriffon if you wish, but Seamonkey is recommend.

You can download Seamonkey for Linux, Windows or the Mac at this web-site:

Pictures as numbers - 19 Aug 2011
Pictures as numbers - typing coordinates

First Day of Class - 17 Aug 2011
Welcome to **Graphics Programming**. Here is a brief summary of the course. > Javascript and Java, as well as using standard editing tools for web-pages and images > followed by practical work using these new idea
 * **Expectations** - learn as much as you can each day by working energetically and cooperatively.
 * **Topics** - designing and constructing graphic displays, mostly via programming languages including
 * **Assessment -** 2/3 project work, 1/3 written quizzes and tests
 * **Instruction -** most classes will start with a 15 minute presentation of new concepts/techniques,
 * You can learn more details by reading the Graphics Programming Course Overview


 * Assignment (today and tomorrow) **

We will be using **Ubuntu Linux**, **BlueGriffon editor** and **Firefox Browser** in class most of the time. You should do the following assignment today : dragable pictures in BlueGriffon

> > >
 * Boot Ubuntu Linux, run BlueGriffon and create a page with 3 overlapping pictures