1 of 53

S6 CS Programme Elective

CST362 Programming in Python

Module 3

2 of 53

Overview of Turtle Graphics

  • Turtle is an icon located at a specific position in the window specified with (x,y)
  • Initial position is the origin or home
  • an important attribute is heading or the direction in which it currently faces
  • Initial heading is 0 degrees due east on its map
  • Attributes make up a turtle’s state which determines how the turtle will behave when any operations are applied

3 of 53

Some attributes of a Turtle

4 of 53

Turtle

Methods

5 of 53

Turtle

Methods

6 of 53

>>> from turtle import Turtle

>>> t = Turtle()

7 of 53

Draw T shape

>>> from turtle import Turtle

>>> t = Turtle()

​

​

​

​

8 of 53

Draw Square

9 of 53

Image Processing

  • Analog and Digital Information - range of values and discrete values
  • Early recording and playback devices for images and sound were all analog devices
  • Continuous analog information in a real visual scene must be mapped into a set of discrete values.
  • This conversion process involves sampling

10 of 53

Sampling and Digitizing Images

  • A visual scene projects an infinite set of color and intensity values onto a two-dimensional sensing medium, such as a human being’s retina or a scanner’s surface
  • digital information can represent an image that is more or less indistinguishable to the human eye from the original scene
  • Sampling devices measure discrete color values at distinct points on a two-dimensional grid. These values are pixels

11 of 53

Sampling and Digitizing Images

  • the more pixels that are sampled, the more continuous and realistic the resulting image will appear
  • the human eye cannot discern objects that are closer together than 0.1 mm, so a sampling of 10 pixels per linear millimeter (250 pixels per inch and 62,500 pixels per square inch) would be plenty accurate.
  • Thus, a 3-inch by 5-inch image would need 3 *5 *62,500 pixels/inch 937,500 pixels

12 of 53

Image File Formats

  • A raw image file saves all of the sampled information
  • This has a cost and a benefit: The benefit is that the display of a raw image will be the most true to life, but the cost is that the file size of the image can be quite large
  • Two of the most popular image file formats are JPEG (Joint Photographic Experts Group) and GIF (Graphic Interchange Format)

13 of 53

Image File Formats

  • data-compression schemes are used to reduce the file size of a JPEG image
  • If any color values are the same, their positions rather than their values are stored, thus potentially saving many bits of storage
  • Before the image is displayed, the original color values are restored during the process of decompression
  • This scheme is called lossless compression, meaning that no information is lost

14 of 53

Image File Formats

  • another scheme analyzes larger regions of pixels and saves a color value that the pixels’ colors approximate
  • This is called a lossy scheme, meaning that some of the original color information is lost
  • human eye usually is not able to detect the difference between the new colors and the original ones

15 of 53

Image File Formats

  • A GIF image relies on an entirely different compression scheme
  • The compression algorithm consists of two phases
  • first phase, the algorithm analyzes the color samples to build a table, or color palette, of up to 256 of the most prevalent colors
  • The algorithm then visits each sample in the grid and replaces it with the key of the closest color in the color palette
  • The resulting image file thus consists of at most 256 color values and the integer keys of the image’s colors in the palette

16 of 53

Image File Formats

  • This strategy can potentially save a huge number of bits of storage
  • The decompression algorithm uses the keys and the color palette to restore the grid of pixels for display
  • Although GIF uses a lossy compression scheme, it works very well for images with broad, flat areas of the same color, such as cartoons, backgrounds, and banners

Ref. Kenneth A Lambert, Fundamentals of first python programs, 2nd edition

17 of 53

Image-Manipulation Operations

  • either transform the information in the pixels or alter the arrangement of the pixels in the image
    • Rotate an image
    • Convert an image from color to grayscale
    • Apply color filtering to an image
    • Highlight a particular area in an image
    • Blur all or part of an image
    • Sharpen all or part of an image
    • Control the brightness of an image
    • Perform edge detection on an image
    • Enlarge or reduce an image’s size
    • Apply color inversion to an image
    • Morph an image into another image

Ref. Kenneth A Lambert, Fundamentals of first python programs, 2nd edition

18 of 53

The Properties of Images

  • When an image is loaded into a program such as a Web browser, the software maps the bits from the image file into a rectangular area of colored pixels for display
  • The coordinates of the pixels in this two-dimensional grid range from (0, 0) at the upper-left corner of an image to (width – 1, height – 1) at the lower-right corner, where width and height are the image’s dimensions in pixels
  • Thus, the screen coordinate system for the display of an image is somewhat different from the standard Cartesian coordinate system that we used with Turtle graphics, where the origin (0, 0) is at the center of the rectangular grid

Ref. Kenneth A Lambert, Fundamentals of first python programs, 2nd edition

19 of 53

The images Module

  • allows the programmer to load an image from a file, view the image in a window, examine and manipulate an image’s RGB values, and save the image to a file
  • a non-standard, open-source Python tool
  • includes a class named Image
  • The Image class represents an image as a two-dimensional grid of RGB values

Ref. Kenneth A Lambert, Fundamentals of first python programs, 2nd edition

20 of 53

The images

Module

Ref. Kenneth A Lambert, Fundamentals of first python programs, 2nd edition

21 of 53

The images

Module

Ref. Kenneth A Lambert, Fundamentals of first python programs, 2nd edition

22 of 53

The images

Module

Ref. Kenneth A Lambert, Fundamentals of first python programs, 2nd edition

23 of 53

The images

Module

>>> image.save("horizontal.gif")

Ref. Kenneth A Lambert, Fundamentals of first python programs, 2nd edition

24 of 53

