JavaScript: Drawing Shapes and Coloring
You can draw all sorts of shapes in Java if you have Processing.JS uploaded to Javascript. We started off looking at how to make ellipses (ovals and circles), rects (squares and rectangles) and lines. All of these shapes require an x and y position. The x position tells the computer where to draw the shape from left to right (furthest left is 0 pixels and furthest right is 400 pixels.) The y position deals with up and down (top is 0 pixels and bottom is 400 pixels). Width tells the computer how wide you want the shape to be and height tells it how tall you want it to be. The various stroke commands tell the computer whether or not you want an outline to a shape as well as its thickness and color. The fill command tells the computer whether or not you want a particular color in the middle of the shape. Begin/endShape allows you to draw any weird or wonderful shape you want by giving x and y coordinates for each corner fo that shape. If you want to make a weird and curvy shape, use the curveVertex command. Use rotate to make your shape spin around. Be careful, though as if you just use this command it will rotate every shape you make after this because rotate doesn't actually rotate the shape, it rotates the whole canvas. You need to use pushMatrix and popMatrix to tell the computer exactly what shapes to rotate. Check out my first Project: What's for Dinner?
![](https://static.wixstatic.com/media/b86045_69a3a40db8774181ba7eb6a5e71a0158~mv2.png/v1/fill/w_604,h_491,al_c,q_85,enc_auto/b86045_69a3a40db8774181ba7eb6a5e71a0158~mv2.png)