#Finite Transitions

13 messages · Page 1 of 1 (latest)

weak hollow
#

Don't know if this belongs here but just started to check out cetz and finite to draw state machines for university projects.

I like most of the default styling, however on my more detailed state machines i like to be able to position every transition. Here i have a simple automata created on the wonderful website https://madebyevan.com/fsm and as you see both the input state and the 0 transitions are positioned in specific ways.

here is my code for an approximation of the same state machine, it's mostly allright but i would like to position my 0 transitions, any ideas here from cetz/finite masters?

#cetz.canvas({
  import cetz.draw: set-style
  import finite.draw: state, transition

  state((0,0), "q0", initial: (true))
  state((5,0), "q1", final: true)
  state((0,5), "q2")

  transition("q1", "q0", label: 2, curve: 2)
  transition("q0", "q1", label: 1, curve: 0)
  transition("q0", "q2", label: 2, curve: 2)
  transition("q2", "q0", label: 1, curve: 0)
  transition("q2", "q1", label: 2, curve: 2)
  transition("q1", "q2", label: 1, curve: 0)
  transition("q0", "q0", label: 0, curve: 0)
  transition("q1", "q1", label: 0, curve: 0)
  transition("q2", "q2", label: 0, curve: 0)
})
kindred garnet
#

@strong grove

#

^ is the author of finite

weak hollow
#

dam, bringing out the big guns, since it won't render here is how it looks like btw

strong grove
#

It is currently not possible to change the position of loops, but I'm working on a new version that will allow you to do exactly that.

weak hollow
#

ok cool, looking forward to try it

strong grove
#

But you could certainly draw the loops "by hand" using CeTZ' bezier path function. I will see if I can come up with a quick example when I'm back home.

weak hollow
#

haha no worries, i'll look into it

weak hollow
#

took your advice just used a bezier

#
#import "@preview/cetz:0.1.0"
#import "@preview/finite:0.1.0"
#cetz.canvas({
  import cetz.draw: set-style, bezier, content
  import finite.draw: state, transition

  state((0,0), "q0", initial: true)
  state((5,0), "q1", final: true)
  state((0,5), "q2")

  transition("q1", "q0", label: 2, curve: 2)
  transition("q0", "q1", label: 1, curve: -0.5)
  transition("q0", "q2", label: 2, curve: 2)
  transition("q2", "q0", label: 1, curve: -0.5)
  transition("q2", "q1", label: 2, curve: 2)
  transition("q1", "q2", label: 1, curve: -0.5)
  transition("q2", "q2", label: 0, curve: 0)

  bezier("q0.top", "q0.right", (1, 1), mark: (end: ">"), label: 1)
  content((0.8, 0.8), [0])
  bezier("q1.top-right", "q1.bottom-right", (6.5, 0), mark: (end: ">"), label: 1)
  content((6.3, 0), [0])
})
burnt thunderBOT
weak hollow
strong grove
#

Here is a tease for the next version of finite. It should be possible to get very close to your example:

#finite.automaton(
  (
    S0: (S0: 0, S1: 1, S2: 2),
    S1: (S0: 2, S1: 0, S2: 1),
    S2: (S0: 1, S1: 2, S2: 0)
  ),
  final: ("S1",),
  layout: (
    S0: (0,0),
    S1: (5,0),
    S2: (0,5)
  ),
  style: (
    transition: (
      curve: 0,
      label: (angle: 0deg)
    ),
    S0: (initial: bottom+left),
    S0-S0: (anchor: top+right),
    S1-S1: (anchor: right),
    S1-S0: (curve: 1),
    S1-S2: (curve: -1.5, label:(dist: -.33)),
    S2-S0: (curve: -1, label:(dist: -.33)),
    S2-S1: (label:(dist: -.33)),
    S0-S2: (label:(dist: -.33)),
  )
)