Skip to main content

Dynamics

The way how dynamics work is quite different compared to Wolfram Mathematica. The key changes were made for the sake of performance and control (or imagination of @JerryI - maintainer)

Architecture​

All dynamics in terms of what you expect from Mathematica's experience happens on the frontend's side, i.e. in your browser.

The core engine for that is used from WLX Library (WLJSTransport package).

Some expressions are meant for to be executed on frontend, i.e. not defined on the Kernel, then a user do not need to specify explicitly what and when should happen. In other cases, a user can use Offload attribute or CreateFrontEndObject to tell explicitly Wolfram Kernel pass an expression without evaluation to the frontend. Therefore one can play around with a way of splitting your code-base to archive the maximum flexibility and performance.

tip

More about it here

tip

Always keep in mind, which part of code executes on Wolfram Kernel (server) and what is delegated to the frontend (browser). This is the only way to write predictable and good performing code

If you are looking for just Manipulate​

There is a short cut, if you need to see how your curves changes with different parameters - see ManipulatePlot

Automatic tracking of held symbols​

It does not mean, that your Set statements will be reevaluated on change of a nested symbol, however, for most graphics primitives it works out of the box. Use Offload wrapper to hold symbols for the frontend

length = 1;

Graphics[{Cyan, 
  Rectangle[{-1,-1}, {length // Offload, 1}]
}]
info

Offload just does a simple trick - provides to a frontend an unknown symbol, which forces frontend to fetch it from the Kernel. Once it has been fetched, a dynamic link is created.

The binding itself happens between Rectangle and length, but not Graphics, therefore only partial reevaluation occurs. To know more about details see WLJS.

danger

Not all functions support dynamic binding or updates. Please check Reference section, if the argument or a function supports dynamic updates.

Event-based approach​

Working with GUI elements standing for input is done in more controllable way, where each button or slider is an event-generator

slider = InputRange[-1,1,0.1, "Label"->"Length"]
EventHandler[slider, Function[l, length = l]];

Once event was fired, the assigned handler function will be called.

slider symbol is actually a special object, that stores the representation of a slider and an ID for the event, that will be fired when a user drags a knob.

🍪 Example 0​

A simple rotation with a slider

EventHandler[InputRange[0, 2.0 Pi, 0.1], Function[a,
  angle = a
]]
% // EventFire;

Graphics[Rotate[Rectangle[{-1,-1}, {1,1}], angle // Offload]]

🍪 Example 1​

Let us demonstrate how a wave packet travels though space and time

cell 1
packet[x_, t_] := Sum[Sin[- w t + w x], {w, 0,3,0.05}] / 10;
line = Table[{x, packet[x, 0]}, {x, 0, 10, 0.1}];

Graphics[Line[line // Offload], Frame->True, FrameLabel->{{"amplitude"}, {"distance"}}]

here line symbol is dynamic. Now we need a slider to control time

cell 2
EventHandler[InputRange[0,5,0.5, 0], Function[t, 
  line = Table[{x, packet[x, t]}, {x, 0, 10, 0.1}];
]]

The desired result looks line this

Event handlers for graphics primitives​

It looks similar to Mathematica's implementation, where one can add an event handler to a random graphics primitive

p = {0,0};
Graphics[{
	White,
	EventHandler[
		Rectangle[{-2,-2}, {2,2}],
		{"mousemove"->Function[xy, p = xy]}
	],
	PointSize[0.05], Cyan,
	Point[p // Offload]
}]

The following event are available

  • drag - provides a list of two coordinates
  • zoom - provides one relative scaling number
  • click - provides coordinates, where the cursor clicked
  • mousemove - provides coordinates of a mouse
  • mouseover - provides coordinates once, when a mouse appears at a div

for 3D graphics the following events are provided

  • transform - sends an association with a new position of a dragged object
note

Event handlers wrapped around graphics primitives are parts of wljs-graphics-d3 library.

Autogeneration of dynamic symbols​

There is also an extension OffloadFromEventObject that allows to turn event objects into dynamic symbols

🍪 Example 2​

Let us show a fun example - implementation of FABRIK solver.

Define a random chain of segments with a random fixed lengths

cell 1
chain = {Cos[#[[1]]], Sin[#[[2]]]}&/@ RandomReal[{-1,1}, {65, 2}] // Sort;
lengths = Norm /@ (chain // Reverse // Differences) // Reverse;

The most stupid and simple implementation of FABRIK

cell 2
fabrik[lengths_, target_, origin_] := Module[{buffer, prev},
  buffer = Table[With[{p = chain[[-i]]},
    If[i === 1,
      prev = target;
      target
    ,
    
      prev = prev - Normalize[(prev - p)] lengths[[1-i]];
      prev 
    ]
  ], {i, chain // Length}] // Reverse;

  Table[With[{p = buffer[[i]]},
    If[i === 1,
      prev = origin;
      origin
    ,
    
      prev = prev - Normalize[(prev - p)] lengths[[i-1]];
      prev 
    ]
  ], {i, chain // Length}]
]

To show the result will will use a simple Line primitive coupled to a chain symbol and an inline event-handler coupled to a target point of a chain

cell 3
Graphics[{

  Line[chain // Offload], 
  Red, PointSize[0.06], 
  EventHandler[Point[{-1,-1}], {"drag"->Function[xy, chain = fabrik[lengths, xy, chain // First]]}], 
  Blue, Point[origin // Offload]
  
}, PlotRange->{{-2,2}, {-2,2}}, ImageSize->500, "TransitionType"->"Linear", "TransitionDuration"->30]

By dragging the red point you update all positions joints

use wheel to zoom and a left click to pan

info

All examples shown here are shipped together with a frontend. Locate

Last updated on