Chapter 4 Shapes II: Drawing Shapes. Recall the Shape Datatype data Shape = Rectangle Side Side | Ellipse Radius Radius | RtTriangle Side Side | Polygon.

Slides:



Advertisements
Similar presentations
Cse536 Functional Programming 1 1/13/2015 Lecture #13, Nov. 08, 2004 Today’s Topics –Simple animations –Buffered graphics –Animations in Haskell –Complex.
Advertisements

Graphics Shapes. Setup for using graphics You have to import the graphics library You can use either “import graphics” or “from graphics import *” or.
Introduction to shapes
Chapter 8 A Module of Regions. The Region Data Type  A region represents an area on the two-dimensional Cartesian plane.  It is represented by a tree-like.
Chapter 6 Shapes III: Perimeters of Shapes. The Perimeter of a Shape  To compute the perimeter we need a function with four equations (1 for each Shape.
TRANSFORMATIONS.
Drawing Objects with Illustrator 1.Start a new image in RGB mode. 2.Size 1024 X Unit = pixels 4.Go to View > Show Grid to turn on the grid. 5.Go.
Cse536 Functional Programming 1 6/10/2015 Lecture #6, Oct 13, 2004 Reading Assignments –Read chapter 5 of the Text Polymorphic and Higher-Order Functions.
Cse536 Functional Programming 1 6/10/2015 Lecture 10, Oct. 29, 2004 Special Rescheduled Friday Lecture Today’s Topics – Pictures – Low level graphics bit-maps:
Cse536 Functional Programming 1 6/10/2015 Lecture #8, Oct. 20, 2004 Todays Topics –Sets and characteristic functions –Regions –Is a point in a Region –Currying.
Chapter 3 Simple Graphics. Side Effects and Haskell  All the programs we have seen so far have no “side-effects.” That is, programs are executed only.
Cse536 Functional Programming 1 6/11/2015 Lecture #5, Oct 11, 2004 Reading Assignments –Finish Chapter 3, Simple Graphics –Read Chapter 4, Shapes II, Drawing.
Advanced Programming Handout 8 Drawing Regions (SOE Chapter 10)
Chapter 2 A Module of Shapes: Part I. Defining New Datatypes  The ability to define new data types in a programming language is important.  Kinds of.
Chapter 10 Drawing Regions. Pictures  Drawing Pictures Pictures are composed of Regions o Regions are composed of shapes Pictures add Color data Picture.
Advanced Programming Handout 9 Qualified Types (SOE Chapter 12)
Chapter 10: Coordinate Systems Chapter 10.
Chapter 13 A Module of Simple Animations. Motivation  In the abstract, an animation is a continuous, time-varying image.  But in practice, it is a sequence.
Essentials of Interactive Computer Graphics: Concepts and Implementation K. Sung, P. Shirley, S. Baer Chapter 3 Chapter 3: Simple Graphics Program.
Advanced Programming Handout 10 A Module of Simple Animations (SOE Chapter 13)
Chapter 5 Polymorphic and Higher-Order Functions.
CS123 | INTRODUCTION TO COMPUTER GRAPHICS Andries van Dam © Scan Conversion CS123 1 of 44Scan Conversion - 10/14/2014.
Polygons Only one of these is a polygon. Do you know? A polygon MUST be a closed figure.
Area & Perimeter.
Chapter Create Design Ms. Robin. You will learn: To create a design and identify the coordinates used to make the design. Identify the coordinates.
CS 450: Computer Graphics PIXEL AdDRESSING AND OBJECT GEOMETRY
Preparing for FRP Shapes, Regions, and Drawing. Shape types from the Text data Shape = Rectangle Float Float | Ellipse Float Float | RtTriangle Float.
Reflections 9-1 Warm Up Lesson Presentation Lesson Quiz
2.7: Dilations.
EXAMPLE 1 Graph the equation of a translated circle
Section 3 Chapter Copyright © 2012, 2008, 2004 Pearson Education, Inc. Objectives The Hyperbola and Functions Defined by Radials Recognize.
1.8: Perimeter, Circumference, and Area
This is what we want to draw Extrude Mirror Round Edges.
Loops & Graphics IP 10 Mr. Mellesmoen Recall Earlier we wrote a program listing numbers from 1 – 24 i=1 start: TextWindow.WriteLine(i) i=i+1 If.
Chapter Nine Vectors and the Geometry of Space. Section 9.1 Three-Dimensional Coordinate Systems Goals Goals Become familiar with three-dimensional rectangular.
Slide Copyright © 2006 Pearson Education, Inc. Publishing as Pearson Addison-Wesley.
TH EDITION LIAL HORNSBY SCHNEIDER COLLEGE ALGEBRA.
Circles in the Coordinate Plane I can identify and understand equations for circles.
Circles. Equation of a circle: ( x – h )2 )2 + ( y – k )2 )2 = r2r2 Center of the circle: C( h, k ) Radius of the circle: r Diameter of the circle: d.
Graphics and Java2D Chapter Java Coordinate System Origin is in _____________ corner –Behind title bar of window X values increase to the ________.
Rotations. Goals Distinguish between a translation, reflection, and rotation. Visualize, and then perform rotations using patty paper. To determine the.
This is the finished body RADIUS LOFT EXTRUDE. Creating the body taper Open the wing Click on new part in context.
CS 325 Introduction to Computer Graphics 02 / 03 / 2010 Instructor: Michael Eckmann.
CS COMPUTER GRAPHICS LABORATORY. LIST OF EXPERIMENTS 1.Implementation of Bresenhams Algorithm – Line, Circle, Ellipse. 2.Implementation of Line,
Microsoft® Small Basic Exploring Shapes Estimated time to complete this lesson: 1 hour.
GEOMETRY UNIT 1 Transformations.
Equations of Circles. Vocab Review: Circle The set of all points a fixed distance r from a point (h, k), where r is the radius of the circle and the point.
Midterm: Question 1 (35%) (30 minutes) Write an assembly program to draw a rectangle. – (5%) Show a message to ask for information of the rectangle – (5%)
Equations of Circles. You can write an equation of a circle in a coordinate plane, if you know: Its radius The coordinates of its center.
THERE ARE MANY INTERESTING & EASY WAYS FOR MULTIPLICATION OF NUMBERS. LET’S SEE ONE OF THE INTERESTING METHOD………..
Polygons Only one of these is a polygon. Do you know? A polygon MUST be a closed figure.
Dilations 9-7 Warm Up Lesson Presentation Lesson Quiz
Copyright © 2011 Pearson Education, Inc. Conic Sections CHAPTER 13.1Parabolas and Circles 13.2Ellipses and Hyperbolas 13.3Nonlinear Systems of Equations.
Entry Task 1. Translate the triangle with vertices A(2, –1), B(4, 3), and C(–5, 4) along the vector. 2. Given the points (-3,2) and (6,-1) reflect them.
Dilations A dilation is a transformation that produces an image that is the same shape as the original, but is a different size. A dilation stretches or.
Chapter 10 Conic Sections
Reflections 9-1 Warm Up Lesson Presentation Lesson Quiz
Translations and Reflections
Basic Graphics Drawing Shapes 1.
Digital Media Dr. Jim Rowan ITEC 2110.
Objective Identify and draw reflections..
In this chapter, you will learn the following:
Inheritance in Graphics
Warm-Up   Range Graphically (#9 on CQ#1).
12-1 Reflections Warm Up Lesson Presentation Lesson Quiz Holt Geometry.
Objective Identify and draw reflections..
Miniature Train.
Simple Animations Today’s Topics Reading Assignment Simple animations
Translate 5 squares left and 4 squares up.
Presentation transcript:

Chapter 4 Shapes II: Drawing Shapes

Recall the Shape Datatype data Shape = Rectangle Side Side | Ellipse Radius Radius | RtTriangle Side Side | Polygon [ Vertex ] deriving Show type Vertex = (Float,Float) type Side = Float type Radius = Float

Properties of Shapes  Note that some shapes are position independent: Rectangle Side Side RtTriangle Side Side Ellipse Radius Radius  On the other hand, a Polygon [Vertex] is defined in terms of where it appears in the plane.  A shape’s Size and Radius are measured in inches.  On the other hand, the Windows-based drawing mechanism of the last chapter was based on pixels.

Considerations  Where do we draw position-independent shapes? Randomly? In the upper left corner (the window origin)? In the middle of the window?  We will choose the last option above, by defining the middle of the window as the origin of a standard Cartesian coordinate system.  So our new coordinate system has both a different notion of “origin” (middle vs. top-left) and of “units” (inches vs. pixels).  We will need to define coercions between these two coordinate systems.

Coordinate Systems Window Coordinate System Shape Coordinate System (200,200) pixels or (1,-1) inches (0,0) (200,0) (0,200) (1,0)(-1,0) (0,1) (0,-1)

Units Coercion inchToPixel :: Float -> Int inchToPixel x = round (100*x) pixelToInch :: Int -> Float pixelToInch n = intToFloat n / 100 intToFloat :: Int -> Float intToFloat n = fromInteger (toInteger n)

xWin, yWin :: Int xWin = 600 yWin = 500 xWin2, yWin2 :: Int xWin2 = xWin `div` 2 yWin2 = yWin `div` 2 trans :: Vertex -> Point trans (x,y) = ( xWin2 + inchToPixel x, yWin2 - inchToPixel y ) Translation Coercion (xWin2,yWin2) (xWin,yWin)

Translating Points trans :: Vertex -> Point trans (x,y) = ( xWin2 + inchToPixel x, yWin2 - inchToPixel y ) transList :: [Vertex] -> [Point] transList [] = [] transList (p:ps) = trans p : transList ps

Translating Shapes shapeToGraphic :: Shape -> Graphic shapeToGraphic (Rectangle s1 s2) = let s12 = s1/2 s22 = s2/2 in polygon (transList [(-s12,-s22),(-s12,s22), (s12,s22), (s12,-s22)]) shapeToGraphic (Ellipse r1 r2) = ellipse (trans (-r1,-r2)) (trans (r1,r2)) shapeToGraphic (RtTriangle s1 s2) = polygon (transList [(0,0),(s1,0),(0,s2)]) shapeToGraphic (Polygon pts) = polygon (transList pts) Note: first two are position independent and centered about the origin

Some Test Shapes sh1,sh2,sh3,sh4 :: Shape sh1 = Rectangle 3 2 sh2 = Ellipse sh3 = RtTriangle 3 2 sh4 = Polygon [(-2.5,2.5), (-1.5,2.0), (-1.1,0.2), (-1.7,-1.0), (-3.0,0)]

Drawing Shapes main10 = runGraphics $ do w <- openWindow "Drawing Shapes" (xWin,yWin) drawInWindow w (withColor Red (shapeToGraphic sh1)) drawInWindow w (withColor Blue (shapeToGraphic sh2)) spaceClose w

The Result

Drawing Multiple Shapes type ColoredShapes = [(Color,Shape)] shs :: ColoredShapes shs = [(Red,sh1),(Blue,sh2), (Yellow,sh3),(Magenta,sh4)] drawShapes :: Window -> ColoredShapes -> IO () drawShapes w [] = return () drawShapes w ((c,s):cs) = do drawInWindow w (withColor c (shapeToGraphic s)) drawShapes w cs

Multiple Shapes, cont’d main11 = runGraphics $ do w <- openWindow "Drawing Shapes“ (xWin,yWin) drawShapes w shs spaceClose w )