Processing: Shape Primitives

I've written about lines and how to animate but there are a lot more you can do just by learning their built-in functions. Beside lines and points, Processing is also equipped with functions to draw various shapes.

In order to draw a shape you will need to define a parameter called "fill." If you are graphics person you already know but this describes the color that fills the shape. In other words kind of like Interior color. Borders will be colored with stroke() color like lines or points. so yes you can have two separate colors.

but is that necessary? if you don't need stroke color you just do
noStroke();
This will eliminate stroke from the shapes you draw that point on.

so now how do you draw shapes? easy.. functions you use are "triangle", "rect", "quad", "ellipse" and you know what they do..


size(400, 400);
smooth();
background(0);

noStroke();
fill(120);

type this in for set up and followed by:


triangle(30, 100, 100, 100, 50, 50); // x1, y1, x2, y2, x3, y3

Play with this for a while and get grasp of how it works.
Then you can move on to which ever ones you like but try one by one since they all are a little different from each other.

For triangles, you will notice that for some combination, Processing won't draw a triangle. This is because Processing interprets vertices in a clockwise order. so basically if x3 is larger than x2, y3 needs to be smaller than y2, etc there are many condition that coodinates you put in don't become a triangle shape. (well just figure it out yourself as it is alot faster that way than reading and trying to visualize.)


rect(10, 10, 60, 70); // x, y, width, height


ellipse will draw ellipse but it will draw a circle when the width and height values are the same

ellipse( 100, 80, 30, 30); // center x, center y, width height


This is one of the less obvious ones but this will draw a quadrilateral or a shape that has four vertices. Corners won't be right angle.

quad(10, 10, 30, 10, 70, 100, 10, 100);


quad() also draws vertices in clockwise order but this one is much more playable. This is true especially when you have fill property set (like i've done above) you can draw shapes that has four sides but not quads and still look good. try it for yourself.