Programming Graphics Using Programming to Create Graphics TATN

Programming Graphics Using Programming to Create Graphics TATN / TCEA February 7, 2006 Karen North, Westside High School Houston ISD, Houston, Texas Multimedia Teacher

Programming Graphics Pre-AP CS Vertical Team… KAREN NORTH • Technology Systems Teacher, Westside High School • Certified in Math, CS, Business, Campus Technologist, MTT • Experience teaching Algebra, Geometry, pre-AP CS, Business PAMELA OSSORIO • Technology Teacher, Rice Middle School • Certified in Grades 1 -8 Math, BBA Finance • Experience teaching Tech Applications, Yearbook, Robotics

WHY Multimedia? £ Introduce Student to Programming through the Arts £ Introduce Student to the field of Computer Science £ Build CS domain knowledge skills: £Algebraic Computation £Data Analysis and Problem Solving Design £Attention to Details £Motivation to Work Ethically and Perseverance

Programming Graphics LESSON OVERVIEW 1. 2. 3. 4. 5. 6. Programming Environment - IDE Use drawing tools of a line, rectangle, and circle Design object on graph paper Plot key positions of the object Study the relationship of one point to another Step-by-step write the code that creates the picture

PROGRAMMING ENVIRONMENT IS EASY AND FREE ¥ Dr. Scheme, like LOGO, is a subset of LISP. ¥ All languages have VERBS (actions. . ) and NOUNS (. . what is used in the action) ¥ Algebra uses variable letters to represent data; Programs are formulated with WORDS. ¥ Commands and error messages set for a BEGINNER. ¥ Limited syntax and rules ¥ PIXEL based - can code exact location.

Programming Graphics FUNCTIONS AND PATTERNS The rectangle uses arguments for 1. 2. 3. 4. position of the corner the horizontal length the height, and the color. The circle uses parameters for 1. the center point 2. the radius, and 3. the color.

Dr. SCHEME DRAWING TOOLS start : number -> void Parameters, arguments Function name (start 640 480) Data Types draw-solid-disk: posn number color -> true (draw-solid-disk (make-posn 50 50) 40 ‘red) draw-circle: posn number color -> true draw-solid-rect: posn number color -> true draw-solid-line: posn color -> true predefined colors: ‘white ‘yellow ‘red ‘blue ‘green ‘black

Dr. SCHEME DRAWING LESSONS : Lesson are FREE and online to support “funding” of public education at www. knorth. info: : Graphic Link - Used in Web Mastering : Tech. Sys Link - Used as a module in Technology Systems Magnet Program I. T. Unit. These are the lessons you will see in the video. : Algebra Link - Used in algebra I in a Houston A+ Challenge research project.

Balloon Learning Lesson

Balloon Learning Lesson

Balloon Learning Lesson

Balloon Learning Lesson

AESTHETIC BENEFITS £ Creative and Fun. . . £ Sport that exercises the BRAIN and builds dendrites - connections… £ Requires thinking differently. . . £ Requires teaching differently. . . £ Different from other applications. . .

THE FUTURE What do you see in the 21 st century classroom? Are you excited about adding programming GRAPHICS to your curriculum? To learn more come to the Technology Village tomorrow 1 -3 for hands-on lessons.

CREDITS Graphics by Alief Elsik, Westside High School and Rice Middle School Students Background graphics created in Dr. Scheme Rice University Dr. Scheme Software Teach. Scheme! Training Workshops How To Design Programs - Dr. Felleisen WWW. HTDP. ORG

Using Programming to Create Graphics Technology Village 1: 00 – 3: 00 Individual Lessons and Questions Karen North, Westside High School Houston ISD, Houston, Texas knorth@houstonisd. org www. knorth. info