Runic Circles

by roomyrooms

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/5.2.2/pixi.min.js"></script>

JavaScript

var stage = new PIXI.Container();

var renderer = PIXI.autoDetectRenderer(512, 512);
renderer.roundPixels = true;
PIXI.settings.SCALE_MODE = PIXI.SCALE_MODES.NEAREST;

var baseTexture = new PIXI.Texture(PIXI.Texture.WHITE);
var baseSprite = new PIXI.Sprite(baseTexture);

baseSprite.width = 512
baseSprite.height = 512
baseSprite.x = 0
baseSprite.y = 0
baseSprite.tint = 0x555555

var center = {x: 0, y: 0, radius: 128}

var circles = []
circles.push(
{
  "x": 0,
  "y": 0,
  "radius": 76,
  "color": 0x55a0e0,
  "exempt": true
},
{
  "radius": 40,
  "angle": 0,
  "color": 0x71aee3
},
{
  "radius": 16,
  "angle": 45,
  "color": 0x95c4ed
},
{
  "radius": 40,
  "angle": 90,
  "color": 0x71aee3
},
{
  "radius": 16,
  "angle": 135,
  "color": 0x95c4ed
},
{
  "radius": 40,
  "angle": 180,
  "color": 0x71aee3
},
{
  "radius": 16,
  "angle": 225,
  "color": 0x95c4ed
},
{
  "radius": 40,
  "angle": 270,
  "color": 0x71aee3
},
{
  "radius": 16,
  "angle": 315,
  "color": 0x95c4ed
},
)

var g = new PIXI.Graphics()
g.width = 512
g.height = 512
g.x = 256
g.y = 256
g.anchor = {x: 0.5, y: 0.5}
g.lineStyle({
	width: 4,
  color: 0xabceed
})
for (var x in circles) {
	var c = circles[x]
  if (c.angle || c.angle == 0) {
    c.x = center.x+Math.cos(rad(c.angle))*(center.radius)
    c.y = center.y+Math.sin(rad(c.angle))*(center.radius)
  }
  if (c.color) {
    g.lineStyle({
      width: 4,
      color: c.color
    })
  } else {
    g.lineStyle({
      width: 4,
      color: 0xabceed
    })
  }
}

var ang = 0
var end = 0
for (var x = 0; x < circles.length; x++) {
	var c = circles[x]
  g.lineStyle({
    width: 4,
    color: 0xabceed
  })
  if (c.exempt) continue
  var aC = Math.atan2(c.y-center.y, c.x-center.x)
  var rY = Math.cos(aC)*(c.radius+2)
  var rX = Math.sin(aC)*(c.radius+2)
  var cF = Math.atan2(c.y+rY-center.y,c.x-rX-center.x)
  var cS = Math.atan2(c.y-rY-center.y,c.x+rX-center.x)
  if (aC == 0) {
  	ang = cS
    end = cS
  }
  g.arc(center.x,center.y,128,ang,cS)
 ...