Spin wheel result to be already controlled

Spin wheel result to be already controlled - javascript

I'm using this code to create a spinning wheel. But I want to control the result. For example the prize $10000 I want it with less percentage. So, not anyone can get maybe 1 in 500 people. I didn't know how to set percentage for them. if anyone can help I'll appreciate it. Thank you in advance.
If you can give me any hint to help me continue and know what to do next.
this is the code that I have used
I UPDATED THE WHOLE CODE TO ADD PROBABILITY FOR THE RANDOM. ALSO, I ADDED MORE PRIZES. NOW I HAVE A PROBLEM WITH THE DESIGN AND THE PROBABILITY ITSELFT. ALSO, THE CODE IS VERY LONG.
I HOPE YOU CAN HELP ME WITH THE PROABILITY AND DESIGN ISSUE
//set default degree (360*5)
// I TRIED FOR 12 PRIZES TO MULTIPLY 360*11 BUT NOTHING CHANGES
var degree = 1800;
//number of clicks = 0
var clicks = 0;
$(document).ready(function(){
/*WHEEL SPIN FUNCTION*/
$('#spin').click(function(){
//add 1 every click
clicks ++;
/*multiply the degree by number of clicks
generate random number between 1 - 360,
then add to the new degree*/
var newDegree = degree*clicks;
var extraDegree = Math.floor(Math.random() * (360 -1+1 )+1);
if(extraDegree =0.05)
{
var newextraDegree=Math.floor(Math.random() * (30 -1+1 )+1);
totalDegree = newDegree+newextraDegree;
$('#wheel .sec').each(function(){
var t = $(this);
var noY = 0;
var c = 0;
var n = 700;
var interval = setInterval(function () {
c++;
if (c === n) {
clearInterval(interval);
}
var aoY = t.offset().top;
$("#txt").html(aoY);
console.log(aoY);
/*23.7 is the minumum offset number that
each section can get, in a 30 angle degree.
So, if the offset reaches 23.7, then we know
that it has a 30 degree angle and therefore,
exactly aligned with the spin btn*/
if(aoY < 11.94){
console.log('<<<<<<<<');
$('#spin').addClass('spin');
setTimeout(function () {
$('#spin').removeClass('spin');
}, 100);
}
}, 10);
$('#inner-wheel').css({
'transform' : 'rotate(' + totalDegree + 'deg)'
});
noY = t.offset().top;
});
}
else if(extraDegree =0.05)
{
var newextraDegree=Math.floor(Math.random() * (60 -30+1 )+30);
totalDegree = newDegree+newextraDegree;
$('#wheel .sec').each(function(){
var t = $(this);
var noY = 0;
var c = 0;
var n = 700;
var interval = setInterval(function () {
c++;
if (c === n) {
clearInterval(interval);
}
var aoY = t.offset().top;
$("#txt").html(aoY);
console.log(aoY);
/*23.7 is the minumum offset number that
each section can get, in a 30 angle degree.
So, if the offset reaches 23.7, then we know
that it has a 30 degree angle and therefore,
exactly aligned with the spin btn*/
if(aoY < 11.94){
console.log('<<<<<<<<');
$('#spin').addClass('spin');
setTimeout(function () {
$('#spin').removeClass('spin');
}, 100);
}
}, 10);
$('#inner-wheel').css({
'transform' : 'rotate(' + totalDegree + 'deg)'
});
noY = t.offset().top;
});
}
else if (extraDegree =0.10)
{
var newextraDegree=Math.floor(Math.random() * (90 -60+1 )+60);
totalDegree = newDegree+newextraDegree;
$('#wheel .sec').each(function(){
var t = $(this);
var noY = 0;
var c = 0;
var n = 700;
var interval = setInterval(function () {
c++;
if (c === n) {
clearInterval(interval);
}
var aoY = t.offset().top;
$("#txt").html(aoY);
console.log(aoY);
/*23.7 is the minumum offset number that
each section can get, in a 30 angle degree.
So, if the offset reaches 23.7, then we know
that it has a 30 degree angle and therefore,
exactly aligned with the spin btn*/
if(aoY < 11.94){
console.log('<<<<<<<<');
$('#spin').addClass('spin');
setTimeout(function () {
$('#spin').removeClass('spin');
}, 100);
}
}, 10);
$('#inner-wheel').css({
'transform' : 'rotate(' + totalDegree + 'deg)'
});
noY = t.offset().top;
});
}
else if (extraDegree =5)
{
var newextraDegree=Math.floor(Math.random() * (120 -90+1 )+90)
totalDegree = newDegree+newextraDegree;
$('#wheel .sec').each(function(){
var t = $(this);
var noY = 0;
var c = 0;
var n = 700;
var interval = setInterval(function () {
c++;
if (c === n) {
clearInterval(interval);
}
var aoY = t.offset().top;
$("#txt").html(aoY);
console.log(aoY);
/*23.7 is the minumum offset number that
each section can get, in a 30 angle degree.
So, if the offset reaches 23.7, then we know
that it has a 30 degree angle and therefore,
exactly aligned with the spin btn*/
if(aoY < 11.94){
console.log('<<<<<<<<');
$('#spin').addClass('spin');
setTimeout(function () {
$('#spin').removeClass('spin');
}, 100);
}
}, 10);
$('#inner-wheel').css({
'transform' : 'rotate(' + totalDegree + 'deg)'
});
noY = t.offset().top;
});
}
else if (extraDegree =5)
{
var newextraDegree=Math.floor(Math.random() * (150 -120+1 )+120);
totalDegree = newDegree+newextraDegree;
$('#wheel .sec').each(function(){
var t = $(this);
var noY = 0;
var c = 0;
var n = 700;
var interval = setInterval(function () {
c++;
if (c === n) {
clearInterval(interval);
}
var aoY = t.offset().top;
$("#txt").html(aoY);
console.log(aoY);
/*23.7 is the minumum offset number that
each section can get, in a 30 angle degree.
So, if the offset reaches 23.7, then we know
that it has a 30 degree angle and therefore,
exactly aligned with the spin btn*/
if(aoY < 11.94){
console.log('<<<<<<<<');
$('#spin').addClass('spin');
setTimeout(function () {
$('#spin').removeClass('spin');
}, 100);
}
}, 10);
$('#inner-wheel').css({
'transform' : 'rotate(' + totalDegree + 'deg)'
});
noY = t.offset().top;
});
}
else if (extraDegree =5)
{
var newextraDegree=Math.floor(Math.random() * (180 -150+1 )+150)
totalDegree = newDegree+newextraDegree;
$('#wheel .sec').each(function(){
var t = $(this);
var noY = 0;
var c = 0;
var n = 700;
var interval = setInterval(function () {
c++;
if (c === n) {
clearInterval(interval);
}
var aoY = t.offset().top;
$("#txt").html(aoY);
console.log(aoY);
/*23.7 is the minumum offset number that
each section can get, in a 30 angle degree.
So, if the offset reaches 23.7, then we know
that it has a 30 degree angle and therefore,
exactly aligned with the spin btn*/
if(aoY < 11.94){
console.log('<<<<<<<<');
$('#spin').addClass('spin');
setTimeout(function () {
$('#spin').removeClass('spin');
}, 100);
}
}, 10);
$('#inner-wheel').css({
'transform' : 'rotate(' + totalDegree + 'deg)'
});
noY = t.offset().top;
});
}
else if (extraDegree =5)
{
var newextraDegree=Math.floor(Math.random() * (210 -180+1 )+180)
totalDegree = newDegree+newextraDegree;
$('#wheel .sec').each(function(){
var t = $(this);
var noY = 0;
var c = 0;
var n = 700;
var interval = setInterval(function () {
c++;
if (c === n) {
clearInterval(interval);
}
var aoY = t.offset().top;
$("#txt").html(aoY);
console.log(aoY);
/*23.7 is the minumum offset number that
each section can get, in a 30 angle degree.
So, if the offset reaches 23.7, then we know
that it has a 30 degree angle and therefore,
exactly aligned with the spin btn*/
if(aoY < 11.94){
console.log('<<<<<<<<');
$('#spin').addClass('spin');
setTimeout(function () {
$('#spin').removeClass('spin');
}, 100);
}
}, 10);
$('#inner-wheel').css({
'transform' : 'rotate(' + totalDegree + 'deg)'
});
noY = t.offset().top;
});
}
else if (extraDegree =13)
{
var newextraDegree=Math.floor(Math.random() * (240 -210+1 )+210)
totalDegree = newDegree+newextraDegree;
$('#wheel .sec').each(function(){
var t = $(this);
var noY = 0;
var c = 0;
var n = 700;
var interval = setInterval(function () {
c++;
if (c === n) {
clearInterval(interval);
}
var aoY = t.offset().top;
$("#txt").html(aoY);
console.log(aoY);
/*23.7 is the minumum offset number that
each section can get, in a 30 angle degree.
So, if the offset reaches 23.7, then we know
that it has a 30 degree angle and therefore,
exactly aligned with the spin btn*/
if(aoY < 11.94){
console.log('<<<<<<<<');
$('#spin').addClass('spin');
setTimeout(function () {
$('#spin').removeClass('spin');
}, 100);
}
}, 10);
$('#inner-wheel').css({
'transform' : 'rotate(' + totalDegree + 'deg)'
});
noY = t.offset().top;
});
}
else if (extraDegree =16)
{
var newextraDegree=Math.floor(Math.random() * (270 -240+1 )+240)
totalDegree = newDegree+newextraDegree;
$('#wheel .sec').each(function(){
var t = $(this);
var noY = 0;
var c = 0;
var n = 700;
var interval = setInterval(function () {
c++;
if (c === n) {
clearInterval(interval);
}
var aoY = t.offset().top;
$("#txt").html(aoY);
console.log(aoY);
/*23.7 is the minumum offset number that
each section can get, in a 30 angle degree.
So, if the offset reaches 23.7, then we know
that it has a 30 degree angle and therefore,
exactly aligned with the spin btn*/
if(aoY < 11.94){
console.log('<<<<<<<<');
$('#spin').addClass('spin');
setTimeout(function () {
$('#spin').removeClass('spin');
}, 100);
}
}, 10);
$('#inner-wheel').css({
'transform' : 'rotate(' + totalDegree + 'deg)'
});
noY = t.offset().top;
});
}
else if (extraDegree =16)
{
var newextraDegree=Math.floor(Math.random() * (300 -270+1 )+270);
totalDegree = newDegree+newextraDegree;
$('#wheel .sec').each(function(){
var t = $(this);
var noY = 0;
var c = 0;
var n = 700;
var interval = setInterval(function () {
c++;
if (c === n) {
clearInterval(interval);
}
var aoY = t.offset().top;
$("#txt").html(aoY);
console.log(aoY);
/*23.7 is the minumum offset number that
each section can get, in a 30 angle degree.
So, if the offset reaches 23.7, then we know
that it has a 30 degree angle and therefore,
exactly aligned with the spin btn*/
if(aoY < 11.94){
console.log('<<<<<<<<');
$('#spin').addClass('spin');
setTimeout(function () {
$('#spin').removeClass('spin');
}, 100);
}
}, 10);
$('#inner-wheel').css({
'transform' : 'rotate(' + totalDegree + 'deg)'
});
noY = t.offset().top;
});
}
else if (extraDegree =16.8)
{
var newextraDegree=Math.floor(Math.random() * (330 -300+1 )+300)
totalDegree = newDegree+newextraDegree;
$('#wheel .sec').each(function(){
var t = $(this);
var noY = 0;
var c = 0;
var n = 700;
var interval = setInterval(function () {
c++;
if (c === n) {
clearInterval(interval);
}
var aoY = t.offset().top;
$("#txt").html(aoY);
console.log(aoY);
/*23.7 is the minumum offset number that
each section can get, in a 30 angle degree.
So, if the offset reaches 23.7, then we know
that it has a 30 degree angle and therefore,
exactly aligned with the spin btn*/
if(aoY < 11.94){
console.log('<<<<<<<<');
$('#spin').addClass('spin');
setTimeout(function () {
$('#spin').removeClass('spin');
}, 100);
}
}, 10);
$('#inner-wheel').css({
'transform' : 'rotate(' + totalDegree + 'deg)'
});
noY = t.offset().top;
});
}
else if (extraDegree =18)
{
var newextraDegree=Math.floor(Math.random() * (360 -330+1 )+330)
totalDegree = newDegree+newextraDegree;
$('#wheel .sec').each(function(){
var t = $(this);
var noY = 0;
var c = 0;
var n = 700;
var interval = setInterval(function () {
c++;
if (c === n) {
clearInterval(interval);
}
var aoY = t.offset().top;
$("#txt").html(aoY);
console.log(aoY);
/*23.7 is the minumum offset number that
each section can get, in a 30 angle degree.
So, if the offset reaches 23.7, then we know
that it has a 30 degree angle and therefore,
exactly aligned with the spin btn*/
if(aoY < 11.94){
console.log('<<<<<<<<');
$('#spin').addClass('spin');
setTimeout(function () {
$('#spin').removeClass('spin');
}, 100);
}
}, 10);
$('#inner-wheel').css({
'transform' : 'rotate(' + totalDegree + 'deg)'
});
noY = t.offset().top;
});
}
/*let's make the spin btn to tilt every
time the edge of the section hits
the indicator*/
});
});//DOCUMENT READY
#awardPanel {
padding:10px;
color:green;
text-align:center;
}
*{ margin:0; padding:0; }
body{
background:#eaeaea;
color:#fff;
font-size:18px;
font-family: 'Exo 2', sans-serif;
}
a{
color:#34495e;
}
/*WRAPPER*/
#wrapper{
margin: 40px auto 0;
width:266px;
position:relative;
}
#txt{
color:#eaeaea;
}
/*WHEEL*/
#wheel{
width:250px;
height:250px;
border-radius:50%;
position:relative;
overflow:hidden;
border:8px solid #fff;
box-shadow:rgba(0,0,0,0.2) 0px 0px 10px, rgba(0,0,0,0.05) 0px 3px 0px;
transform: rotate(0deg);
}
#wheel:before{
content:'';
position:absolute;
border:4px solid rgba(0,0,0,0.1);
width:242px;
height:242px;
border-radius:50%;
z-index:1000;
}
#inner-wheel{
width:100%;
height:100%;
-webkit-transition: all 6s cubic-bezier(0,.99,.44,.99);
-moz-transition: all 6 cubic-bezier(0,.99,.44,.99);
-o-transition: all 6s cubic-bezier(0,.99,.44,.99);
-ms-transition: all 6s cubic-bezier(0,.99,.44,.99);
transition: all 6s cubic-bezier(0,.99,.44,.99);
}
#wheel div.sec{
position: absolute;
width: 0;
height: 0;
border-style: solid;
border-width: 130px 75px 0;
border-color: #19c transparent;
transform-origin: 75px 129px;
left:50px;
top:-4px;
opacity:1;
}
#wheel div.sec:nth-child(1){
transform: rotate(30deg);
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
-o-transform: rotate(30deg);
-ms-transform: rotate(30deg);
border-color: blue transparent;
}
#wheel div.sec:nth-child(2){
transform: rotate(60deg);
-webkit-transform: rotate(60deg);
-moz-transform: rotate(60deg);
-o-transform: rotate(60deg);
-ms-transform: rotate(60deg);
border-color: white transparent;
}
#wheel div.sec:nth-child(3){
transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
border-color: blue transparent;
}
#wheel div.sec:nth-child(4){
transform: rotate(120deg);
-webkit-transform: rotate(120deg);
-moz-transform: rotate(120deg);
-o-transform: rotate(120deg);
-ms-transform: rotate(120deg);
border-color: white transparent;
}
#wheel div.sec:nth-child(5){
transform: rotate(150deg);
-webkit-transform: rotate(150deg);
-moz-transform: rotate(150deg);
-o-transform: rotate(150deg);
-ms-transform: rotate(150deg);
border-color: blue transparent;
}
#wheel div.sec:nth-child(6){
transform: rotate(180deg);
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
-ms-transform: rotate(180deg);
border-color: white transparent;
}
#wheel div.sec:nth-child(7){
transform: rotate(210deg);
-webkit-transform: rotate(210deg);
-moz-transform: rotate(210deg);
-o-transform: rotate(210deg);
-ms-transform: rotate(210deg);
border-color: blue transparent;
}
#wheel div.sec:nth-child(8){
transform: rotate(240deg);
-webkit-transform: rotate(240deg);
-moz-transform: rotate(240deg);
-o-transform: rotate(240deg);
-ms-transform: rotate(240deg);
border-color: white transparent;
}
#wheel div.sec:nth-child(9){
transform: rotate(270deg);
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-o-transform: rotate(270deg);
-ms-transform: rotate(270deg);
border-color: blue transparent;
}
#wheel div.sec:nth-child(10){
transform: rotate(300deg);
-webkit-transform: rotate(300deg);
-moz-transform: rotate(300deg);
-o-transform: rotate(300deg);
-ms-transform: rotate(300deg);
border-color: white transparent;
}
#wheel div.sec:nth-child(11){
transform: rotate(330deg);
-webkit-transform: rotate(330deg);
-moz-transform: rotate(330deg);
-o-transform: rotate(330deg);
-ms-transform: rotate(330deg);
border-color: blue transparent;
}
#wheel div.sec:nth-child(12){
transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
border-color: white transparent;
}
#wheel div.sec .fa{
margin-top: -100px;
color: rgba(0,0,0,0.2);
position: relative;
z-index: 10000000;
display: block;
text-align: center;
font-size:16px;
margin-left:-15px;
text-shadow: rgba(255, 255, 255, 0.1) 0px -1px 0px, rgba(0, 0, 0, 0.2) 0px 1px 0px;
}
#spin{
width:68px;
height:68px;
position:absolute;
top:50%;
left:50%;
margin:-34px 0 0 -34px;
border-radius:50%;
box-shadow:rgba(0,0,0,0.1) 0px 3px 0px;
z-index:1000;
background:#fff;
cursor:pointer;
font-family: 'Exo 2', sans-serif;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
#spin:after{
content:"SPIN";
text-align:center;
line-height:68px;
color:#CCC;
text-shadow: 0 2px 0 #fff, 0 -2px 0 rgba(0,0,0,0.3) ;
position: relative;
z-index: 100000;
width:68px;
height:68px;
display:block;
}
#spin:before{
content:"";
position:absolute;
width: 0;
height: 0;
border-style: solid;
border-width: 0 20px 28px 20px;
border-color: transparent transparent #ffffff transparent;
top:-12px;
left:14px;
}
#inner-spin{
width:54px;
height:54px;
position:absolute;
top:50%;
left:50%;
margin:-27px 0 0 -27px;
border-radius:50%;
background:red;
z-index:999;
box-shadow:rgba(255,255,255,1) 0px -2px 0px inset, rgba(255,255,255,1) 0px 2px 0px inset, rgba(0,0,0,0.4) 0px 0px 5px ;
background: rgb(255,255,255); /* Old browsers */
background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%, rgba(234,234,234,1) 100%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(234,234,234,1))); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%,rgba(234,234,234,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%,rgba(234,234,234,1) 100%); /* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%,rgba(234,234,234,1) 100%); /* IE10+ */
background: radial-gradient(ellipse at center, rgba(255,255,255,1) 0%,rgba(234,234,234,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eaeaea',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
#spin:active #inner-spin{
box-shadow:rgba(0,0,0,0.4) 0px 0px 5px inset;
}
#spin:active:after{
font-size:15px;
}
#shine{
width:250px;
height:250px;
position:absolute;
top:0;
left:0;
background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%, rgba(255,255,255,0.99) 1%, rgba(255,255,255,0.91) 9%, rgba(255,255,255,0) 100%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,1)), color-stop(1%,rgba(255,255,255,0.99)), color-stop(9%,rgba(255,255,255,0.91)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%,rgba(255,255,255,0.99) 1%,rgba(255,255,255,0.91) 9%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%,rgba(255,255,255,0.99) 1%,rgba(255,255,255,0.91) 9%,rgba(255,255,255,0) 100%); /* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%,rgba(255,255,255,0.99) 1%,rgba(255,255,255,0.91) 9%,rgba(255,255,255,0) 100%); /* IE10+ */
background: radial-gradient(ellipse at center, rgba(255,255,255,1) 0%,rgba(255,255,255,0.99) 1%,rgba(255,255,255,0.91) 9%,rgba(255,255,255,0) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
opacity:0.1;
}
/*ANIMATION*/
#-webkit-keyframes hh {
0%, 100%{
transform: rotate(0deg);
-webkit-transform: rotate(0deg);
}
50%{
transform: rotate(7deg);
-webkit-transform: rotate(7deg);
}
}
#keyframes hh {
0%, 100%{
transform: rotate(7deg);
-webkit-transform: rotate(0deg);
}
50%{
transform: rotate(7deg);
-webkit-transform: rotate(7deg);
}
}
.spin {
-webkit-animation: hh 0.1s; /* Chrome, Safari, Opera */
animation: hh 0.1s;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div >
<div id="wrapper">
<div id="wheel">
<div id="inner-wheel">
<div class="sec"><span class="fa" style="font-size: 16px;">$10000</span></div>
<div class="sec"><span class="fa" style="font-size: 16px;">$8000</span></div>
<div class="sec"><span class="fa" style="font-size: 16px;" >$6000</span></div>
<div class="sec"><span class="fa" style="font-size: 16px;" >$4000</span></div>
<div class="sec"><span class="fa" style="font-size: 16px;">$2000</span></div>
<div class="sec"><span class="fa" style="font-size: 16px;">$1000</span></div>
<div class="sec"><span class="fa" style="font-size: 16px;">$500</span></div>
<div class="sec"><span class="fa" style="font-size: 16px;">$300</span></div>
<div class="sec"><span class="fa" style="font-size: 16px;" >$100</span></div>
<div class="sec"><span class="fa" style="font-size: 16px;" >$50</span></div>
<div class="sec"><span class="fa" style="font-size: 16px;">10% off</span></div>
<div class="sec"><span class="fa" style="font-size: 16px;">free spin</span></div>
</div>
<div id="spin">
<div id="inner-spin"></div>
<div id="shine"></div>
</div>
<div id="txt"></div>
</div>
</div>
</div>
Now let's say for example I want to get a random number between 1 and 360 and Math.floor(Math.random() * (360 -1+1 )+1)
Now I want to create a probability out of 100
if the number was between 1 and 30 the probability will be 0.05,
if the number was between 30 and 60 the probability will be 0.05,
if the number was between 60 and 90 the probability will be 0.10,
if the number was between 90 and 120 the probability will be 5,
if the number was between 120 and 150 the probability will be 5,
if the number was between 150 and 180 the probability will be 5,
if the number was between 180 and 210 the probability will be 5,
if the number was between 210 and 240 the probability will be 13,
if the number was between 240 and 270 the probability will be 16,
if the number was between 270 and 300 the probability will be 16,
if the number was between 300 and 330 the probability will be 16.8,
if the number was between 330 and 360 the probability will be 18,
(0.05+0.05+0.10+5+5+5+5+13+16+16+16.8+18=100)
How can I achieve this

Since your second version of the code is way to long to edit in the time I can offer I wrote a short example on how to define your price list and select a winning price.
This example uses a list of possible prices with probabilities and creates a weighted list of them. From this list a random item is chosen which identifies the winning price.
After that the angle to turn the wheel is calculated to reach a random place in the selected price (starting from 0°)
// Define the prices and probabilities
const prices = [
{value: "Nothing", probability: 0.5},
{value: "Free Spin", probability: 0.2},
{value: "10$", probability: 0.15},
{value: "50$", probability: 0.1},
{value: "100$", probability: 0.04},
{value: "1000$", probability: 0.01},
];
// The angle one the wheel one area uses (uniform sizes)
var priceAngle = 360 / prices.length;
var result = prices[0];
// Generate a list of the indices based on the probabilities
var weightedList = [];
for (let i=0; i < prices.length; i++)
{
for (let j=0; j < prices[i].probability*100; j++)
{
weightedList.push(i);
}
}
// Get a random index from the weightedList and use it to get the price
var winningPriceIndex = weightedList[Math.floor(Math.random() * weightedList.length)];
result = prices[winningPriceIndex];
// Full spins the wheel shoud turn (min. 1, max. 5)
var fullSpins = Math.floor(Math.random() * 4)+1;
// Offset from 0° to the start of the price
var offsetToPrice = winningPriceIndex * priceAngle;
// Random offset from the start of the price
var additionalOffset = Math.floor(Math.random() * priceAngle);
console.log("The wheel turns " + (fullSpins * 360 + offsetToPrice + additionalOffset)
+ "° (" + fullSpins + " full spin + " + offsetToPrice + "° + " + additionalOffset + "°)");
console.log('You won: ' + result.value);
This might not be the best performing solution but it should give you an idea on how to solve your problem.

Related

Animated elements causing overflow

I'm trying to randomly generate some circles with javascript that animate around the edges of a page. My issue is that they cause horizontal scrolling, interestingly they only cause the right side to overflow. I've tried putting overflow-x: hidden; on the body; on which I'm appending said circles, but it doesn't seem to work.
I'm not super well-versed in javascript, so I'm certain it has something to do with how I'm generating/positioning the circles, but I can't figure it out, and all the threads I can find simply say to out overflow: hidden onto the container, which doesn't seem to work.
Update: The issue seems more persistent on Safari, as I've been able to eliminate it on Chrome simply by making sure no circles are placed outside the clientWidth. I'm still quite confused by the fact that the issue is only occurring on the right side.
My code:
var numberOfBalls = 10;
for (var i = 0; i < numberOfBalls; i++) {
var circle = document.createElement('div');
circle.classList.add('bg-circle');
var circleWidth = Math.floor(Math.random() * 200) + 80;
circle.style.width = circleWidth + 'px';
circle.style.animationDuration = Math.floor(Math.random() * 34) + 28 + 's';
circle.style.animationDelay = i * 200 + 'ms';
circle.style.top = Math.floor(Math.random() * (document.body.clientHeight - circleWidth * 2)) + 'px';
if (Math.random() > 0.5) {
circle.style.left = document.body.clientWidth + 'px';
} else {
circle.style.left = 0 - circleWidth + 'px';
}
document.body.appendChild(circle);
}
body {
overflow-x: hidden;
height: 100vh;
padding: 0;
margin: 0;
}
.bg-circle {
top: 0;
left: 0;
animation-delay: 0s;
width: 200px;
aspect-ratio: 1 / 1;
border-radius: 50%;
background: rgba(235, 88, 63);
position: absolute;
z-index: -1;
}
#media (prefers-reduced-motion: no-preference) {
.bg-circle {
animation: wiggle ease-in-out infinite forwards;
}
}
/*Commented out this style for renderings*/
/*#media screen and (max-width: 1800px) {
.bg-circle {
display: none;
}
}*/
.bg-circle:nth-child(odd) {
animation-direction: reverse;
}
#keyframes wiggle {
0% {
transform: translate(0%, 0%);
}
20% {
transform: translate(140%, -20%)
}
40% {
transform: translate(120%, -80%)
}
60% {
transform: translate(-90%, 180%)
}
80% {
transform: translate(-130%, -80%);
}
100% {
transform: translate(0%, 0%);
}
}

