Jump to content

Rotate and Expand a rectangle


ScottPendleton
 Share

Recommended Posts

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>

 

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...