{ "nbformat": 4, "nbformat_minor": 0, "metadata": { "colab": { "provenance": [] }, "kernelspec": { "name": "python3", "display_name": "Python 3" }, "language_info": { "name": "python" } }, "cells": [ { "cell_type": "markdown", "source": [ "**Name:**\n", "\n", "**Date:**\n", "\n", "**Description of activity:**\n" ], "metadata": { "id": "sczaGya92i48" } }, { "cell_type": "markdown", "source": [ "# Mount Google Drive\n" ], "metadata": { "id": "mv3Oarmb2zRK" } }, { "cell_type": "code", "execution_count": 1, "metadata": { "id": "1i3bvglG2d8z", "colab": { "base_uri": "https://localhost:8080/" }, "outputId": "bd20726a-4797-4d7f-e4f8-def313c1fcdd" }, "outputs": [ { "output_type": "stream", "name": "stdout", "text": [ "Mounted at /drive\n" ] } ], "source": [ "from google.colab import drive\n", "drive.mount('/drive')" ] }, { "cell_type": "markdown", "source": [ "# Import Libraries" ], "metadata": { "id": "GXNipdi-3F1Z" } }, { "cell_type": "code", "source": [], "metadata": { "id": "AdEIO3u4J6Ek" }, "execution_count": null, "outputs": [] }, { "cell_type": "code", "source": [ "from PIL import Image, ImageDraw\n", "from matplotlib import pyplot as plt" ], "metadata": { "id": "8Nmg8IhE3KfV" }, "execution_count": 2, "outputs": [] }, { "cell_type": "markdown", "source": [ "# Exercises\n", "**Make an Empty Image**\n", "\n", "The following code makes an empty black image of size 100x150. Run this code." ], "metadata": { "id": "MJ8VoPpTy-mD" } }, { "cell_type": "code", "source": [ "myImage = Image.new('RGB',(100,150))\n", "myImage" ], "metadata": { "id": "FOgwUiHNzInJ", "colab": { "base_uri": "https://localhost:8080/", "height": 167 }, "outputId": "affbc83f-2268-4570-a3ca-94cce89049d5" }, "execution_count": 3, "outputs": [ { "output_type": "execute_result", "data": { "text/plain": [ "" ], "image/png": "iVBORw0KGgoAAAANSUhEUgAAAGQAAACWCAIAAACn2roRAAAAQklEQVR4nO3BAQEAAACCIP+vbkhAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAMC7AbBeAAEQPda+AAAAAElFTkSuQmCC\n" }, "metadata": {}, "execution_count": 3 } ] }, { "cell_type": "markdown", "source": [ "**Experiment with empty images**\n", "\n", "Create and show at least two more empty images of different sizes and colors. To specify a color for the empty image, you will add a third parameter in the new function, after the dimensions. You may use any of the [common colors used in webpages](https://www.w3schools.com/colors/colors_names.asp)." ], "metadata": { "id": "HUjKXo8JzhiZ" } }, { "cell_type": "code", "source": [], "metadata": { "id": "INL6ahJQzfXH" }, "execution_count": null, "outputs": [] }, { "cell_type": "markdown", "source": [ "**Analysis Questions:** (Write your answers here in this text cell.)\n", "1. What color is an empty image if you don't provide a third parameter?\n", "\n", "2. What happens if you provide only one parameter? If you provide more than three parameters?\n", "3. What happens if you provide the parameters in a different order?\n", "\n" ], "metadata": { "id": "lGhTaVgZ0AHx" } }, { "cell_type": "code", "source": [], "metadata": { "id": "4jVEynKV8vqK" }, "execution_count": null, "outputs": [] }, { "cell_type": "markdown", "source": [ "**Locations in an Image**\n", "\n", "The [ImageDraw](https://pillow.readthedocs.io/en/stable/reference/ImageDraw.html) module provides several functions that you can use to add text, lines, rectangles, and ellipses to a picture. When you add a new drawing element to an image, you need to specify where to add it. The location is the number of pixels over from the left edge and the number of pixels down from the top. Location (0, 0) is the pixel in the top left corner. If *w* is the width of your picture and *h* is its height, then location (*w* - 1, 0) is the pixel in the top right corner, and location (0, *h* - 1) is the pixel in the bottom left corner.\n", "\n", "The two numbers that make up a pixel's location are called its *x* and *y* coordinates, but note that, unlike in mathematical graphs, the *y* coordinates start at the top and grow as they go down, not as they go up.\n", "\n", "**Analysis Questions:** (Write your answers here in this text box.)\n", "\n", "1. What is the location of the pixel in the bottom right corner?\n", "2. What is the location of the pixel in the center of the picture?\n" ], "metadata": { "id": "mJ27vuhd1aBO" } }, { "cell_type": "markdown", "source": [ "**Drawing on a blank canvas**\n", "\n", "In this section you will be using the following drawing functions provided by ImageDraw to create an interesting picture:\n", "\n", "\n", "* line([x1, y1, x2, y2], fill, width) \n", "* rectangle([x1, y1, x2, y2], fill, outline, width)\n", "* ellipse([x1, y1, x2, y2], fill, outline, width)\n", "* point([x1, y1, x2, y2, x3, y3, …], fill)\n", "* text((x, y), string, fill)\n", "\n", "The following code is from the example in the [Encodings](https://http://www.cs.kzoo.edu/cs103/Readings/EncodingAPicture.pdf) reading. The reading also gives more details on how to use these functions. Run this code.\n" ], "metadata": { "id": "1LWncgOz85L6" } }, { "cell_type": "code", "source": [ "myCreation = Image.new('RGB',(100,150))\n", "d = ImageDraw.Draw(myCreation)\n", "d.text((50,50),\"World\",fill=(200,100,150))\n", "d.ellipse([10,10,40,30],fill=(200,20,200),outline=(200,200,100),width=2)\n", "d.line([35,85,10,60],fill=(200,150,100),width=3)\n", "d.text((0,0),'Hello',fill=(200,200,200))\n", "myCreation" ], "metadata": { "id": "Qe5Pb2C_0VoN", "colab": { "base_uri": "https://localhost:8080/", "height": 167 }, "outputId": "155b78a9-17a9-486f-c94b-b10b200bd04c" }, "execution_count": 4, "outputs": [ { "output_type": "execute_result", "data": { "text/plain": [ "" ], "image/png": "iVBORw0KGgoAAAANSUhEUgAAAGQAAACWCAIAAACn2roRAAACRElEQVR4nO3bTXKDIBiAYZLpoThEj+HKA2XlMXIIj9UFlRJU5BPo8PM+iza1SWZ8B6OiUQoo4RHzpHVd7WOt9eGSETzMamut7fqfrbx9ZmBJ3768v72BIwpx71UNeZpf7mbljhd3edi9V7XlN9Z+LPS6win8zdDqdVNKcfwB7+3sYkZZzC4CA4k6zgpY1+nsX1oviW9em5uxAo32uqkmjuVn+j6v9v5o1EEyQayPTIFGe061ppPFxvorJcrk2pK12yvyRHpSKiGT672oZns9L5+Rs9T2PqL9Qz2uY8G6iJV5WBnNDi5GlgCxBIglQCyBi1i/B0TvrIdFzR5qMbIErmNlHlzNDivFuaEIsw4CzGcJMFMqwBw8AAAAAAAAAABAS1Kv7lRlnV72sV7m/XJ34Q2V3hhiVs/+dCsE6GU+zJHYyDr9Cl1VzNp6A8T8qZc5PHAiQ8eodGTt2TSBx+FXpas3lrslhpkWuYoEVBrLXfN/qBCp3r3hOr3M55GNdfiZdbbELvcWlk2/vtq7u7+Qq29YvCZFr00oltuIXiocS88fN1jR6+o+eHo5Im7tptcm6jiLXkbsQSm9lOgInl6y053Be4nPDUfudedEetheN2cdxux1f4pmwF5J81mj9Uqd/BuqV4aZ0nF65ZlWHqRXtjn4EXrlvGDRfa/MV3f67pX/UljHvYpcN+y1V6mLrF32KnhFur9eZS/fd9ar+L0Obi+vHY61PqYAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABQiR9TvhEef7wHlAAAAABJRU5ErkJggg==\n" }, "metadata": {}, "execution_count": 4 } ] }, { "cell_type": "markdown", "source": [ "**Create your own image**\n", "\n", "Now it's time for you to experiment with using the drawing functions. In the Code cell below, create a new image of size at least 100x100 of whatever color you wish. Remember, you can use any of the [common colors used on web pages](https://www.w3schools.com/colors/colors_names.asp). Add some lines, rectangles, ellipses and some text to make a fun image. The [ImageDraw](https://pillow.readthedocs.io/en/stable/reference/ImageDraw.html) module contains additional functions for drawing if you'd like to explore other shapes. Feel free to experiment! Ask a TA or instructor for help if you get stuck." ], "metadata": { "id": "Xu8P3rx5_vYL" } }, { "cell_type": "code", "source": [], "metadata": { "id": "W8EpLFR8A4Up" }, "execution_count": null, "outputs": [] }, { "cell_type": "markdown", "source": [ "**(OPTIONAL) If you have time**\n", "\n", "Instead of drawing on a blank image, try drawing on an image that you have on your computer. \n", "Remember, to use an image from your computer, you will need a statement similar to myImage = Image.open(\"/drive/My Drive/CS103Labs/someImage.jpg\") to open your image.\n", "\n" ], "metadata": { "id": "7Su4WNMTDhWg" } }, { "cell_type": "code", "source": [], "metadata": { "id": "M9S7-YYQEdsW" }, "execution_count": null, "outputs": [] }, { "cell_type": "markdown", "source": [ "# Saving and Submitting\n", "\n", "Once you have created an image that you are pleased with, go to Runtime and choose Run all. Skim through your notebook and make sure everything looks the way you expect. If it all looks good, save this notebook as a .ipynb file. (Go to Download -> Download .ipynb)\n", "\n", "Submit your .ipynb file on Kit." ], "metadata": { "id": "m8jTI0_OBDRM" } } ] }