Problem keeping a 3D cube correctly roll on its edges using rotate and translate

Please see my js Fiddle here: https://jsfiddle.net/mauricederegt/5ozqg9uL/3/
var xAngle = 0;
var yAngle = 0;
var xPos = 0;
var yPos = 0;
$('body').keydown(function(evt) {
if(evt.keyCode == 37)
{
//left
yAngle -= 90;
xPos -= 100;
//rotate and translate the position of the cube
$('#cube')[0].style["WebkitTransform"] = "translateX("+xPos+"px) translateY("+yPos+"px) rotateX(" + xAngle + "deg) rotateY(" + yAngle + "deg)";
}
if(evt.keyCode == 39)
{
//right
yAngle -= -90;
xPos -= -100;
//rotate and translate the position of the cube
$('#cube')[0].style["WebkitTransform"] = "translateX("+xPos+"px) translateY("+yPos+"px) rotateX(" + xAngle + "deg) rotateY(" + yAngle + "deg)";
}
if(evt.keyCode == 38)
{
//up
xAngle -= -90;
yPos -= 100;
//rotate and translate the position of the cube
$('#cube')[0].style["WebkitTransform"] = "translateX("+xPos+"px) translateY("+yPos+"px) rotateX(" + xAngle + "deg) rotateY(" + yAngle + "deg)";
}
if(evt.keyCode == 40)
{
//down
xAngle -= 90;
yPos -= -100;
//rotate and translate the position of the cube
$('#cube')[0].style["WebkitTransform"] = "translateX("+xPos+"px) translateY("+yPos+"px) rotateX(" + xAngle + "deg) rotateY(" + yAngle + "deg)";
}
});
#scene {
padding: 10px;
-webkit-perspective: 800;
}
#cube {
position: relative;
padding-top: 0;
margin: 0 auto;
height: 100px;
width: 100px;
-webkit-transition: -webkit-transform 0.4s linear;
-webkit-transform-style: preserve-3d;
}
.face {
position: absolute;
height: 85px;
width: 85px;
border-style: solid;
border-width: 5px;
border-color: grey;
padding: 5px;
background-color: rgba(190, 190, 190, 0.7);
}
#cube .one {
-webkit-transform: rotateX(90deg) translateZ(50px);
}
#cube .two {
-webkit-transform: translateZ(50px);
}
#cube .three {
-webkit-transform: rotateY(90deg) translateZ(50px);
}
#cube .four {
-webkit-transform: rotateY(180deg) translateZ(50px);
}
#cube .five {
-webkit-transform: rotateY(-90deg) translateZ(50px);
}
#cube .six {
-webkit-transform: rotateX(-90deg) translateZ(50px) rotate(180deg);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!doctype html>
<html>
<body>
<div id="scene">
Press the arrow keys...
<div id="cube">
<div class="face one">
Face 1
</div>
<div class="face two">
Face 2
</div>
<div class="face three">
Face 3
</div>
<div class="face four">
Face 4
</div>
<div class="face five">
Face 5
</div>
<div class="face six">
Face 6
</div>
</div>
</div>
</body>
</html>
As you can see I have a css3 3d cube which you can move by using your arrow keys. You can move it to the left, to the right, up and down. To achieve this I store the position and angle in various vars:
var xAngle = 0;
var yAngle = 0;
var xPos = 0;
var yPos = 0;
The cube always "rolls" correctly on its edges going up or down, but for left and right this is not always the case.
Example:
At start press the left arrow key and the right as many times as you like. The cube behaves correctly
Now press down once and then left twice (or right) again. The cube now rolls incorrectly
BUT, if you press up or down again, it rolls correctly again going up or down
So the issue only seems to be with going left or right. How can I fix this?

