Technology Systems Logo created in DrScheme.  PROGRAMMING GRAPHICS
ACTIVITY THREE
Technology Systems Logo created in DrScheme.


 
PREPARATION
  • Handout with COMMANDS and Sample CODE
    Note: write knorth@cs.rice.edu to get a copy of the command sheet.
  • Graph Paper
  • Computer with DrScheme opened
  • NOTE An 11x14 sheet of graph paper makes planning easier.  This is available from the engineering module.  Or, tape two pieces of regular paper together.
    OBJECTIVE
  • Use Scheme Drawing Commands
  • Learn how to plan a program by plotting on graph paper
  • DO this step button created in DrScheme.  READ the entire sheet of the Scheme Drawing Commands.
    NOTE:  Colors start with a single quote. Identifiers in DrScheme are case sensitive.  Commands are usually all lower-case letters

    Please DO this next step.  Look at the back of the handout and REVIEW the example program. Also, look at and READ the FAQ sheet.  You will be adding to this as you debug  your programs.

    Please DO this next step. Open the DrScheme IDE, click on Language, drag down to clear pack, then click on the icon called execute. You will see that the teach packs will be cleared.  Then click on language again. Drag down to Add / teachpack. Then you will see a folder that says htdp. Double click on it. You will see a bunch of different packs. Find the one that says draw.ss, click it and press open. Click Execute. 

    Please DO this next step. Type the first command:  (start 640 480).  This creates a canvas that is 640 pixels across and 480 down.  The top left corner is (0, 0), like a flipped over quadrant I on a Cartesian plane. Get a piece of graph paper and start numbering lines to use for planning your picture.  Use whatever proportion you would like.  Easier if every line is worth 10 pixels and you only number only every 5th or 10th line. 

    Note that the Y coordinate increases as you go down, opposite of a point on a Cartesian plane.
    After typing the first command, press execute. Then "bam!" you will see the drawing canvas.

    Please DO this last step. SAVE OFTEN!   In the programming module folder, create a folder with your name, save using a descriptive identifier such as karenActivity1.  The computer will add the file extension .scm automatically.  When you are finished, back up the program to your floppy disk.  If you run your program off the hard drive it executes faster. 

    Please DO this last step. Start the first constant definition for the HEAD by typing the header and the first two lines.

       
      (define HEAD
          (and
           (draw-circle (make-posn 320 100) 44 'black)
           (draw-circle (make-posn 300 95) 8 'green)
                     ... Add new lines of code here....
           
      ))     NOTE:  Keep )) at the end or you will get the error “malformed define” as you add new lines of code.

    Close out the parenthesis.  You will see the lines highlighted until you get past the header.  HINT: Select all the code, then hit the tap key and the spacing will be formatted automatically.  This help in debugging your code. 

    Please DO this last step. Click Execute.  If you do not see any drawing check your code and click execute until you will see a picture that matches the code. Make sure you type the correct coordinates and always begin and end the phrase with parenthesis (remember the “dance”).

    Please DO this last step. Plot the points for the head circle and rectangular body on your graph paper. ESTIMATE the location, it does not need to be exact. Try to plot other coordinates if you do not understand the connection, or ask for help.   As you get into planning your own program, you can adjust on the computer code.  The top left corner is (0, 0), the bottom left is the size of your canvas.  X is plotted the same, but Y is backwards as it increases as you go down instead of like quadrant I in a Cartesian plane. The objective is to learn the patterns and the code.  Continue adding one line at a time and plotting the points.  Check your progress by clicking execute and looking at the picture.

    Once you are finished with typing all the code on the sample program, you should know how to plan a program for the Balloon picture and to use the drawing commands.

    QUIZ
    Change the color of the shoes to something different and the color of the shirt to something different. Also, add some hair. Raise your hand and show for a grade.    Enhancement:  Add some more decoration to the object. 
     

    TSHome A1 A2 A4 A5 Notes