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
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
Subscribe to:
Post Comments
(
Atom
)
Really helpful tutorial :D
ReplyDeleteThanks!
DeleteCool! I've learned all this stuff already but it's nice to see a reminder! Thank goodness for documentation, amiright?
ReplyDeleteYeah haha it's nice to have a cheat sheet to collect all of the info together. And nice try, TE XD
Delete