You need to consider 3 kind of rotations which mean 3 different axis and not 2 like you are doing.
Here is an updated version of your code. Notice how I am updating the angles of an axis based on others axis.
Still not a perfect solution since I found some strange movements (probably some edge cases I missed) but a good starting point.
var xAngle = 0;
var yAngle = 0;
var zAngle = 0;
var xPos = 0;
var yPos = 0;
$('body').keydown(function(evt) {
if (evt.keyCode == 37) {
//left
if (xAngle % 180 == 0)
yAngle -= 90;
else
zAngle -= 90;
xPos -= 100;
}
if (evt.keyCode == 39) {
//right
if (xAngle % 180 == 0)
yAngle -= -90;
else
zAngle -= -90;
xPos -= -100;
}
if (evt.keyCode == 38) {
//up
if (yAngle % 180 == 0)
xAngle -= -90;
else
zAngle -= -90;
yPos -= 100;
}
if (evt.keyCode == 40) {
//down
if (yAngle % 180 == 0)
xAngle -= 90;
else
zAngle -= 90;
yPos -= -100;
}
$('#cube').css('transform', "translateX(" + xPos + "px) translateY(" + yPos + "px) rotateX(" + xAngle + "deg) rotateY(" + yAngle + "deg) rotateZ(" + zAngle + "deg)");
});
#scene {
padding: 10px;
perspective: 800;
}
#cube {
position: relative;
padding-top: 0;
margin: 0 auto;
height: 100px;
width: 100px;
transition: transform 0.4s linear;
transform-style: preserve-3d;
}
.face {
position: absolute;
height: 85px;
width: 85px;
border-style: solid;
border-width: 5px;
border-color: grey;
padding: 5px;
background-color: rgba(190, 190, 190, 0.7);
}
#cube .one {
transform: rotateX(90deg) translateZ(50px);
}
#cube .two {
transform: translateZ(50px);
}
#cube .three {
transform: rotateY(90deg) translateZ(50px);
}
#cube .four {
transform: rotateY(180deg) translateZ(50px);
}
#cube .five {
transform: rotateY(-90deg) translateZ(50px);
}
#cube .six {
transform: rotateX(-90deg) translateZ(50px) rotate(180deg);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="scene">
Press the arrow keys...
<div id="cube">
<div class="face one">
Face 1
</div>
<div class="face two">
Face 2
</div>
<div class="face three">
Face 3
</div>
<div class="face four">
Face 4
</div>
<div class="face five">
Face 5
</div>
<div class="face six">
Face 6
</div>
</div>
</div>

