Computer Science (CS) - Spring 2011 - Processing - Multimedia

Mr. Bujak

  • Few of the links below are broken: my Pogoplug™ personal cloud solution is no longer connected to a 24-hour/day ISP.
  • I unfortunately did not update this page the last 1.5 months of this course since my time was spent with the student teams on their individual and group projects.

In an effort to be totally transparent and to support students 24/7/365.25, this volunteer-maintained and optional area is meant to be a collection of reflections and an activity log for computational and algorithmic thinking discussed and practiced during the Spring 2011 semester "Introduction to Computer Science" 0.5 credit elective course at Hope Charter High School.

Computer Science Syllabus Spring 2011 Semester


NEWS:
3/10/2011: Mr. Bujak has been informed that RAPTOR will be installed on our school computers. Although RAPTOR is not a "straight up" programming language, it is a great tool to learn how to correctly program via flow charting to craft software. RAPTOR is very good at Illustrating the lifetime (life cycle) of variables as code executes. You can single step or control the execution speed and watch the variables being modified and change focus/scope. RAPTOR is amazing at illustrating recursion with its illustration of the program (LIFO) stack. RAPTOR was never installed for students to use, but Mr. Bujak demonstrated some computer concepts using RAPTOR on his personal computer.

Processing.jpg
INFO:

Processing - A Programming Handbook for Visual Designers and Artists, by Casey Reas and Ben Fry, The MIT Press, 2007
ISBN-10: 0-262-18262-9, ISBN-13: 978-0-262-18262-1
Link to all chapters
Search below for the Processing "Table of Contents"
All assignments will also have a reference link here in the applicable PowerSchool Gradebook daily assignment description.


NOTES:**
  1. These files are on my "personal cloud" using my personal Pogoplug™ hardware and my personal 2TB Seagate Free Agent GoFlex drive.
  2. I will have redundant links to the CS Unplugged activities/videos; including my Pogoplug™ hardware - here <<INSERT INK>>
  3. 4 C's of Technology Integration - Communication, Computing, Critical Thinking, and Creativity
  4. The LEGO Education 4C learning approach consists of four phases: Content, Construct, Contemplate, Continue.

TEAM PROJECTS (summary):

Project Name - Team Name - Team Member(s) - details are on the individual project pages.
Since the Processing language is Java, I should create Applets in a Webpage -and-standalone EXEcutables of these animations. (when I have time).

Flowers - Team Juicy - Tyler, Aaliyah
Typography - Team Little - James
Similating smoke - Team AJ - Antwan and Jazmere

IFS Fractals- Team IFS - Kevin and Shafi -
recursive drawing (IFS fractal drawing):
http://recursivedrawing.com

Fireworks - Team Fire - Johnvonna
Stars - Team - Rayonna and Kahara now Chad
Fireball - Team Fireball - Patrick
Pacman - Team Pacman - Orbin and Cory (formerly of Fireworks)
Pong - Team P - Joel
Hearts - Team H - Tyneesha


ADDITIONAL CODE THAT MAY HELP IN PROJECTS (developed by Mr. Bujak as demands arise in team projects): (SPLIT THIS COMMON CODE OUT INTO A SEPARATE PAGE)
  1. MouseX and MouseY are great, but what do you do if you need more than 2 course inputs --> go to the keyboard. This code example uses lowercase (r,g,b,o) to lower the (red, green, blue, opacity) and used the uppercase (R,G,B,O) to increase the (Red, Green, Blue, Opacity)
  2. calcRegularPolygonVertices() - A function that returns an array of equally space (x.y) coordinate pairs around a circle of radius r. This is needed by the following projects: Typography, Flowers, Stars, maybe Hearts
  3. Please incorporate GUI components to easily change your program's parameters - see 435.chap52.Input 7 - Interface.pdf - scribd.com, Pogoplug public link,Pogoplug Embedded direct link - it has: button class, check box class, radio buttons class, scrollbar class.
  4. audio, sound - I will write a simple sound output, then "attach" it to the bouncing ball program we did in class when the ball hits a wall
  5. sliders - horizontal, vertical (maybe also bind the slider to keys; see [1])


[1]
Code for keyboard processing (not with events or event handling)
patterned after 223.chap28.Input 2 - Keyboard.pdf - Pogoplug public link - Pogoplug embedded direct link -
/* handling keyboard keys - not using events and event handling
 * Notice the serious problem in receiving multiple keystrokes.
 * Need to debounce the keys, but easier to use events and event handling.
 * Mr. Bujak
 */
 
PFont font;
 
void setup() {
  size(400,130);
  // you will have to create a font and change this file name:
 font = loadFont("Dialog.bold-72.vlw");
  textFont(font);
  smooth();
}  // Setup()
 
void draw() {
  background(204);
 
 if (keyPressed == true) {
    if ((key >= 32) && (key <= 126)) {
 println("ASCII char " + key);
      text(key,28,75);
    }
    else if (key == CODED) {
      print("ASCII control char ");
      if (keyCode == UP) {
 println("UP");
        text("UP",28,75);
      }
      else if (keyCode == DOWN) {
 println("DOWN");
        text("DOWN",28,75);
      }
      else if (keyCode == LEFT) {
 println("LEFT");
        text("LEFT",28,75);
      }
      else if (keyCode == RIGHT) {
 println("RIGHT");
        text("RIGHT",28,75);
      }
      else if (keyCode == ENTER) {
 println("ENTER");
        text("ENTER",28,75);
      }
      else if (keyCode == CONTROL) {
 println("CONTROL");
        text("CONTROL",28,75);
      }
      else if (keyCode == ALT) {
 println("ALT");
        text("ALT",28,75);
      }
      else if (keyCode == SHIFT) {
 println("SHIFT");
        text("SHIFT",28,75);
      }
      else {
 println("not trappped");
        text("____",28,75);
      }
    }  // key == CODED
 } // keyPressed
}  // draw()
the embedded movie:

the movie link: keystrokesNoEvents.mp4

Now we can debounce the keyboard with events.
Simply take the code and put it into a keyPressed() event handler.
patterned after 229.chap29.Input 3 - Events.pdf - Pogoplug public link - Pogoplug embedded direct link -
/* handling keyboard keys - using events and event handling
 * Keys are debounced because events are guaranteed once.
 * Mr. Bujak
 */
 
PFont font;
 
void setup() {
  size(400,130);
  // you will have to create a font and change this file name:
 font = loadFont("Dialog.bold-72.vlw");
  textFont(font);
  smooth();
}  // Setup()
 
void draw() {
  background(204);
}  // draw()
 
// ======================
 
void keyPressed() {
 if (keyPressed == true) {
    if ((key >= 32) && (key <= 126)) {
 println("ASCII char " + key);
      text(key,28,75);
    }
    else if (key == CODED) {
      print("ASCII control char ");
      if (keyCode == UP) {
 println("UP");
        text("UP",28,75);
      }
      else if (keyCode == DOWN) {
 println("DOWN");
        text("DOWN",28,75);
      }
      else if (keyCode == LEFT) {
 println("LEFT");
        text("LEFT",28,75);
      }
      else if (keyCode == RIGHT) {
 println("RIGHT");
        text("RIGHT",28,75);
      }
      else if (keyCode == ENTER) {
 println("ENTER");
        text("ENTER",28,75);
      }
      else if (keyCode == CONTROL) {
 println("CONTROL");
        text("CONTROL",28,75);
      }
      else if (keyCode == ALT) {
 println("ALT");
        text("ALT",28,75);
      }
      else if (keyCode == SHIFT) {
 println("SHIFT");
        text("SHIFT",28,75);
      }
      else {
 println("not trappped");
        text("____",28,75);
      }
    }  // key == CODED
 } // keyPressed
} // keyPressed event handler
the embedded movie:

the movie link: keystrokesWithEvents.mp4


[2]
This is the core skeleton with code to drive the real vertices generating function:
void setup() {
  size(200,200);
  smooth();
 
  float[] data = calcVertices(4,200);
 
  for (int i = 0; i < data.length; i+=2) {
 println("(" + data[i] + "," + data[i+1] + ")");
  }
 
  //draw lines just for fun, cleaner and more intuitive to use
  //  beginShape() and endShape():
  /*
  for (int i = 0; i < data.length-2; i+=2) {
   line(data[i], data[i+1], data[i+2], data[i+3]);
   }
   */
 
  fill(color(random(0,255),random(0,255),random(0,255)));
 
  beginShape();
  for (int i = 0; i < data.length; i+=2) {
    vertex(data[i], data[i+1]);
  }
  endShape(CLOSE);
  //noLoop();
} // setup()
 
 
void draw() {
 
 float[] data = calcVertices((int)random(3,8),200);
 
  fill(color(random(0,255),random(0,255),random(0,255),255));
 
  //noStroke();
 
  beginShape();
  for (int i = 0; i < data.length; i+=2) {
    vertex(data[i], data[i+1]);
  }
  endShape(CLOSE);
}  // draw()
 
// ======================
 
float[] calcVertices(int nV, float r) {
  float d[] = new float[2 * nV];  // {x0,y0,x1,y1,x2,y2,x3,y3, ...}
  for (int i = 0; i < 2*nV; i+=2) {
    d[i] = r * random(0,1);
    d[i+1] = r * random(0,1);
  }
  return d;
}
 
void keyPressed() {
  noLoop();
}



[3]
COMING SOON.
IDEA: add scroll bars to the above for red, green, blue, and opacity. Additionally scroll bar for number of vertices, radius, ...

[4]
COMING SOON.



TOPICS NOT DISCUSSED EXPLICITLY IN CLASS:
Weigh in with what you would like to see sooner than later.
nomenclature: "direct topics - subordinate topics" (note separation by hyphen)
  1. recursion as it relates to program flow (tail, head, self, indirect) - demo with RAPTOR - recursion can also apply to data types - Droste effect -
  2. libraries -, packages typically stored in compressed jar files, javadocs (and more) - leverage software that others already wrote
  3. sound/audio - using "minim" library: FFT, etc.
  4. parsing -
  5. images - vector vs raster
  6. image processing - pixel manipulation with math, convolution (really cool, conceptually easy, mathematically intensive)
  7. advanced drawing - drawing stars, 5-pointed, multi-pointed, various thickness, nautical stars - show Mathematica code
  8. Finch robot - personal - On-board features include:
    1. Light, temperature, and obstacle sensors
    2. 3-axis accelerometer
    3. 2 wheels on 2 independent motors
    4. Buzzer
    5. Full-color beak LED (3 color based on tilt)
    6. Pen mount for drawing capabilities
  9. AppInventor - programming Android devices (Dr. Paula Matuzek, Villanova University)


TEAM PROJECTS (detail):

I strongly recommend you work in a team of two.
No teams greater than 2 students ... no exceptions.
Tell me your ideas and team - due Friday, April 29, 2011 in email to me.
Here is a protype of your email due Fridya, April 29, 2011.

TO: ebujak@hopecschool.org
FROM: <<one of your team member's email address>>
CC: <<the other team member's email address>>
SUBJECT: 2011 CS Project - John Smith and Samantha Jones (team JSSJ) - 2-D Racquet Ball
BODY:
[1] 2-D Racquet Ball
[2] Team: John Smith and Samantha Jones (Team JSSA)
[3] Explanation: Sort of like pong, but only one paddle. User controls a paddle to keep the bouncing ball in a 2-D rectangular box with 3 solid sides. The user controlled paddle moves along the open box's edge. Goal is to keep the bouncing ball in the rectangular box.
[4] Input(s):
[4a] keyboard - to program settings like paddle length, ball size, ball speed, number of balls, etc
[4b] finch robot - use Finch's built in accelerometer to control the paddle up/down or side-to-side movement.
[4c] gamepad - moving paddle
[4d] mouse/touchpad - moving paddle
[5] Outputs(s):
[5a] console - text diagnostics
[6a] sketch area - main game action, 3 walls, user controlled moving paddle
[6b] advanced: maybe write some game values to the sketch area using PFont class - need to dedicate an area of the sketch ares for printable text
[6] Random thoughts:
[6a] ball should probably always start moving away from pattle at a random angle (give the player a chance!), maybe the ball should launch "out" of the paddle as a result of hitting the space bar?
[6b] nice to maybe accumulate some game statistics: # of paddle hits, # of wall hits, etc.
[6c] all calculations should NOT be absolute, they should be derived from the window's "height" and "width"
[6d] paddle should initially start in the middle and after a miss remain in the last user position
[6e] user selectable background color
[6f] user selectable speeds: paddle sensitivity (velocity),
[6g] user selectable paddle length - probably a % of the opening, initial allowance [10%..90%] of opening
[6h] 2 paddles - what are we thinking here? Then the paddles should be different colors.
[6i] more than 1 ball - different colors
[6j] the contained area will be a rectangle set by size(width, height) - other shapes will need advanced math
[6k] allow multiple rounds. A round starts with a launch of a ball and ends when the ball passes the paddle.
[6l] play very small sound clips: when a ball hits a wall, when the ball hits the paddle, when the ball passes the paddle

  1. There are mandatory weekly updates that you need to email me and CC your team mate by 5:00 PM each Friday.
  2. If I do not receive an update, your team will receive a 0 (zero) - no exceptions.
  3. For each week FORWARD the previous email ... so we can all appreciate your progress. We will also have all previous attachments attached.
  4. For each week attach the current code (an ASCII text, .TXT, file is probably best)..
  5. Code must contain documentation such as your team name, project name, at the top, but also you must describe your program statements/flow if it is not obvious, especially if you are doing something unique or intricate.
  6. Name your variables and objects appropriately to represent reality, not a1, bb, cej, etc.
  7. Your team and your project are graded on progress, process, and product. I will be grading you daily, not just on these weekly emailed published updates. Doodle, draw, do math, save everything even your mistakes - I will ask for them continuously and these artifacts will be a great portfolio for your masterpiece when it is finished.
  8. Remember that I will be collecting and aggregating the emails, but also publishing each of your teams materials including any pictures and/or videos of your program inputs/outputs. This will hopefully inspire other teams and cross-pollinate ideas.
  9. You will be graded contemporaneously on your team's Gracious ProfessionalismTM and CoopertitionTM although we are not competing against anyone or against each other.
  10. I want to help you if you want the help. I can only help you if you help yourself.
  11. I am available before school, after school, during 5th period, during 8th period. Best to email me your code with your thoughts ... so we can actually point to something to talk about.
  12. Use your digital camera, cell phone, to take pictures of your artifacts, activities, send them along in your email. I will post them. Have fun, but do not slack off.
  13. Keep in mind that you will be able to produce [a] a stand-alone EXEcutable file and also [b] an Applet so you can embed your program in an HTML Webpage.

