JSFiddle - React, Tailwind, and code Playground

by Tahir Ahmed

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/pixi.js/3.0.9/pixi.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/TweenMax.min.js"></script>

CSS

html, body {
  margin: 0;
  overflow: hidden;
}

JavaScript

var windowHeight = window.innerHeight;
var windowWidth = window.innerWidth;
var renderer = new PIXI.autoDetectRenderer(windowWidth, windowHeight);
var mainContainer = createMainContainer();
var numContainers = 2;
var numShapes = 10;
var containers = [];
var shapes = [];
var texture = createTexture(0xFF0000, 10);
var centerPoint = new PIXI.Point(0.5, 0.5);
var container = null;
var shape = null;
var iterator = 0;
var increment = Math.PI * 2 / numShapes;

for (var i = 0, j = -Math.floor(numContainers * 0.5); i < numContainers; i += 1, j += 1) {
	container = new PIXI.Container();
  container.height = windowWidth;
	container.width = windowHeight;
  //container.position = new PIXI.Point(Math.sin(i * 10), Math.cos(i * 10));
  containers[i] = container;
  for (var k = 0; k < numShapes; k += 1) {
  	shape = new PIXI.Sprite(texture);
		shape.anchor = centerPoint;
    shape.position = new PIXI.Point(Math.abs(Math.cos(iterator)) * 40, Math.abs(Math.sin(iterator)) * 40);
    iterator += increment;
    
    containers[i].addChild(shape);
  }
  mainContainer.addChild(containers[i]);
}

document.body.appendChild(renderer.view);
TweenLite.ticker.addEventListener('tick', render, false);

function createTexture(color, radius) {
	var circleGraphics = new PIXI.Graphics();
  circleGraphics.beginFill(color);
  circleGraphics.drawCircle(0, 0, radius);
  circleGraphics.endFill();
  return circleGraphics.generateTexture();
}

function createMainContainer() {
	var container = new PIXI.Container();
	container.height = window.innerHeight;
	container.width = window.innerWidth;
	container.position = new PIXI.Point(Math.round(window.innerWidth * 0.5), Math.round(window.innerHeight * 0.5));
	return container;
}

function render() {
	renderer.render(mainContainer);
}