It looks like your issue is the translations are happening all relative to the original orientation, and you're not accounting for the fact that your positive x,y are different on each rotation.

CSS 360 rotating progress radial using JS

var ele = document.getElementById("filler");
var deg = 0;
var myInterval = setInterval(function() {
deg = deg + 10;
if (deg > 360) {
clearInterval(myInterval);
}
ele.style.transform = `rotate(${deg}deg)`;
}, 500);
.filler-wrapper {
height: 100px;
width: 100px;
position: relative;
border-radius: 50%;
overflow: hidden;
background: linear-gradient(to left, red 50%, green 50%);
}
.filler {
border-radius: 0 100% 100% 0 / 50%;
display: block;
height: 100%;
margin-left: 50%;
transform-origin: left;
background: green;
transform: rotate(0deg)
}
<div class="filler-wrapper">
<div id="filler" class="filler"></div>
</div>
I have created this radial progress but this works for only 180. How can I make it to rotate 360 deg.

Here is an idea based on this previous answer where you can do this with only background:
var ele = document.getElementById("box");
var deg = -90;
var s = 1;
var myInterval = setInterval(function() {
if(deg >= 90 && s) {
ele.style.setProperty("--s", --s);
deg = -90;
}
deg = deg + 10;
ele.style.setProperty("--v", deg+'deg');
if(deg >= 90 && !s) {
clearInterval(myInterval);
}
}, 500);
#box {
width:100px;
height:100px;
border-radius:50%;
background:
linear-gradient(var(--v), green 50%,transparent 0) center/calc(var(--s)*100%),
linear-gradient(var(--v), red 50%, transparent 0) center/calc(100% - var(--s)*100%),
linear-gradient(to right, green 50%,red 0);
}
<div id="box" style="--v:-90eg;--s:1"></div>
<!-- first cycle : from -90deg to 90deg with s=1 -->
<!-- second cycle : from -90deg to 90deg with s=0 -->
Shortly this will be something trivial with conic-gradient():
var ele = document.getElementById("box");
var deg = 0;
var myInterval = setInterval(function() {
deg = deg + 10;
ele.style.setProperty("--v", deg+'deg');
if(deg >= 360 ) {
clearInterval(myInterval);
}
}, 500);
#box {
width:100px;
height:100px;
border-radius:50%;
background:
conic-gradient(red var(--v,0deg),green var(--v,0deg),green 360deg);
}
<div id="box" ></div>
The above should work only on Chrome

