2D Rotation jQuery with Random X, Y and angle

Question

I have screen width, screen height(For example 1360 X 768) and image width and height( For example 400 X 400). I want to display every image on random x, y position on the screen and to display an image in that position. Also, rotate the image at random degree.

So, I used following code to find X, Y random position from screen.

var randPosX = Math.floor((Math.random()*(screen_width - image_width )));
var randPosY = Math.floor((Math.random()*(screen_height - image_height )));

so, this will return me X, Y within screen area so that whole image is shown.

Now, I have use rotation code

 var rNum = Math.round((Math.random()*360)+1);

Apply on div

$('img').css('left',Math.abs(new_x_point) );
$('img').css('top', Math.abs(new_y_point));
$('img').css('position','absolute');
$('img').css('transform','rotate('+rNum+'deg)');

Now, After rotation, X, Y position changed so sometime it cut the image on the screen.

Also i tried to find new X,Y after rotation and apply it using following logic:

new_x_point = randPosX * Math.cos(rNum) - randPosY * Math.sin(rNum);
new_y_point = randPosY * Math.cos(rNum) + randPosX * Math.sin(rNum);

HTML

<div id="image_0" style="display:none;height:768px;width:1360px;z-index:1;position: absolute"><img src="001.png" style="height:400px;width:400px;" class="product-img"></div>

<div id="image_1" style="display:none;height:768px;width:1360px;z-index:1;position: absolute"><img src="002.png" style="height:400px;width:400px;" class="product-img"></div>


<div id="image_2" style="display:none;height:768px;width:1360px;z-index:1;position: absolute"><img src="003.png" style="height:400px;width:400px;" class="product-img"></div>

etc

But it is not working :(. Please help Thanks

Answer 1

The issue here is that you need to consider transform-origin and the space the image will take after the rotation. If you want to minimize the overflow, use transform-origin:center (the default value) and thus the image will rotate from the center and create a circle that you need to consider.

Below an illustration to show the space that the image will take while rotating:

body {
  margin: 0;
  border: 1px solid;
}

.box {
  display: inline-block;
  padding: 42px;
  border: 1px solid;
  overflow: hidden;
  border-radius: 50%;
  font-size: 0;
}

img {
  animation: rotate 2s linear infinite;
  transform-origin: center;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

<div class="box">
  <img src="https://lorempixel.com/200/200/">
</div>

So if the image is square with a length d on each size, then the diagonal will be d*sqrt(2) ~ 1.4*d so the overflow will be (1.4*d-d)/2 = 0.2*d. (see the red line below):

You should remove this distance from the calculation:

var d = 100;
var overflow = 0.21*d; // will make it a bit bigger for rouding

$('img').each(function() {
  var randPosX = Math.round((Math.random() * ($(window).width() - d- 2*overflow) + overflow));
  var randPosY = Math.round((Math.random() * ($(window).height() -d -2*overflow) + overflow));
  var rNum = Math.round((Math.random() * 360) + 1);
  $(this).css({'left': randPosX,
               'top': randPosY,
              'transform': 'rotate(' + rNum + 'deg)'});
});

body {
 margin:0;
}
img {
  position: absolute;
  transform-origin: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="https://lorempixel.com/100/100/">
<img src="https://lorempixel.com/100/100/">
<img src="https://lorempixel.com/100/100/">
<img src="https://lorempixel.com/100/100/">
<img src="https://lorempixel.com/100/100/">

---

If the image is not a square the same logic will apply but you need to reconsider the calculation of the overflow circle. Same think if you change the transform-origin but changing the transform orgin will make the image to have bigger oveflow circle. If for example you set the origin to top/left, the radius of the overflow circle will be twice the radius of the one when transform-origin is set to center.

Answer 2

I think I finally nailed it.

I have created an inner container (called .boundaries), put it some padding inside the main container, and it will contain all images. This way, images will never be able to touch or overflow the main container.

The trick is to calculate the correct padding, which would be half the diagonal of an image.

Codepen here (using Stylus for the calculations)

(I have added a continuous rotation to show that no image ever touches the boundaries)

let imgWidth = 150,
 imgHeight = 100,
 $boundaries = $(".boundaries"),
 boundariesWidth = $boundaries.width(),
 boundariesHeigth = $boundaries.height();

$("img").each( function() {
 let top = `${Math.round(boundariesHeigth * Math.random() - imgHeight/2 )}px`,
  left = `${Math.round(boundariesWidth * Math.random() - imgWidth/2 )}px`,
  rotation = `${Math.round(360 * Math.random() )}deg`

 $(this).css({
  top: top,
  left: left,
  transform : `rotate(${rotation})`
 });
});

.container {
  width: 800px;
  height: 400px;
  border: #00f dashed 2px;
  position: relative;
}
.container .boundaries {
  border: #f00 dashed 2px;
  position: absolute;
  width: calc(100% - 2 * 90.13878188659973px);
  height: calc(100% - 2 * 90.13878188659973px);
  top: 90.13878188659973px;
  left: 90.13878188659973px;
}
.container .boundaries img {
  transform-origin: center center;
  position: absolute;
  -webkit-animation: rotation 5s infinite linear;
}
@-webkit-keyframes rotation {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(359deg);
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="boundaries"><img src="https://placeimg.com/150/100/any"/><img src="https://placeimg.com/150/100/any"/><img src="https://placeimg.com/150/100/any"/><img src="https://placeimg.com/150/100/any"/><img src="https://placeimg.com/150/100/any"/><img src="https://placeimg.com/150/100/any"/><img src="https://placeimg.com/150/100/any"/><img src="https://placeimg.com/150/100/any"/><img src="https://placeimg.com/150/100/any"/><img src="https://placeimg.com/150/100/any"/><img src="https://placeimg.com/150/100/any"/><img src="https://placeimg.com/150/100/any"/><img src="https://placeimg.com/150/100/any"/><img src="https://placeimg.com/150/100/any"/><img src="https://placeimg.com/150/100/any"/>
  </div>
</div>