`std/look`

shapes, motion, layout (look context only)

# package look
# Opacity over 300ms
define Fade [s: shape] to [o: number]
  Tween "opacity" of s to o over 300ms

# Scale to 1.15 and back over 300ms
define Pulse [s: shape]
  Tween "scale" of s to 1.15 over 150ms
  after 150ms
    Tween "scale" of s to 1 over 150ms

std/look/basic is the default look described in spec/09. It is an ordinary Synod package using the phrases above.

Phrases

`look.Card for [n: node]`

The standard node card: rounded rect, name label

Gives: shape
Contexts: look
Kind: phrase, written in Synod
Source: look/card.synod:6
Examples: look/flight, look/motion, look/shapes

`look.Travel [s: shape] from [a: shape] to [b: shape] over [d: time]`

Move along a straight path

Gives: —
Contexts: look
Kind: phrase, written in Synod
Source: look/card.synod:14
Examples: look/motion

`look.Remove [s: shape]`

Fade out, then delete

Gives: —
Contexts: look
Kind: phrase, written in Synod
Source: look/card.synod:21
Examples: look/flight, look/motion

`look.Circle [r: number]`

A circle of radius r points

Gives: shape
Contexts: look
Kind: phrase, native
Source: look/look.synod:3
Examples: look/flight, look/motion, look/shapes

`look.Rect [w: number] by [h: number]`

A rounded rectangle

Gives: shape
Contexts: look
Kind: phrase, native
Source: look/look.synod:6
Examples: look/shapes

`look.Label [t: text]`

Text

Gives: shape
Contexts: look
Kind: phrase, native
Source: look/look.synod:9
Examples: look/flight, look/shapes

`look.Line from [a: shape] to [b: shape]`

A line that follows both shapes

Gives: shape
Contexts: look
Kind: phrase, native
Source: look/look.synod:12
Examples: look/shapes

`look.Group [l: list of shape]`

Shapes moved and faded together

Gives: shape
Contexts: look
Kind: phrase, native
Source: look/look.synod:15
Examples: look/shapes

`look.Fill [s: shape] with [c: color]`

Fill color (morphs)

Gives: —
Contexts: look
Kind: phrase, native
Source: look/look.synod:18
Examples: look/flight, look/motion, look/shapes

`look.Stroke [s: shape] with [c: color]`

Outline color (morphs)

Gives: —
Contexts: look
Kind: phrase, native
Source: look/look.synod:21
Examples: look/shapes

`look.Tween [p: text] of [s: shape] to [v: value] over [d: time]`

The only motion primitive (spec/09); of "x" or "y" it also takes a shape: that shape's position

Gives: —
Contexts: look
Kind: phrase, native
Source: look/look.synod:24
Examples: look/motion

`look.Effect [e: text] on [s: shape]`

"glow", "blur" or "trail", for 600ms

Gives: —
Contexts: look
Kind: phrase, native
Source: look/look.synod:27
Examples: look/motion

`look.Layout [kind: text]`

"ring", "row" or "grid" for node cards

Gives: —
Contexts: look
Kind: phrase, native
Source: look/look.synod:30
Examples: look/motion

`look.Place [s: shape] above [t: shape]`

Position relative to another shape; likewise below, beside

Gives: —
Contexts: look
Kind: phrase, native
Source: look/look.synod:33
Examples: look/flight, look/shapes

`look.Place [s: shape] below [t: shape]`

Position relative to another shape: below

Gives: —
Contexts: look
Kind: phrase, native
Source: look/look.synod:36
Examples: look/shapes

`look.Place [s: shape] beside [t: shape]`

Position relative to another shape: beside

Gives: —
Contexts: look
Kind: phrase, native
Source: look/look.synod:39
Examples: look/shapes

`look.Center`

An invisible point at the scene centre

Gives: shape
Contexts: look
Kind: phrase, native
Source: look/look.synod:42
Examples: look/shapes

`look.Orbit [s: shape] around [c: shape] at [f: number]`

