Introductory Assignments

Pa: Draw some shapes

After following the introductory tutorials, you should be able to write some code to draw some shapes (rectangles and ellipses.)

Pb: Organize and upload your files

The tutorial allowed you to learn some basics about Processing code without connecting it with your own web page. We should continue using GitHub and build on what we learned about HTML so that our new skills can make our webpages even better.

As mentioned in the previous page, your teacher should have given you a set of files and folders on the D:/ drive of your computer. You should upload those folders to GitHub. Every time you want to make a new example sketch, make a copy of the Template example folder, give it a new name, then edit the index.html and sketch.js files inside that folder. When you're ready, upload the enitre folder to GitHub, inside the p5 folder.

Show that you have completed this assignment by including a link in your portfolio that connects to a web page that displays a sketch that draws shapes of your own design.

Pc: Draw a house

Think about how you would draw a house from simple shapes. See if you can write an "algorithm" for drawing a house (a set of step-by-step instructions.) If you were given one value for the size of the house drawing (say the width is 100 pixels), could you calculate appropriate sizes and positions for the other parts? In a sketch, declare a variable at the beginning like this:
var houseWidth = 100;
Then write the instructions to draw the other parts by calculating values to give to the various shape functions. For example, to draw the basic rectangle for a house that is half as tall as it is wide you might use the command:
rect(width/2, height/2, houseWidth, houseWidth/2);
width/2 and height/2 position the top left corner of the rectangle in the middle of the canvas (half the width and half the height.) houseWidth makes the horizontal width of the house equal to the value in that variable: 100. houseWidth/2 makes the vertical height of the house equal to half the width: 50.

VERY simple example.

Make sure that you have done the calculations correctly by changing the value of houseWidth and drawing another house with a different size. You should be able to do this by changing the value of houseWidth, then repeating EXACTLY the same drawing instructions. Here's what I mean (View source to see my code):

Two houses.

Show that you have completed this assignment by including a link in your portfolio that connects to a web page that displays a sketch that draws two houses with different sizes but otherwise identical.

Some students were asking how to put the drawing canvas at different places on the web page. There are two answers to that question:

1. The simplest way is to give the canvas a variable name when you create it, then set its position. However, in order to set positions on the web page, you will also have to "uncomment" the line in the index.html file so that you can use the "dom" libraries.
   

                       function setup() {
                           var myCanvas = createCanvas(600, 400);
                           myCanvas.position(100, 100);
                       }
                     

2. The other way is to create a div tag in the HTML with a particular id, for example, myDrawing. Then you could put your canvas into the place where you created the div tag on the HTML web page using the following code:
   

                       function setup() {
                           var myCanvas = createCanvas(600, 400);
                           myCanvas.parent('myDrawing');
                       }
                    

Pd: Draw faces

Artists know that human faces have certain proportions or relationships between sizes and positions. Here is one example that Ms. Gale uses:

You could also do some research on the internet to find more examples.

In the last assignment, you made an algorithm and a sketch for drawing houses. Now see if you can do something similar for drawing faces.

This will be a group project. Each person in your group will contribute one or two features of the face by writing functions that take the basic information about the size and position of the face then calculate and draw the feature at the right place(s) and size. You MUST use functions for this assignment, and you MUST include functions written by different people. Each function MUST include a comment with the name of who wrote it.

The other important part of this assignment is to use VARIABLES. at the top of your sketch, you should create these variables:

    var positionX = 200;
    var positionY = 200;
    var headSize = 200;
        

When you are drawing all other shapes that are parts of this face, you MUST calculate their positions and sizes based on these three variables, NOT the numbers. For example, if you wanted to draw an ellipse for the mouth, you might write:

    ellipse(positionX, positionY+(headSize*3/8), headSize/4, headSize/10);
        

I will be testing your sketch by changing the initial values of the three variables. Your face should move to a new position and be a different size, but should look similar.

Here is an example.

Show that you have completed this assignment by including a link in your portfolio that connects to a web page that displays a Processing sketch that draws a face.