For JS
isCompleted = false;
progressCount = 10;
function updateProgress() {
progressCount = progressCount + 10;
const _count = progressCount * 1.8;
console.log(_count)
if (_count > 180) {
isCompleted = true;
}
if (this.isCompleted) {
return;
}
_rotateSpinner(_count);
}
var elCircleFullFill = document.getElementById("circleFullFill");
var elCircleHalfFill = document.getElementById("circleHalfFill");
var elCircleMaskFull = document.getElementById("circleMaskFull");
var elCircleFillFix = document.getElementById("circleFillFix");
function _rotateSpinner(__progressCount) {
const fillRotation = __progressCount;
const fixRotation = __progressCount * 2;
elCircleFullFill.style = `transform:rotate(${fillRotation}deg)`;
elCircleHalfFill.style = `transform:rotate(${fillRotation}deg)`;
elCircleMaskFull.style = `transform:rotate(${fillRotation}deg)`;
elCircleFillFix.style = `transform:rotate(${fixRotation}deg)`;
}
SCSS
.progress-radial {
width: 50px;
height: 50px;
background-color: #fff;
border-radius: 50%;
.circle {
.circle-mask,
.circle-fill {
width: 50px;
height: 50px;
position: absolute;
border-radius: 50%;
transition: -webkit-transform 1s;
transition: -ms-transform 1s;
transition: transform 1s;
-webkit-backface-visibility: hidden;
}
.circle-mask {
clip: rect(0px, 50px, 50px, 50px/2);
.circle-fill {
clip: rect(0px, 50px/2, 50px, 0px);
background-color: #0096FF;
}
}
}
}
HTML
<div class="progress-radial">
<div class="circle">
<div class="circle-mask" id="circleMaskFull">
<div class="circle-fill" id="circleFullFill"></div>
</div>
<div class="circle-mask">
<div class="circle-fill" id="circleHalfFill"></div>
<div class="circle-fill" id="circleFillFix"></div>
</div>
</div>
</div>
<button onclick="updateProgress()">Update Spinner</button>

