Graphics Shapes. Setup for using graphics You have to import the graphics library You can use either “import graphics” or “from graphics import *” or.

Slides:



Advertisements
Similar presentations
Calypso Construction Features
Advertisements

Variables Conditionals Boolean Expressions Conditional Statements How a program produces different results based on varying circumstances if, else if,
 putpixel function plots a pixel at location (x, y) of specified color.  Declaration :- void putpixel(int x, int y, int color);
Python Programming: An Introduction to Computer Science
Python Programming: An Introduction to Computer Science
Lesson One: The Beginning
Noadswood Science,  To know how to use Python to produce windows and colours along with specified co-ordinates Sunday, April 12, 2015.
Introduction to shapes
Python Programming, 2/e1 CS177: Programming in Multimedia Objects Recitation Topic: Graphics Library.
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.
Ms. Blain’s 4 th grade!. -Round - Never Ending -Any point on the circle is the same distance from the center. Diameter = A line segment drawn from any.
Image Maps and Graphics Internet Basics and Far Beyond! Mrs. Wilson.
1 Applets Chapter 1 To understand:  why applets are used to extend the capabilities of Web pages  how an applet is executed and know about the restrictions.
ObjectDraw and Objects Early Chris Nevison Barbara Wells.
Civil 114 Civil Engineering Drawing AutoCAD
1 Python Programming: An Introduction to Computer Science Chapter 3 Objects and Graphics.
Graphics - setCoords. The coordinate system of Zelle graphics The default coordinate system for GraphWin is that the origin is in the upper left hand.
Perimeter and Area Please view this tutorial and answer the follow-up questions on loose leaf to turn in to your teacher.
Perimeter Rectangles, Squares, and Triangles Perimeter Measures the distance around the edge of any flat object. To find the perimeter of any figure,
Chapter 4 Objects and Graphics
Python: Graphics
SDC PUBLICATIONS © 2011 Chapter 1 AutoCAD Fundamentals Learning Objectives:  Create and Save AutoCAD drawing files.  Use the AutoCAD visual reference.
Lab 5: drawing and output User Interface Lab: GUI Lab Sep. 25 th, 2013.
Chapter 5 Graphics.  We’ve been doing command line programming, but now it’s time to try GUI programming—programming in a graphical user interface, using.
CIS 205—Web Design & Development Flash Chapter 1 Getting Started with Adobe Flash CS3.
Week 2 - Wednesday CS361.
Addison Wesley is an imprint of © 2010 Pearson Addison-Wesley. All rights reserved. Chapter 5 Working with Images Starting Out with Games & Graphics in.
Addison Wesley is an imprint of © 2010 Pearson Addison-Wesley. All rights reserved. Chapter 7 The Game Loop and Animation Starting Out with Games & Graphics.
Addison Wesley is an imprint of © 2010 Pearson Addison-Wesley. All rights reserved. Chapter 2 Graphics Programming with C++ and the Dark GDK Library Starting.
1.8: Perimeter, Circumference, and Area
Graphic Basics in C ATS 315. The Graphics Window Will look something like this.
Tkinter Canvas.
Digital Media Dr. Jim Rowan ITEC So far… We have compared bitmapped graphics and vector graphics We have discussed bitmapped images, some file formats.
Some Graphics CS303E: Elements of Computers and Programming.
Jeopardy Terminology Geometry This PowerPoint was revised from the original version from; geometry.ppt.
Definition: Rectangle A rectangle is a quadrilateral with four right angles.
 You can also divide an image into regions that link to different documents depending on where someone clicks.  This is called an imagemap, and any.
