Intro to Javascript

Welcome to the first lesson of Javascript! Today you'll learn how to draw shapes.

Don't know what Javascript is? Read this first.

Below are a list of shapes and the code for them. The things inside the parenthesis are represented by letters. Here's what they mean:

x = x coordinate of center
x1, x2, x3 = multiple x coordinates of points
y = y coordinate of center
y1, y2, y3 = multiple y coordinates of points
w = width
h = height

Rectangle

rect(x, y, w, h);

Ellipse

rect(x, y, w, h);

Tirangle

triangle(x1, y1, x2, y2, x3, y3);

Line

line(x1, y1, x2, y2);

Point

point(x, y);

Arc (start and stop are the angle measures of the start and end of the line)

arc(x, y, w, h, start, stop);

Bezier (see explanation below)

bezier(x1, y1, cx1, cy1, cx2, cy2, x2, y2);

A bezier is one of the most complex shapes so here's some explanations.

The bezier is the curved shape below. It is like an arc but it isn't always in a circular shape. I added in some lines to help you visualize what the variables mean; "x1 and y1" are the start points of the line; "x2 and y2" are the endpoints; "cx1 and cy1" determine how slanted the curve will be (it basically controls the area boxed in the image below); "cx2 and cy2" determine the sharpness of the arc.

Quadrilateral

quad(x1, y1, x2, y2, x3, y3, x4, y4)

Go here to test out your skills! (Remember to substitute numbers for the variables.)

Click here for the first Java post. (Including my first "game" in Java.) See future lessons on the Series page.

I hope that was helpful! In the nest lesson I will teach you animation. Scratch on!

~ScratchStang

Unknown 12:39 PM 4 comments