Rotating point incorrectly - language-agnostic

was developing some circuitry simulation software but ran into a very simple school level problem. Rotating points, now I have done this before in xna like so: x=xcos(theta)+offsetx y=ysin(theta)+offsety. This didnt seem to work in this case, so i looked it up and apparently it's:
I tried that aswell, issues again.
-1 : 0
0 : 1
1 : 0
======0.000======
0 : 0
-1 : -1
0 : 0
======1.571======
0 : 0
1 : 1
0 : 0
======3.142======
0 : 0
1 : -1
0 : 0
======4.712======
in format x:y then with the rotation angle in radians ====theta====
Those aren't the correct coordinates, Any help apreciated.
Vector2[] vecs = new Vector2[3];
vecs[0] = new Vector2(-1, 0);
vecs[1] = new Vector2(0, 1);
vecs[2] = new Vector2(1, 0);
for (int i = 0; i < vecs.Length; i++)
{
vecs[i].X = vecs[i].X * (float)Math.Cos(rotation) - vecs[i].Y * (float)Math.Sin(rotation);
vecs[i].Y = vecs[i].Y * (float)Math.Cos(rotation) + vecs[i].X * (float)Math.Sin(rotation);
}

If you rotate point (px, py) around point (ox, oy) by angle theta you'll get:
p'x = cos(theta) * (px-ox) - sin(theta) * (py-oy) + ox
p'y = sin(theta) * (px-ox) + cos(theta) * (py-oy) + oy
Then the algorithm is correct and you have problem elsewhere, ex: decimal point accurecy
function rotate(point, theta, origin){
origin = origin || [0, 0];
return [
Math.round((Math.cos(theta) * (point[0]-origin[0]) - Math.sin(theta) * (point[1]-origin[1]) + origin[0])*1000)/1000,
Math.round((Math.sin(theta) * (point[0]-origin[0]) + Math.cos(theta) * (point[1]-origin[1]) + origin[0])*1000)/1000
]
}
$(function() {
v = function() {
var point = [
parseFloat($("#inputx").val()),
parseFloat($("#inputy").val())
]
var angle = parseFloat($("#inputtheta").val());
var result = rotate(point,angle);
console.log(result)
$("#result").text("["+result+"]");
};
$("#inputx").bind("change paste keyup", function() {v()});
$("#inputy").bind("change paste keyup", function() {v()});
$("#inputtheta").bind("change paste keyup", function() {v()});
v();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
<label for="inputx">X</label>
<input type="text" id="inputx" class="form-control" name="inputx" value="-1">
</div>
<div>
<label for="inputy">Y</label>
<input type="text" id="inputy" class="form-control" name="inputy" value="0">
</div>
<div>
<label for="inputtheta">Θ</label>
<input type="text" id="inputtheta" class="form-control" name="inputtheta" value="1.57079633">
</div>
<div>
<label>=</label>
<div id="result" ></div>
</div>

Related

How do I make my upgrades on my cookie clicker game flow next to a image?

So, I am making a cookie clicker, I want my upgrades to go next to my cookies, which is centered. How would I make my upgrades go left and have the cookie still centered? It would look much better if I could. If you have any idea how, please, please respond quickly.
Help would be appreciated! :^)
<script>
function update() {
document.getElementById('text').value = cookiecount;
document.title = cookiecount + " Cookies";
document.getElementById('ammountMultiplier').innerHTML = "Multiplier Upgrade x" + (multiplier+1);
document.getElementById('ammountMultiplier2').innerHTML = "x" + (multiplier+1);
document.getElementById('costMultiplier').innerHTML = ((multiplier+1) * 100) + " Cookies";
document.getElementById('currentMultiplier').innerHTML = "Your current Multiplier is x" + (multiplier);
document.getElementById('ammountAutoClick').innerHTML = "You Own " + autoClick + " Auto Clickers";
document.getElementById('costAutoClick').innerHTML = ((autoClick+1) * 12) + " Cookies";
document.getElementById('ammountFarms').innerHTML = "You Own " + farms + " Farms";
document.getElementById('costFarms').innerHTML = ((farms+1) * 15) + " Cookies";
document.getElementById('ammountGrandma').innerHTML = "You Own " + grandma +" Grandmas";
document.getElementById('costGrandma').innerHTML = ((grandma+1) * 15) + "Cookies";
document.getElementById('cookiespersecond').innerHTML = "You are gaining " + (((autoClick)+(farms*2)+(grandma*2))*multiplier) + " Cookies per/s";
}
var multiplier = 1;
var cookiecount = 0;
var autoClick = 0;
var farms = 0;
var grandma = 0;
function timer() {
cookiecount = cookiecount + autoClick*multiplier;
cookiecount = cookiecount + farms*2*multiplier;
cookiecount = cookiecount + grandma*2*multiplier;
update()
}
setInterval(timer, 1000)
</script>
<html>
<style>
body{
background-image: url('http://pa1.narvii.com/6718/86e6473ccdc4cfefcb427d96def5cf6917d481f4_00.gif');
background-size: cover;
}
</style>
<center>
<head><title>0 Cookies</title></head>
<body>
<p id="cookiespersecond">You are gaining 0 Cookies per/s</p>
<img src="cookie.jpg">
<br><br>
You got:
<input type="text" id="text" disabled style= text-align:center value=0>
<script>
function add() {
cookiecount = cookiecount + 1
update()
}
</script>
Cookies
<br><br></center>
<button>Save</button>
<button>Load</button>
<br><br>
<p id="ammountMultiplier">Multiplier Upgrade x2</p>
<button><span id="ammountMultiplier2">x2</span></button>
<p id="costMultiplier">200 Cookies</p>
<p id="currentMultiplier">Your current Multiplier is x1</p>
<br>
<p>Buy 1 Auto Clicker</p>
<button><img src=mouse.jpg width="30px" height="40px"></button>
<p id="costAutoClick">12 Cookies</p>
<p id="ammountAutoClick">You Own 0 Auto Clickers</p>
<br>
<p>Buy 1 Farm</p>
<button><img src="farm.jpg" width="50px" height="50px"></button>
<p id="costFarms">15 Cookies</p>
<p id="ammountFarms">You Own 0 Farms</p>
<br>
<p>Buy 1 Grandma</p>
<button><img src="grandma.jpg" width="50px" height="50px"></button>
<p id="costGrandma">15 Cookies</p>
<p id="ammountGrandma">You own 0 Grandmas</p>
<script>
function save() {
localStorage.setItem("cookiecount", cookiecount);
localStorage.setItem("autoClick", autoClick);
localStorage.setItem("farms", farms);
localStorage.setItem("multiplier", multiplier);
}
function load() {
cookiecount = localStorage.getItem("cookiecount");
cookiecount = parseInt(cookiecount);
autoClick = localStorage.getItem("autoClick");
autoClick = parseInt(autoClick);
farms = localStorage.getItem("farms");
farms = parseInt(farms);
multiplier = localStorage.getItem("multiplier");
multiplier = parseInt(multiplier);
update()
}
function buyAutoClick() {
if (cookiecount >= ((autoClick+1) * 12)) {
cookiecount = cookiecount - ((autoClick+1) * 12);
autoClick = autoClick + 1;
update()
}
}
function buyFarm() {
if (cookiecount >= ((farms+1) * 15)) {
cookiecount = cookiecount - ((farms+1) * 15);
farms = farms + 1;
update()
}
}
function buyMultiplier() {
if (cookiecount >= ((multiplier+1) * 100)) {
cookiecount = cookiecount - ((multiplier+1) * 50);
multiplier = multiplier + 1;
update()
}
}
function buyGrandma() {
if (cookiecount >= ((grandma+1) * 15)) {
cookiecount = cookiecount - ((grandma+1) * 15);
grandma = grandma + 1;
update()
}
}
</script>
</html>
Please help!
You could try separating the HTML elements that you created with JS into two categories of cookie-side and upgrades/buildings and put both of those into their own div tags which would be held in another div with the class of game-wrapper tag which you would add the following code to in CSS:
.game-wrapper {
display: flex;
align-items: center;
}

why cannot call function in button? Phaser

I cannot use the start function, what can I do guys? What is my problem? I hope everyone helps me :) .Thanks you for helping in advance !
var diff,
increase_end_angle = 0,
start_angle = 1.5 * Math.PI,end_angle = 2 * Math.PI,
startTime = (new Date()).getTime(),
circleTimer;
create: function {
button = this.game.add.button(0,0,'btnNext', this.start,this);
},
circleTimer: function () {
var graphics = game.add.graphics(0, 0);
diff = (new Date()).getTime() - startTime;
diff = diff / 60000; //60000ms = 60s
increase_end_angle = start_angle + end_angle * diff + reduce;
graphics = game.add.bitmapData(80,80);
graphics.context.fillStyle = '#D24545';
graphics.context.beginPath();
graphics.context.arc(x,y,radius,start_angle,increase_end_angle,false);
graphics.context.lineTo(x,y);
graphics.context.fill();
graphics.context.closePath();
game.add.image(13, 8, graphics);
},
start: function () {
circleTimer = setInterval(this.circleTimer, 200);
},
update: function() {
if(diff > 1 ) {
clearInterval(circleTimer);
}
},
Seems to be working just fine for me: http://codepen.io/kozulowski/pen/dPjXvY.
You seem to be missing some variables: I can't see a declaration for reduce, radius, x, y etc.

