# Making a Container Rotate Around it's Center

## Recommended Posts

Hello All -- Looking forward to learning a lot from the people on these forums! How can I get the following to work?

I am trying to get a container to rotate around it's center, much like is seen here: http://scottmcdonnell.github.io/pixi-examples/index.html?s=basics&f=container-pivot.js&title=Container Pivot

However, I can't seem to figure out the math behind placing the container on the screen and then the amount that you must offset it in order to have the pivot rotate in the center.

My setup is I have a screen with width: 1536 and height: 722

I have a container with width: 384 and height: 361

I have centered the container in the center by using the following:

``````  container.position.x = 576;
container.position.y = 180.5;``````

I tried to then set my pivot with the following:

``container.pivot.set(384 / 2, 361 / 2);``

My thinking that the local center of the container would be half of its width and half of its height, but then this repositions the container and it is no longer centered.

My animate function is as follows FYI:

`````` app.ticker.add(animate);
let delta = 0;
function animate() {
delta += 0.1;
container.rotation += 0.01;
}``````

##### Share on other sites

You have to imagine the following:

Take "position" point on screen.

Now take "pivot" in container.

Now, PIN THEM TO EACH OTHER.

That's how it works

##### Share on other sites

Another example:

You want character to appear in the center of screen.

center of screen is position=(screen.width/2, screen.height/2)

character is inside world container, in coords (cX,cY)

Then you make "world.position = screen/2; world.pivot = (cX, cY)"

Welcome to the forums!

##### Share on other sites

Thanks for the reply! I am not fully clear what you mean when you say "world.position = screen/2;"

I am assuming that world === container name? What is screen?

Also, (cX,Cy) is referring to coordinates within the container itself?

This is my full code: I have been stuck on this for hours so any help is greatly appreciated.

``````<html>
<style>
body {
margin: 0;
}
canvas {
display: block;
background: blue;
}
</style>
<body>
<canvas id="mycanvas"></canvas>
<script src="pixi.js"></script>
<script>
const canvas = document.getElementById("mycanvas");

const app = new PIXI.Application({
view: canvas,
width: window.innerWidth,
height: window.innerHeight
});
let numStars = 3000;
let graphicArr = [];
let container = new PIXI.Container();
container.x = app.screen.width / 2;
container.y = app.screen.height / 4;
container.pivot.x = container.width / 2;
container.pivot.y = container.height / 2;
//DRAW THE STARS
for (let i = 0; i < numStars; i++) {
let graphic = new PIXI.Graphics();

graphic.y = (Math.random() * app.renderer.screen.height) / 2;

graphic.x = (Math.random() * app.renderer.screen.width) / 4;
graphic.lineStyle(0.1, 0x00ff00);
graphic.beginFill(0x00ff00);

graphicArr.push(graphic);
}
}
function animate() {
container.rotation += 0.01;
}

</script>
</body>
</html>
``````

Edited by KamiFightingSpirit
##### Share on other sites

IF you just created container, it does have width and height 0, because it doesnt have children.

Width and Height are calculated properties, and yes, our main example gives a bad idea to people. It was the same way in Adobe Flash, and its completely different from you see in web development.

If you dont understand how "pivot","width/height" work, try to make everything without them. consider that graphic coords are relative to center of the screen.

Edited by ivan.popelyshev
##### Share on other sites

Thanks! That worked, filling my container before trying to pivot it.

##### Share on other sites

51 minutes ago, KamiFightingSpirit said:

Thanks! That worked, filling my container before trying to pivot it.

Then you should also know that its better to preload all textures, otherwise you dont have exact sizes of sprites, and container size is calculated only by sprite positions, like they are 0-pixels width  `PIXI.Loader` removes that problem. "Sprite.from("my.png")" size is zero , if "my.png" wasnt preloaded.

## 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.

×   Pasted as rich text.   Paste as plain text instead

Only 75 emoji are allowed.