Picture This

Calvin (Deutschbein)
Slides by Jed Rembold

11 March 2022

Announcements

  • Project 2 due tonight at approximately midnight.
  • Problem Set 5 released Monday
    • Two problems with one additional extra credit option

Review!

What would be the contents of the file Test.txt after running the code to the right?

M = ord("A")
L = "".join([chr(M+i) for i in range(26)])
with open("Test.txt", "w") as f:
  for i in range(len(L)):
    if L[i] in "aeiou":
      f.write("\n")
    elif i % 2:
      f.write(L[i].upper())
    else:
      f.write(L[i].lower())
aBcDeFgHiJkLmNoPqRsTuVwXyZ
AbCdEfGhIjKlMnOpQrStUvWxYz

BcD
FgH
JkLmN
PqRsT
VwXyZ

bCd
fGh
jKlMn
pQrSt
vWxYz

Tabulation

  • Arrays can also be useful when you have a set of values and you need to count how many values fall into a different ranges
    • Process is called tabulation
  • The idea is that for each piece of data we encounter, we figure out a corresponding index in our tabular array and then increment the value of that element
  • Your book shows this for seeing how many times each letter of the alphabet appears in a text sequence
  • Let’s instead look at an example of distances between cities in western North America.

Multidimensional Arrays

  • We know that elements of a list can be lists in and of themselves. If the lengths of all the lists making up the elements of a list remain fixed, then the list of lists is called a multidimensional array
  • In Python, we can create multidimensional arrays just by creating lists of constant length as the elements to another list
magic = [ [2, 9, 4], [7, 5, 3], [6, 1, 8] ]
  • We can always get the individual element of one of the inner lists by using 2 indices.
    • magic[1][1] = 5
    • magic[-1][0] = 6

Picturing Multidimensional Arrays

  • Multidimensional arrays are commonly pictured as each inner list being stacked beneath the previous
  • In such a representation, the outermost/first elements/indices represent the row, and the inner/second elements/indices represent the column

[ [2, 9, 4], [7, 5, 3], [6, 1, 8] ]


Initialize a Chessboard

image/svg+xml

Initialize a Chessboard

image/svg+xml r n b q k r n b p p p p p p p p R N B Q K R N B P P P P P P P P 0 1 2 3 4 5 6 7 0 1 2 3 4 5 6 7

Initialize a Chessboard

image/svg+xml r n b q k r n b p p p p p p p p R N B Q K R N B P P P P P P P P 0 1 2 3 4 5 6 7 0 1 2 3 4 5 6 7 [ ] , , , , , , , [ ] , , , , , , , [ ] , , , , , , , [ ] , , , , , , , [ ] , , , , , , , [ ] , , , , , , , [ ] , , , , , , , [ ] , , , , , , , [ ]

The GImage Class

  • You can display an image from a file in PGL using the GImage class. GImage(filename, x, y)
    • filename is the string containing the name of the file which contains the image
    • x and y are the coordinates of the upper left corner of the image
  • Best to use one of the common image formats
    • Graphical Interchange Format (GIF): fish.gif
    • Joint Photographic Experts Group (JPEG): fish.jpg
    • Portable Network Graphics (PNG): fish.png

Images and Copyrights

  • Most images that you might find on the web are protected by copyright under international law.
  • Ensure you have the necessary permissions before using an image
    • On the web, the image hosting site will often specify what rules apply to that image
      • Example: Images from www.nasa.gov can be freely used as long as you add an attribution line
    • Non-commercial use of an image can sometimes fall under “fair use” doctrine, but academic integrity and common courtesy both demand you cite or acknowledge any material you have obtained from others.

Example: VLA Moonset

from pgl import GImage, GWindow, GLabel

def image_example():
    gw = GWindow(800, 550)
    image = GImage("VLA_Moonset.jpg")
    image.scale(gw.get_width() / image.get_width())
    gw.add(image)

    citation = GLabel("Image Credit: Jeff Hellermann, NRAO / AUI / NSF")
    citation.set_font("15px 'Sans-Serif'")
    x = gw.get_width() - citation.get_width() - 10
    y = image.get_height() + citation.get_ascent()
    gw.add(citation, x, y)

2D Arrays → Images

  • Image data is commonly stored in two-dimensional arrays
  • Each element stores information about the pixel that exists at that location
  • The GImage class lets you convert between the image itself and the array representing the image contents by using the get_pixel_array method, which returns a two-dimensional array of integers.
  • We could get the pixels from our example image using:
image = GImage("VLA_Moonset.jpg")
pixels = image.get_pixel_array()
  • The first index of the pixel array gets you the row, the second index gets you the column

Pixel Contents

  • Each element in a pixel array is an integer in which the 32 bits are interpreted as:

  • The first byte (8 bits) is the transparency or alpha
  • The next three bytes indicate the amount of red, green, and blue in the pixel, where each value varies from 0 to 255
    • Form the RGB of a color, generally expressed in hexadecimal form
      • 100101010x95
      • 001110010x39
      • 011000110x63
    • Overall color: #953963 or

Combining Light Colors

Additive Colors

Transparency

  • The first byte (8 bits) of the pixel value gives the transparency, which indicates how much of the background is allowed to show through
  • Often denoted with the Greek letter alpha: \(\alpha\)
  • Varies from 0 to 255 like the other 8 bit values:
    • 0 is entirely transparent
    • 255 is entirely opaque

Breaking out the Colors

  • You do not need to convert the pixel values yourself! PGL has built-in ways to extract the various colors
Function Description
GImage.get_red(pixel) Returns the integer (0-255) corresponding to the red portion of the pixel
GImage.get_green(pixel) Returns the integer (0-255) corresponding to the green portion of the pixel
GImage.get_blue(pixel) Returns the integer (0-255) corresponding to the blue portion of the pixel
GImage.get_alpha(pixel) Returns the integer (0-255) corresponding to the alpha portion of the pixel
GImage.create_rgb_pixel(r,g,b) Returns a 32-bit integer corresponding to the desired color
// reveal.js plugins