TEAM PROJECT IDEAS:
  1. http://mathforlove.com/2011/04/penwald-human-algorithm/ - spirograph
  2. AppInventor - programming Android devices. There is an Android device emulator to simulate a device on the screen.
  3. interfacing - high speed photography (as in stopping a bursting balloon), Arduino, Finch robot, ...
  4. Finch robot - become famous and develop 2 classes and submit them to finchrobot.com. You cannot repeat any lesson already submitted. I personally own one Finch robot.
  5. Curve stiching - string art - http://playingwithmathematica.com/2011/04/27/curve-stitching-with-mathematica/
  6. fractals - IFR
  7. create a class that is useful - you must also demonstrate it's usefulness. For example: a Matrix class, a Complex (number) class, etc., that has representative data attributes and commonly useful methods/functions.
  8. network - network monitoring - will need library/package
  9. audio - sound tools and manipulation - will need library/package
  10. create various graphs from univariate/multivariate data - file input for data (CSV is standard), output visual- maybe a GUI to enhance graphic, save the graph as an image file
  11. cellular automata - pixel, rules - http://processing.org/learning/topics/wolfram.html
  12. pure computer science investigations:
    1. searching algorithms - linear, binary, ...
    2. sorting algorithms - bubble, quick, insertion, merge, ...
    3. indexing, keys, hash functions (hashing, hash tables), ...
  13. interfacing - high speed photography (as in stopping a bursting balloon), no shooting of any kind, no sticky exploding soda cans) - I can help with the electronics, but we must first have a camera with a hot shoe pickup so we can send a signal to it to flash.


CLASS LOG and ASSIGNMENTS:

These enumerated assignments are also in PowerSchool Gradebook with details and links.

Link to all chapters <------ use this link!!



MAY 2-6, 2011 - FILE I/O WEEK:

Mon 347 Image 4
Tue 355 Image 5
Wed 367 Output 1 Images -
367.chap45.Output 1 - Images.pdf -
Thu 421 File Export
Fri 427 File Import



FUTURE

page 197 Recursion
page 237 Mouse II



FRIDAY, APRIL 29, 2011

page 229.chap29.Input 3 - Events.pdf - Pogoplug public link - Pogoplug embedded direct link -

OLD:

205.chap26.Input 1 - Mouse I.pdf: mouseX, mouseY, pmouseX, pmouseY, mousePressed, mouseButton

223.chap28.Input 2 - Keyboard.pdf - Pogoplug public link - Pogoplug embedded direct link: keyPressed, key, keyCode
245.chap31.Input 5 - Time, Date.pdf: second(), minute(), hour(), say(), month(), year()

scribd.com, Pogoplug public link, Pogoplug embedded direct link -

NEW:

229.chap29.Input 3 - Events.pdf - Pogoplug public link - Pogoplug embedded direct link -

Link to all chapters



==> THURSDAY, APRIL 28, 2011

We will utilize:
435.chap52.Input 7 - Interface.pdf - scribd.com, Pogoplug public link, Pogoplug Embedded direct link -
Link to all chapters

GUI - Graphical User Interface
WIMP - Windows, Icons, Mouse, Pointer
HMI - Human Machine Interface

page 436 - rollover, button, dragging,
page 442 - check boxes, radio buttons,
page 448 - scrollbar

NOTE:
Since the network not been usable by students for 3 days, I have personally copied the necessary directories with all files to the laptops we will be using:
  1. executable code - "C:/Processing"
  2. book documentation - "C:/Processing - A Programming Handbook for Visual Designers and Artists" - including all chapters
  3. Website image (extracted on 428/2011 at : AM) - "C:/Processing - WIKI"



WEDNESDAY, APRIL 27, 2011
Serious computer network isues, students could do nothing: could not get to any sites other than search engines.

Objects( advanced)
  • multiple constructors (already did a few times)
  • composite objects (Egg class + Ring class --> EggRing class), and
  • inheritance (extends, super) - super class, sub class

We will study inheritance by defining a Spin base class.
We will create a SpinArm class that extends Spin and also define a SpinSpots class that extends Spin. We will utilize:
453.chap53.Structure 5 - Objects II.pdf: scribd.com, Pogoplug public link, Pogoplug embedded direct link -
Link to all chapters

During class, we also added 2 different random colors to the 2 spinning spots, but favored red for Tyler.
SpinSpots spots;
SpinArm arm;
 
void setup() {
  size(100, 100);
  smooth();
  arm = new SpinArm(width/2, height/2, 0.01);
  spots = new SpinSpots(width/2, height/2, -0.02, 33.0);
}
 
void draw() {
  background(204);
  arm.update();
  arm.display();
  spots.update();
  spots.display();
}
 
// ===========================
 
class Spin {
  float x, y, speed;
  float angle = 0.0;
 
 Spin(float xpos, float ypos, float s) {
 x = xpos;
 y = ypos;
    speed = s;
  }
 
  void update() {
    angle += speed;
  }
}  // Spin class
 
// ---------------------------
 
class SpinArm extends Spin {
  float speed;
 
  SpinArm(float x, float y, float s) {
    super(x, y, s);
  }
 
  void display() {
    strokeWeight(1);
    stroke(0);
    pushMatrix();
    translate(x, y);
    angle += speed;
    rotate(angle);
    line(0, 0, 100, 0);
    popMatrix();
  }
}  // SpinArm class
 
// ---------------------------
 
class SpinSpots extends Spin {
  float dim;
  color colour1 = color(random(200,255),random(60,70),random(60,100));
  color colour2 = color(random(220,255),random(80,130),random(60,70));
 
  SpinSpots(float x, float y, float s, float d) {
    super(x, y, s);
    dim = d;
  }
 
  void display() {
    noStroke();
    pushMatrix();
    translate(x, y);
    angle += speed;
    rotate(angle);
    fill(colour1);
    ellipse(-dim/2, 0, dim, dim);
    fill(colour2);
    ellipse(dim/2, 0, dim, dim);
    popMatrix();
  }
}  // SpinSpots class
<<INSERT VIDEO HERE>>



TUESDAY, APRIL 26, 2011 (0.5 hour shortened class due to short Tuesday schedule)
Serious computer network isues, students could do nothing: could not get to any sites other than search engines.

Objects( advanced)
  • multiple constructors (already did a few times)
  • composite objects (Egg class + Ring class --> EggRing class), and
  • inheritance (extends, super)

We will extend our Egg class and extend our Ring class to create a new composite EnnRing class. We will utilize:
453.chap53.Structure 5 - Objects II.pdf: scribd.com, Pogoplug public link, Pogoplug embedded direct link -
Link to all chapters

The following demonstrates a composite object:.
The Egg class and the Ring class are combined to create a new class called EggRing.
The EggRiing class has one Egg object called ovoid and, created in the constructor, and one RIng object called circle, created at the base of the class.
EggRing er1, er2;
 
void setup() {
  size(150, 150);
  smooth();
  er1 = new EggRing(33, 66, 0.1, 33);
  er2 = new EggRing(66, 90, 0.05, 66);
}
 
void draw() {
  background(0);
  er1.transmit();
  er2.transmit();
}
 
// ===========================
 
class Egg {
  float x, y;   // X-coordinate, y-coordinate
  float tilt;   // Left and right angle offset
  float angle;  // Used to define the tilt
  float scalar; // Height of the egg
  // color of the egg
  color colour = color(random(0,255), random(0,255), random(0,255));
 
  // Constructor
 Egg(int xpos, int ypos, float t, float s) {
 x = xpos;
 y = ypos;
    tilt = t;
    scalar = s / 100.0;
  }
 
 Egg(int xpos, int ypos, float t, float s, color c) {
 x = xpos;
 y = ypos;
    tilt = t;
    scalar = s / 100.0;
    colour = c;
  }
 
  void wobble() {
    tilt = cos(angle) / 8;
    angle += 0.1;
  }
 
  void display() {
    noStroke();
    fill(colour);
    pushMatrix();        // <=== Matrix
    translate(x, y);
    rotate(tilt);
    scale(scalar);
    beginShape();   // <--- Shape
    vertex(0, -100);
    bezierVertex(25, -100, 40, -65, 40, -40);
    bezierVertex(40, -15, 25, 0, 0, 0);
    bezierVertex(-25, 0, -40, -15, -40, -40);
    bezierVertex(-40, -65, -25, -100, 0, -100);
    endShape();     // <--- Shape
    popMatrix();         // <=== Matrix
  }
}  // Egg class
 
// ---------------------------
 
class Ring {
  float x, y;         // x-coordinate, y-coordinate
  float diameter;     // Diameter of the ring
  boolean on = false; // Turns the display on and off
  // new data attribute: each ring will have a random color, not transparent
  color colour = color(random(0,255), random(0,255), random(0,255));
 
 void start(float xpos, float ypos) {
 x = xpos;
 y = ypos;
    on = true;
    diameter = 1;
  }
 
  void grow() {
    if (on == true) {
      diameter += 0.5;
      if (diameter > 400) {
        on = false;
      }
    }
  }
 
  void display() {
    if (on == true) {
      noFill();
      strokeWeight(4);     // change for thickness of circle
      stroke(colour,153);  //
      ellipse(x, y, diameter, diameter);
    }
  }
}  // Ring class
 
// ---------------------------
 
class EggRing {
  Egg ovoid;
  Ring circle = new Ring();
 
  // Constructor for EggRing class:
 EggRing(int x, int y, float t, float sp) {
 ovoid = new Egg(x, y, t, sp);
    circle.start(x, y - sp/2);
  }
 
  void transmit() {
    ovoid.wobble();
    ovoid.display();
    circle.grow();
    circle.display();
    if (circle.on == false) {
      circle.on = true;
    }
  }
}  // EggRing class
output:
<<INSERT VIDEO HERE - SERIOUS PROBLEMS AT SCHOOL>>

ANNOUNCEMENT (repeat):
Start thinking about your team project.
I strongly recommend you work in a team of two.
No teams greater than 2 students - no exceptions.

SEE ABOVE FOR A PROTYPE OF THE WEEKLY EMAILS YOUR TEAM WILL EMAIL TO ME.



MONDAY, APRIL 25, 2011

395.chap48.Structure 4 - Objects.pdf: scribd.com, Pogoplug public link, Pogoplug embedded direct link -
Link to all chapters

[A]
Egg class - middle page 404 to middle page 406
pay attention to the display method of class Egg:
[A1] pushMatrix() and popMatrix() - to preserve the state of the frame of reference of the caller since display() method uses translate(), rotate(), and scale()
[A2] beginShape() and endShape() - to close the set of vertices and bezierVertices
[A3] make another constructor with a 5th parameter for the Egg's color, place supporting code to have the Egg use this color to fill it's wobbling shape.
[A4] instantiate another Egg object with a different size, position, and color.
Egg humpty, dumpty, mrEgghead; // Declare the objects
 
void setup() {
  size(100, 130);
  smooth();
  // Inputs: x-coordinate, y-coordinate, tilt, height, color
 humpty = new Egg(50, 100, PI/32, 80, color(255,255,0));
  dumpty = new Egg(65, 110, PI/32, 40, color(0,255,255,80));
 mrEgghead = new Egg(30, 120, PI/32, 70, color(50,22,240,80));
}
 
