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 circles = []
circles.push(
{
	"x": 256,
  "y": 256+128,
  "radius": 32
},
{
	"x": 256-128,
  "y": 256,
  "radius": 32
},
{
	"x": 256,
  "y": 128,
  "radius": 32
}
)

var g = new PIXI.Graphics()
g.lineStyle({
	width: 4,
  color: 0xffffff
})
var ang = 0
for (var x = 0; x < circles.length; x++) {
	var c = circles[x]
  var aC = Math.atan2(c.y-256, c.x-256)
  var rX = Math.cos(aC)*c.radius
  var rY = Math.sin(aC)*c.radius
  var cF = Math.atan2(c.y+rY-256,c.x+rX-256)
  var cS = Math.atan2(c.y+rY-256,c.x+rX-256)
  var aT = Math.atan2(Math.sin(ang)*256-Math.sin(aC)*256, Math.cos(ang)*256-Math.cos(aC)*256)
  if (x < 1) 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
}

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