Example 5 - Graphics

Sometimes graphics are a good way to make a point. It's quite easy to create graphic images using PhotoShop, Gimp or something more specialized such as InkScape, but adding some animation and interactivity can help to make them really effective. The features available here won't win you any Oscars but may help a little to brighten up the odd page or two.

Here are some examples of the kinds of things that can be done with the small selection of SVG features we provide:

Graphics example 2 - Calculator
Graphics example 3 - Wacky Drumkit
Graphics example 4 - Solitaire
Graphics example 5 - A factory simulation

First, here's a test script that just exercises most of the features of the graphics, creating examples of each and placing them in a group or directly in the stage. The group moves across the screen while one of its components - a circle - moves down. The effect is that the circle moves diagonally as it's combining its own movement with that of the group.

The script creates two lines using one variable, by making it a 2-element array. It also verifies that the z-ordering works (the items are placed back to front in the order they are created) and that the grouped objects move when the group does but the others don't. A concurrent task - set up with fork - moves the circle while another makes it alternately larger and smaller, causing the pulsing effect.

Here's the script. Note the code for the ellipse and the first text item, which are both outside the group. So that they appear in a similar way on a PC and the much narrower screen of a mobile phone, we have code that gets the actual width of the page and adjusts the positions of these 2 items.

<div id="ec-container" style="width:100%;height:200px;border:1px solid black"></div>

<!-- EasyCoder script =================================================================-->
<pre id="easycoder-script" style="display: none;">!
! Basic graphics demo

  img DuckThink
  if mobile
  begin
    attach DuckThink to `ec-duckthink`
    remove DuckThink
  end

  div Container
  svg Stage
  group Group
  circle Circle
  rect Rect
  ellipse Ellipse
  line Line
  svgtext Text1
  svgtext Text2
  variable N
  variable M
  variable Width
  variable X

  set the elements of Line to 2

  attach Container to `ec-container`
  put the width of Container into Width

  create Stage in Container

  create Group in Stage

  create Rect in Group
    style `x:40;y:20;width:250;height:150;fill:pink;stroke:red;stroke-width:5;rx:10;ry:10`

  create Circle in Group
    style `cx:40;cy:-20;r:30;fill:blue;stroke:white;stroke-width:5`

  index Line to 0
  create Line in Group
    style `x1:110;x2:200;y1:40;y2:100;stroke:rgb(100,50,0);stroke-width:3`

  index Line to 1
  create Line in Group
    style `x1:110;x2:200;y1:100;y2:40;stroke:rgb(100,50,0);stroke-width:3`

  divide Width by 2 giving X
  create Ellipse in Stage
    style `cx:` cat X cat `;cy:120;rx:30;ry:60;stroke:green;fill:transparent`

  take 80 from X
  create Text1 in Stage
    style `x:` cat X cat `;y:50;fill:white`
    text `Invisible text on the stage`

  create Text2 in Group
    style `x:80;y:140;fill:white`
    text `Visible text in the group`

  fork to MoveCircle
  fork to Pulse

  move Group to -300 0
  wait 3
Loop:
  put -300 into N
  while N is less than Width
  begin
    move Group to N 0
    add 1 to N
    wait 2 ticks
  end
  move Group to -300 0
  go to Loop

MoveCircle:
  put -20 into M
  while true
  begin
    wait 2 ticks
    move Circle to 40 M
    add 1 to M
    if M is 250 put -20 into M
  end

Pulse:
  while true
  begin
    wait 20 ticks
    set attribute `r` of Circle to 31
    wait 10 ticks
    set attribute `r` of Circle to 30
  end

  stop

</pre>

Graphics example 2 - Integer Calculator
Graphics example 2 - Wacky Drumkit