Nested JQuery events not working

The purpose of my code is to solve a system of three equations.
What I want to happen is for the "p" selector and the "answer" class to be hidden. When there is a "click" event on an "h1" selector, I want it to show the next element. However, after there is a click event on the class "button" I want the "matrix" class to slide up and then the "answer" class to slide down, revealing the answer to the HTML form's results while hiding or "slideUp"ing the original form and heading.
Originally the "my_code.js" file had no problem hiding the "p" element and slideToggling it when an h1 selector before it was clicked, but once I added the additional code, things went south.
What is happening in my jquery script? Am I targeting ancestors elements incorrectly?
JQUERY DOCUMENT
$(document).ready(function() {
$("p, .answer").hide();
$("h1").click(function() {
$(this).next().slideToggle(300);
});
$(".button")click(function() { //after form submission
$(".matrix").slideUp(300, function(){ //hiding the matrix form
$(".answer").slideDown(300); //and display the answer
});
});
});
HTML DOCUMENT
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css" />
<title>Kremer's Rule: System of Three Equations</title>
<script language="JavaScript">
function testResults (form) {
function system (x1, x2, x3, y1, y2, y3, z1, z2, z3, a1, a2, a3){
this.x1 = x1;
this.x2 = x2;
this.x3 = x3;
this.y1 = y1;
this.y2 = y2;
this.y3 = y3;
this.z1 = z1;
this.z2 = z2;
this.z3 = z3;
this.a1 = a1;
this.a2 = a2;
this.a3 = a3;
this.calcDanswer = function() {
return (this.x1*((this.y2*this.z3)-(this.z2*this.y3))) - (this.y1*((this.x2*this.z3)-(this.z2*this.x3))) + (this.z1*((this.x2*D.y3)- (this.y2*this.x3)));
};
this.calcXanswer = function(){
return (this.a1*((this.y2*this.z3)-(this.z2*this.y3))) - (this.y1*((this.a2*this.z3)-(this.z2*this.a3))) + (this.z1*((this.a2*this.y3)-(this.y2*this.a3)));
};
this.calcYanswer = function(){
return (this.x1*((this.a2*this.z3)-(this.z2*this.a3))) - (this.a1*((this.x2*this.z3)-(this.z2*this.x3))) + (this.z1*((this.x2*this.a3)-(this.a2*this.x3)));
};
this.calcZanswer = function(){
return (this.x1*((this.y2*this.a3)-(this.a2*this.y3))) - (this.y1*((this.x2*this.a3)-(this.a2*this.x3))) + (this.a1*((this.x2*this.y3)-(this.y2*this.x3)));
};
}
var x1 = form.x1.value;
var x2 = form.x2.value;
var x3 = form.x3.value;
var y1 = form.y1.value;
var y2 = form.y2.value;
var y3 = form.y3.value;
var z1 = form.z1.value;
var z2 = form.z2.value;
var z3 = form.z3.value;
var a1 = form.a1.value;
var a2 = form.a2.value;
var a3 = form.a3.value;
var D = new system(x1, x2, x3, y1, y2, y3, z1, z2, z3, a1, a2, a3);
var X = D.calcXanswer()/D.calcDanswer();
var Y = D.calcYanswer()/D.calcDanswer();
var Z = D.calcZanswer()/D.calcDanswer();
// printing to console
var out = document.getElementById('real-answer');
out.innerHTML += "<b>The equations are:</b>" + "<br />" +
D.x1 + "x + " + D.y1 + "y + " + D.z1 +"z = "+D.a1 + "<br />" +
D.x2 + "x + " + D.y2 + "y + " + D.z2 +"z = "+D.a2 + "<br />" +
D.x3 + "x + " + D.y3 + "y + " + D.z3 +"z = "+D.a3 + "<br /><br />" +
"The answer for D is " + D.calcDanswer() + "<br />" +
"The answer for Dx is " + D.calcXanswer() + "<br />" +
"The answer for Dy is " + D.calcYanswer() + "<br />" +
"The answer for Dy is " + D.calcZanswer() + "<br />" +
"X is " + X + "<br />" +
"Y is " + Y + "<br />" +
"Z is " + Z;
}
</SCRIPT>
</head>
<body>
<!--DIRECTIONS-->
<h1><span id="highlight">How Does This Work?</span></h1>
<p>Type in all the information for your system of three equations.<br />
When finished hit "Go".</p>
<!--Form-->
<p class="matrix">
<FORM NAME="myform" ACTION="" METHOD="GET">
<input type="text" name="x1"> x + <input type="text" name="y1"> y + <input type="text" name="z1"> z = <input type="text" name="a1"><br />
<input type="text" name="x2"> x + <input type="text" name="y2"> y + <input type="text" name="z2"> z = <input type="text" name="a2"><br />
<input type="text" name="x3"> x + <input type="text" name="y3"> y + <input type="text" name="z3"> z = <input type="text" name="a3"><br />
<input type="button" class="button" name="button" value="GO" onClick="testResults(this.form)">
</form>
</p>
<div id="answer">
<h1><span id="highlight">The Answer:</span></h2>
<div id='real-answer'></div>
</div>
</body>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="my_code.js"></script>
</html>
You have a syntax error and the answers is a id not a class
$(document).ready(function () {
//answer is an id so use id selector
$("p, #answer").hide();
$("h1").click(function () {
$(this).next().slideToggle(300);
});
//missing . before click(
$(".button").click(function () { //after form submission
$(".matrix").slideUp(300, function () { //hiding the matrix form
$("#answer").slideDown(300); //and display the answer
});
});
});
Demo: Fiddle
If "p" selector having the "answer" class is not getting hidden, then i can tell u as its a syntax error. Remove that comma after p
$("p #answer").hide();
Hope this helps you

