The Pillow Library and Image Coordinates

We have the Pillow imaging library available on our Python installation on the server. It presents a friendly interface for creating and modifying images.

In order to understand how to draw lines on an image, you must first understand the coordinate system used in images. It's a straightforward 2D Cartesian coordinate system. As shown in the image below, the main difference from normal x/y-plane coordinates is that the origin (coordinate (0, 0)) is at the upper-left corner, and all coordinate values are positive, where the x axis is increasingly positive in a rightward direction and the y axis is increasingly positive in a downward direction:

Here is some code that uses Pillow to create a 320×240-pixel RGBA image initially filled with the color red, draws a black line from the origin (upper-left corner) to the bottom-right corner, and emits the image in PNG format on standard output:

pillow_demo.py

import sys
from PIL import Image, ImageDraw
 
image = Image.new('RGBA', (320, 240), 'red')
draw = ImageDraw.Draw(image)
draw.line(((0, 0), (319, 239)), fill='black')
image.save(sys.stdout, 'PNG')

Were you execute the following command on the server, the image would be placed in file ~/public_html/pillow_demo.png and therefore be available via the URL jeff.cis.cabrillo.edu/~/pillow_demo.png

python pillow_demo.py >~/public_html/pillow_demo.png

The image itself should look as follows:

const command = `./your_program.py ${document.getElementById('demo-width').value} ${document.getElementById('demo-height').value} "${document.getElementById('demo-bg').value}" "${document.getElementById('demo-fg').value}" ${document.getElementById('demo-min-area').value}`;
document.getElementById('demo-command').textContent = command;
const url = `/util/cs20p-sierpinski?width=${document.getElementById('demo-width').value}&height=${document.getElementById('demo-height').value}&bg=${encodeURIComponent(document.getElementById('demo-bg').value)}&fg=${encodeURIComponent(document.getElementById('demo-fg').value)}&min-area=${document.getElementById('demo-min-area').value}`;
document.getElementById('demo-image').setAttribute('src', url);

Tips

Drawing a Sierpiński triangle is easily accomplished in a recursive manner. You will probably want to implement a recursive function that accepts arguments indicating three points of a triangle. Consider them to be Top, Left and Right in the diagram below. The algorithm would then consist of the following steps:

1. Compute the midpoints between Top and Left, Top and Right, and Left and Right. Don't round any numbers! Pillow will be happy to round coordinates to the nearest pixel, so keep your arithmetic precise to get the most precise vertex coordinates.
2. If the area of the triangle connecting those three midpoints is smaller than the predetermined minimum area, stop the process (i.e., return—this is a base case).
3. Otherwise:
   1. Draw a triangle by drawing three lines connecting the three midpoints.
   2. Perform recursive calls to this function to draw each of the three Sierpiński subtriangles (i.e., T1, T2 and T3 in the diagrams below). These are recursive steps.

Submission

Submit your source-code file(s) via turnin.

Due Date and Point Value

Possible point values per category:
---------------------------------------
Correct output                       60
Possible deductions:
  Style and practices            10–20%
Possible extra credit:
  Submission via Git                 5%
---------------------------------------