Search the Community

The following script contains a square inside a circle inside a square. The inner square rotates inside the circle. How do I make the inner square expand (width and height) as it rotates, such that the corners of the inner square are always on the borders of the outer square? (Thus the inner square would grow to completely overlap the outer square.) <script>var stage = new PIXI.Stage(0xFFFFFF, true);stage.setInteractive(true);var renderer = PIXI.autoDetectRenderer(600, 600);/*if (confirm("Full screen?")) { renderer.view.style.width = window.innerHeight + "px"; renderer.view.style.height = window.innerHeight + "px";}*/ renderer.view.style.display = "block";document.body.appendChild(renderer.view);// draw a squarevar square = new PIXI.Graphics();square.lineStyle(0, 0xFF0000, 1);square.beginFill(0xFF0000, 1);square.drawRect(50, 50, 400, 400);stage.addChild(square);// draw a circlevar circle = new PIXI.Graphics();circle.lineStyle(0);circle.beginFill(0x3399FF, 1);circle.drawCircle(250, 250, 200);stage.addChild(circle);// draw a diamond (a square rotated to stand on one corner).var diamond = new PIXI.Graphics();diamond.lineStyle(0, 0xFFFF66, 0.5);diamond.beginFill(0xFFFF66, 0.5);diamond.drawRect(109, 109, 283, 283); // This defines the center.diamond.position.x = 250;diamond.position.y = 250; // This says to pivot around the center.diamond.pivot = new PIXI.Point(250, 250); // This rotates the square 45 degrees, so that it becomes a diamond standing on its point.diamond.rotation = 62.05;stage.addChild(diamond);var count = 0;requestAnimFrame(animate);function animate() { count += 1; diamond.rotation = diamond.rotation + 0.005; renderer.render(stage); if (count < 156) requestAnimFrame(animate); } </script>