Skip to content

Instantly share code, notes, and snippets.

@pkerpedjiev

pkerpedjiev/.PixiJsGeometricZooming

Last active August 7, 2019 06:29
Show Gist options
  • Save pkerpedjiev/cf791db09ebcabaec0669362f4df1776 to your computer and use it in GitHub Desktop.
Save pkerpedjiev/cf791db09ebcabaec0669362f4df1776 to your computer and use it in GitHub Desktop.
Download ZIP
Pixi.js Geometric Zooming
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<title>Pixi!!!</title>
<style>
.overlay {
fill: none;
pointer-events: all;
}
</style>
<body>
<canvas id='pixiCanvas' />
<script src="//d3js.org/d3.v3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/3.0.11/pixi.min.js"></script>
<script>
var width = 960,
height = 500;
var numCircles = 10000;
var pixiCanvas = d3.select('#pixiCanvas');
var renderer = PIXI.autoDetectRenderer(width, height, { backgroundColor: 0xffffff,
antialias: true, view: pixiCanvas.node() });
document.body.appendChild(renderer.view);
pixiCanvas.call(d3.behavior.zoom().scaleExtent([1, 8]).on("zoom", zoom))
function zoom() {
graphics.position.x = d3.event.translate[0];
graphics.position.y = d3.event.translate[1];
graphics.scale.x = d3.event.scale;
graphics.scale.y = d3.event.scale;
}
var randomX = d3.random.normal(width / 2, 80),
randomY = d3.random.normal(height / 2, 80);
// Create the main stage for your display objects
var stage = new PIXI.Container();
// Start animating
animate();
function animate() {
//Render the stage
renderer.render(stage);
requestAnimationFrame(animate);
}
var graphics = new PIXI.Graphics();
graphics.beginFill(0xe74c3c); // Red
d3.range(numCircles).map(function() {
graphics.drawCircle(randomX(), randomY(), 1);
});
stage.addChild(graphics);
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment