Draw Image on Circle - CRYSTALS

by pleonardmusic1664

HTML

<!DOCTYPE html>
<html>
<head>

</head>
<body>
<div id="myDIV">
<button type="button" id="startBtn">Start</button>
<button onclick="stop()" type="button" id="stopBtn">Stop</button>
<img class="object-fit_contain" src="https://peteleonard.org/wp-content/uploads/2023/01/Crsytal-Background.png" width="1000px;">

    
<div id="demo"></div>

</div><!-- END myDIV -->


</body>
</html>

CSS

body{width: 1000px;
background: url(https://peteleonard.org/wp-content/uploads/2023/01/Crsytal-Background.png) no-repeat center center fixed; }

#myDIV { 

width: 500px;
/*height: 2000px;*/

/*background: url(https://peteleonard.org/wp-content/uploads/2023/01/Snakes.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
 */
 }

.object-fit_contain { object-fit: contain;

position: absolute;
  left: 0px;
  top: -50px;
  z-index: -1;

  animation: rotation 40s infinite linear;
}

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

#startBtn, #stopBtn {  z-index: 5;}

#demo {
  position: relative;
  width: 100%;
  margin-left:-250px;
}

.demo2 {
  position: absolute;
  left: 60px;
  top: 30px;
}

.a1 {
  animation: pulse 10s linear infinite;
}

@-webkit-keyframes "pulse" {
  0% {
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
  }

  50% {
    -webkit-transform: scale(1.8);
    transform: scale(1.8);
  }

  100% {
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
  }
  
 }
  
.b2 { 
  animation: rotation 40s infinite linear;
}


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


#id0 {animation: 'pulse0' 4s linear infinite;}
@-webkit-keyframes 'pulse0' {0% {-webkit-transform: scale(1.1);transform: scale(1.1);}
50% { -webkit-transform: scale(0.8);transform: scale(0.8);}
100% {-webkit-transform: scale(1);transform: scale(1);}}

#id1 {animation: 'pulse1' 4s linear infinite;}
@-webkit-keyframes 'pulse1' {0% {-webkit-transform: scale(1.1);transform: scale(1.1);}
50% { -webkit-transform: scale(0.8);transform: scale(0.8);}
100% {-webkit-transform: scale(1);transform: scale(1);}}

#id2 {animation: 'pulse2' 4s linear infinite;}
@-webkit-keyframes 'pulse2' {0% {-webkit-transform: scale(1.1);transform: scale(1.1);}
50% {...

JavaScript

//x^2 + y^2 = r^2
//x = cos(3.14159 * 2 * $i1/$i2)
//y = sin(3.14159 * 2 * $i1/$i2)

var cx = 250;//start offset X
var cy = 250;//start offset Y
var r = 150;//radius
var numPoints = Math.round(Math.random()*13);
var xpos;
var ypos;

var intervalID;
j = 0;

let text = "";
function arrayOneByOne() {  

for (let i = j; i <= j; i++) {
	xpos = Math.cos(Math.PI * 2 * i/numPoints);
	ypos = Math.sin(Math.PI * 2 * i/numPoints);
  xpos2 = ((xpos*cx) + 500).toFixed(2);
  ypos2 = ((ypos*cx) + 250).toFixed(2);

text +=  "<p class='demo2 a1' id=stop style=" + "left:" + xpos2 + "px;" + "top:" + ypos2 + "px;>" + "<img class='b2' src= '" + "https://peteleonard.org/wp-content/uploads/2023/01/crystal-" + Math.round((Math.random()* 9)+1) + ".png' + width=250 " + "</p>";


//https://cdn.pixabay.com/photo/2017/09/01/00/15/png-2702691_960_720.png

//https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/5877e543-014c-4b8b-b6c2-37397c0c0c90/d4ntwfq-cd98870a-84cf-40cb-9fdc-deb0b5ddaa37.jpg/v1/fill/w_900,h_900,q_75,strp/high_resolution_marble_tiles_by_hhh316_d4ntwfq-fullview.jpg?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7ImhlaWdodCI6Ijw9OTAwIiwicGF0aCI6IlwvZlwvNTg3N2U1NDMtMDE0Yy00YjhiLWI2YzItMzczOTdjMGMwYzkwXC9kNG50d2ZxLWNkOTg4NzBhLTg0Y2YtNDBjYi05ZmRjLWRlYjBiNWRkYWEzNy5qcGciLCJ3aWR0aCI6Ijw9OTAwIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmltYWdlLm9wZXJhdGlvbnMiXX0.8BWIcNCO4ztRMfJAcILTMUCVikXB8N0L3r64TUTB_sU

}// END for loop


j = j+1;
if (j >= numPoints){j = 0;clearInterval(intervalID);numPoints=Math.round(Math.random()*13)}
        
document.getElementById("demo").innerHTML = text;


}//END function arrayOneByOne

// Function to start setInterval call
    function start(){
    // Create element:
const para = document.createElement("div");
para.innerHTML = " ";

// Append to another element:
document.getElementById("myDIV").appendChild(para);
       ...