# Flip of figure

## Recommended Posts

I am currently creating a program to teach players about symmetry but I encountered some problem

This is what I want to get:

The program works fine when flipping horizontally.

However when it comes to diagonal:

Is it possible for the figure to flip diagonally while it stays on the line of symmetry and not not fly out of it?

Flip code of horizontal:

this.game.add.tween(graphicsend.scale).to( { x: graphicsend.scale.x*-1}, 500, Phaser.Easing.Linear.None, true);
this.game.add.tween(graphicsend).to( { x: 450}, 500, Phaser.Easing.Linear.None, true);
this.game.add.tween(graphicsend).to( { alpha: 0.5 }, 500, Phaser.Easing.Linear.None, true);
this.game.time.events.add(Phaser.Timer.SECOND * 1, function () {
this.tweenTint(graphicsend, 0xffffff, 0x6666ff, 500);
this.game.add.tween(graphicsend.scale).to( { x: graphicsend.scale.x*-1}, 500, Phaser.Easing.Linear.None, true);
this.game.add.tween(graphicsend).to( { x: 0}, 500, Phaser.Easing.Linear.None, true);
this.game.add.tween(graphicsend).to( { alpha: 1 }, 500, Phaser.Easing.Linear.None, true);
}, this);
this.game.time.events.add(Phaser.Timer.SECOND * 2.5, function () {
this.tweenTint(graphicsend, 0x6666ff, 0xffffff, 500);
this.game.add.tween(graphicsend.scale).to( { x: graphicsend.scale.x*-1}, 500, Phaser.Easing.Linear.None, true);
this.game.add.tween(graphicsend).to( { x: 450}, 500, Phaser.Easing.Linear.None, true);
this.game.add.tween(graphicsend).to( { alpha: 0.5 }, 500, Phaser.Easing.Linear.None, true);
}, this);
this.game.time.events.add(Phaser.Timer.SECOND * 3.5, function () {
this.tweenTint(graphicsend, 0xffffff, 0x6666ff, 500);
this.game.add.tween(graphicsend.scale).to( { x: graphicsend.scale.x*-1}, 500, Phaser.Easing.Linear.None, true);
this.game.add.tween(graphicsend).to( { x: 0}, 500, Phaser.Easing.Linear.None, true);
this.game.add.tween(graphicsend).to( { alpha: 1 }, 500, Phaser.Easing.Linear.None, true);
}, this);

Flip code for diagonal:

this.game.add.tween(graphicsend.scale).to( { x: graphicsend.scale.x*-1}, 500, Phaser.Easing.Linear.None, true);
this.game.add.tween(graphicsend).to( { x: 318}, 500, Phaser.Easing.Linear.None, true);
this.game.add.tween(graphicsend).to( { y: 408}, 500, Phaser.Easing.Linear.None, true);
this.game.add.tween(graphicsend).to( { alpha: 0.5 }, 500, Phaser.Easing.Linear.None, true);

this.game.time.events.add(Phaser.Timer.SECOND * 1, function () {
this.tweenTint(graphicsend, 0xffffff, 0x6666ff, 500);
this.game.add.tween(graphicsend.scale).to( { x: graphicsend.scale.x*-1}, 500, Phaser.Easing.Linear.None, true);
this.game.add.tween(graphicsend).to( { x: 133}, 500, Phaser.Easing.Linear.None, true);
this.game.add.tween(graphicsend).to( { y: 220}, 500, Phaser.Easing.Linear.None, true);
this.game.add.tween(graphicsend).to( { alpha: 1 }, 500, Phaser.Easing.Linear.None, true);
}, this);
this.game.time.events.add(Phaser.Timer.SECOND * 2.5, function () {
this.tweenTint(graphicsend, 0x6666ff, 0xffffff, 500);
this.game.add.tween(graphicsend.scale).to( { x: graphicsend.scale.x*-1}, 500, Phaser.Easing.Linear.None, true);
this.game.add.tween(graphicsend).to( { x: 318}, 500, Phaser.Easing.Linear.None, true);
this.game.add.tween(graphicsend).to( { y: 408}, 500, Phaser.Easing.Linear.None, true);
this.game.add.tween(graphicsend).to( { alpha: 0.5 }, 500, Phaser.Easing.Linear.None, true);
}, this);
this.game.time.events.add(Phaser.Timer.SECOND * 3.5, function () {
this.tweenTint(graphicsend, 0xffffff, 0x6666ff, 500);
this.game.add.tween(graphicsend.scale).to( { x: graphicsend.scale.x*-1}, 500, Phaser.Easing.Linear.None, true);
this.game.add.tween(graphicsend).to( { x: 133}, 500, Phaser.Easing.Linear.None, true);
this.game.add.tween(graphicsend).to( { y: 220}, 500, Phaser.Easing.Linear.None, true);
this.game.add.tween(graphicsend).to( { alpha: 1 }, 500, Phaser.Easing.Linear.None, true);
}, this);

##### Share on other sites

You could tween all the points not on the diagonal line to the opposite points.

But there's probably some translation matrix wizardry that'll do it better

##### Share on other sites

Is it possible for this kind of shapes?

And may I know what does the 4 and 5 represent in this code: game.add.tween(rightG.currentPath.points).to({4: 0, 5:0}, 2500, Phaser.Easing.Linear.None, true);?

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