Place on a circle of radius 300 around c, at fraction f of a turn (0 is 12 o'clock, clockwise)

Gives: —
Contexts: look
Kind: phrase, native
Source: look/look.synod:45
Examples: look/motion

`look.Flight [s: shape] from [a: shape] to [b: shape] for [m: msg]`

Move s from a to b, landing when m arrives (halfway when dropped)

Gives: —
Contexts: look
Kind: phrase, native
Source: look/look.synod:48
Examples: look/flight

`look.Fade [s: shape] to [o: number]`

Opacity over 300ms

Gives: —
Contexts: look
Kind: phrase, written in Synod
Source: look/motion.synod:3
Examples: look/motion

`look.Pulse [s: shape]`

Scale to 1.15 and back over 300ms

Gives: —
Contexts: look
Kind: phrase, written in Synod
Source: look/motion.synod:7
Examples: look/motion

Examples

flight

Shows look.Flight with net.Id and net.Type: balls fly with each message and land on arrival

# package main
# Shows look.Flight with net.Id and net.Type: balls fly with each message and land on arrival
use example.com/library/look/flight
use example.com/library/look/pingpong
use std/sim

define main
  set nodes to (sim.Cluster of 2 running pingpong)
  deliver (message pingpong.Start with Peer (item 1 of nodes)) to (item 0 of nodes)
  sim.StopAt 1s

# package flight
use std/look
use std/net
use std/sim
use std/theme

when (sim.Added n)
  draw (look.Card for n) as card for n

# A ball flies from sender to receiver and lands when the message arrives
when (net.Sent m from a to b)
  draw (look.Circle 6) as ball for (net.Id m)
  look.Fill ball with theme.Accent
  draw (look.Label (net.Type m)) as tag for (net.Id m)
  look.Place tag above ball
  look.Flight ball from (card of a) to (card of b) for m

when (net.Arrived m from a to b)
  look.Remove (ball of (net.Id m))
  look.Remove (tag of (net.Id m))

motion

Shows look.Layout, Pulse, Effect, Travel, Tween, Orbit, Fade and Remove: motion reacting to a message

# package main
# Shows look.Layout, Pulse, Effect, Travel, Tween, Orbit, Fade and Remove: motion reacting to a message
use example.com/library/look/motion
use example.com/library/look/pingpong
use std/net
use std/sim

define main
  set nodes to (sim.Cluster of 2 running pingpong)
  net.Latency between 50ms and 60ms
  deliver (message pingpong.Start with Peer (item 1 of nodes)) to (item 0 of nodes)
  sim.StopAt 1s

# package motion
use example.com/library/look/pingpong
use std/look
use std/net
use std/sim
use std/theme

when sim.Started
  look.Layout "row"

when (sim.Added n)
  draw (look.Card for n) as card for n

# Each Ping: the card pulses and glows, a mark travels, then orbits and fades away
when (net.Sent pingpong.Ping from a to b)
  look.Pulse (card of a)
  look.Effect "glow" on (card of a)
  draw (look.Circle 8) as mark
  look.Fill mark with theme.Warning
  look.Travel mark from (card of a) to (card of b) over 200ms
  after 200ms
    look.Tween "scale" of mark to 2 over 200ms
    look.Orbit mark around (card of b) at 0.25
    look.Fade mark to 0
    after 300ms
      look.Remove mark

shapes

Shows look.Circle, Rect, Label, Line, Group, Fill, Stroke, Center, Place (above, below, beside) and Card in a small look

# package main
# Shows look.Circle, Rect, Label, Line, Group, Fill, Stroke, Center, Place (above, below, beside) and Card in a small look
use example.com/library/look/pingpong
use example.com/library/look/shapes
use std/sim

define main
  set nodes to (sim.Cluster of 2 running pingpong)
  deliver (message pingpong.Start with Peer (item 1 of nodes)) to (item 0 of nodes)
  sim.StopAt 1s

# package shapes
use std/look
use std/sim
use std/theme

# Shapes at rest: circle, rect, label and line, a group, fill and stroke, relative placement
when sim.Started
  draw (look.Rect 1592 by 992) as ground
  look.Fill ground with theme.Paper
  look.Stroke ground with theme.Line
  draw (look.Circle 40) as disc
  look.Fill disc with theme.Accent
  look.Stroke disc with theme.Ink
  look.Place disc beside look.Center
  draw (look.Label "disc") as caption
  look.Place caption below disc
  draw (look.Rect 80 by 40) as plate
  look.Fill plate with theme.Good
  look.Place plate above disc
  draw (look.Line from disc to plate) as wire
  draw (look.Circle 6) as dot
  draw (look.Label "dot") as dotname
  look.Place dotname beside dot
  draw (look.Group {dot, dotname}) as pair
  look.Place pair below caption

when (sim.Added n)
  draw (look.Card for n) as card for n