JSFiddle - React, Tailwind, and code Playground

by Michael Prosser

HTML

<script src="https://aninoob.com/ANINOOB.api/js/dependencies/jquery.min.js"></script>
<script src="https://aninoob.com/noobshapes/js/noob.shapes.js"></script>
<link rel="stylesheet" href="https://aninoob.com/noobshapes/css/noob.shapes.css">
<div class="stage">
  <div class="guide noob-shape">
  
  </div>
</div>

CSS

.stage{
  animation: spinner linear infinite 10s;
  transform: rotateY(0deg);
}
.guide{
  transform: rotateX(90deg);
  width:400px;
  height:400px;
  margin-left:-200px;
  margin-top:-100px;
  background-color:rgba(255,0,0,0.2);
}

@keyframes spin{
  0% { transform: rotateX(90deg) rotateZ(90deg); }
  100% { transform: rotateX(90deg) rotateZ(450deg); }
}

JavaScript

//https://gamedev.stackexchange.com/questions/17005/solving-for-velocity-in-the-x-y-z-axes

noobshapes.set_target($('.stage'));

function toRadians(degrees){

	return degrees * Math.PI / 180;

}

cartesianCoordinates = function(r,O,o){

		O = O * Math.PI / 180.0;
		o = o * Math.PI / 180.0;

		var x = r * Math.sin(o) * Math.cos(O);
		var y = r * Math.sin(o) * Math.sin(O);
		var z = r * Math.cos(o);

	  return { x: x, y: y, z: z };
		
};

function position(position,t,p,d){

	var theta = toRadians(t);
	var phi = toRadians(p);

	var x = (Math.cos(theta) * Math.cos(phi))*d + position.x;
 	var y = (Math.sin(theta) * Math.cos(phi))*d + position.y;
 	var z = (Math.sin(phi))*d + position.z;

  
  return { x: x, y: y, z: z };

}





var theta = 30;
var phi = 40;

setInterval(function(){

$('.noob-shape').remove();

	var A = { x: 0, y: 0, z: 0 };
  
  var r_factor = 20;

var r = r_factor;

  for(var i=0;i<12;i++){

  if(i==0){

    var color = '#ffffff';
    var scale = 1;

  } else {

    var color = '#ff0000';
    var scale = 2;

  }

  var cube = noobshapes.create('plane',{"shape":"plane","opacity":"1","backface":false,"animation_name":"none","animation_delay":0,"animation_duration":1000,"animation_iteration_count":1,"animation_direction":"normal","animation_fill_mode":null,"animation_timing_function":"ease-in-out","brightness":"1","x":A.x,"y":A.y,"z":A.z,"ox":0,"oy":0,"oz":0,"bg_x":0,"bg_y":0,"bg_scale_x":100,"bg_scale_y":100,"rx":0,"ry":0,"rz":0,"sx":scale,"sy":scale,"sz":scale,"skew_x":0,"skew_y":0,"width":2,"height":2,"depth":2,"color":color,"texture":"none","perspective":0,"outlinecolor":"#ffffff","outlinewidth":1,"outlinestroke":"none","blend_mode":"normal","hide_top":false,"hide_bottom":false,"hide_front":false,"hide_back":false,"hide_left":false,"hide_right":false,"locked":false,"clippath":"none"});

  $('.stage div[id="' + cube.attr('id') + '"]').attr('coords',JSON.stringify(A));

  A = cartesianCoordinates(r,Math.atan2(A.y, A.x),theta);

  r += r_factor;

  }
...