Description

Question 1

Using a HTML5 Canvas & JavaScript, draw some cartoon on the screen using moveTo, lineTo, fill, stroke, and other JavaScript canvas functions.

●     Add a link from your portfolio page to the cartoon.

●     Cartoon page must have a title. Include a link under the canvas to return to your main page.

●     You should use an external JS file for your JavaScript code.

●     Comment the different sections of your cartoon using JS comments, so that someone can easily understand what is being drawn.

Your cartoon should include

●     Some caption text (must be written on the canvas!)

●     Background color

●     Sun, Moon, Clouds, Water, Mountains, Trees, and/or other background objects

●     Ground color

●     Living Quarters with details (windows, door, etc). Could be a boat, tent, house, spaceship, etc.

●     Use a for loop to draw grass, rocks, fence, ladder, or some other receptive item in the cartoon.

Helpful sites:

Refer to the HTML5 book Chapter 8 for details on how to draw.

http://www.w3schools.com/tags/ref_canvas.asp

http://www.w3schools.com/graphics/canvas_intro.asp

https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes

Question 2

Chart Program

Store the following values in a JSON array in JavaScript.

Apple: 20

Orange: 10

Banana: 15

Kiwi: 3

Blueberry: 5

Grapes: 8

JSON in JavaScript example is best. Here it is partially, to help start you off.

var fruit = [

            {name:"Apple", quantity:20, color:"red"},

            {name:"Orange", quantity:10, color:"orange"}

];

Using Javascript/Canvas, draw out a bar chart showing the quantity in sales for the fruit. Each bar must be in a color that matches the fruit, please choose a unique color for each fruit.

Write the name of the fruit, followed by the bar chart. You can choose horizontal or vertical.

Refer to the following examples for help:

https://www.w3schools.com/js/js_json_arrays.asp

http://www.sci.brooklyn.cuny.edu/~goetz/cisc3610/html5/canvas-text-advanced.html

https://www.w3schools.com/tags/canvas_fillstyle.asp

Please list your name (and up to one other student, if you did work with someone). And place it on your website in a section called Labs.

Sample output:

Question 3

Using a sprite sheet of numbers, have the program count from 0 to 10, at time increments of 500 ms. Program starts by having the number 0 displayed and then starts animating (500 ms increments) when the user presses an HTML button that is labled start. Stopping when the number 10 is reached.

Please be sure and center the numbers on the canvas. For the 10, it must be using a 1 and a 0 image from the sprite sheet, not a single 10 image.

Set the canvas size to the width of the number 10 from your images. Draw a background color, to make the canvas stand out from the page background.

●     Please set the viewport as follows

●     <meta name="viewport" content="width=device-width, initial-scale=1.0">

●     Find some set of numbers as a spite sheet / image:

○     https://www.google.com/search?q=numbers+as+images
Find a simple sheet that shows the numbers of equal size and evenly spaced out. This way its easy to use a formula to get the distances between the numbers.

Helpful links:

●     Animating Sprite Sheets

○     MOST USEFUL: Very helpful tool to cutup a sprite sheet. Might be useful to combine with this site to rebuild the sprite sheet and get JSON values for the pieces.

○     Other Interesting Tools

■     http://www.spritecow.com/ Helps you find the size and location of the sprites in a sprite sheet. The canvas only uses positive numbers for the offset of the image (but this example is for something else and has negatives for the offset). Play with the size/offset till it looks close.

■     https://yangcha.github.io/iview/iview.html - this shows the X/Y values of the mouse. You can use this to find the location to use to calculate the offset and the size.

●     Viewport

●     onclick event

●     Centering Content - Used to center the canvas and the button on the screen.

●     JSON & JavaScript

Question 4

Animation

●     Find images and sprite sheets online to mix and match to make an animated scene on the canvas.

●     Convert some animated GIFs online into a sprite sheet.

○     If you like to draw, you can make your own sprite sheet from this website.

■     Also available as a standalone program.

●     Have a background.

●     Have talk bubbles appear for people/animals/vechicles to say things.

●     Make an animated scene lasting several seconds that repeats in an endless loop.

●     Try to tell some sort of story.

To make things easier, have functions that move the various parts in your scene.

Might be useful to use JSON Array values to hold the positions/text/attributes of the items in your scene. And then go through a loop using those values to display the content.

Question 5

You might have to save the file to a server rather than running from localhost for this page to get localStorage to work.

●     Have a simple form for the the user to store their notes.

○     Create an input box (of 40 characters) to allow the user to title their notes

○     Create a textarea (10 rows, 80 columns) ) to let the user write some text.

○     As the user is writing the text (onChange) save the text to the localStorage.

●     If the user comes back to the page, restore the text back in the form, so that the user can resume their information.

●     Offer 2 buttons, one called Clear, and one called Undo.

○     Clear erases the text in the whole form and therefore in the localStorage.

○     Undo will restore the form to the previous values.

■     It would make sense to save a previous copy of the values of the localStorage into some variables as backup.

■     Think about what happens if the user presses Undo more than once, what should happen, it should hopefully toggle back/forth between the last two changes.