Sunday, May 10, 2015

PaA: Hacking a circle

This hackable file is the most simple file using the graphics library. It creates a window, then adds a circle on it. It looks like this:


Understanding the onecircle.py script
First, let's ake a look a the file:

# Import everything from Graphics
from graphics import *

# Build a window
win = GraphWin('Test 1', 600, 600)
win.setBackground('white')

# Draw one circle
poly = Circle( Point( 300, 300 ), 200 )
poly.setFill( 'red' )
poly.draw(win)

# Add some text
mytext = Text( Point(450, 520), 'by Random Bytes' )
mytext.setFill('red')
mytext.setSize( 30 )
mytext.draw(win)

# Wait to stop
win.getMouse()
win.close()

Step 1 - Import useful code from other files

Python is such a useful language because it is possible to borrow code from other file,to do pretty much anything that you can think about. In this file, we need to tell our script to import all objects and function from the file graphics.py . Without this import statement, it wouldn't not be possible to create a window object (GraphWin), a point (Point), a circle (Circle) and some on-screen text (Text). The import code is made here of a single line:

from graphics import *

Step 2 - Create a window

Without a window, there would be nothing to look at and no coordinate system. The following code defines a width, height and creates a window object that we'll call win.

# Build a window
win = GraphWin('Test 1', 600, 600)

Hackable: change the width and height and see what happen. As an advice, limit the window size to your screen size or else the computer will need a lot of memory, and it won't make more interesting images.

Step 3 - Prevent the window from closing

We will use a weird trick to prevent the window from closing. Once that all of the drawing is done, we will wait for one mouse click on the window. For as long as you don't click, the window will not close. This is done with these two lines. 

# Wait to stop
win.getMouse()
win.close()

Hackable: Take away the getMouse instruction and see what happen. However, do not remove the close instruction.

Step 4 - Create and draw a circle

In this script, you must create a graphic object, then instruct it to be draw on a particular window. This may not make a whole lot of sense right now, but this is how it works.  Let's look at the code to do this:

# Draw one circle
poly = Circle( Point( 300, 300 ), 200 )
poly.setFill( 'red' )
poly.draw(win)

The name "poly" is just a variable name, it could be anything as long as it begins with a letter or a _ . Circle is an object imported from graphics.py. To create a circle, you must provide a point, and a radius in pixel. The point is itself an object which requires two values to be created: a X coordinate and a Y. The code above draws a 200 px in radius circle, centered on the coordinate (300,300) .

To change the color, you must call methods on your circle object. In this case, we call setFill. This methods requires a color. We'll get back to color on another post.

Hackable: Lots to do here! Experiment with the circle's location and radius. Try different colors as color name or using RGB codes ( rgb_encode( R, G, B), where each of R, G, B are values between 0 and 255). Also, look into the manual and find out about other things that you can do with graphics objects.

Challenge

Select one challenge level that matches your skills:
  • San-level : Simple use of scripting. Uses trial and error.
  • Sensei-level : Requires some computer science structures such as loops and a little bit more mathematics.
  • Ninja-level : A challenge that requires you to think carefully before you start coding.
  • Grandmaster-level: A challenge similar to what you should expect in the first two years of a Bachelor of Computer Science. 
Particularly for this file:
  • San-level : Modify the program such that two circles are touching without overlapping. 
  • Sensei-level: Fill the image with a regular pattern of circles that are touching, but not overlapping.
  • Ninja-level: Fill the image with a randomly generated, irregular pattern of touching circles.
  • Grandmaster-level: Create a bubble room: Fill an image with circles while no two circles are overlapping each other.

No comments:

Post a Comment