Drawing on the screen

Drawing in pSEngine is very easy. All you need is a draw(drawer) function in your object's class, which is automatically called by the engine. The drawer parameter of the function is an object of class Drawer with several member functions that allow us to create basic geometry, handle colors and strokes, and do some more complex operations.

Basic geometry

A basic draw() function looks like this:

draw(drawer) {
      drawer
          .stroke(255, 255, 255)
          .line(0, 0, 40, 150);
   }

We will talk about the stroke(255, 255, 255) part later (but be careful not to forget it, or else you won't be able to see the line). The line(x0, y0, x1, y1) function draws a line between (x0, y0) and (x1, y1). The other functions you can use to draw basic geometry are the following:

• ellipse(x, y, rx, ry): draws an ellipse of radii rx and ry with center (x, y).
• circle(x, y, r): ellipse where rx = ry = r.
• rect(x, y, w, h): draws a rectangle with width w and heigth h, where (x, y) is the position of the bottom left corner.

Finally, there is the point(x, y) function, which draws a point at position (x, y). This is more of a handler function used to create more complex shapes, since even with the stroke(255, 255, 255) option, you will only see a pixel drawn.

Strokes and colors

You can decide your shape to have a border with the functions stroke(r, g, b, a) and noStroke(). Stroke size can be tweaked with the strokeWeight(n) function, where n is the stroke size in pixels.

On the left, no stroke. On the center, default stroke. On the right, 5px stroke.

By default, the shapes are filled in white. You can change that with the fill(r, g, b, a) and noFill() functions.

More complex geometry

Each function in the Drawer class returns this. This means that they can be called in sequence, and their effects combined. Below is an example code:

draw(drawer) {
      drawer
          .stroke(255, 255, 255)
          .fill(237, 28, 36)
          .rect(-150, -150, 250, 250)
          .fill(255, 201, 14)
          .rect(-130, -130, 210, 210)
          .noStroke()
          .fill(0, 162, 232)
          .rect(-100, -100, 150, 150)
          .fill(0, 0, 0)
          .rect(-35, -35, 20, 20);
   }

The end result will look like this:

---

Previous (pSEngine basics) - Back to wiki home - Next (Custom pSEngine objects)