Processing ?'s

Apprentice
Posts: 8
Joined: 2006.10
Post: #1
Hello,

Below is a post I left on the Processing Forum which doesn't seem to get as much traffic as this one.
Can anyone help me figure this out?
Thanks for your help,
d ward

I’m new to this forum. Someone at the idevgames forum suggested I try Processing as a programming tool. Â*

Just a quick intro: I’m a teacher in Iowa and have been using Metal BASIC with my students and to develop lesson specific software. Â*However, with newer OSX machines the graphic elements no longer work properly, thus the search for a new programming tool.

I have studied programming (Pascal), but never worked witih object oriented programming.
I’m having some trouble understanding how to set up subroutines, how global and local variables work, how to pass variables to subroutines etc.

If someone would be willing to help me out with this I would really appreciate it.

Here’s some code I’ve been playing with for a statistics program where kids try to find the percentages of colors of M and Ms in a bag.

I’d like to know how to break it up into subroutines.

Thanks for you time and any help you can give me,
Dennis Ward
Tri-County School
Thornburg, IA


size (800,600);

//The graphics below are in my data folder
//I want the array MandMs to be used globally or be
//passed to subroutines that need it.

PImage Green,Yellow,Red,Blue,Brown,Check;
Red = loadImage("Red.jpg");
Green = loadImage("Green.jpg");
Blue = loadImage("Blue.jpg");
Brown = loadImage("Brown.jpg");
Yellow = loadImage("Yellow.jpg");
Check = loadImage("Check.jpg");
PImage[] MandMs = new PImage[7];
MandMs[1]=Red;
MandMs[2]=Green;
MandMs[3]=Blue;
MandMs[4]=Brown;
MandMs[5]=Yellow;
MandMs[6]=Check;

//I want this to be a subroutine that has access to the array MandMs

Â*for(int i=0; i<800; i=i+50) {
Â*for(int j=0; j<600; j=j+50){
Â* Â*int m = round(random(4))+1;
Â*image(MandMs[m], i, j);
Â*}
}
Quote this message in a reply
Moderator
Posts: 1,140
Joined: 2005.07
Post: #2
Subroutines, or functions, aren't part of object oriented programming. Instead, it's part of procedural programming. Object oriented programming is where you have classes, each of which can contain data and functions, which are completely contained. You can then create an object from that class, and use it as you would any other type, but there are also operations you can do with it based on the functions.

That said, what you have here doesn't require object oriented programming at all. In order to implement this, you'd want to have MandMs be a global variable, and you only need it of size 6. In your main function, or in another function you call, you could then just set the indices 0-5 directly to the images. (ex: MandMs[0] = loadImage("Red.jpg")Wink You could then just call the function with your loops, which would have access to MandMs since it's a global variable. (also, with your indices going from 0-5, you won't need to add 1 to your random number) If you're a bit more specific on which language you're using, I (or someone else) can provide some sample code.
Quote this message in a reply
Apprentice
Posts: 8
Joined: 2006.10
Post: #3
akb825,
Thanks for getting back to me.
I'm using the "language" Processing 0118.
A user named diordna on this board suggested it as an alternative to METAL.
Again, thanks for any help you can give me,
d ward
Quote this message in a reply
Moderator
Posts: 680
Joined: 2002.11
Post: #4
EDIT 6:01pm EST: Fixed slight bug.

Since I pushed you into this in the first place, I think I'd better help you out. Here's a program that will draw X M&M's in a row, with extensive extra information.

Paste this into Processing to get the nifty syntax coloring. To use images, make a new Sketch, go to the sketch's folder in the Finder, create a new folder in the sketch folder called "data," and place your images in there.

If your images are in a format which is not PNG, then change the last bit of line 36 (look in bottom left of Processing IDE for line number) to whatever the extension of your images is.

Code:
int numCandies = 4; //number of M&M's, change at will
int numCandyTypes = 6; //number of available colors

PImage[] candies; //This is like "dim". Don't set its value immediately.

  /*
  Function structure is RETURN_TYPE, FUNCTION_NAME(parameters){...}
  Parameters are defined like "type X, type Y"
  for example, the function addIntegers() would look like this:
  int addIntegers(int x, int y){
    return x+y;
  }
  
  This is the Setup function, which Processing calls immediately after
  executing the above code. This is where you set the values of your
  globals. Processing has a few functions you can define which it will
  call at certain times. Examples include draw(), mousePressed(), and
  keyPressed().
  */

void setup(){
  candies = new PImage[numCandyTypes];
    /*
    The following statement is the equivalent of FOR/NEXT in BASIC. Here's what each part does:
    for(a variable = starting value; repeat while this condition is true; do this each step){...}
    int i=0 is our variable, which we define within the statement.
    i < numCandies is that the condition which is tested each iteration.
    i++ is like saying i = i + 1, which you could also say. ++ is shorthand for "add 1."
    In a similar vein, i += 1 is the same, because "i +=" is short for "i = i +"
    The same shorthand applies to -=, *=, and /=.
    */
  for(int i=0;i < numCandyTypes;i++){
    //This code requires that you name your images "candy#.png". It takes fewer lines
    //than loading each separately-named image, and allows you to easily add more colors.
    //I say "(i+1)" because I is going 0 to 5, not 1 to 6.
    candies[i] = loadImage("candy"+(i+1)+".png");
  }
  
  //This line sets the size of the window.
  //the ".width" and ".height" parts are called "fields" of the PImage object type.
  //It's almost like a sub-variable. The type "int" is, in itself, an object.
  //What I'm doing here is making the window just as wide as it needs to be to fit
  //all images on it.
  size(candies[0].width * numCandies, candies[0].height);
  
  background(255,255,255); //Make the background white
  drawRandomCandies();
}