How to stop recalculate value every time it's being finished?

I have a clock written with pure Javascript and CSS. Every time when new minute begins, my const which is responsible for rotating clocks hands is recalculated to first value (90deg). It causes problem because the clock's hand should rotate back to the first position from the end.
I would like that my rotate value will not restart and always go on new minute\hour with current rotate value.
Check my demo
What I do?
CSS
.clock {
width: 20rem;
height: 20rem;
border: 1px solid rgba(0, 0, 0, .3);
background: #ffafbd;
/* Old browsers */
background: -moz-linear-gradient(top, #ffafbd 0%, #ffc3a0 100%);
/* FF3.6-15 */
background: -webkit-linear-gradient(top, #ffafbd 0%, #ffc3a0 100%);
/* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #ffafbd 0%, #ffc3a0 100%);
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#ffafbd', endColorstr='#ffc3a0', GradientType=0);
/* IE6-9 */
border-radius: 50%;
margin: 50px auto;
position: relative;
padding: 2rem;
}
.clock-face {
position: relative;
width: 100%;
height: 100%;
transform: translateY(-3px);
/* account for the height of the clock hands */
}
.hand {
width: 50%;
height: 2px;
background: #4568dc;
/* Old browsers */
background: -moz-linear-gradient(top, #4568dc 0%, #b06ab3 100%);
/* FF3.6-15 */
background: -webkit-linear-gradient(top, #4568dc 0%, #b06ab3 100%);
/* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #4568dc 0%, #b06ab3 100%);
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#4568dc', endColorstr='#b06ab3', GradientType=0);
/* IE6-9 */
position: absolute;
top: 50%;
transform: rotate(90deg);
transform-origin: 100%;
transition: transform .2s cubic-bezier(0, 2.48, 0.72, 0.66);
}
.hour-hand {
top: 45%;
left: 32.5%;
width: 35%;
transform-origin: 75%;
}
JavaScript
const secondHand = document.querySelector(".second-hand");
const minutesHand = document.querySelector(".min-hand");
const hourHand = document.querySelector(".hour-hand");
function getDate() {
const now = new Date();
const seconds = now.getSeconds();
const secondsRotate = ((seconds / 60) * 360) + 90;
secondHand.style.transform = `rotate(${secondsRotate}deg)`;
const minutes = now.getMinutes();
const minutesRotate = ((minutes / 60) * 360) + 90;
minutesHand.style.transform = `rotate(${minutesRotate}deg)`;
const hours = now.getHours();
const hoursRotate = ((hours / 12) * 360) + 90;
hourHand.style.transform = `rotate(${hoursRotate}deg)`;
console.log(hours);
}
setInterval(getDate, 1000);

You can simple disable the secondHand.style.transition when secondHand transform rotate degrees reach 90:
const secondsRotate = ((seconds / 60) * 360) + 90;
if(secondsRotate == 90) {
secondHand.style.transition = "none";
} else {
secondHand.style.transition = "transform .2s cubic-bezier(0, 2.48, 0.72, 0.66)";
}
secondHand.style.transform = `rotate(${secondsRotate}deg)`;
See it working here: http://codepen.io/clytras/pen/bgpvxB

I have come across with this solution based on modifying the transition curve at a specific second:
function getDate() {
const now = new Date();
const seconds = now.getSeconds();
secondsRotate = ((seconds / 60) * 360) + 90;
if(seconds == 0) {
secondHand.style.transitionDuration = "1s";
secondHand.style.transitionTimingFunction = "cubic-bezier(0.545, 0.060, 0.360, 1.225)";
secondsRotate = ((1 / 60) * 360) + 90;
}
else if(seconds == 1) {
secondHand.style.transitionDuration = "0.2s";
secondHand.style.transitionTimingFunction = "cubic-bezier(0, 2.48, 0.72, 0.66)";
}
secondHand.style.transform = `rotate(${secondsRotate}deg)`;
const minutes = now.getMinutes();
const minutesRotate = ((minutes / 60) * 360) + 90;
minutesHand.style.transform = `rotate(${minutesRotate}deg)`;
const hours = now.getHours();
const hoursRotate = ((hours / 12) * 360) + 90;
hourHand.style.transform = `rotate(${hoursRotate}deg)`;
console.log(minutesRotate);
}
Codepen: http://codepen.io/anon/pen/bgpvoe

Why is my 3d cube not rotating as expected?

I'm doing a 3d dice that rotates when you swipe its face. The problem is that it is acting really weird on some cases. For example, if you run the snippet and swipe left two times then swipe down, it does a crazy rotation...
Here is the code:
$(function() {
var X = 0,
Y = 0;
var hammertime = new Hammer($(".thirdDimension")[0], {domEvents: true});
hammertime.get('swipe').set({ direction: Hammer.DIRECTION_ALL });
function rotate(what) {
switch (what) {
case "X":
$(".cube").css("transform", "rotateX(" + X + "deg) rotateY(" + Y +"deg)");
break;
case "Y":
$(".cube").css("transform", "rotateY(" + Y +"deg) rotateX(" + X + "deg)");
break;
}
$("#debug").html($("#debug").html() + $(".cube").attr("style") + "<br>").scrollTop($("#debug")[0].scrollHeight);
}
$(".thirdDimension").on("swipeleft", function(e){
Y -= 90;
rotate("Y");
});
$(".thirdDimension").on("swiperight", function(e){
Y += 90;
rotate("Y");
});
$(".thirdDimension").on("swipeup", function(e){
X += 90;
rotate("X");
});
$(".thirdDimension").on("swipedown", function(e){
X -= 90;
rotate("X");
});
});
* {
box-sizing: border-box;
}
html, body {
height: 100%;
font-family: sans-serif;
}
.tableContainer, .vcenter {
height: 100%;
width: 100%;
}
.tableContainer {
display: table;
}
.vcenter {
height: 100%;
display: table-cell;
vertical-align: middle;
}
.thirdDimension {
perspective: 500px;
perspective-origin: 50% 100px;
}
.cube {
margin: 0 auto;
position: relative;
width: 200px;
height: 200px;
transform-style: preserve-3d;
}
.cube div {
position: absolute;
width: 200px;
height: 200px;
box-shadow: inset 0 0 30px black;
font-size: 72pt;
padding-top: 35px;
text-align: center;
background-color: black;
}
.right {
transform: rotateY(-270deg) translateX(100px);
transform-origin: top right;
}
.left {
transform: rotateY(270deg) translateX(-100px);
transform-origin: center left;
}
.up {
transform: rotateX(90deg) translateY(-100px);
transform-origin: top center;
}
.down {
transform: rotateX(-90deg) translateY(100px);
transform-origin: bottom center;
}
.front {
transform: translateZ(100px);
}
.back {
transform: translateZ(-100px) rotateY(180deg);
}
.cube {
-webkit-transition: .3s all linear;
cursor: pointer;
}
.cube div:after {
display: block;
position: absolute;
width: 100px;
height: 100px;
content: "";
border: 1px solid;
}
.front:after {
top: 0;
right: 0;
background-color: green;
}
.back:after {
bottom: 0;
right: 0;
background-color: blue;
}
.right:after {
top: 0;
left: 0;
background-color: red;
}
.left:after {
bottom: 0;
left: 0;
background-color: DarkOrange;
}
.up:after {
right: 0;
bottom: 0;
background-color: white;
}
.down:after {
bottom: 0;
left: 0;
background-color: yellow;
}
#debug {
position: fixed;
background-color: cyan;
overflow: auto;
height: 50px;
width: 100%;
}
/*
.cube {
animation: linear 5s rotate infinite;
}
#-webkit-keyframes rotate {
0% {
transform: rotateX(0deg) rotateY(0deg);
}
100% {
transform: rotateX(360deg) rotateY(720deg);
}
}
*/
<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<div id='debug'></div>
<div class='tableContainer'>
<div class='vcenter'>
<div class='thirdDimension'>
<div class='cube'>
<div class='up'></div>
<div class='front'></div>
<div class='right'></div>
<div class='left'></div>
<div class='back'></div>
<div class='down'></div>
</div>
</div>
</div>
</div>
EDIT: This link: http://greensock.com/forums/topic/7811-3d-rotation-fixed-axsis/ says that the order of the rotations matter. I changed my code slightly but it keeps rotating unexpectedly...

First: Settings the transform different ways for either "X" or "Y" was causing the massive spinning. I changed them both to:
$(".cube").css("transform", "rotateX(" + X + "deg) rotateY(" + Y +"deg)");
If believe you wish for the cube to always spin in the direction of the swipe. Continue reading if so or if not , all you needed to change was the above code.
Second: When you spin the cube you are changing the orientation. The x-axis is never messed up but the y-axis and z-axis are switching without you really noticing.
Now you can to add rotateZ to the mix:
$(".cube").css("transform", "rotateX(" + X + "deg) rotateY(" + Y +"deg) rotateZ(" + Z + "deg)");
I have changed the code here in this CodePen to provide an example. I have not completed it because I have revealed the issue, but do not have the time to perfect it.
$(function() {
var X = 0,
Y = 0,
Z = 0;
var hammertime = new Hammer($(".thirdDimension")[0], {domEvents: true});
hammertime.get('swipe').set({ direction: Hammer.DIRECTION_ALL });
function rotate() {
$(".cube").css("transform", "rotateX(" + X + "deg) rotateY(" + Y +"deg) rotateZ(" + Z + "deg)");
$("#debug").html($("#debug").html() + $(".cube").attr("style") + "<br>").scrollTop($("#debug")[0].scrollHeight);
}
$(".thirdDimension").on("swipeleft", function(e){
//Y -= 90;
check(-90);
rotate();
});
$(".thirdDimension").on("swiperight", function(e){
//Y += 90;
check(90);
rotate();
});
$(".thirdDimension").on("swipeup", function(e){
X += 90;
rotate();
});
$(".thirdDimension").on("swipedown", function(e){
X -= 90;
rotate();
});
function check(num) {
var temp = Math.abs(X % 360);
switch (temp) {
case 0:
console.log(temp);
Y += num;
break;
case 90:
console.log(temp);
Z -= num
break;
case 180:
console.log(temp);
Y -= num;
break;
case 270:
console.log(temp);
Z -= num;
break;
}
}
});
You need to check the y-axis (Math.abs(Y % 360))) and possibly the z-axis and rotate either the y-axis and z-axis (+- 90) accordingly.
This mostly works, but needs fine tuning in determining the correct axis to rotate. Good luck.

Your problem is more how you have conceptualized rotation than any coding mistakes.
If you rotateY(90), then rotateX(90) - then by the time you get to rotateX(90), your X axis has rotated by 90 degrees, so it is no longer left to right, but into/out of screen. So your thing will look like it's doing a 2d rotate in that particular instance.
And to take it further, if the user now swipes left to right, they are actually swiping along the Z axis, and you need to rotate Z.
To fix this, you need to keep track of the rotation you have done and map the user interface to the cube in a more dynamic way. Swiping left to right doesn't always mean rotate Y, it means rotate along the axis that is currently oriented left to right.
I suggest you find a rubik's cube or similar, and label the sides per axis (e.g. Red side is X axis), simulate the swiping, and then that should make things more clear, as you'll see those axis move around the cube.

Develop Reference

JavaScript is the programming language of the Web.

Spin wheel result to be already controlled - javascript

Related

Animated elements causing overflow

Problem keeping a 3D cube correctly roll on its edges using rotate and translate

CSS 360 rotating progress radial using JS

How to stop recalculate value every time it's being finished?

Why is my 3d cube not rotating as expected?

Categories

Resources