void draw() {
  background(240);
 humpty.wobble(); // notice that humpty and dumpty are wobbling in sync
 humpty.display();
  dumpty.wobble();
  dumpty.display();
 if (random(0,1) > 0.5) { // mrEgghead wobbles randomly
 mrEgghead.wobble();
  }
 mrEgghead.display();
}
 
// ===========================
 
class Egg {
  float x, y;   // X-coordinate, y-coordinate
  float tilt;   // Left and right angle offset
  float angle;  // Used to define the tilt
  float scalar; // Height of the egg
  color colour; // color of the egg
 
  // Constructor
 Egg(int xpos, int ypos, float t, float s) {
 x = xpos;
 y = ypos;
    tilt = t;
    scalar = s / 100.0;
  }
 
 Egg(int xpos, int ypos, float t, float s, color c) {
 x = xpos;
 y = ypos;
    tilt = t;
    scalar = s / 100.0;
    colour = c;
  }
 
  void wobble() {
    tilt = cos(angle) / 8;
    angle += 0.1;
  }
 
  void display() {
    noStroke();
    fill(colour);
    pushMatrix();        // <=== Matrix
    translate(x, y);
    rotate(tilt);
    scale(scalar);
    beginShape();   // <--- Shape
    vertex(0, -100);
    bezierVertex(25, -100, 40, -65, 40, -40);
    bezierVertex(40, -15, 25, 0, 0, 0);
    bezierVertex(-25, 0, -40, -15, -40, -40);
    bezierVertex(-40, -65, -25, -100, 0, -100);
    endShape();     // <--- Shape
    popMatrix();         // <=== Matrix
  }
}  // Egg class
output (notice egg wobbling out of window frame, notice transparency of the non-yellow eggs, notice mrEgghead wobbling randomly - not in sync with humpy or dumpy)


[B]
Ring class - an array of objects - middle page 407 to page 409
Try this (easy): add color to the Ring class. Make sure the color persists throughout it's growth.
HINTS: probably want to avoid blinding harsh whites which create an annoying flashing strobe effect.
Ring[] rings; // Declare the array
 
int numRings = 50;
int currentRing = 0;
 
void setup() {
  size(100, 100);
  smooth();
  rings = new Ring[numRings]; // Create the array
 for (int i = 0; i < numRings; i++) {
    rings[i] = new Ring(); // Create each object
  }
}
void draw() {
  background(0);
 for (int i = 0; i < numRings; i++) {
    rings[i].grow();
    rings[i].display();
  }
}
 
// Click to create a new Ring
void mousePressed() {
 rings[currentRing].start(mouseX, mouseY);
 currentRing++;
 if (currentRing >= numRings) {
 currentRing = 0;
  }
}
 
// ===================
 
class Ring {
  float x, y;         // x-coordinate, y-coordinate
  float diameter;     // Diameter of the ring
  boolean on = false; // Turns the display on and off
  // new data attribute: each ring will have a random color, not transparent
  color colour = color(random(0,255), random(0,255), random(0,255));
 
 void start(float xpos, float ypos) {
 x = xpos;
 y = ypos;
    on = true;
    diameter = 1;
  }
 
  void grow() {
    if (on == true) {
      diameter += 0.5;
      if (diameter > 400) {
        on = false;
      }
    }
  }
 
  void display() {
    if (on == true) {
      noFill();
      strokeWeight(4);     // change for thickness of circle
      stroke(colour,153);  //
      ellipse(x, y, diameter, diameter);
    }
  }
}  // Ring class
SWF (I will replace this):

NOTICE: If you make the window larger, you will see each ring "disappear" when its diameter grows above 400.

ANNOUNCEMENT:
Start thinking about a project.
I strongly recommend you work in a team of two.
No teams greater than 2 students ... no exceptions.
Tell me your ideas. Maybe we will have an open 10 minutes to just throw ideas out there and brainstorm.

You will have required weekly updates that you need to email me. They are graded on progress, process, and product. I do this for you and me. I want to help you if you want the help. I can only help you if you hep yourself and do something.



SPRING BREAK (week)

<<WE NEED SOME SPRING FLOWERS HERE>>



FRIDAY, APRIL 15, 2011

Objects (Day 4) - so this did turn out to be an "objects" week (well ... 4 days)

395.chap48.Structure 4 - Objects.pdf: scribd.com, Pogoplug public link, Pogoplug embedded direct link -
Link to all chapters