//This is the draw() function, which is called every frame the computer updates the screen.
//This is where you normally put all of your drawing code. But in our case, nothing changes
//after the initial deciding of the randomness, so we can just leave it empty. But if we
//leave it out, nothing will draw.
void draw(){
}

//This function takes an X value as a parameter so it can draw
void drawRandomCandies(){
  for (int i=0; i < numCandies; i++){
    //Choose a random number between 0 and numCandies-1
    //random() returns a variable of type Float, but array indexes need an Int, so
    //we say "parseInt" to turn it into an integer.
    int candyToDraw = parseInt(random(0, numCandyTypes-1));
    //Draw that candy
    image(candies[candyToDraw], i * candies[candyToDraw].width, 0);
  }
}

Without comments, that's only 24 lines long. Pretty good, eh? If you have any more questions, feel free to ask. I seem to be helping a lot of new people lately, which is just fine with me.

My web site - Games, music, Python stuff
Quote this message in a reply
Nibbie
Posts: 1
Joined: 2010.11
Post: #5
And here's my commentless implementation of Diordna's suggestion. It follows the same flow as Diordna's code (well, it *is* Diordna's code) so the comments should basically be the same except mine draws colored circles rather than using images. This will allow you to see if the program does what you want before editing Diordna's code to work to your exact specifications.

Code:
int numCandies = 50; //number of M&M's, change at will
int numCandyTypes = 6; //number of available colors

color[] cols=new color[numCandyTypes];

PImage[] candies;

void setup(){
  colorMode(HSB,255); //set the color mode to Hue Saturation Brightness to get bright colors
  
  candies = new PImage[numCandyTypes];

  for(int i=0;i < numCandyTypes;i++){
    cols[i]=color(random(255),255,255); //make a random hue at full saturation and brightness
  }
  
  size(10 * numCandies, 10);
  
  background(255); //Make the background white
  drawRandomCandies();
}

void drawRandomCandies(){
  for (int i=0; i < numCandies; i++){

    int candyToDraw = int(random(0, numCandyTypes-1));

    stroke(1);
    fill(cols[candyToDraw]);
    ellipse(i*10+5,5,10,10);
  }
}
Quote this message in a reply
Apprentice
Posts: 8
Joined: 2006.10
Post: #6
Thanks guys,
I'll see what I can do with your help.
As a teacher, it's interesting to look at the process from the other side.
d ward
Quote this message in a reply
Oldtimer
Posts: 834
Joined: 2002.09
Post: #7
Running the risk of hi-jacking the thread, I'm happy to see a teacher here! I'm studying for my joint Master/teacher degree, and we've spent a lot of time debating how to use ICT implements in education. If you have the time, I'd love to hear how you're using it, what your colleagues think of it, how students respond...

Thanks in advance! Smile
Quote this message in a reply
Moderator
Posts: 680
Joined: 2002.11
Post: #8
I hope he's not just using it to draw virtual marbles out of a virtual bag. I'd much rather see a teacher start writing programs for physics demonstrations. Processing has a really nifty physics library.

My web site - Games, music, Python stuff
Quote this message in a reply
Apprentice
Posts: 8
Joined: 2006.10
Post: #9
Guys,

Once again, thanks for the help. I’ve started translating my latest program from METAL to Processing 0118 and so far am having success.

The apps I have done in the past have always centered around very specific math topics and usually have some sort of game or against the clock theme. The kids seem to respond to this as to most of them a computer is not a tool, but a gaming device.

For example:

What’s your Sine - A tool for internalizing the trig function values for pi/6, pi/4, pi/3 etc. It has 4 levels where you transition from getting a unit circle with color coded triangles that match the keys for 1/2, sqrt(3)/2 etc. and finally gives just the function and you pick the correct value.

Race too One - Teaches place value for decimal numbers. Ten digits are given that can be placed in .x, .0x, .00x positions with the goal to get them to all add up to exactly 1.

Percent Finder - Increases number sense for percentages. Regions in the shape of circles, squares and rectangles are partially filled and the user has to estimate the percentage.

Dice Roller - A virtual manipulative with a red and blue dice that keeps a log of the numbers thrown on each dice.

Plus some apps for little kids to learn how to use the mouse and where it gives a digit and they click on the correct name or a name and they click the correct digit.

The other staff members are always amazed at the programs* and the other math teachers incorporate them into lessons. *Of course, many of them have trouble getting their e-mail.

I’ll be glad when I can write my apps with Processing 0118 as it exports them to both OSX and Windows platforms. So far I have just been able to write for the Mac. I hope to someday start sharing the apps with other teachers as “DonationWare” so the Mac only limitation makes this difficult. (Note: I work in a district where 47% of the kids get free or reduced lunch so generating some $’s for technology or the math department this way would be a great help to our kids)

I will investigate the physics library someday, sounds interesting.

Thanks again for your time, help and code,

Dennis Ward
Tri-County School
Thornburg, IA
Quote this message in a reply
Oldtimer
Posts: 834
Joined: 2002.09
Post: #10
Dennis,
Thanks for the examples - they sound like a terrific way to internalize knowledge. I'd like to recommend the GeoGebra application, it's a Java application that is aimed towards giving interactive blackboard presentations. I'm not sure if it is up your alley, but the examples provided are pretty inspirational. Smile
Quote this message in a reply
Post Reply 

Possibly Related Threads...
Thread: Author Replies: Views: Last Post
  Processing tutorial for beginners stevejohnson 5 6,092 Jul 11, 2008 09:29 PM
Last Post: stevejohnson
  Another Processing 0118? (MouseRoutine) wardd13 6 3,162 Oct 15, 2006 11:57 AM
Last Post: wardd13
  Anybody here heard of Processing? sealfin 2 2,772 Oct 5, 2004 05:56 AM
Last Post: Taxxodium