Initializing The HTML Our initial HTML calls upon the API (application programming interface) and sets up the body of the page for use. We can make improvements

Initializing The HTML

• Our initial HTML calls upon the API (application programming interface) and sets up the body of the page for use. We can make improvements as we go to show our unique, professional approach. It is a good idea to gather this text from previous versions rather than type it again from the beginning.

Using Lines to Create Block Letters

• The line command follows the following syntax:

line(x1, y1, x2, y2)• We plot the X and Y of the start point and the

X and Y of the end point. Lines can be a very powerful graphiccommand with practice.

• Draw the graphic and plan your initials on it:

Practice 1

• Novice - Submit file, even if it is wrong, partial credit may be awarded

• Apprentice – Student initials appear on screen• Practitioner – Improved initial aesthetics with

colors and thickness• Professional – Decorate initials using an original,

unique approach

Aim: Create an individualized graphic with initials to use as a signature on future work

1. Write technical directions in journal and/or participate in full class discussion.

2. Take online quiz based on information given.3. Implement directions using HTML and

JavaScript on the <canvas>.4. Push for professional level achievement.5. Hand in work (even if unfinished).

Define our Function

• Instead of having our initials always appear in the same place, we can make their location offset by an X and Y variable. For example, line(100,100,200,100) line(x+100,y+100,x+200,y+100)

• Set up the function withvoid initials(int x, int y){

}then, put all the initial graphics command in the function with x and y Offsets.

Call Our Function

• When the initial function is defined correctly, we can now call it multiple times and put it on the screen in different places. We can even use a loop to have it appear many different places on the screen. Try setting up a for loop with the random() function to have the initials appear all over the screen.

The Power Of Function Calls

• To have the letters appear and update as they are calculated, use a stroke() function call and call the initial() function with random() placement of the X and Y for a cool graphic effect. We can now use our function to be called many times or to be used in a simple way to act as a signature on future graphic designs.

Practice 2


• Apprentice – Student creates and calls function that shows initials at X, Y

• Practitioner – Improved aesthetics with screen showing colors all over the canvas

• Professional – The canvas displays with a unique work of moving art that uses the function

Aim: Use Function Definition and Function Calls to Create Multiple instances of Initials




Update initial() with size• We will use the size as a percent of the initial

constant. That means if we use 50 in our function call, the letter will be half the original size. If we use 200 it will be double. Divide the size/100 then use size to offset each of the line values by multiplying itto the constant. Look at the example, but remember, yournumbers are different basedon your initials.

Call the Function with size

• Call the initial to just show up like this: initial(0,0,100);

• Have the function appear randomly on screen: initial(random(-200,screen.width), random(-200,screen.height),100);

• Random location and random size: initial(random(-200,screen.width), random(-200,screen.height),random(1,100));

Adjusting the Screen

• One neat programming trick is to adjust our canvas sized based on the screen size. Declare your screen size with:

size(screen.width,screen.height);• The user will then have the graphic take up

the whole screen. Press f11 to place the browser in full screen mode.

Practice 3


• Apprentice – Student creates and calls function that shows initials at X, Y

• Practitioner – Improved aesthetics with screen showing colors all over the canvas


Aim: Improve our function with a size parameter


• Apprentice – The length of the lines for the letters adjust with a size variable

• Practitioner – The size consistently scales when changed for the letters

• Professional – A unique, professional level with researched additional strategies

Spirit Animal Plan

Built in Graphics

• Apprentice level students will use line() and ellipse() and stroke() and fill() and strokWeight(). More advanced students have already realized that there is an entire library of built in graphics to use. Students may choose to create a work of art with the drawing they know or they may choose to search for the processing.js library and use what is found.

Scaling and Placement

• The example shows us how to make a shape change to a certain percent of its original form. If we call the function with a size of 50 the shape will be half as big. If we call it with 200 it will be twice as big. If we loop placement with a random(1,400) we can get lots of different sized spirit animals to decorate our screen. Use a size offset to enable control of how big our animal is.

Practice 4


• Apprentice – Student creates and calls function that displays a spirit animal

• Practitioner – The spirit animal function can be called with options on size and placement.


Aim: Create a function to call a spirit animal




Professional Signature

• Our initials can be used as our professional signature for future projects. Be certain that the graphic placed is unique and expresses who you are as a programmer. If done correctly, we can use this as an example to show potential employers and colleges our ability. At the least, there should be two initials that can be called to different places and different sizes.

Professional Spirit Animal

• Inside each of us is an intangible quality that is hard to express. Some of us will relate to a particular animal readily (such as the tiger!) Others may struggle to find any personal association with an animal. Either way, use simple shapes to create a basic drawing of an animal on the screen. Plan out what you want to do in your journal before creating.

Functional Page

• Be sure to submit the page.• The page may have multiple canvases or just

one.• The initials should be clearly displayed and

called with a function in multiple places and sizes.

• The spirit animal should be clearly displayed and called with a function in multiple places and sizes.

Page Aesthetics

• If the page looks unprofessional no one will take the time to look any deeper. This isn’t fair, but it is reality. If some one is considering us amongst other applicants and their page looks sharp while ours looks sloppy, they will probably get chosen before us. We should not judge a book by its cover. However, we should realize, that many books do in fact get judged by their cover.

Documents

Initializing The HTML Our initial HTML calls upon the API (application programming interface) and sets up the body of the page for use. We can make improvements