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": 128,
  "color": 0x55a0e0
},
{
  "x": 0,
  "y": 0,
  "radius": 76,
  "color": 0x55a0e0
},
{
  "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
    })
  }
}

g.beginFill(0xffffff)
for (var x in circles) {
	var c = circles[x]
  if (c.color) {
    g.lineStyle({
      width: 4,
      color: c.color
    })
  } else {
    g.lineStyle({
      width: 4,
      color: 0xabceed
    })
  }
  g.drawCircle(c.x,c.y,c.radius)
}

g.angle = 0
stage.addChild(baseSprite);
stage.addChild(g)
document.body.appendChild(renderer.view);

animate();
function animate() {
  requestAnimationFrame(animate);
  renderer.render(stage);
 ...