Triadica Guidebook

Lines

Normally you can use :line-strip or :lines for lines:

object $ {}
  :draw-mode :line-strip

However in WebGL, lines has a constent width of 1, which does not meet many scenarios.

There are two components provided under triadica.comp.line:

Segments

comp-segments draws many lines into width 2 rectangles. Brushing direction is calculated from forward direction:

comp-segments $ {} (; :draw-mode :line-strip)
  :segments $ []
    {}
      :from $ [] 0 0 0
      :to $ [] 0 100 0
    {}
      :from $ [] 400 50 -20
      :to $ [] -10 300 40
  :width 2

for curves, try:

comp-segments-curves $ {}
  :curves $ []
    -> (range 400)
      map $ fn (idx)
        let
            angle $ * idx 0.08
            h $ * 0.1 idx
            r 40
          {} $ :position
            []
              + 100 $ * r (cos angle)
              , h $ * r (sin angle)

Tube

comp-tube draws a curve into a tube by generating triangles. Some drawbacks is you have to pass a :normal0 argument to help it decide how to start to cross product for tube surfaces. normal0 is a vec3 vector that is not supposed to be parallel with any 2 points, default value is [] 0 0 1. For smooth curves, it's not hard to pick:

comp-tube $ {} (:draw-mode :line-loop)
  :curve $ -> (range 200)
    map $ fn (idx)
      let
          angle $ * 0.04 idx
          r 200
        {}
          :position $ []
            * r $ cos angle
            * r $ sin angle
            * idx 0.6
  :normal0 $ [] 0 0 1

Brush

comp-brush offer a brush for quickly adding triangles perpendicular to eye sight casted from camera. It's a brush(or 2, 3 brushes) painting extra colors. Default brush is [] 8 0. It may not look good from specific angles, but it's a lot cheaper:

comp-brush $ {} (; :draw-mode :line-strip)
  :curve $ -> (range 200)
    map $ fn (idx)
      let
          angle $ * 0.06 idx
          r 40
        {}
          :position $ []
            * r $ cos angle
            * r $ sin angle
            * idx 0.6
  :brush $ [] 8 0
  :brush1 $ [] 4 4
  :brush2 $ [] 6 3

For tube and brush, more details is explained in the video(Chinese).

Strip light

comp-strip-light draws lines with discrete hexagons, making it looks like strip lights. A gravity option is supported to defined how the strip light is curved.

comp-strip-light
  {} (; :draw-mode :line-strip)
    :lines $ []
      {}
        :from $ [] 0 0 0
        :to $ [] 100 100 0
    :dot-radius 4
    :step 6
    :offset 12
    :gravity $ [] 0 -0.0008 0
    :color $ [] 0.1 0.9 0.5

color field uses HSL color.