Image Grid

  • Uses nested loop structure to traverse 2 dimensional grid

Ref. Kenneth A Lambert, Fundamentals of first python programs, 2nd edition

25 of 53

Image Grid

  • Uses nested loop structure to fill a blank image with red

Ref. Kenneth A Lambert, Fundamentals of first python programs, 2nd edition

26 of 53

Color Image to black & white

Ref. Kenneth A Lambert, Fundamentals of first python programs, 2nd edition

27 of 53

Color Image to Grayscale

Ref. Kenneth A Lambert, Fundamentals of first python programs, 2nd edition

  • Human eye is more sensitive to red than blue
  • Psychologists determined the relative propositions of RGB as 0.299, 0.587 and 0.114

28 of 53

Copying an image

Ref. Kenneth A Lambert, Fundamentals of first python programs, 2nd edition

29 of 53

Image Blurring

  • an image appears to contain rough, jagged edges, this condition, known as pixelation, can be mitigated by blurring the image
  • Blurring makes these areas appear softer
  • Resets each pixel’s color to the average of the four pixels surround it
  • Traverse from (1,1) to (width-2,height-2)

Ref. Kenneth A Lambert, Fundamentals of first python programs, 2nd edition

30 of 53

Blurring an image

Ref. Kenneth A Lambert, Fundamentals of first python programs, 2nd edition

31 of 53

Edge Detection

Ref. Kenneth A Lambert, Fundamentals of first python programs, 2nd edition

  • removes the full colors to uncover the outlines of the objects represented in the image
  • simple edge-detection algorithm examines the neighbors below and to the left of each pixel in an image
  • If the luminance of the pixel differs from that of either of these two neighbors by a significant amount, you have detected an edge, and you set that pixel’s color to black. Otherwise, you set the pixel’s color to white

32 of 53

Edge Detection

Ref. Kenneth A Lambert, Fundamentals of first python programs, 2nd edition

33 of 53

Reducing image size

Ref. Kenneth A Lambert, Fundamentals of first python programs, 2nd edition

  • A size reduction usually preserves an image’s aspect ratio (that is, the ratio of its width to its height)
  • simple way to shrink an image is to create a new image whose width and height are a constant fraction of the original image’s width and height
  • The algorithm then copies the color values of just some of the original image’s pixels to the new image
  • For example, to reduce the size of an image by a factor of 2, you could copy the color values from every other row and every other column of the original image to the new image

34 of 53

Graphical User Interfaces

Ref. Kenneth A Lambert, Fundamentals of first python programs, 2nd edition

  • Event driven programs
  • Inactive until user clicks a button or selects a menu option
  • Terminal based program maintains a constant control over the interactions with the user
  • terminal-based program prompts users to enter successive inputs, whereas a GUI program puts users in change, allowing them to enter inputs in any order and waiting for them to press a command button or select a menu option

35 of 53

Graphical User Interfaces

Ref. Kenneth A Lambert, Fundamentals of first python programs, 2nd edition

36 of 53

Graphical User Interfaces

Ref. Kenneth A Lambert, Fundamentals of first python programs, 2nd edition

37 of 53

Window Components

Ref. Kenneth A Lambert, Fundamentals of first python programs, 2nd edition

Title bar

Command buttons

Labels

Command button

Entry fields

38 of 53

Graphical User Interfaces

Ref. Kenneth A Lambert, Fundamentals of first python programs, 2nd edition

  • user is not constrained to enter inputs in a particular order
  • Before pressing the Compute button, can edit any of the data in the two input fields
  • Running different data sets does not require re-entering all of the data
  • The user can edit just one value and press the Compute button to observe different results

39 of 53

Event Driven Programming

Ref. Kenneth A Lambert, Fundamentals of first python programs, 2nd edition

  • opens a window and waits for the user to manipulate window components with the mouse
  • user-generated events, such as mouse clicks, trigger operations in the program to respond by pulling in inputs, processing them, and displaying results

40 of 53

Template for GUI

Programs

Ref. Kenneth A Lambert, Fundamentals of first python programs, 2nd edition

41 of 53

Template for GUI

Programs

Ref. Kenneth A Lambert, Fundamentals of first python programs, 2nd edition

42 of 53

Window

Ref. Kenneth A Lambert, Fundamentals of first python programs, 2nd edition

EasyFrame.__init__(self, width = 300, height = 200, title = "Label Demo")

Another way to change a window’s attributes is to reset them in the window’s attribute dictionary

​

In the labeldemo’s __init__ method,

​

self[“background”]=”yellow”

43 of 53

Window

Ref. Kenneth A Lambert, Fundamentals of first python programs, 2nd edition

44 of 53

Ref. Kenneth A Lambert, Fundamentals of first python programs, 2nd edition

45 of 53

Ref. Kenneth A Lambert, Fundamentals of first python programs, 2nd edition

46 of 53

Ref. Kenneth A Lambert, Fundamentals of first python programs, 2nd edition

47 of 53

Ref. Kenneth A Lambert, Fundamentals of first python programs, 2nd edition

48 of 53

Ref. Kenneth A Lambert, Fundamentals of first python programs, 2nd edition

49 of 53

Ref. Kenneth A Lambert, Fundamentals of first python programs, 2nd edition

50 of 53

Ref. Kenneth A Lambert, Fundamentals of first python programs, 2nd edition

51 of 53

Ref. Kenneth A Lambert, Fundamentals of first python programs, 2nd edition

52 of 53

Ref. Kenneth A Lambert, Fundamentals of first python programs, 2nd edition

53 of 53

Ref. Kenneth A Lambert, Fundamentals of first python programs, 2nd edition