Pixijs 4.0.0

by Graham Heath

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/3.0.5/redux.min.js"></script>
<div class="overlay">
  <p class="title">
    A draw loop a day: Multiple followers (click!) with a polygon.
  </p>


  <div class="label">
    <p>Day 6/365</p>
    <p>Graham P Heath</p>
  </div>  
</div>

SCSS

body {
  background: #333;
  color: white;
  padding: 0;
  margin: 0;
}

.overlay {
  transition: 0.3s 0.1s opacity;
  padding: 3px;
  position: absolute;
  width: 100vw;
  background: rgba(0, 0, 0, 0.3);
  
  &:hover {
    opacity: 0.1;
  }
}

JavaScript

// PIXIJS

const renderer = PIXI.autoDetectRenderer(window.innerWidth,
    window.innerHeight);
document.body.appendChild(renderer.view);

// create the root of the scene graph
const stage = new PIXI.Container();
const overlayStage = new PIXI.Container();
const spritesStage = new PIXI.Container();

const web = new PIXI.Graphics();
web.lineStyle(4, 0xffd900, 1);

overlayStage.addChild(web);
stage.addChild(overlayStage);
stage.addChild(spritesStage);

const createLogo = function() {
  const texture = PIXI.Texture.fromImage('https://fiddle.jshell.net/img/[email protected]');
  const logo = new PIXI.Sprite(texture);
  logo.anchor.x = 0.5;
  logo.anchor.y = 0.5;
  logo.position.x = 100;
  logo.position.y = 100;
  return logo
}

function render() {
  const spritesStore = spriteStore.getState();

  while (spritesStage.children.length < spritesStore.length) {
    spritesStage.addChild(createLogo());
  }
  
  // if (spritesStore.length > 0) {
  //   web.moveTo(spritesStore[0].position.x, spritesStore[0].position.y);
  // }
  let points = [];

  if (spritesStore.length > 0) {
    points.push(spritesStore[0].position.x);
    points.push(spritesStore[0].position.y);    
  }
  for (var i = spritesStore.length - 1; i >= 0; i--) {
    let sprite = spritesStore[i];
    points.push(sprite.position.x);
    points.push(sprite.position.y);
  }

  if (spritesStore.length > 0) {
    points.push(spritesStore[0].position.x);
    points.push(spritesStore[0].position.y);
  }
  
  web.clear();
  web.lineStyle(4, 0xffd900, 1);
  web.drawPolygon(points);
  
  for (var j = 0; j < spritesStore.length; j++) {
    let sprite = spritesStore[j];
    let child = spritesStage.getChildAt(j);

    child.rotation = sprite.rotation;
    child.position.set(sprite.position.x, sprite.position.y);
  }
  
  // render the container
  renderer.render(stage);
}

// Redux
function updateStage() {
  const stageState = stageStore.getState();
  const h = stageState.height;
  const w = stageState.width;

 ...