Stars, bursts, gears, wedges, polygons, arcs, and dashes all drawn using Pixi.js, the HTML5 creation engine with the fastest, most flexible 2D WebGL renderer.

It was many years ago when adding a burst to a graphic I stumbled upon the Funky Monkey drawing script by Ric Ewing. Comments embedded in the function immediately resonated with me:

Burst is a method for drawing star bursts. If you’ve ever worked with an advertising department, you know what they are ;-)

Clients tend to want them, Developers tend to hate them…

Thought I’d bring these back to life leveraging modern web.

Here are seven of those drawing shapes ported to Pixi.js.

Drawing Dashes

Draws a dashed line from point x1, y1 to point x2, y2.

Usage:

• target — Graphics instance on which dashed line will be drawn
• x1 — Starting position along x-axis
• y1 — Starting position along y-axis
• x2 — Final position along x-axis
• y2 — Final position along y-axis
• dashLength — Length of each dash, in pixels
• spaceLength — Space between dashes, in pixels

function drawDash(target,
                  x1,
                  y1,
                  x2,
                  y2,
                  dashLength = 5,
                  spaceLength = 5) {
  let x = x2 - x1;
  let y = y2 - y1;
  let hyp = Math.sqrt((x) * (x) + (y) * (y));
  let units = hyp / (dashLength + spaceLength);
  let dashSpaceRatio = dashLength / (dashLength + spaceLength);
  let dashX = (x / units) * dashSpaceRatio;
  let spaceX = (x / units) - dashX;
  let dashY = (y / units) * dashSpaceRatio;
  let spaceY = (y / units) - dashY;
  target.moveTo(x1, y1);
  while (hyp > 0) {
    x1 += dashX;
    y1 += dashY;
    hyp -= dashLength;
    if (hyp < 0) {
      x1 = x2;
      y1 = y2;
    }
    target.lineTo(x1, y1);
    x1 += spaceX;
    y1 += spaceY;
    target.moveTo(x1, y1);
    hyp -= spaceLength;
  }
  target.moveTo(x2, y2);
}

#web-development #graphics #javascript #programming #pixi.js