alert box for a calculation field

How can I have an alert box pop up if the number in the Answer_2 field is greater than 10, or less than -10?
Here's my example
Javascript:
function CalculateIMSUB(Atext, Btext, form, val)
{
var A = eval(Atext);
var B = eval(Btext);
if (isNaN(A)) A = 0;
if (isNaN(B)) B = 0;
var answer = A - B;
form.Answer.value = answer;
var diff = answer - val;
if (diff == 0)
form.Answer_2.value = 'ok';
else if (diff < 0)
form.Answer_2.value = diff;
else
form.Answer_2.value = '+' + diff;
}
function calculateAll() {
var forms = document.getElementsByTagName("form");
for(var i = 0; i < forms.length; i++ ) {
CalculateIMSUB(forms[i].input_A.value, forms[i].input_B.value,forms[i], 96)
}
}
HTML:
<FORM NAME="Calculator" METHOD="GET">
<P><INPUT TYPE=TEXT NAME="input_A" SIZE=10><INPUT TYPE=TEXT NAME="input_B" SIZE=10>
<INPUT TYPE="button" VALUE="+" name="subtractbutton" onclick="CalculateIMSUB
(this.form.input_A.value, this.form.input_B.value, this.form, 96)">
<INPUT TYPE=TEXT NAME="Answer" SIZE=12><tt>96</tt><INPUT TYPE=TEXT NAME="Answer_2"
SIZE=4></P></form>
<input type="button" onclick="calculateAll()" value="Master calculation" />
Thanks very much in advance
From what I understand, only thing you need to do is this, under where you calculate var diff
if(diff < -10 || diff > 10)
alert("diff is more Tham 10");

