CS 171 & 171L Introduction to Computer Science I & Lab Fall 2020 

Homework Assignment 1

Using Processing, create a window of size 750 by 750 pixels. It will contain the a section with your initials and a "self-portrait". Good programming requires good design, so start with a design on graph paper before you do any coding! To aid in your design, you can use the grid.pdf document, which contains a 1000 by 1000 grid that has lines every 25 units.

Interestingly, researchers in 2018 created an algorithm for generating faces of people that do not exist. Try it at thispersondoesnotexist.com/

You must use comments in your program. At the top, put your name and assignment number in a comment. Label each major section with a comment. Label each minor section as well, such as "letter D". Use whitespace (a blank line or two) to also separate section of your code to improve its readability.

Part 1: Initials (6 points)

Write a function that draws your initials and call it from draw(). Create a stylized rendering of your initials using the basic Processing graphics primitives: point, line, rect, arc, triangle, and ellipse. Use at least one of each of these. The letters should be between 50 and 100 pixels high. Use at least 5 different color/transparency values.

Part 2: Face (15 points)

Write a function that draws your face and call it from draw(). Create a graphical front-looking (not side profile) neck-up "self-portrait". Your face has several components that can be drawn independently. For each major component, write a function that performs that drawing task.

Head

Write a function that draws a head shape.

Hair/Hat

Write a function that draws hair and possibly a hat.

Nose

Write a function that draws a nose.

Ears

Write a function that draws ears.

Eyes

Write a function that draws eyes. The eyes should be large enough that the iris and pupils are clearly distinguished from the white sclera of the eyes. Use colors and shapes as needed.

Part 3: Moving Eyes (8 points)

Modify your eye function so that it calls a new function that draws a single eye. Your new eye function should take two parameters corresponding to the eye center position (x and y). The same method can be called twice with different actual parameters to draw each eye. Note that a change to the method will cause both eyes to change.

Modify your eye method so that the eyes follow the mouse. There will be two case to consider: the mouse is either inside or outside the eye. If the mouse is inside an eye, the position of the pupil/iris will be drawn at the mouse position. Otherwise, the pupil/iris will be drawn along an ellipse that is concentric with the ellipse defining the eye and along a line from the center of the eye to the the mouse position.

For a more realistic drawing, note that the pupil is concentrically located inside the pupil. As the eye moves, it rotates in the socket, altering the position of the pupil, which lets light into the interior of the eye, For this project, you should have a large sclera (white part). The radius of the iris should be smaller than the smallest radius of curvature of the eye. Change your eye shape if needed.

Given a right triangle with legs \(dx\) and \(dy\), the angle \(\theta\) is given by \(\theta = \tan^{-1} (dy/dx)\). Because \(dx\) might be zero, this can cause a problem in determining the angle. This is avoided by using the atan2 function, invoked as atan2(dy,dx). Note that in Processing, the atan2 function returns a value of type float. However in Java, the atan2 function returns a value of type double and will need to be invoked Math.atan2(dy,dx). You can typecast that to a float as described below.

Given an ellipse centered at the origin having a width of \(2a\) and a height of \(2b\), then \((a\cos(\theta), b\sin(\theta))\) is the coordinate of a point along the perimeter of the ellipse with angle \(\theta\). Note that when \(a=b\), the ellipse is a circle and the point along the circle is given by \((a\cos(\theta), a\sin(\theta))\). A general ellipse centered at \((h,k)\) having a width of \(2a\) and a height of \(2b\) has \((h+a\cos(\theta), k+b\sin(\theta))\) as the coordinate of a point along the perimeter of the ellipse with angle \(\theta\).

Given an ellipse centered at the coordinate \((h,k)\) having a width of \(2a\) and a height of \(2b\), then \((a\cos(\theta)+h, b\sin(\theta)+k)\) is the coordinate of a point \((x_e,y_e)\) along the perimeter of the ellipse with angle \(\theta\). Note that this point is not generally along the line from \((h,k)\) to \((x,y)\), but will still suffice for this project.

The pupil/iris is drawn centered at \((x_p,y_p)\), which lies along an ellipse with the same center, \((h,k)\), as the eye. However, the width and height of this ellipse is reduced by the size of the iris.

A point \((x,y)\) is inside the general ellipse when \[ \frac{(x-h)^2}{a^2} + \frac{(y-k)^2}{b^2} < 1. \]

Be mindful of the types you use in the program so that this computation is performed correctly. In particular, you should avoid using variables of type int. You may need to convert from variables of type double to type float. You can do this by explicitly typecasting:


float f;
double d;
d = f;           // no problem, widening conversion
f = d;           // error, narrowing conversion
f = (float) d;   // correct!

Part 4: Output (1 points)

Add code so that your programs saves a copy of your image in a file when a key is pressed. Use your name as a part of the filename. See the section labeled "Creating images from your work" in the Processing Overview tutorial for more information.

Basically, you need to call the save() function (not the saveFrame() function) when your drawing is complete. You should use a filename such as "DReimann.jpg" (using your own name instead of mine). Avoid using the # character. See the save page in the API for more information. Use a png or jpg file format.

Deliverables

Send me (dreimann@albion.edu) your Processing pde file as an attachment to an email message with Homework 1 as the subject line. Include your saved image as another attachment.

Be creative and have fun!


Copyright © 2020, David A. Reimann. All rights reserved.