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);

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: 256, y: 256, radius: 128}

var circles = []
circles.push(
{
	"x": 0,
  "y": 0,
  "radius": 32,
  "angle": 45
},
{
	"x": 0,
  "y": 0,
  "radius": 16
},
{
	"x": 0,
  "y": 128,
  "radius": 32
},
{
	"x": 0,
  "y": 0,
  "radius": 16
},
{
	"x": 0,
  "y": 0,
  "radius": 32
},
{
	"x": 0,
  "y": 0,
  "radius": 16
},
{
	"x": 0,
  "y": 0,
  "radius": 32
},
{
	"x": 0,
  "y": 0,
  "radius": 16
},
)

for (var x in circles) {
	var c = circles[x]
  c.x = center.x+Math.cos(rad(c.angle))*(center.radius)
  c.y = center.y+Math.sin(rad(c.angle))*(center.radius)
}

var g = new PIXI.Graphics()
g.lineStyle({
	width: 4,
  color: 0xffffff
})
var ang = 0
var end = 0
for (var x = 0; x < circles.length; x++) {
	var c = circles[x]
  var aC = Math.atan2(c.y-256, c.x-256)
  var rY = Math.cos(aC)*(c.radius)
  var rX = Math.sin(aC)*(c.radius)
  console.log(x, aC, rX, rY, c.x+rX, c.y+rY)
  var cF = Math.atan2(c.y+rY-256,c.x-rX-256)
  var cS = Math.atan2(c.y-rY-256,c.x+rX-256)
  if (aC == 0) {
  	ang = cS
    end = cS
  }
  g.arc(256,256,128,ang,cS)
  g.moveTo(128*Math.cos(cF)+256,128*Math.sin(cF)+256)
  g.drawCircle(c.x,c.y,c.radius)
  ang = cF
  if (x == circles.length-1) {
  	g.arc(256,256,128,ang,end)
  }
}

stage.addChild(baseSprite);
stage.addChild(g)

document.body.appendChild(renderer.view);

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

function rad(deg) {
	return deg * (Math.PI/180)
}