Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Let's draw something else, something that is a little less challenging to actually visualize. Let's draw a circle.
The ellipse function takes 4 parameters, the first two determine the position of its center and the other two determine the width and height of the ellipse respectively, when these two values are the same the resulting shape is a perfect circle. So the circle is basically a special case of the ellipse primitive. Try and change the values and see how this code behaves.
Other primitives in p5js include the triangle, rect, quad, ellipse, and arc. Each of these needs a certain number of parameters to determine the reference points of the shape in the coordinate system, for example a triangle has 3 points, and each point has 2 components, the X component and the Y component, right? Therefore the triangle() function will require 6 parameters.
The circle and the square are special cases of ellipse() and rect() respectively. Let's play around with some of these.
As you can see when we try to draw things relative to each other, the calculations to place things on the canvas can become quite complex and difficult to track, in this case we are using a variable named xpos to keep track of the x position of our shapes, but then we have to calculate the x coordinate coordinate of each shape. This will quickly become quite a hassle to maintain and our code will become littered with magical numbers that we will not be able to read a few weeks from now. There must be a better way!
A point is a one dimensional primitive, so we only need to pass the X and Y position of its location to draw it. But a line can be two dimensional, to define a line we need to have two points. Therefore we need two coordinates.
Do it yourself: try the same thing with the line that you tried with the dots, in the X axis and then try again for the Y axis.
Using simple lines and a coloring trick we can draw a button, or let's better call it a shape that our eye will read as a button.
This simple coloring technique is fundamental to how we perceive UI widgets, most early browser buttons were draw using variations of this technique. It is so fundamental that artist Jan Robert Leegte made an artwork about it in the first example that I know of UI-inspired minimalism.
Or if you prefer an old material design approach to drawing a button.