Creating a jquery UI slider that stops sliding at specific points

I've got a jquery ui slider that I'm creating for a new project. I need to know if there's a way to disable sliding after a certain point left and right of the slider 'handles' as I'm greying out left/right of the slider depending on information coming from the database. It's a complex search function basically, and depending on other user-defined choices, the user could either use the whole width of the slider, or parts of it will be greyed out so that they can only select a small part. I've added an image here:
http://demos.frodo.wilson-cooke.co.uk/varley-118345/stackoverflowimage.jpg
So what I've done is positioned a div over the top of the slider and updated the CSS so that it shows the 'block' divs. If all is normal, these are all coloured green, and you can select the whole slider. However, if a range is set, then some of the boxes are greyed out, and you can only select from inside that range (see the green inside the grey boxes - that would be the selectable range, and the white would be the selected range)
However, there's no way to say 'I don't want you to be able to slide past a specific point' - so in this example it would be 'I don't want you to be able to slide past left = 26.6667%' or whatever.
Does anyone have any ideas on how I could achieve this? I've pasted all my code in below.
/* CONTENT
---------------------------------------------------------
-------------------------------------------------------- */
$(document).ready(function(){
var rangenumleft = 0;
var rangenumright = 240;
var curleftval = 0;
wheelDiameterValues = new Array();
wheelDiameterValues[0] = 0;
wheelDiameterValues[1] = 50;
wheelDiameterValues[2] = 75;
wheelDiameterValues[3] = 100;
wheelDiameterValues[4] = 125;
wheelDiameterValues[5] = 150;
wheelDiameterValues[6] = 175;
wheelDiameterValues[7] = 200;
wheelDiameterValues[8] = 225;
wheelDiameterValues[9] = 250;
wheelDiameterValues[10] = 275;
wheelDiameterValues[11] = 300;
wheelDiameterValues[12] = 350;
wheelDiameterValues[13] = 400;
wheelDiameterValues[14] = 450;
wheelDiameterValues[15] = 500;
// when you click the go button on search, this shows the example functionality.
$('#gobutton').click(function() {
var value1 = 40;
var value2 = 100;
lightblocks('#diameter-overslider', value1, value2);
createSlider('#diameter-slider', value1, value2);
});
var initValue1 = 0;
var initValue2 = 150;
createSlider('#diameter-slider', initValue1, initValue2);
createSlider('#load-slider', initValue1, initValue2);
})
function recalcRangeNumbers(slider, numA, numB) {
$(slider).find('#leftrangenumber').html(numA);
$(slider).find('#rightrangenumber').html(numB);
}
function createSlider(slider, value1, value2) {
$(slider).slider({
range: true,
min: 0,
max: 150,
step: 10,
values: [ value1, value2 ],
create: function(event, ui) {
//lightblocks();
var startval = $(this).slider( "values", 0 );
startval = wheelDiameterValues[startval / 10];
var endval = $(this).slider( "values", 1 );
console.log(endval);
endval = wheelDiameterValues[endval / 10]
console.log(endval);
$(this).children('.ui-slider-handle').each(function(index, domEle) {
if(index == 0) {
$(this).addClass('leftHandle');
}
else
{
$(this).addClass('rightHandle');
}
if($(this).hasClass('leftHandle')) {
$(this).append('<div class="leftslider"><p class="range-number" id="leftrangenumber">'+startval+'</p></div>');
}
else if($(this).hasClass('rightHandle')) {
$(this).append('<div class="rightslider"><p class="range-number" id="rightrangenumber">'+endval+'</p></div>');
}
});
},
slide: function( event, ui ) {
var value = ui.value;
var value1 = ui.values[0];
var value2 = ui.values[1];
if(value == value1)
{
direction = 'left';
}
else if(value == value2)
{
direction = 'right';
}
//lightblocks(value, direction);
var startval = ui.values[0];
startval = wheelDiameterValues[startval / 10];
var endval = ui.values[1];
endval = wheelDiameterValues[endval / 10];
recalcRangeNumbers(slider, startval, endval);
//$( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
}
});
}
function lightblocks(slider, value1, value2) {
/*changeval = value / 10;
if(direction == 'left')
{
for(i = 0; i < changeval; i++){
changevalselector = '#'+i;
$(changevalselector).addClass('block-green');
}
}
else if (direction == 'right')
{
for(i = 15; i >= changeval; i--){
changevalselector = '#'+i;
$(changevalselector).addClass('block-green');
}
}
*/
console.log("slider name="+slider+" value1 = "+value1+" value2 = "+value2);
value1 = value1 / 10;
value2 = value2 / 10;
console.log("slider name="+slider+" value1 = "+value1+" value2 = "+value2);
for(i = 0; i < value1; i++)
{
changevalselector = '#'+i;
$(slider).find(changevalselector).removeClass('block-green');
$(slider).find(changevalselector).addClass('block-grey');
}
for(i = 15; i >= value2; i--)
{
changevalselector = '#'+i;
$(slider).find(changevalselector).removeClass('block-green');
$(slider).find(changevalselector).addClass('block-grey');
}
then HTML
<div class="section" id="bigconfig-spec">
<h2> Specifications <img class="info-icon tooltip" src="images/info-icon.png" alt="information icon" title="This is some product type information" /></h2>
<p class="slider-label"> Wheel Diameter (mm) </p>
<div class="slider" id="diameter-slider"></div>
<div class="overslider" id="diameter-overslider">
<?php for($i = 0; $i <= 14; $i++) { ?>
<div class="sliderblock block-green" id="<?php echo $i; ?>"></div>
<?php } ?>
</div>
<p class="slider-label"> Load Capacity (each, kg) </p>
<div class="slider" id="load-slider"></div>
<div class="overslider" id="load-overslider">
<?php for($i = 0; $i <= 14; $i++) { ?>
<div class="sliderblock block-green" id="<?php echo $i; ?>"></div>
<?php } ?>
</div>
</div>
Anyway, any ideas would be much appreciated, as the only way I can see is to start messing around with the jquery ui code, which is a bit over my head (at the moment, I'm sure I could get my head around it)
But yeah, thanks for any help.
Cheers
Andy
Have you looked into this question:
jquery slider, time picker and reserved times..
The idea is similar and I believe that is what you are looking for.