15. Quad, Triangle, Point

Quad, Triangle and Point are three vertex canvas instructions. For all three, we have to give a set of points.

---

Quad requires 4 points, or 8 x,y coordinates. Triangle needs 3 points, or 6 x,y coordinates. The Point instruction can have any number of x,y points. For the Point instruction, we may set the pointsize bigger.

---

This is the Python program, based on BoxLayout.

# ex15.py

from kivy.uix.boxlayout import BoxLayout
from kivy.app import App

class Ex15(BoxLayout):
    pass
   
class Ex15App(App):
    def build(self):
        return Ex15()

if __name__=='__main__':
    Ex15App().run()

---

The kv file refers to two different coordinates: x1, y1, and x2, y2. We can make any Quad shape, here they are arranged to make a rectangle, specifically a square.

---

The set directive is used to set the 4 constants. Then the window is cleared with a color with a slight blue tint.

---

The color is set for the Point instruction. We give them 4 x,y coordinates, corresponding to the 4 corners of the square. To make them easy to see, we set a large pointsize. Then, a color is set for the Quad, which is given, the same four set of coordinates.

---

This creates the 4 Triangles. All the four sides have two points on the square perimeter. The last point is 100 pixels from the midpoint of the respective edge. The first triangle points upward, the next downward, the third rightwards, and the fourth leftwards.

# ex15.kv

#:set x1 300
#:set y1 200
#:set x2 500
#:set y2 400

<Ex15>:
    canvas:
        Color:
            rgb: .9,.95,1
        Rectangle:
            pos: self.pos
            size: self.size
        Color:
            rgb: .25,.5,.75
        Point:
            points: x1,y1, x1,y2, x2,y2, x2,y1
            pointsize: 50
        Color:
            rgb: 1,.1,.5
        Quad:
            points: x1,y1, x1,y2, x2,y2, x2,y1
        Color:
            rgb: 1,.5,.1
        Triangle:
            points: x1+50,y2, x2-50,y2, (x1+x2)/2,y2+100
        Triangle:
            points: x1+50,y1, x2-50,y1, (x1+x2)/2,y1-100
        Triangle:
            points: x2,y2-50, x2,y1+50, x2+100,(y1+y2)/2
        Triangle:
            points: x1,y2-50, x1,y1+50, x1-100,(y1+y2)/2

---

This is the result. The square has a reddish color. The four points have a bluish color. The four orange triangles point away from the square.

---