CSC 1010 Programming for All Lecture 7 Input, Output & Graphics.
Graphics Concepts CS 2302, Fall /17/20142 Drawing in Android.
Graphics and Java2D Chapter Java Coordinate System Origin is in _____________ corner –Behind title bar of window X values increase to the ________.
To find the perimeter of a rectangle, just add up all the lengths of the sides: Perimeter = L + w + L + w         = 2L + 2w To find the area of a rectangle,
Documenting a function. Documenting a function definition We have a template for information that we need you to put at the top of each function - if.
Interaction with Graphics Also displaying GIFs. Text Output on the graphics window There is a class called Text which will put the message on the graphics.
Python Programming, 2/e1 Python Programming: An Introduction to Computer Science Chapter 4 Objects and Graphics.
5. COMPUTING WITH GRAPHICS OBJECTS Dennis Y. W. Liu and Rocky K. C. Chang October 8, 2015 (Adapted from John Zelle’s slides)
PyGame - Unit 1 PyGame Unit – – Introduction to PyGame.
Stretching & Shrinking 7th grade Writing Rules Scale Factors Vocabulary Terms SF and AreaSimilar.
CS 115 Lecture 7 Graphics – coordinate systems, Text, Entry, aliases Taken from notes by Dr. Neil Moore.
Orthonormal Basis Cartesian Coordinate System – Unit vectors: i, j, k – Normalized to each other – Unique representation for each position!! – Convenient!
Basic Graphics 03/03/16 & 03/07/16 Imagine! Java: Programming Concepts in Context by Frank M. Carrano, (c) Pearson Education - Prentice Hall, 2010.
CS 115 Lecture 6 Graphics Taken from notes by Dr. Neil Moore.
Variables. Something to mention… void setup(){ size(200, 200); background(255); smooth(); } void draw() { stroke(0); strokeWeight(abs(mouseX-pmouseX));
Jeopardy Terminology Quiz Geometry All points on a circle are the same distance from this point. (100)
Graphics Taken from notes by Dr. Neil Moore & Dr. Debby Keen
GUI in Python Ismail Abumuhfouz.
Pixels, Colors and Shapes
Perimeter Area and Circumference
Python: Simple Graphics and Event-driven Programming
Graphics Part I Taken from notes by Dr. Neil Moore
Paddle Ball! We will begin creating, in steps, a video game similar to ‘brick breaker’ or ‘pong’, were we can move paddles to hit a bouncing ball. I hope.
Graphics Part I Taken from notes by Dr. Neil Moore
Basic Graphics Drawing Shapes 1.
CS 115 Lecture Graphics II – coordinate systems, Text, Entry, aliases
CS 115 Lecture Graphics II – coordinate systems, Text, Entry, aliases
Chapter 2 Graphics Programming with C++ and the Dark GDK Library
Graphics Part I Taken from notes by Dr. Neil Moore
Simple Graphics Package
Topics Graphical User Interfaces Using the tkinter Module
Introduction to Turtle Graphics
2D shapes.
Presentation transcript:

Graphics Shapes

Setup for using graphics You have to import the graphics library You can use either “import graphics” or “from graphics import *” or “from graphics import GraphWin, Point, Circle” If you use “import graphics” you then refer to all the functions from the library as “win = graphics.GraphWin()” or “p = graphics.Point(5,5)” If you use one of the other imports, you can omit the “graphics.”

Creating a Graphics Window to draw on Typically the first thing done win = GraphWin() This is a call to a constructor to make a GraphWin object. It has no arguments but it still needs the parentheses to make Python see it as a function call The object that is returned from the constructor is stored in the variable win There are optional arguments: first argument is the title of the window (in the title bar), the 2 nd and 3 rd arguments are the width and height in pixels (a pixel is the smallest location on the screen which can be turned ‘on’ or ‘off’)

Coordinate system The graphic window uses a coordinate system like the Cartesian plane It uses two numbers, x and y, to refer to a location on the window The origin of the system by default, is the upper left corner of the graphics window. Note that this makes the y coordinates behave differently than you are used to in algebra. Y coordinates start at 0 at the TOP of the window and increase as the location moves DOWN the window. X coordinates behave normally, 0 at the left and increases as you move right on the window. Yes, there is a way to change this if you want.

Line class What is needed to specify a line? The easiest way is with 2 points line1 = Line(Point(100, 25), Point(17, 92)) This creates an object called line1, which is actually a line segment drawn from one point to the other point given When you are ready to display the line on the graphics window, you use the statement line.draw(win) This assumes that win is a GraphWin which has already been set up

Circle class What information does the computer need to draw a circle? A center point and a radius (distance from center to edge of circle) my_eye = Circle(Point(100, 150), 25) This creates an object called my_eye which is a circle. It has two arguments; first one is a Point object, second one is a number (can be integer or float) This does NOT make the circle appear on the graphics window, you have to call the draw method my_eye.draw(win) You can do other things with the Circle object before you draw it, like setFill (to change color), setWidth (to make the line thicker), etc.

Rectangle class What is needed to specify a rectangle? There are several ways, but the easiest is to give two Points. One is considered the upper left corner and the other is the lower right corner. Which one is which? Does not matter, the library figures it out. rect = Rectangle(Point(100, 300), Point(300, 250)) This will draw a rectangle that is 200 pixels wide and 50 pixels tall ( ) wide, ( ) tall Just like the Circle class, this can be colorized, drawn on the graphics window, etc.

Polygon class A polygon is a generic shape. Its sides can be any length at any angle. How would you specify a shape like that? By giving all the points where the sides connect to each other. poly = Polygon(Point(100, 300), Point(300, 25), Point(70, 92)) This will draw a triangle. It draws a line segment from the first point to the second, from the second to the third and so on, and then a line segment from the last point to the first. Obviously the order of the points in the arguments matters!

Colors The colors available in this library are the ones available in the Tkinter library. There is a list of the color names with their colors here These can be used with setFill() to color the inside of a shape And with setOutline() to color the line which draws the shape

Ending a graphics program Please do these things! If you forget them, you can eventually lock up your IDE and sometimes even your operating system! At the end of the graphics part of the program, you want two lines win.getMouse() win.close() This assumes you have a graphics window called win. It waits for the user to click somewhere in the window, then closes the window.