[AA]
Move color data attribute into the Spot class.
Need color (name conflict!) as a data attribute in the Spot class
Make another Spot constructor to support color (keep old constructor - hey, that's overloading!)
Need fill(colour); in display() method
<<NEED VIDEO OF ME MODIFYING CODE - NEAT IDEA!>>
<<NEED VIDEO OF FINAL OUTPUT>>

[BB]
Make an array of rocks (name courtesy of Jazmere) of class Spot.
Array of Spots - middle page 406 to midddle page 406 - program 41-10 which needs Spot class
At top:
Spot[] rocks;        // declare a rocks array
int numRocks = 100;
In setup():
rocks = new Spot[numRocks]; // ask for numRocks many rocks that are of Spot class
for (int i=0; i<rocks.length; i++) {
  rocks[i] = new Spot(78+5*i, 11+2*i, 12*i/4, color (255/12*i,100/15*i,100), i%8, i%5);
}
In draw():
for (int i=0; i<rocks.length; i++) { // note use of length rather than numRocks
  rocks[i].move();                     // in case the array dynamically grows
  rocks[i].display();                  // or shrinks --> robust code
}
<<NEED VIDEO OF FINAL CODE --AND-- FINAL OUTPUT>>

[CC]
bb above is too predictive ... so try using constrained random() values to fill the each spots': x y, diameter, colour, speedX, speedY
x - constrained int of (0+diameter/2 .. width-diameter/2) --> random(0+diameter/2, width-diameter/2)
y - constrained int of (0+diameter/2 .. height-diameter/2) --> random(0+diameter/2, height-diameter/2)
diameter - constrained int of(5,60)
color(0..255, 0..255, 0.255) - maybe throw transparency in there: color(0..255, 0..255, 0.255, 0..200)
speedX - constrained (0.0 .. 5.0)
speedY - constrained (0.0 .. 5.0)

Change the instantiation of the objects line:
rocks[i] = new Spot(78+5*i, 11+2*i, 12*i/4, color (255/12*i,100/15*i,100), i%8, i%5);
to:
rocks[i] = new Spot(random(0+diameter/2, width-diameter/2), // xpos
 random(0+diameter/2, height-diameter/2), // ypos
                    random(5, 60),                            // diameter
                                                              // colour:
                    color(random(0,255),                        // red
                      random(0,255),                            // green
                      random(0,255),                            // blue
                      85);                                      // opacity is 85/255 = 1/3, thus transparency = 2/3
 random(0, 5), // speedX
                    random(0, 5));                            // speedY

Johnvonna, the new kid, hung out after class (free 5th period) and we created this wonderful extension of the above.
HINTS: soft white background, ~2/3 transparent colors - so rocks travel over/under each other, but because of the white background have a pastel like color scheme.
Note that there are 500 of these moving spots, with varying diameters, varying colors. Nice work.
<<INSERT VIDEO HERE>>

EXTRA THOUGHTS - new classes to explore on your own:




THURSDAY, APRIL 14, 2011
WEDNESDAY, APRIL 13, 2011
Objects (Day 3) -

I am not in Wednesday. Enjoy your Bujak-free day.


Avoid the spiders ... they are hungry and bit 4 or 5 students yesterday. Did Tyler transform into Spiderwoman yet?

Start to really think about "Object-Orientation" (OO) .. .the sooner it clicks the better. This is a BIG idea in computer science. The use of OO is ubiquitous and pervasive. OO is a phenomenal way to organize and write/use/re-use code. OO is about encapsulating data and functionality as a cohesive self-contained abstract class that anyone can re-use, like a cookie cutter, to stamp out new objects of that class. Remember PImage and PFont... well they are built-in classes. Now I have not mentioned inheritance, where a class can inherit these data attributes and method functionality, but that is for a future date.

You can read my thoughts [A] and [B] immediately below and also my thoughts [1]-->[7] from the previous day, April 12.
Today, well Thursday, We will be doing [1], [2], [4], [A]
[B] is something you will want to do and have available in your "toolbox" ... hey wait maybe the class should have a method to copy itself - just like arrayCopy() - now that's OO thinking.

We will extend our Spot class and utilize:
395.chap48.Structure 4 - Objects.pdf: scribd.com, Pogoplug public link, Pogoplug embedded direct link -
Link to all chapters

Examine THOUGHTS from yesterday, April 12. Here are some more:
[A]
Another fefature of object-orientation is encapsulation, sometimes referred to as information hiding (data/attributes and functionality/methods). To accomplish this the class should have complete control of the data and it's functionality via it's own methods. most objects have accessor functions (helper functions) that get and set the class data values (generally called getter and setter methods). These are usually prefaced with "get" and "set." For example objectName.getX(), objectName.getColor(), and objectName.setSpeedX(1.75), objectName.setDiameter(24), etc
[B]
How would I copy an class? Maybe something like: objectName2.setSpot() = objectName1.getSpot();
ot maybe; objectName2.setSpot(objectName1.getSpot());

Sample code that has x and y movement via speedX, directionX, speeedY, directionY:
Spot cory;
Spot peter,sidney, gabrielle, rachel;
 
void setup() {
  size(400, 500);
  smooth();
  //noStroke();
 cory = new Spot(43, 50, 60, 5.5, 4.5);
  peter = new Spot(30, 23, 20, 1.5, 15.0);
 sidney = new Spot(45, 11, 20, 4.5, 2.7);
 gabrielle = new Spot(45, 21, 20, 3.5, 1.5);
 rachel = new Spot(78, 11, 20, 3.5, 2.3);
}
 
void draw() {
  background(color(43,69,170));
 cory.move();
 cory.display(color(0,100,255));
  peter.move();
  peter.display(color(0,155,0));
 sidney.move();
 sidney.display(color(0,0,155));
 gabrielle.move();
 gabrielle.display(color(155,0,0));
 rachel.move();
 rachel.display(color(0,255,200));
}
 
class Spot {
  float x, y;
  float diameter;
 float speedX;
 int directionX = 1; // 1 is right, -1 is left
  float speedY;
 int directionY = 1; // 1 is down, -1 is up
 
  // Constructor(s):
 Spot(float xpos, float ypos, float dia, float spX, float spY) {
 x = xpos;
 y = ypos;
 diameter = dia;
 speedX = spX;
    speedY = spY;
  }
 
  void move() {
    y += speedY * directionY;
    if ((y > (height - diameter/2)) || (y < diameter/2)) {
 directionY *= -1;
    }
 x += speedX * directionX;
    if ((x > (width - diameter/2)) || (x < diameter/2)) {
 directionX *= -1;
    }
  }
 
  void display() {
    ellipse(x, y, diameter, diameter);
  }
 
  void display(int c) {
    fill(c);
    ellipse(x, y, diameter, diameter);
  }
}  // class Spot
sample output:




TUESDAY, APRIL 12, 2011
Objects (Day 2) -

395.chap48.Structure 4 - Objects.pdf: scribd.com, Pogoplug public link, Pogoplug embedded direct link -
Link to all chapters
Spot cory;
 
void setup() {
  size(100, 100);
  smooth();
  noStroke();
 cory = new Spot(33, 50, 30, 1.6);
}
 
void draw() {
  background(color(255,255,0));
 cory.move();
 cory.display(color(0,0,255));
}
 
class Spot {
  float x, y;
  float diameter;
  float speed;
  int direction = 1; // 1 is down, -1 is up
 
  // Constructor(s):
 Spot(float xpos, float ypos, float dia, float sp) {
 x = xpos;
 y = ypos;
 diameter = dia;
 speed = sp;
  }
 
  void move() {
    y += speed * direction;
    if ((y > (height - diameter/2)) || (y < diameter/2)) {
      direction *= -1;
    }
  }
 
  void display() {
    ellipse(x, y, diameter, diameter);
  }
 
  void display(int c) {
    fill(c);
    ellipse(x, y, diameter, diameter);
  }
 
}  // Spot class
output video:


Congratulations: objects of class Spot can:
  • move vertically, up and down,
  • have a vertical speed, and
  • bounce vertically off the horizontal edges

THOUGHTS:
  1. For pure entertainment (maybe debugging hint), add a print of the Spot's y position as it moves - consider that this may have side effects: [a] do not want classes to print unless for temporary debugging, [b] what if there are more than 1 Spot ... do you want them all to print?
  2. Extend Spot to move similarly in the horizontal direction. What would we need to do? It might look something like:
  3. Move color into the class Spot. What would we need to do? Remember color supports opacity!
  4. Create a few instances (objects) of class Spot with different starting positions, different speeds, different colors, ... What are some "degenerate" cases? How robust is the code? For example what if the constructor is activated with an x or a y off the screen? Try making the initial y --> height-diameter/2 OR height-10/2+1
  5. Can I have some "boing" sound when it bounces off a wall"? Need a library for this. From Processing menu: Sketch --> Import Library ... --> Minim Audio. This will place import line(s) at the top of your source code. Best hint is to look at the impressive sample code at C:\Processing\examples\Library\Minim (Sound)
  6. Constrain the bouncing Spot(s) in an arbitrary shape - very hard for non-rectangular regions!
  7. Collision of Spot's - advanced, here are some hints: all the same shape - how exactly do you bounce (does speed change as a function of Spot size ratio between the 2 colliding Spots?, direction reversed as a ratio that look like slope - trapping for division by zero), circular (that helps), different radii (not an issue) --> need to use distance formula dist = SQRT[(x2-x1)^2 + (y2-y1)^2] but you need to do this between all Spots - this is a Combinationproblem where order does not matter
    • 1 Spot - 0 distance calculations
    • 2 Spots - C(2,2) = 1 distance calculation
    • 3 Spots - C(3,2) = 3 distance calculations
    • 4 Spots - C(4,2) = 6 distance calculations
    • 5 Spots - C(5,2) = 10 distance calculations
    • 6 Spots - C(6,2) = 15 distance calculations
    • ...
    • N Spots - C(N,2) = __ distance calculations



MONDAY, APRIL 11, 2011
Objects (Day 1) - aggregation of data (fields) and functionality (methods) into an abstract data structure (object) --> object orientation --> yielding: encapsulation (information hiding), abstraction.

You have used primitive data types: int, long, float, boolean which only hold a variable
You have used system classes: String, PImage, PFont which hold variables and methods

395.chap48.Structure 4 - Objects.pdf: scribd.com, Pogoplug public link, Pogoplug embedded direct link -
Link to all chapters

class - is like a cookie cutter or a template to stamp out new object instances
object - an instance of a Class, a particular one. Objects have fields (data) and methods (functions)

The fields (data) and methods (functions) of an object are accessed with the dot operator
  • fuji.color is used to access the value of color inside the fuji object
  • golden.grow() is used to activate (or "call") the grow() methods inside the golden object

constructor - a block of code activated as the object is created.

<< NEED TO POPULATE EACH OF TE INCREMENTAL CODE DEVELOPMENT STAGES WITH CODE SNIPPETS>>

We gradually built up a graphical Spot class. <<MORE INCREMENTAL CODE DEVELOPMENT HERE>>
[1] from no object-orientation:

[2] to incorporating only data into a Spot class:

[3] to incorporating a simple display() method

[4] to incorporating another overloaded display(color) method:

[5] and we were in the middle of creating a special method called a constructor that is activated when a new Spot object is instantiated, but class time ran out:
Spot cory;
 
void setup() {
  size(100, 100);
  smooth();
  noStroke();
 cory = new Spot();
 cory.x = 33;
 cory.y = 50;
 cory.diameter = 30;
}
 
void draw() {
  background(0);
 cory.display(color(255,0,0));
}
 
class Spot {
  float x, y;
  float diameter;
 
 Spot(float xpos, float ypos, float dia) {
 = xpos; // end-of class period bell rang in the middle of typing this assignment. ... Argh!
  }
 
  void display() {
    ellipse(x, y, diameter, diameter);
  }
 
  void display(int c) {
    fill(c);
    ellipse(x, y, diameter, diameter);
  }
}  // class Spot
<<NEED SOME EXAMPLE JING PHOTOS>>

We will pick this up tomorrow, Tuesday.



FRIDAY, APRIL 8, 2011
301.chap37.Data 4 - Arrays.pdf: scribd.com, Pogoplug public link, Pogoplug embedded direct link
Link to all chapters

Arrays (Day 2):
[1] more array functions:
[1a] expand() - patterned after program 33-19
[1b] arrayCopy() - patterned after program 33-20 - arrays values cannot be copied with the assignment operator because array are objects (What is an object? well more on Monday, but we used the '.' operator yesterday with weight.length) - arrayCopy() can be used to copy parts of the array
[1c] explore the other array functions:
Language Reference: www.processing.org/reference

[2] overloading a function (revisit)
[2a] write a function printArray(int [] array)
that prints all elements of the array up to array.length, to the console, separate each int element with a trailing comma and space
[2b] write a function printArray(String [] array)
that prints all elements of the array up to array.length, to the console, place each String element in double quotes and a trailing command and space

[3] write a function that operates on an array - patterned after program 33-22
arrays as function parameters are "pass by reference" - it's a pointer. no new data is created/copied on the stack ... so changes made in the function to the parameter are reflected in the calling routine. Hold this thought. Will this affect recursive calls? What is recursion? Coming soon.

* By end of today, April 9, 2011 school day you must email Mr. Bujak (ebujak@hopecschool.org) your programs for the Exercises #1 and #2 at the bottom of
301.chap37.Data 4 - Arrays.pdf. Extra credit #3 !!!



THURSDAY, APRIL 7, 2011
301.chap37.Data 4 - Arrays.pdf: scribd.com, Pogoplug public link, Pogoplug embedded direct link
Link to all chapters

Arrays (Day 1)
  • provide for a compact method of grouping similar items into a collection that is quickly index'able.
  • collection of homogeneous data types
  • can hold any data type: int, long, float, char, String, boolean, etc.

[1] organization, storage, retrieval
[2] program 33-01 - review beginShape(), endShape(), vertices, closure of the shape
[3] programs 33-02, 33-03, 33-04 - declare, create, assign - can do independently (in this order), or together
[4] Array functions: length(), append() - use in loops

We talked about and coded a linear (1-dimensional) array for the weights of objects which were int data type.
We assigned one weight element at a time and printed one weight element at a time.
We then moved on to assiging the elements in a loop, and then printing them out in a loop.
We then moved to an array of trees of data type String.

<<NEED TO PUT CODE SNIPPETS HERE>>



WEDNESDAY, APRIL 6, 2011 (0.5 hour shortened class due to modified "PSSA schedule")

245.chap31.Input 5 - Time, Date.pdf - in scribd.com
245.chap31.Input 5 - Time, Date.pdf- public link
245.chap31.Input 5 - Time, Date.pdf - embedded direct link

second(), minute(), hour(), millis(),
day(), month(), year()

NEW IDEAS/CONCEPTS for hour(), minute(), second():

[1] numeric dgital clock - program 28-03
nf(intValue, digits) - integer formating, padding to the left with 0s as needed
nf(floatValue, left, right) - floating point number formating, left is number of digits to the left of the decimal point, right is number of digits to the right of the decimal point, padding with 0s as needed.




[2] abstract clock - program 28-04
map(value, low1, high1, low2, high2) - used to convert from one range of numbers to another
The low1 and high1 parameters are the minimum an maximum values of the number's current range.
The low2 and high2 parameters are the minimum an maximum values of the number's new range.

[3] analog clock - program 28-05
cos() - in radians, cos is the horizontal component of a vector (in this case the clock hand)
sin() - in radians sin is the vertical component of a vector (in this case the clock hand)

Also explore day(), month(), year().

<<NEED TO PUT CODE SNIPPETS HERE>>
<<NEED TO PUT VIDEOS of the CLOCKS HERE>>
<<PUT DOWNLOADABLE LINKS HERE FOR 3 STANDALONE EXECUTABLE CLOCKS AND 3 JAVA APPLETS CODE>>



TUESDAY, APRIL 5, 2011 (0.5 hour shortened class due to modified "PSSA schedule")
<--embedded, hard to copy code from this
127.chap17.Math 4 - Random.pdf <-- not really (file is in wikispaces - get Pogoplug to work)

127.chap17.Math 4 - Random.pdf - in scribd.com - appears to be "copy-able"!!!!!

Pogoplug public link URL: http://my.pogoplug.com/share/MzzECjCbqh_X1V1Fbqr3Nw


random(), randomSeed(), noise(), noiseSeed()

random(high) --> returns [0,high)
random(low, high) --> returns [low,high)

Run this numerous times:
print(random(27.0));
Put this "numerous time" behavior into a loop:
for (int i = 0; i< 30; i++) {
  println(i + ":" + random(5.0) + " ");
}
What if I only want integers [0,high):
for (int i = 0; i< 30; i++) {
 int randomInteger = int(random(5.0));
 println(i + ":" + randomInteger + " ");
}
We will learn how to better format numbers soon with the nf() function tomorrow.

What if we want to accumulate the counts of the random integers, the number of 0's, the number of 1's, the number of 2's, the number of 3's, etc.
int numRandom0 = 0;
int numRandom1 = 0;
int numRandom2 = 0;
int numRandom3 = 0;
int numRandom4 = 0;
int numRandom5 = 0;
 
for (int i = 0; i< 30; i++) {
 int randomInteger = int(random(5.0));
 if (randomInteger == 0) {
    numRandom0++;
  }
 else if (randomInteger == 1) {
    numRandom1++;
  }
 else if (randomInteger == 2) {
    numRandom2++;
  }
 else if (randomInteger == 3) {
    numRandom3++;
  }
 else if (randomInteger == 4) {
    numRandom4++;
  }
 else if (randomInteger == 5) {
    numRandom5++;
  }
 
 println(i + ":" + randomInteger);
}  // for
 
println("-----Summary:-----");
println("number of 0's = " + numRandom0);
println("number of 1's = " + numRandom1);
println("number of 2's = " + numRandom2);
println("number of 3's = " + numRandom3);
println("number of 4's = " + numRandom4);
println("number of 5's = " + numRandom5);
A better way to do the above is with an Array data type, which we will hopefully get to on Thursday.

Explore randomness with graphics. Ask for a random number [0,100). If the number is less than 50 then display a line, else display a circle.
// this is program 15-05
float r = random(100);
if (r < 50.0) {
  line(0, 0, 100, 100);
}
else {
  ellipse(50, 50, 75, 75);
}
 

Now for some noise() with program 15-09.
noise() is multi-dimensional randomness.




MONDAY, APRIL 4, 2011 (0.5 hour shortened class due to modified "PSSA schedule")

Functions (Day 2 extended) - 181.chap24.Structure 3 - Functions.pdf
new link
http://my.pogoplug.com/share/hz5pd_eoMwSQP7siu2JqCQ

embedded link
http://my.pogoplug.com/share/hz5pd_eoMwSQP7siu2JqCQW0mmgruBUM81xNhKeOz4B2pGsOY/181.chap24.Structure%203%20-%20Functions.pdf


Function overloading - pages 193-194
Calculating and returning values: pages 194-196

2-day project (extended):
By end of today, April 4, 2011 school day you must email Mr. Bujak (ebujak@hopecschool.org) your programs for the 3 Exercises at the bottom of 181.chap24.Structure 3 - Functions.pdf

Mr. Bujak will walk around room helping students.



FRIDAY, APRIL 1, 2011

Functions (Day 2) - 181.chap24.Structure 3 - Functions.pdf

2-day project:
By end of April 1, 2011 school day you must email Mr. Bujak (ebujak@hopecschool.org) your programs for the 3 Exercises at the bottom of 181.chap24.Structure 3 - Functions.pdf

Mr. Bujak will walk around room helping students; especially the new students ramp up to speed with a immersive mini-crash course.



THURSDAY, MARCH 31, 2011 (0.5 hour shortened class due to modified "PSSA schedule")

ANNOUNCEMENT
YOU MUST EMAIL ME YOUR CODE.
I want to collect them and post them here (output and/or code) since they are starting to be creative and original. Great work.
There will still shots if the program does not draw(); is not dynamic.
There will be movies if the program has dynamic output; uses draw().

Functions (Day 1) - 181.chap24.Structure 3 - Functions.pdf
We have been using system functions every day and we even wrote a few functions.
Functions make redundant code more concise by extracting the common elements and making them into code blocks that can be run many times within the program.
The beauty of using functions is that it’s not necessary to understand how they work. It’s usually enough to know how to use them - to know what the inputs are and how they affect the output. This technique of ignoring the details of a process is called abstraction__.

Now it is time to ramp up your knowledge functions to write/us your own functions.

Start
End
Eyes
21-01
21-04
Xs
21-05
21-12
Leaves
21-13
21-14
Enhanced Eyes program patterned after 21-03, but incrementally added:
[a] color(), background(),
[b] mouse tracking for 3rd eye therefore removed noLoop(),
[c] transparency to 3rd moving eye
void setup() {
  size(100, 100);      // window size(width, height)
  noStroke();          // no borders on images
  smooth();            // smooth the edges of images
  //noLoop();          // refresh every draw()
  cursor(HAND);        // change cursor to finger pointing hand
}
 
void draw() {
  background(180);                         // darker-gray background
  eye(65, 44, color(255,0,0));             // red eye, opaque
  eye(20, 50, color(0,255,0));             // green eye, opaque
 eye(mouseX, mouseY, color(0,0,255,170)); // blue eye, opacity is 170/255 (2/3), so it is a 1/3 transparent
}
 
// ---- USER DEFINED FUNCTIONS BELOW: ------------------------
 
void eye(int x, int y, color c) {
  fill(c);
 ellipse(x, y, 60, 60); // large c colored circle centerd at (x,y)
  fill(0);
 ellipse(x+10, y, 30, 30); // smaller black cirlce shifted to the right, centered at (x+10,y)
  fill(c);
  ellipse(x+16, y-5, 6, 6);   // small c colored circle shifted to upper-right, centered at (x+16,y-5)
}
output video (click the play button):


2-day project:
Within the next 2 class periods (by end of April 1, 2011 school day) you must email Mr. Bujak (ebujak@hopecschool.org) your programs for the 3 Exercises at the bottom of 181.chap24.Structure 3 - Functions.pdf



WEDNESDAY, MARCH 30, 2011 (0.5 hour shortened class due to modified "PSSA schedule")

Continuous (motion, frame rate, frame count) - 173.chap23.Structure 2 - Continuous.pdf
Human persistence of vision, movie frame rates, "jerkiness", motion.
Controlling the speed of program execution, refresh rates, frameRate(), frameCount, noLoop()

By default, frames are drawn to the screen 60 frames per second (fps).
NOTE: say you want to update every 2 seconds, that's 1 frame per 2 seconds = 0.5 fps.

Example code to stop counting after 5 seconds:
void draw() {
 frameRate(1); // 1 frame per second (fps)
 println("1000 - " + frameCount);
 if (frameCount == 5) {
    noLoop();            // stop the draw() refresh/update
  }
}
output:
counting_to_5_a_second_at_a_time.png
<<DO A MOVIE OF THIS TO OBSERVE THE TIMING/COUNTING>>

Email sample code to all 3 Exercises at the bottom of 173.chap23.Structure 2 - Continuous.pdf



TUESDAY, MARCH 29, 2011 (0.5 hour shortened class due to modified "PSSA schedule")

Rotate, Scale (image manipulation) - 137.chap19.Transform 2 - Rotate, Scale.pdf

You probably want to use smooth() due to rotating and scaling side effects such as jagged lines (antialiasing is use)

Can view from 2 frames of reference:
  • the coordinate system frame of reference
  • the object frame of reference

Develop function drawGrid(color) to display grid every 10 units (horizontally and vertically) to help
visualize transformation of coordinate system with translate(), rotate(), scale().

[1], [2], and [3] will use the following code:
int black  = color(0,   0,   0);   // this is a good practice to define variables/constants that ...
int red    = color(255, 0,   0);   // help you create self-documenting code
int green  = color(0,   255, 0);
int blue   = color(0,   0,   255);
int yellow = color(255, 255, 0);
int purple = color(255, 0,   255);
int aqua   = color(0,   255, 255);
int white  = color(255, 255, 255);
 
int greenTrans = color(0, 255, 0, 85); // 85/255 alpha --> ~1/3 opaque or 2/3 transparent
int yellowTrans = color(255, 255, 0, 85);
int purpleTrans = color(255, 0, 255, 65); // some colors are "harder", so backoff the opacity
int aquaTrans = color(0, 255, 255, 85);
 
void setup() {
  smooth();
  background(white);
 
 drawGrid(greenTrans); // draw the original grid
 
  translate(25, 55);                  // we will be changing these 3 lines
  // rotate(PI/8);
  // scale(2.8);
 
 drawGrid(purpleTrans); // draw the transformed grid
}  // setup()
 
// ---- USER DEFINED FUNCTIONS BELOW: ----------------------------------------------
 
void drawGrid(color c) {              // a bad side effect is that the pen color is set to c
  stroke(c);                          // change the color of the "pen"
  for (int x=0; x<=width; x+=10) {    // vertical grid lines
    line(x, 0, x, height-1);
  }  // for
  for (int y=0; y<=height; y+=10) {   // horizontal grid lines
    line(0, y, width-1, y);
  }  // for
}  //drawGrid()

[1] Revisit translate(x,y)
  translate(25, 55);
  // rotate(PI/8);
  // scale(2.8);
_translate.png

[2] Introduction to rotate(angle)
rotate(angle) rotates the coordinate system clockwise, where angle is specified in units of radians (use the constant PI)
Negative angles are permitted.
Pivot point is (0,0) by default.
  // translate(25, 55);
  rotate(PI/8);
  // scale(2.8);
_rotate.png

[3] Introduction to scale(size) -and- scale(xsize,ysize)
scale(size) - uniform magnification, where scale is a decimal, such that scaling of 180% is 1.8, scaling of 75% is 0.75
scale(xsize, ysize) - non-uniform magnification, note that this distorts the coordinate system horizontally or vertically
Note that scale affect everything including the grid lines [from the call to line()]
  // translate(25, 55);
  // rotate(PI/8);
  scale(2.8);
_scale.png

[2a] rotate() with a shape
 drawGrid(greenTrans); // draw the original grid
 
 fill(aquaTrans);
  rect(10, 60, 40, 20);
  rotate(-PI/8);           // rotate negative
 
 drawGrid(purpleTrans); // draw the transformed grid
 
  rect(10, 60, 40, 20);
_rotShape.png

[3a] scale() with a shape
 drawGrid(greenTrans); // draw the original grid
 
 fill(aquaTrans);
  rect(10, 60, 40, 20);
  scale(2.0);              // scale with 2 for easy interpretation
 
 drawGrid(purpleTrans); // draw the transformed grid
 
  rect(10, 60, 40, 20);
also add
size(150, 200);
immediately under
void setup() {
_scaleShape2.png

[_] Can use transformation together.


Mr. Bujak will code, students individually repeat, Mr Bujak will periodically run around the room and check.
You can vary the code a little to your "personal tastes" with color, borders, diagnostics, etc.
Try to ask your neighbors for help if it does not work before you ask Mr. Bujak; 90% of the time it is pure syntax errors attributable to new programmers and/or bad typing.



MONDAY, MARCH 28, 2011 (0.5 hour shortened class due to modified "PSSA schedule")

Translate, Matrices (image manipulation) - 133.chap18.Transform 1 - Translate, Matrices.pdf

translate(x,y) moves the origin from the upper-left to another location [an (x,y,) offset].

Mr. Bujak will code, students individually repeat, Mr Bujak will periodically run around the room and check.
You can vary the code to your "personal tastes" with color, borders, diagnostics, etc.
Try to ask your neighbors for help if it does not work before you ask Mr. Bujak; 90% of the time it is pure syntax errors attributable to incorrect typing.
[1] Introduction to translate(x,y)
int black  = color(0,   0,   0);   // this is a good practice to define variables/constants that ...
int red    = color(255, 0,   0);   // help you create self-documenting code
int green  = color(0,   255, 0);
int blue   = color(0,   0,   255);
int yellow = color(255, 255, 0);
int purple = color(255, 0,   255);
int aqua   = color(0,   255, 255);
int white  = color(255, 255, 255);
 
int purpleTrans = color(255, 0, 255, 85); // 85/255 alpha --> ~1/3 opaque or 2/3 transparent
int aquaTrans = color(0, 255, 255, 85);
 
fill(yellow);
rect(0,5,70,30);
 
strokeWeight(5);
translate(10,30);
fill(aqua);
rect(0,5,70,30);
 
// strokeWeight(0); // this is not the same as noStroke()
noStroke();
translate(10,20);
fill(purpleTrans);
rect(0,5,70,30);
will output:
2011-03-28_1533.png

[2] Preserve state with pushMatrix() and popMatrix(), as in a stack (LIFO queue).
int red    = color(255, 0,   0);
int yellow = color(255, 255, 0);
 
pushMatrix();
translate(25,20);
fill(red);
rect(0,20,66,30);
popMatrix();
 
fill(yellow);
rect(0,20,66,30);
will ouptut:
2011-03-28_1541.png
[3] pushMatrix() and popMatrix() can be nested:
int red    = color(255, 0,   0);   // this is a good practice to define variables/constants that ...
int green  = color(0,   255, 0);   // help you create self-documenting code
int blue   = color(0,   0,   255);
int yellow = color(255, 255, 0);
 
// patterned after program 16-06 in "Processing" book, page 135
pushMatrix();         // outer
translate(20, 0);
fill(red);
rect(0, 10, 70, 20);  // Draws at (20, 10) - NOTE book incorrectly says (20,30)
pushMatrix();         // inner
translate(30, 0);
fill(green);
rect(0, 30, 70, 20);  // Draws at (50, 30) - ...
                      // that'(20 outer push + 30 inner push + 0 call, 0 outer push + 0 inner push + 30 call)
popMatrix();          // inner
fill(blue);
rect(0, 50, 70, 20);  // Draws at (20, 50) - ...
                      // that'(20 outer push + 0 call, 0 outer push + 50 call)
popMatrix();          // outer
fill(yellow);
rect(0, 70, 70, 20);  // Draws at (0, 70) - ...
                      // that'(0 call, 70 call)
with output:
2011-03-29_0845.png

Email sample code to the 2 Exercises at the bottom of 133.chap18.Transform 1 - Translate, Matrices.pdf



FRIDAY, MARCH 25, 2011

Revisit the PImage class object.
Image manipulation, display, Tint, alpha (opacity) - 095.chap12.Image 1 - Display, Tint.pdf

Mr. Bujak already placed these images on C:/Processing subdirectory:
  • "fibonacci-sunflower-300x225.jpg"
  • "pj sam.gif"
  • "pj sam.transparent.gif"
  • "boy_math_lg_clr.transparent.motion.gif"
  • "spiral.png"

Let's work with spiral.png.
These and other sample images at: http://my.pogoplug.com/share/CucWCNLdw2wV3U9hqNm3MA/
A good source of royalty free images is http://pics4learning.com
size(500,500);
PImage imgSpiral; // declare variable imgSpiral as an instance of the PImage object
 
int dullGreen = color(100,128,100); // color() is a nice function
background(dullGreen);
 
imgSpiral = loadImage("spiral.png");
int w = imgSpiral.width; // width of imgSpiral
println("width = " + w);
int h = imgSpiral.height; // height of imgSpiral
println("height = " + h);
 
// put a  point at the bottom-right of the above image:
fill(128,128,0);  // yellow-like color
ellipse(w,h,9,9); // circle
point(w,h);       // single pixel at spiral.jpg's lower-right
 
float aspectRatio;
aspectRatio = w / h;
println("aspectRatio = " + aspectRatio); // why is it 1.0 ? ==> integer arithmetic
aspectRatio = float(w) / h;
println("aspectRatio = " + aspectRatio); // it is 1.04
 
image(imgSpiral, 0, 0); // display imgSpiral
 
// place a smaller scaled image in the bottom-right, tinted blue:
tint(0, 153, 204);  // tint blue
image(imgSpiral, w-80, h-80, 60, 60);
 
// place a smaller scaled image in the top-left, not tinted:
noTint();  // note that noTint() is equivalent to tint(255, 255, 255, 255)
image(imgSpiral, 20, 20, 60, 60);
 
// place a smaller scaled image in the top-right, not tinted, a little transparent:
tint(255, 255, 255, 80);  // no tint is 255,255,255, alpha to 80
image(imgSpiral, w-80, 20, 60, 60);
 
// place a smaller scaled image in the bottom-left, not tinted
tint(255, 255, 0);  // note that the blue colors are suppressed
image(imgSpiral, 20, h-80, 60, 60);
 
// draw the smaller image 7 times, at bottom, varying tint,
// from 0 tint all colors (on left) to full tint all colors (on right)
for (int i=0; i<7; i++) {
  tint (i*255/7, i*255/7, i*255/7);
 image(imgSpiral,70*i, h+10, 60, 60);
}
will output:
2011-03-25_162.png
and console output:
2011-03-25_1634.png
NOTE: spiral.png is NOT a square image, so we distorted the "scaled" smaller images by saying 60, 60.
If we wanted a width of 60, then we should have scaled by 442.0/60.0 = 7.366666
So 60,60 should have been 442/7.3666666, 425/7.3666666 --> 60.0, 57.7 --> 60, 58

Email sample code to the 3 Exercises at the bottom of 095.chap12.Image 1 - Display, Tint.pdf



THURSDAY, MARCH 24, 2011

[1]
Processing (actually Java) can create Applets (platform independent) --or-- stand-alone EXEcutable code (platform dependent).
  • "File" / "Export" - for the Java Applet and supporting HTML (browser) files - also copy image files to the subdirectory where index.html is located .
  • "File" / "Export Application" - for stand-alone EXEcutable files - also copy image files to "application.windows" subdirectory where the .EXE file is located
We will revisit this ability of Java to create Applets and standalone executables later.

[2]
Typography - 111.chap15.Typography 1 - Display.pdf
Follow along and do the same as Mr. Bujak demonstrates and explains some typography manipulation with Processing.
Use the Create Font Tool to create a font: from menu click "Tools" then select "Create Font..." from the drop-down menu
72 points to an inch, Processing font files end in .VLW, Smooth vs non-smooth [like Smooth() and noSmooth() in graphics], be sure to copy the file name (use copy/paste).
Processing fonts are bit (raster) images not vectors, so scaling larger/smaller will "degrade" the image.
size(400,400);
 
PFont font1 = loadFont("AgencyFB-Reg-48.vlw");
PFont font2 = loadFont("Boopee-Bold-48.vlw");
 
background(0,128,128);
 
textFont(font1);
fill(255,0,0);
text("Hello there!",50,50);
 
textFont(font2);
fill(200,50,3);
text("Please go home.",50,100,120,100);
 
textSize(90);
text("Here we go again.",50,300);
will output something like:
2011-03-24_1227.png
Notes: need these fonts on your machine. There are 2 fonts. Fonts have color with fill(). Fonts have size with textSize(). Fonts display at an x,y postion.

Email sample code to the 3 Exercises at the bottom of 111.chap15.Typography 1 - Display.pdf



WEDNESDAY, MARCH 23, 2011

There are many image file formats. Why? Some image file formats only support limited color palette. Some image file formats can support transparency. Some file formats support multiple images. Some file formats support "motion".
  • GIF - <256 colors, support transparency, supports multiple images, supports "motion"
  • PNG - true color, supports transparency
  • JPG - true color, no transparency
  • TIF ro TIFF - ?, no transparency

Make sure the following images are in C:/Processing subdirectory.
  • "fibonacci-sunflower-300x225.jpg"
  • "pj sam.gif"
  • "pj sam.transparent.gif"
  • "boy_math_lg_clr.transparent.motion.gif"
Mr. Bujak already placed these images on C:/Processing.
These and other sample images at: http://my.pogoplug.com/share/CucWCNLdw2wV3U9hqNm3MA/
A good source of royalty free images is http://pics4learning.com

Let me share this final code with you.
In class we will incrementally develop this code with pertinent discourse and a lot of walking around the room to make sure we are on "the same page."
// global variables - want everyone to see these:
PImage imgBackground, imgFollowMouse;
 
void setup() {
  size(500,350);
 
  // only load the images once - that's why these are in the setup() system function
 imgBackground = loadImage("fibonacci-sunflower-300x225.jpg");
 
 // imgFollowMouse = loadImage("pj sam.gif"); // image is not ransparent
 imgFollowMouse = loadImage("pj sam.transparent.gif"); // image is transparent, no motion
 // imgFollowMouse = loadImage("boy_math_lg_clr.transparent.motion.gif"); // image is transparent and motion
 
  cursor(HAND);    // change cursor to the finger pointing hand
}  // setup()
 
void draw() {
  background(255,77,125);     // pink-red background, use Color Selector tool
 image(imgBackground,0,0); // repaint the image over the above pink-red background
 image(imgFollowMouse, mouseX, mouseY); // repaint the last image
 
  // only print the mouse position if it changes:
 if ((mouseX != pmouseX) || (mouseY != pmouseY)) {
 println(mouseX + "," + mouseY); // display the values of the mouse in the console
  } // if
}  // draw()
 
Show Mr. Bujak your code and email it to him.

The output should look like this. This image does not have the finger pointing hand cursor shown in the top-left of the Pajama Sam transparent GIF image that follows the mouse. Notice the mouse position is indicated in the console.
2011-03-23_1256.png
the output video (click the play button):



TUESDAY, MARCH 22, 2011 (0.5 hour shortened class due to modified "PSSA schedule")

OLD:
We know about primitive data types: void, int, long, float, boolean, char.
We know about one object data type: String.

NEW:
Today we will learn about data type conversion and learn what an object is and how to use functions on instances of objects (like a variable).
We will utilize Type Conversion and Objects - 105.chap14.Data 3 - Conversion, Objects.pdf

Primitive data types conversion: "data types" as functions to coerce/convert other data types: boolean(), byte(), char(), float(), int(), str().

There are primitive data types and Objects.
Primitive data types do not have properties.

Object "data types" have properties: String has length which returns the string's length, String also has functionality toUpperCase(), etc.

Watch and code along with Mr. Bujak as he explains and codes. Mr. Bujak will around the room often to see your work and progress (or non-progress).

Object class: String (this is just a sampling)
String msg = "Here we go again!"; // declare and initialize a String variable called msg
println(msg);
 
String msg2 = msg.toUpperCase();  // Objects such as String have functionality ... a String knows how to upper case
println(msg2);
 
int len = msg.length(); // String objects know about its dynamic length
println("The string's length = " + len);
will output:
Here we go again!
HERE WE GO AGAIN!
The string's length = 17

Object class: PImage (this is just a sampling)

Sample images at: http://my.pogoplug.com/share/CucWCNLdw2wV3U9hqNm3MA/ or copy from the USB thumb drives passed around.
"fibonacci-sunflower-300x225.jpg"
"pj sam.gif"
"spiral.png"
Put these images into the C:/Processing subdirectory.
size(500,500);
 
PImage img;
int w, h;  // can declare multiple variables of the same data type together
 
println("fibonacci-sunflower-300x225.jpg"); // "fibo...jpg" has no background
img = loadImage ("fibonacci-sunflower-300x225.jpg");
w  = img.width;
println("width = " + w);
h = img.height;
println("height = " + h);
image(img,0,0);
 
println("spiral.png"); // spiral.png has a transparent background
img = loadImage ("spiral.png");
w  = img.width;
println("width = " + w);
h = img.height;
println("height = " + h);
image(img,0,0);
 
/*
println("pj sam.gif"); // "pj sam.jpg" has a white background, not transparent
 img = loadImage ("pj sam.gif");
 w  = img.width;
 println("width = " + w);
 h = img.height;
 println("height = " + h);
 image(img,0,0);
 */
will output:
fibonacci-sunflower-300x225.jpg
width = 300
height = 225
spiral.png
width = 442
height = 425
 
and
2011-03-22_1757.png
Note that the sunflower JPG image was displayed first and the transparent spiral PNG image was displayed second due to program execution.

EXTRA: Now for the brave at heart, make one of the images moveable as a function of the mouse movement (probably best if this were the transparent image.
IDEAS: need t omake this update often ... so need to put most of this in the draw() system function.

Object class: PFont (maybe in the next 2 days)



MONDAY, MARCH 21, 2011 (0.5 hour shortened class due to modified "PSSA schedule")

char & String data types -
OLD: Last week was all about functions; creating small packets of code that can be called repeatedly with different values to effect a result.
NEW: We know about data types: void, int, long, float, boolean.
Today we will learn about text data types: char and String.
We will utilize 101.chap13.Data 2 - Text.pdf.
Email sample code to the 3 Exercises at the bottom of 101.chap13.Data 2 - Text.pdf.
[1] Exercise 1:
char a0, a1, a2, a3, a4, a5; // declaration
a0 = 'w';  // assignment
a1 = 'o';
a2 = 'n';
a3 = 'd';
a4 = 'e';
a5 = 'r';
 
print(a0);
print(a1);
print(a2);
print(a3);
print(a4);
print(a5);
with output:
wonder
[2] Exercise 2:
String firstName = "Edward"; // declare and initialize String variable firstName
String lastName = "Bujak"; // declare and initialize String variable lastName
String fullName; // declare String variable fullName
 
fullName = firstName + " " + lastName; // contatenate 3 Strings
 
println("Your first name is " + firstName);
println("Your last name is " + lastName);
println("Your full name is " + fullName);
with output:
Your first name is Edward
Your last name is Bujak
Your full name is Edward Bujak
[3] Exercise 3:
String sentence;
String sentence2;
 
// note that String is multi-char and it may contain a single quote char
sentence  = "It's a wonderful day in the neighborhood!";
 
// Use the backslash as an escape character to specify an embedded delimiter, in this case the double quote
sentence2 = "Joe said \"Welcome!\" ";
 
println(sentence);
println(sentence2);
with output:
It's a wonderful day in the neighborhood!
Joe said "Welcome!"



FRIDAY, MARCH 18, 2011

OLD: Code from yesterday should have been something like:
void setup() {
  for (int i=1; i<=20; i++) {     // loop from 1 to 20 inclusive
    println(i + " " + fact(i));   // on each line, print: "i i!"
  }
}  // setup()
 
int fact(int n) {
  int factorial = 1;              // initialize
  for(int i= 1; i<=n; i++) {      // loop from 1 to n (the entered value)
    factorial = factorial * i;    // do product from 1*2*3*4*...*n
  }
  return (factorial);             // return the value of the factorial
}  // fact()
 
NEW:
I posted the code (sample answers) after the Friday, March 18, 2011 class.
[1] Do Program 1 from yesterday. Show Mr. Bujak your implementation of this and email your code to Mr. Bujak.
The code is above! This was a gift.
The problem is that it blows up after fact(16). This is due to the size of the int data type and factorial growing very fast.

[2] Do Program 2 from yesterday. Show Mr. Bujak your implementation of this and email your code to Mr. Bujak.
I gave you the fact2() code below! All you had to do was copy/paste it into your program and change the name code that used to call fact() to now call fact2(); yet another gift.
void setup() {
  for (int i=1; i<=21; i++) {     // loop from 1 to 21 inclusive
    println(i + " " + fact2(i));  // be sure to call the new fact2() function
  }
}  // setup()
 
long fact2(int n) {               // note: int return data type changed to long return data type
  long factorial = 1;             // note: we must also change the factorial to a long data type
  for(int i=1; i<=n; i++) {       // loop from 1 to n (the entered value)
    factorial *= i;               // note: the change from factorial = factorial * i;   note: it's cleaner and faster
  }
  return factorial;               // note: the parentheses are optional on return
}  // fact2()
The smaller int data type was changed to the bigger long data type (both are integers), but it still blows up after fact(20). This is due to the tremendous growth of factorial for larger numbers, not because of our code.

[3] Do Program 3 from yesterday. Show Mr. Bujak your implementation of this and email your code to Mr. Bujak.
Yet another relatively easy task which was to modify the code to only print out the prime numbers from 2 to 100 inclusive in one line. The isPrime() function was provided; use it!
void setup() {
 
  //OLD CODE:
  /* for (int i=2; i<=20; i++) {   // loop from 2 to 20 inclusive
 println ("isPrime(" + i + ") = " + isPrime(i));
   }  // for
   */
 
  // NEW CODE:
  for (int i=2; i<=20; i++) {      // loop from 2 to 20 inclusive
    if (isPrime(i)) {              // if i is prime ...
      print (i + " ");             // then print the prime number with trailing space, no return
    }  // if
  }  // for
}  // setup()
 
boolean isPrime(int n) {           // isPrime(7) returns true, isPrime(9) returns false
  float m = sqrt(n);
  int i = 1;
  while (++i <= m) {
    if((n % i) == 0) {
      return false;
    }  // if
  }  // while
  return true;
}   // isPrime()
The output looks like:
2 3 5 7 11 13 17 19 23 29 31 37 41 43 47 53 59 61 67 71 73 79 83 89 97

[4] Program 4:
Write an isEven() function.
[4a]
1 input ---> int n
return data type ---> boolean (true if n is even, false if n is not odd)
Hint: explore ---> n%2 == 0 means the number n is an even number
[4b]
Call isEven() function in loop from -10 to 10 inclusive, indiicating with a println() statement if the value is even or not.

I explained a simple test for even-ness: divide by 2, if the remainder is 0 then it is an even number. In mathematics this is the modulus operator or simply mod. In many computer languages this is designated with the '%' operator or the mod() function.
void setup() {
  for (int i=-10; i<=10; i++) {    // loop from -10 to 10 inclusive
    if (isEven(i)) {               // if i is even ...
      print (i + " ");             // then print the even number with trailing space, no return
    }  // if
  }  // for
}  // setup()
 
boolean isEven(int n) {            // isEven(8) returns true, isEven(9) returns false
  if((n % 2) == 0) {               // if a number n is evenly divisible by 2 ...
    return true;                   // then the number n is even
  }  // if
  return false;
}   // isEven()
The output looks like:
-10 -8 -6 -4 -2 0 2 4 6 8 10



THURSDAY, MARCH 17, 2011 (0.5 hour shortened class due to modified "PSSA schedule")

OLD: Extended: do-loop (iterate) to generate factorial for any Natural (Counting) number as a function. Code from yesterday is:
[1] Program 1 (from yesterday):
void setup() {
 println ("5!=" + fact(5)); // rewrite this
 println ("6!=" + fact(6)); // rewrite this
 println ("7!=" + fact(7)); // rewrite this
}  // setup()
 
int fact(int n) {
  int factorial = 1;
  for(int i= 1; i<=n; i++) {   // loop from 1 to n inclusive (entered value)
    factorial = factorial * i;
  }
  return (factorial);
}  // fact()
 
NEW:

[1] Program 1: rewrite the above 3 indicated lines to calculate the factorials from 1 to 20 inclusive in a loop. Do you see a problem? Does it blow up?
Show Mr. Bujak your personal code or your development team's (2 students only) code and email your code to ebujak@hopecschool.org (please put in an appropriate Subject line and identify yourself or your team by your real name(s))

[2] Program 2: a "better" factorial, fact2(), shown below returns and works on a long data type rather than an int. The long is a bigger int.
long fact2(int n) {
  long factorial = 1;
  for(int i=1; i<=n; i++) {
    factorial *= i;           // note: the change from factorial = factorial * i;
  }
  return factorial;           // note: the parentheses are optional on return value
}  // fact2()
 
Note: variable scope: this is not the same factorial or the same n or the same i as in fact().
At what factorial n does fact2() blow up?
Show Mr. Bujak your implementation of this and your calling this fact2() function in a loop.
Email your code to Mr. Bujak.

[3] Program 3: Mr. Bujak wrote a function that determines if a number is prime by using the simple "trial division" technique from 2 to sqrt(n). There are many faster, more efficient methods, but this algorithm is conceptually simple. Note the introduction of the boolean data type (true or false). The "%" operator is the modulus, or mod operator; think of it (for now) as the remainder when you divide. The logical equals operator is ""=="".
void setup() {
  for (int i=2; i<=20; i++) {      // loop from 2 to 20 inclusive
 println ("isPrime(" + i + ") = " + isPrime(i));
  }
}  // setup()
 
boolean isPrime(int n) {          // calculate if a number n is prime using the "trial division" method
  float m = sqrt(n);
  int i = 1;
  while (++i <= m) {
    if((n % i) == 0) {
      return false;
    }  // if
  }  // while
  return true;
}   // isPrime()
Your task is to enhance this code to only print out the prime numbers from 1 to 100 inclusive with no message, such as:
2, 3, 5, 7, 11, 13, 17, 19, 23, 29, 31, 37, 41, 43, 47, 53, 59, 61, 67, 71, 73, 79, 83, 89, 97
Hint: modify setup() to only print the value of the number if it is prime. The critical word is "if" meaning you might want to use a conditional (and if statement).

Show Mr. Bujak your implementation of this and email your code to Mr. Bujak



WEDNESDAY, MARCH 16, 2011 (0.5 hour shortened class due to modified "PSSA schedule")

OLD: Extended: do-loop (iterate) to generate factorial for any Natural (Counting) number. Code from yesterday is:
void setup () {
 
  int factorial;                       //  declare variable factorial
  int n;                               //  declare variable n
 
  // compute 5!
  factorial = 1;                       // initialize variable factorial
  n = 5;                               // initialize variable n
  for(int i=1; i<=n; i++) {            // loop from 1 to n inclusive
    factorial = factorial * i;         // take the product of 1*2*3*4*...*n
    // println(i + "=" + factorial);   // diagnostic message
  }  // for
 println("factorial = " + factorial);
 
  // now let's compute 6!
  factorial = 1;                       // initialize variable factorial
  n = 6;                               // initialize variable n
  for(int i=1; i<=n; i++) {            // loop from 1 to n inclusive
    factorial = factorial * i;         // take the product of 1*2*3*4*...*n
    // println(i + "=" + factorial);   // diagnostic message
  }  // for
 println("factorial = " + factorial);
 
}  // setup()
 
int fact (int n) {                     // this does not compile ... why?
}  // fact()
BIG QUESTION:
Why does the environment yell with "This method must return a result of type int"

ISSUES:
  1. We have to duplicate these lines every time we want to do a factorial --> not good design
  2. Artifacts are not good --> such as printing
  3. Make this generic --> so we can invoke its behavior or effect in an abstract call

NEW: Constants (such as PI). Data types: int, float, void. Data type conversion. Make factorial program a function, return values (void, int, etc), formal parameters/arguments to functions, data types (currently we only know about int and float), operators: ++,--,*=,,/=

EXTRA CREDIT : Call the new fact() function for fact(1) to fact (15) in a loop.

[1] Program 1:
println (PI); // constants are uppercase by convention
println("the value of pi = " + PI);
[2] Program 2:
int i;
println("the value of i = " + i);
What is the error message from the Processing environment? What does this mean? Fix it.

[3] Program 3:
int i;   // declare variable i as int data type
i=5.4;   // assign value 5.4 to the variable i
println("the value of i = " + i);
What is the error message from the Processing environment? What does this mean? Fix it.
Note there are functions to "round" a real number (float data type) to an integer (int data type); such as: floor(5.4); ceil(5.4); round(5.4);

[4] Program 4: data type conversion
float i;   // declare variable i as float data type
i=5;       // assign value 5 to the variable i
println("the value of i = " + i);
[5] Program 5: now that we know a little more about data types let's go back to that factorial function.
// change
factorial = factorial * i;
// to
factorial *= i;

Type in the code that Mr. Bujak incrementally enters and explains. Please pay attention to the "behavior" of the color-directed sytanx editor. Yes, I want you to pay attention to the subtle programming hints with colors, emboldening, indenting, structure, etc. I will develop this incrementally and deliberately make mistakes and ask for suggestions to enhance the code, make it more generic, and more robust.

FUTURE: We will revisit the above in a recursive function.




TUESDAY, MARCH 15, 2011 (0.5 hour shortened class due to modified "PSSA schedule")

OLD: Do-loop (iterate) to generate factorial for any Natural (Counting) number. Code from yesterday is:
int factorial;                       // declare variable factorial as int data type
int n;                               // declare variable i as int data type
 
factorial = 1;                       // initialize variable factorial
n = 6;                               // initialize variable n
for(int i=1; i<=n; i++) {            // loop from 1 to n inclusive
  factorial = factorial * i;         // take the product of 1*2*3*4*...*n
  // println(i + "=" + factorial);   // diagnostic message
}  // for
println("factorial = " + factorial);
 

ISSUES:
  1. We have to duplicate these lines every time we want to do a factorial --> not good design
  2. Artifacts are not good --> such as printing
  3. Make this generic --> so we can invoke its behavior or effect in an abstract call
  4. It blows up for bigger n ... when? How can you tell?

NEW: declaration is not initialization although both can be done in one line, you declare a variable's data type only once, you can initialize a variable many time, make factorial program a function, return values (void, int, etc), formal parameters/arguments to functions, data types (currently we only know about int and float), operators: ++,--,*=,,/=

Type in the code that Mr. Bujak incrementally enters and explains. Please pay attention to the "behavior" of the color-directed sytax editor. Yes, I want you to pay attention to the subtle programming hints with colors, emboldening, indenting, structure, etc. I will develop this incrementally and deliberately make mistakes and ask for suggestions to enhance the code, make it more generic, and more robust.

FUTURE: We will revisit the above in a recursive function.



MONDAY, MARCH 14, 2011 (0.5 hour shortened class due to modified "PSSA schedule")

OLD: Comments and review on previous day highlights: color by numbers, color selector tool, transparency/opacity/alpha, HSB, hue, saturation, brightness, RGB, red, green, blue, HEX number, opacity/transparency, additive colors, subtractive colors,
NEW: Do-loop (iterate) to generate factorial for any Natural number

Type in the code that Mr. Bujak incrementally enters and explains. Please pay attention to the "behavior" of the color-directed sytax editor. Yes, I want you to pay attention to the subtle programming hints with colors, emboldening, indenting, structure, etc. I will develop this incrementally and deliberately make mistakes and ask for suggestions to enhance the code, make it more generic, and more robust.



FRIDAY, MARCH 11, 2011

OLD: Comments and review on previous day highlights: functions, overloading eg fill(), background()
NEW: color by numbers, color selector tool, transparency/opacity/alpha, HSB, hue, saturation, brightness, RGB, red, green, blue, HEX number, opacity/transparency, additive colors, subtractive colors - 085.chap11.Color 1 - Color by Numbers.pdf
Work solo: email Mr Bujak your programs to questions 1 and 2 at the bottom of 085.chap11.Color 1 - Color by Numbers.pdf. 3 is optional extra credit.



THURSDAY, MARCH 10, 2011

OLD: Comments and review on previous day highlights:
NEW: repetion review; data types: int, float; debugging; diagnostics; functions; grouping statements to form blocks: parentheses, braces, brackets, beginShape(), endShape(); overloading eg beginShape()
Hardware failure, so we did paper on March 10.
Hardware fixed, so here is the electronic work 069.chap9.Shape 2 - Vertices.pdf
Work in teams of 2 only:
Have fun with the code, experiment, explore, copy/paste, modify, ask Mr. Bujak questions, show Mr. Bujak your experiments.
Email M.r Bujak your team's 3 small programs which are the answers to the 3 questions at the bottom of 069.chap9.Shape 2 - Vertices.pdf.



WEDNESDAY, MARCH 9, 2011

OLD: repetition
NEW: variables, simple data types: int, float; debugging; diagnostics
Must work as a team of 2.
Reply what each of these programs does with an email to Mr. Bujak with a subject line similar to "Subject: Period 4 - CS - 3/9 - Antwan Tate & Cory Robinson"

Type these in. Pay attention to the syntax: spelling, uppercase, lowercase, grammar, punctuation.

[1] Program 1:
int i = 7;
println (i);
[2] Program 2:
int i = 7;
println ("The value of i = " + i);
[3] Program 3:
int i = 7;
i++;
println ("The value of i = " + i);
[4] Program 4:
int i = 7;
i = i + 8;
println ("The value of i = " + i);
[5] Program 5: change i = i + 8; to i + =8;
int i = 7;
i += 8;
println ("The value of i = " + i);
[6] Program 6: Change the variable's data type from an integer (int) to a real number (float)
float i = 7;
i += 8;
println ("The value of i = " + i);
[7] Program 7: repetition (loop) review
for (int i=0; i<10; i++) {
 println ("The value of i = " + i);
}
[8] Program 8: nested loops
for (int i=0; i<10; i++) {
  for (int j=0; j<3; j++) {
 println ("The value of i = " + i + " j = " + j);
  }
}

[9] Play with triangle(), fill(), background()
Show Mr. Bujak.



TUESDAY, MARCH 9, 2011

OLD:
NEW: Repetition -
061.chap8.Control 2 - Repetition.pdf




MONDAY, MARCH 7, 2011 - Follow instructions:

[1] You may work in pairs and discuss answers. You will need a laptop with Processing on it.
[2] Be sure to use the 5 handouts that links are provided as a resource:
[3] Email your individual answers to questions [A] --> [E] to Mr. Bujak - ebujak@hopecschool.org before you leave class.
Note that each question is separated by a horizontal line.
After you copy/paste the code snippets, you may want to reformat: "Tools" / "Auto Format"
Please use "Period 4-CS Processing-3/4-YOUR NAME" as the Subject line, such as: Period 4-CS Processing-3/4-Jose Gonzales

We finished our Thursday, March 3, 2011 class with Program 4 (might want to copy/paste this code into Processing):
void setup() {
  size(400,200);                  // 400 wide, 200 high
}
 
void draw() {
  background(0);                  // paint background black
 ellipse(mouseX,mouseY,20,40); // center the 20 wide, 40 high ellipse with the mouse, interactive event updates
}

QUESTION [A] Briefly describe what each of these executable lines do (in the above program):
size(400,200);
background(0);
ellipse(mouseX,mouseY,20,40);

QUESTION [B]
Comments are not executed. Comments are used for human descriptions.
Comment out the background(0); line by putting a "slash slash" in front of that line. The line should turn gray.
Describe the result/changes in the output.


QUESTION [C]
mouseX and mouseY are reserved variables (blue).
There are other similar system hardware "readings" like mousePressed. Modify the code to add a conditional (that's an "if") based on if the user is pressing the mouse button.
void setup() {
  size(400,200);         // 400 wide, 200 high
}
 
void draw() {
  background(0);
 
 if (mousePressed) {
    fill(0);             // black
  }
  else {
    fill(255);           // white
  }
 
 ellipse(mouseX,mouseY,20,40); // center the 20 wide, 40 high ellipse with the mouse, interactive event updates
}  // draw

Describe the result/changes in the output. How is the mouse button pressed related to fill()?


QUESTION [D]
Keyboard input. Examine (maybe copy/paste) the following code. Add a user defined variable "bgColor" and initialize it to 0 (black). We will use "bgColor" to hold the background color of the window. We examine the keyboard being pressed via the "keyPressed" system (blue) variable. If "keyPressed" is true, then we must further ask if it may have been one of the keys we want to act upon. We do this by further querying the "key" system (blue) variable. Let's pick p, but make sure we look for lowercase 'p' and uppercase 'P'.

Describe the result/changes in the output. Please comment on the print statement, "println(bgColor)" ... is the execution of the program too fast? When we hit the 'p' are we too slow and maybe the program is too fast? Thought on maybe how to address this (it's generally called

int bgColor= 0;                  // global variable
 
void setup() {
  size(400,200);                 // 400 wide, 200 high
}
 
void draw() {
  if(keyPressed) {
    if (key == 'p' || key == 'P') {
      bgColor = bgColor + 5;
      if (bgColor > 250) {
        bgColor = 0;
      }  // if (bgColor ...
      println(bgColor);
    }  // if (key ...
 } // if (keyPressed ...
 
  background(bgColor);
 
 if (mousePressed) {
    fill(0);                     // black
  }
  else {
    fill(255);                   // white
  }
 
 ellipse(mouseX,mouseY,20,40); // center the 20 wide, 40 high ellipse with the mouse, interactive event updates
 
}  // draw()

QUESTION [E] Enhance the above program with something totally new and tell me what it is. You must include your code. Copy your code from Procesing and paste into your email to me. If you like, you can out the comments in your code.

End of March 4, 20111 classwork.
Have a great weekend.





CURRATED RESOURCES (below) - use your browser search

• Curriculum


• Standards

  • CSTA (Computer Science Teachers Association) Model Curriculum for K-12 Computer CS in the Core
  • Science - Level II and Level III
  • Standards for Technological Literacy (STL)
  • National Science Standards (NSTA)
  • National Math Standards (NCTM)
  • ISTE NET-S Standards- www.iste.org/standards/nets-for-students.aspx.

• Professional Organizations



• Interface Boards/Devices



• Programming Languages

  • Java Links
  • Java IDE
    • DrJava IDE (Java-based, runs everywhere, with debugger and interpreter (interactions pane)) is a lightweight development environment for writing Java programs. It is designed primarily for students, providing an intuitive interface and the ability to interactively evaluate Java code. It also includes powerful features for more advanced users. DrJava is available for free under the BSD License, and it is under active development by the JavaPLT group at Rice University. DrJava was used at the 2009 CMU ACTIVATE Workshop on Java Programming for Math and Science - my photos/videos.
    • Java programming environments for beginners:
    • JCreator IDE (Windows-only, no debugger in free version, but lightweight and fast) is the development tool for every programmer that likes to do what he does best: programming. It is faster, more efficient and more reliable than other IDE’s. Therefore it is the perfect tool for programmers of every level, from learning programmer to Java-specialist. JCreator was used at the 2009 CMU ACTIVATE Workshop on Java Programming for Math and Science - my photos/videos.
    • Eclipse (or here) - more complex, but still free, IDE for professionals
    • NetBeans IDE - more complex, but still free, IDE for professionals
    • BlueJay (BlueJ) - Java IDE, shows objects, from Kent University, UK
    • Jelliot algorithm animator, plug-in for BlueJay,uses BlueJ - Jeliot is a program animation system for Java programs. All dynamic aspects of the program execution are visualized -- expression evaluation, assignment and control statements, method calls and constructor invocations -- either step by step or continuously. The full program state is visualized -- variables, activation records, objects and references -- so that the student can understand the effect of each operation on the data. A history is maintained so that previous states can be displayed. The animation is done directly from the Java source code with no annotations or modifications, so that Jeliot can be easily used by teachers and students. Jeliot is free software distributed under the GNU General Public License (GPL).
    • GridWorld - approximately 25% of the AP Computer Science test.
    • GreenFoot - GridWorld for anything, uses BlueJ, supports scenarios, games in 2D grids
    • Javabat.com - class management, class login, user login, saved practice
    • jGRASP is a medium weight IDE with many pedogogical features for teaching and learning Java, including automatic generation of control structure diagrams and UML class diagrams, a highly visual and easy to use debugger, and an intuitive object workbench. jGRASP and the jGRASP Handbook are freely available at http://www.jgrasp.org
  • 1st person programming environment
  • Python
  • VPython
    • VPython is the Python programming language plus a 3D graphics module called "Visual" originated by David Scherer in 2000. VPython makes it easy to create navigable 3D displays and animations, even for those with limited programming experience. Because it is based on Python, it also has much to offer for experienced programmers and researchers.
  • RAPTOR
    • RAPTOR is a flowchart-based programming environment, designed specifically to help students visualize their algorithms and avoid syntactic baggage. RAPTOR programs are created visually and executed visually by tracing the execution through the flowchart. Required syntax is kept to a minimum. Students prefer using flowcharts to express their algorithms, and are more successful creating algorithms using RAPTOR than using a traditional language or writing flowcharts without RAPTOR. RAPTOR was used at the 2009 CMU ACTIVATE Workshop on Computational Thinking - my photos/videos.
    • great RAPTOR instructional videos.
  • Processing
    • Processing is graphical, artistic, and computing environment based on Java. Processing is a language and environment that is built on top of Java, but which provides powerful built-in methods that make visualization and audio processing accessible to novice programmers. See: CSE120 CS Principles, www.cs.washington.edu/education/courses/cse120/11wi
    • [1] Getting Started: http://processing.org/learning/gettingstarted/
    • [2] Download: http://processing.org/download/
    • [3] Tutorials: http://processing.org/learning/
    • [4] Basic Examples: http://processing.org/learning/basics/
    • [5] Language Reference: www.processing.org/reference

    • Chapters from Processing - A Programming Handbook for Visual Designers and Artists, by Casey Reas and Ben Fry, The MIT Press, 2007
    • ISBN-10: 0-262-18262-9, ISBN-13: 978-0-262-18262-1
    • Link to all chapters
    • Search below for the Processing"Table of Contents" with links to online chapter documents.
      • _xix.forw1.Foreword.pdf -
      • _xxi.pref1.Preface.pdf - contains Contents, How to read this book, Casey's introduction, Ben's introduction, Acknowledgments, Software, Literacy, Open, Education, Network, Context
      • 001.chap1.Processing....pdf
      • 009.chap2.Using Processing.pdf
      • 017.chap3.Structure 1 - Code Elements.pdf
      • 023.chap4.Shape 1 - Coordinates, Primitives.pdf
      • 037.chap5.Data 1 - Variables.pdf
      • 043.chap6.Math 1 - Arithmetic, Functions.pdf
      • 051.chap7.Control 1 - Decisions.pdf
      • 061.chap8.Control 2 - Repetition.pdf
      • 069.chap9.Shape 2 - Vertices.pdf
      • 079.chap10.Math 2 - Curves.pdf
      • 085.chap11.Color 1 - Color by Numbers.pdf
      • 095.chap12.Image 1 - Display, Tint.pdf
      • 101.chap13.Data 2 - Text.pdf
      • 105.chap14.Data 3 - Conversion, Objects.pdf
      • 111.chap15.Typography 1 - Display.pdf
      • 117.chap16.Math 3 - Trigonometry.pdf
      • 127.chap17.Math 4 - Random.pdf
      • 133.chap18.Transform 1 - Translate, Matrices.pdf
      • 137.chap19.Transform 2 - Rotate, Scale.pdf
      • 145.chap20.Development 1 - Sketching, Techniques.pdf
      • 149.chap21.Synthesis 1 - Form and Code.pdf
      • 155.chap22.Interviews 1 - Print.pdf
      • 173.chap23.Structure 2 - Continuous.pdf
      • 181.chap24.Structure 3 - Functions.pdf
      • 197.chap25.Shape 3 - Parameters, Recursion.pdf
      • 205.chap26.Input 1 - Mouse I.pdf
      • 217.chap27.Drawing 1 - Static Forms.pdf
      • 223.chap28.Input 2 - Keyboard.pdf - Pogoplug public link - Pogoplug embedded direct link -
      • 229.chap29.Input 3 - Events.pdf - Pogoplug public link - Pogoplug embedded direct link -
      • http://my.pogoplug.com/share/tRZLG6uBKTG9RMhMP2M6GQvfRRGtCS4_tclbGR_sb0Co_fq0o/229.chap29.Input%203%20-%20Events.pdf (4/6/2011)
      • 237.chap30.Input 4 - Mouse II.pdf
      • 245.chap31.Input 5 - Time, Date.pdf
      • 251.chap32.Development 2 - Iteration, Debugging.pdf
      • 255.chap33.Synthesis 2 - Input and Response.pdf
      • 261.chap34.Interviews 2 - Software, Web.pdf
      • 279.chap35.Motion 1 - Lines, Curves.pdf
      • 291.chap36.Motion 2 - Machine, Organism.pdf
      • 301.chap37.Data 4 - Arrays.pdf
      • 315.chap38.Image 2 - Animation.pdf
      • 321.chap39.Image 3 - Pixels.pdf
      • 327.chap40.Typography 2 - Motion.pdf
      • 333.chap41.Typography 3 - Response.pdf
      • 337.chap42.Color 2 - Components.pdf
      • 347.chap43.Image 4 - Filter, Blend, Copy, Mask.pdf
      • 355.chap44.Image 5 - Image Processing.pdf
      • 367.chap45.Output 1 - Images.pdf
      • 371.chap46.Synthesis 3 - Motion and Arrays.pdf
      • 377.chap47.Interviews 3 - Animation, Video.pdf
      • 395.chap48.Structure 4 - Objects.pdf
      • 413.chap49.Drawing 2 - Kinetic Forms.pdf
      • 421.chap50.Output 2 - File Export.pdf
      • 427.chap51.Input 6 - File Import.pdf
      • 435.chap52.Input 7 - Interface.pdf
      • 453.chap53.Structure 5 - Objects II.pdf
      • 461.chap54.Simulate 1 - Biology.pdf
      • 477.chap55.Simulate 2 - Physics.pdf
      • 495.chap56.Synthesis 4 - Structure, Interface.pdf
      • 501.chap57.Interviews 4 - Performance, Installation.pdf
      • 519.chap58.Extension 1 - Continuing....pdf
      • 525.chap59.Extension 2 - 3D.pdf
      • 547.chap60.Extension 3 - Vision.pdf
      • 563.chap61.Extension 4 - Network.pdf
      • 579.chap62.Extension 5 - Sound.pdf
      • 603.chap63.Extension 6 - Print.pdf
      • 617.chap64.Extension 7 - Mobile.pdf
      • 633.chap65.Extension 8 - Electronics.pdf
      • ---MORE ABOVE THIS---
      • 661.app.app1.Appendices.pdf
      • 692.refs1.Related Media.pdf
      • 699.refs2.Glossary.pdf
      • 703.index1.Code Index.pdf
      • 705.index2.Traditional Index.pdf
    • Processing flickr (photos) group pool -
  • App Inventor for Android
  • Smalltalk
    • Squek is a modern, open source, full-featured implementation of the powerful Smalltalk (Smalltalk) object-oriented programming language and environment. Squeak is highly-portable - even its virtual machine is written entirely in Smalltalk making it easy to debug, analyze, and change. Squeak is the vehicle for a wide range of projects from multimedia applications, educational platforms to commercial web application development. Smalltalk was designed in the 1970s in part as an educational tool for teaching programming. Squeak may be best known as part of the Children's Machine, part of the One Laptop Per Children initiative. Squeak is closely related with Objective-C, and Smalltalk and Squeak have both been influential on the development of other languages (including Scratch).
  • Scheme
    • Scheme
  • BASIC
    • Scheme
  • LISP
    • LISP is a funcitonal language typoically used in artificial intelligence and expert systems.
  • Haskell
    • Haskell is a functional language
  • PROLOG
    • PROLOG
  • Scheme
    • Scheme
  • Statistics
    • The R Project for statistical Computing - "R is a language and environment for statistical computing and graphics. It is a GNU project which is similar to the S language and environment which was developed at Bell Laboratories (formerly AT&T, now Lucent Technologies) by John Chambers and colleagues. R can be considered as a different implementation of S. There are some important differences, but much code written for S runs unaltered under R. R provides a wide variety of statistical (linear and nonlinear modeling, classical statistical tests, time-series analysis, classification, clustering, ...) and graphical techniques, and is highly extensible. The S language is often the vehicle of choice for research in statistical methodology, and R provides an Open Source route to participation in that activity."
    • Planetmath.org - great deal of R language related math topics - including the following starting points: PlanetMath Overview - High School Mathematics - Calculus - Statistics - Real Numbers - (more)
  • C++
    • C++ is C with object-oriented extensions such as single inheritance,
    • DevC++ compiler - is a full-featured integrated development environment (IDE) that uses the MinGW version of C++. An IDE is a program that allows you to edit, compile, and debug your C++ programs without using the command-line. For those of you who prefer to use your own editor, download the command-line version of MinGW instead. DevC++ comes with everything you need to compile and link both console-mode and GUI programs that will run on Windows 95/98/NT/2K/XP
  • C
    • C is a high-level software language that needs to be compiled. It has no type checking so is fast. C is used for low-level software up to operating system software.
  • Pascal
    • Pascal is a strongly typed programming language used for a time in data structures and algorthms courses
  • Ada
    • Pascal derivative. adds multi-tasking, concurrency. Mandated by the military to standardize on one language.
  • FORTH
    • FORTH is a threaded interpretive language (TIL). FORTH is great for writing low-level software without having to delve into assembly. FORTH is interpreted, via a dictionary, so development is rapid. FORTH can also be target compipled for more speed. FORTH utilizes the stack to deal with "parameter passing" so it is fast. FORTH is great for embedded systems.
  • Assembly Language
    • Assembly Language is native-code programmed directly in the (micro)processor's instruction set.
  • Assembly Language
    • Assembly Language is native-code programmed directly in the (micro)processor's instruction set.

• Gaming


• Resources


• College Board AP Resources

Information specific to AP Computer Science, including the Grid World Case Study, can be found on AP Central:

• Events


• Research

• Computational Singing