I am currently making a script where I should be able to pick up some circles, and currently, I am using 3 circles of a similar name, circle1, circle2, and circle3.
For some reason it doesn't do what it's supposed to and let me pick the circles up, can someone please help me? Thanks!
Here is my code:
var NUM_CIRCLES = 3;
var RADIUS = 30;
var mouseX = 0;
var mouseY = 0;
var circle1;
var circle2;
var circle3;
var val1 = new Array();
var val2 = new Array();
var val3 = new Array();
var val = new Array();
var vaal = 0;
var changeInX = 0;
var changeInY = 0;
function start(){
drawCircles();
setTimer(dragAndDrop, 10);
}
// This function draws a number of random colored circles at random points
// on the screen based on the variable NUM_CIRCLES
function drawCircles() {
circle1 = new Circle(RADIUS);
var x1 = Randomizer.nextInt(RADIUS, getWidth() - RADIUS);
var y1 = Randomizer.nextInt(RADIUS, getHeight() - RADIUS);
circle1.setPosition(x1, y1);
circle1.setColor(Randomizer.nextColor());
add(circle1);
circle2 = new Circle(RADIUS);
var x2 = Randomizer.nextInt(RADIUS, getWidth() - RADIUS);
var y2 = Randomizer.nextInt(RADIUS, getHeight() - RADIUS);
circle2.setPosition(x2, y2);
circle2.setColor(Randomizer.nextColor());
add(circle2);
circle3 = new Circle(RADIUS);
var x3 = Randomizer.nextInt(RADIUS, getWidth() - RADIUS);
var y3 = Randomizer.nextInt(RADIUS, getHeight() - RADIUS);
circle3.setPosition(x3, y3);
circle3.setColor(Randomizer.nextColor());
add(circle3);
}
function dragAndDrop(){
mouseDragMethod(mouseDrag);
}
function getMouseXY(e){
mouseX = e.getX();
mouseY = e.getY();
}
function mouseDrag(){
val1 = [];
vaal = mouseMoveMethod(getVariableXAndY);
val1.push(vaal);
val2 = [];
val2.push(mouseMoveMethod(getVariableXAndY));
val3 = [];
val3.push(mouseMoveMethod(getVariableXAndY));
val = [];
val.push(val1, val2, val3);
var mouse = new Array(mouseX, mouseY);
for (var i = 0; i < 6; i += 2){
mouseDownMethod(getMouseXY);
if (((val[i]) + RADIUS) >= (mouse[i]) && (((val[i]) - RADIUS) <
(mouse[i])) && (((val[i + 1]) - RADIUS) < (mouse[i])) && (((val[i + 1]) +
RADIUS) > (mouse[i]))){
stopTimer(dragAndDrop);
setTimer(waitForMouseMove, 10);
}
}
}
function waitForMouseMove(){
mouseMoveMethod(mouseMoveBall);
}
function mouseMoveBall(){
var oldMouseX = mouseX;
var oldMouseY = mouseY;
mouseMoveMethod(getMouseXY);
if(oldMouseX > mouseX){
changeInX = oldMouseX - mouseX;
} else if(oldMouseX < mouseX){
changeInX = mouseX - oldMouse;
} else if(oldMouseY > mouseY){
changeInY = oldMouseY - mouseY;
} else{
if(oldMouseY < mouseY){
changeInY = mouseY - oldMouseY;
}
}
}
function getVariableXAndY(variable) {
var xAndYCords = [variable.getX(), variable.getY()];
return xAndYCords;
}
Thanks
-Lerb_games
thanks in advance for any help you are able to give.
I have been tasked with sorting out the company website. I have made my way through the majority of it however have become stuck on a piece of JavaScript.
The site has a questionnaire with answers in three categories. From the score I plot a triangle. I have written a function which will return the calculations I want. As a test of this function I can write the calculated variables directly to a popup window.
I have created another function to then draw the triangle using CANVAS() in a popup. As a test to see if the new function works I put in the code to try and create the popup with the results in it. It goes as far as creating the pop up but does not write to it, as if the code stops after creating the popup. Can anyone tell me what I have done wrong?
Regards
Drew
Code:
<script type="text/javascript">
function myFunction()
{
function calcD()
{
var D1 = parseInt(document.forms.form1.elements.RadioGroup1.value);
var D2 = parseInt(document.forms.form1.elements.RadioGroup4.value);
var D3 = parseInt(document.forms.form1.elements.RadioGroup7.value);
var D4 = parseInt(document.forms.form1.elements.RadioGroup10.value);
var Ds = D1 + D2 + D3 + D4;
return Ds;
}
function calcI()
{
var I1 = parseInt(document.forms.form1.elements.RadioGroup2.value);
var I2 = parseInt(document.forms.form1.elements.RadioGroup5.value);
var I3 = parseInt(document.forms.form1.elements.RadioGroup8.value);
var I4 = parseInt(document.forms.form1.elements.RadioGroup11.value);
var Is = I1 + I2 + I3 + I4;
return Is;
}
function calcB()
{
var B1 = parseInt(document.forms.form1.elements.RadioGroup3.value);
var B2 = parseInt(document.forms.form1.elements.RadioGroup6.value);
var B3 = parseInt(document.forms.form1.elements.RadioGroup9.value);
var B4 = parseInt(document.forms.form1.elements.RadioGroup12.value);
var Bs = B1 + B2 + B3 + B4;
return Bs;
}
var X = 396.4;
var Y = 250;
var coS30 = 0.866025403784439;
var siN30m = -0.5;
var siN30p = 0.5;
var Dx = X;
var Dy = calcD() + Y;
var Bx = X - (calcB()*coS30);
var By = Y + (calcB()*siN30m);
var Ix = X + (calcI()*coS30);
var Iy = Y + (calcI()*siN30p);
var Xs = (Dx + Bx + Ix)/3;
var Ys = (Dy + By + Iy)/3;
/*
var myWindow1 = window.open("","MsgWindow","resizable,height=700,width=793");
myWindow1.document.write('var X = ' + X);
myWindow1.document.write('; var Y = ' + Y);
myWindow1.document.write('; var coS30 = ' + coS30);
myWindow1.document.write('; var siN30m = ' + siN30m);
myWindow1.document.write('; var siN30p = ' + siN30p);
myWindow1.document.write('; var Dx = ' + Dx);
myWindow1.document.write('; var Dy = ' + Dy);
myWindow1.document.write('; var Bx = ' + Bx);
myWindow1.document.write('; var By = ' + By);
myWindow1.document.write('; var Ix = ' + Ix);
myWindow1.document.write('; var Iy = ' + Iy);
myWindow1.document.write('; var Xs = ' + Xs);
myWindow1.document.write('; var Ys = ' + Ys);
myWindow1.document.close();
*/
}
</script>
<script type="text/javascript">
function draw() {
var myWindow1 = window.open("","MsgWindow","resizable,height=700,width=793");
myWindow1.document.write('var X = ' + X);
myWindow1.document.write('; var Y = ' + Y);
myWindow1.document.write('; var coS30 = ' + coS30);
myWindow1.document.write('; var siN30m = ' + siN30m);
myWindow1.document.write('; var siN30p = ' + siN30p);
myWindow1.document.write('; var Dx = ' + Dx);
myWindow1.document.write('; var Dy = ' + Dy);
myWindow1.document.write('; var Bx = ' + Bx);
myWindow1.document.write('; var By = ' + By);
myWindow1.document.write('; var Ix = ' + Ix);
myWindow1.document.write('; var Iy = ' + Iy);
myWindow1.document.write('; var Xs = ' + Xs);
myWindow1.document.write('; var Ys = ' + Ys);
myWindow1.document.close();
/*
var ctx = myWindow1.document.getElementById('canvas').getContext('2d');
var img = new Image();
img.onload = function() {
ctx.drawImage(img, 0, 0);
ctx.beginPath();
ctx.moveTo(Dx, Dy);
ctx.lineTo(Bx, By);
ctx.lineTo(Ix, Iy);
ctx.fill();
ctx.stroke();
};
img.src = "img/triangle.png";
*/
};
</script>
Variable values if you need them:
var X = 396.4;
var Y = 250;
var coS30 = 0.866025403784439;
var siN30m = -0.5;
var siN30p = 0.5;
var Dx = 396.4;
var Dy = 250;
var Bx = 396.4;
var By = 250;
var Ix = 396.4;
var Iy = 250;
var Xs = 396.3999999999999;
var Ys = 250;
I have a div with id, lines. It contains a sketched(programmatically) map. I keep track of the mouse click coordinates so that I can display tooltips at clicked position. I need to include the content of signo[i] and status[i] in the tooltip. Could you tell me how to do that in javascript?
Code :
<div id="lines" onclick="showCoords(event)">
<script>
b = xmlDoc.getElementsByTagName("TRACK");
jQuery.ajax({
type: "POST",
url: "WebForm1.aspx/GetStations", //It calls our web method
contentType: "application/json; charset=utf-8",
data: JSON.stringify({ myArray1: dl_id_track, myArray2: dl_id_gate, myArray3: dl_id_point}),
dataType: "json",
async: true,
success: function (data) {
if (data != null) {
var len = data.d.length;
for (var i = 0; i < len; i++) {
signo[i] = data.d[i].signo;
status[i] = data.d[i].status;
}
function showCoords(event) {
var xcoord = event.clientX;
var ycoord = event.clientY;
var coords = "X coords: " + xcoord + ", Y coords: " + ycoord;
document.getElementById("demo1").innerHTML = coords;
for (var i = 0; i < b.length; i++) {
var x1 = parseInt(left_track[i]) + parseInt(x1_track[i]);
var y1 = parseInt(top_track[i]) + parseInt(y1_track[i]);
var x2 = parseInt(left_track[i]) + parseInt(x2_track[i]);
var y2 = parseInt(top_track[i]) + parseInt(y2_track[i]);
var slope = (y2 - y1) / (x2 - x1);
var line = (slope * xcoord) - ycoord - x1 + y1;
if (line == 0) {
asset = "track";
}
}
}
</script>
use title Attribute
Below content here will show as tool tip
function showCoords(event) {
var xcoord = event.clientX;
var ycoord = event.clientY;
var coords = "X coords: " + xcoord + ", Y coords: " + ycoord;
document.getElementById("demo1").innerHTML = coords;
for (var i = 0; i < b.length; i++) {
var x1 = parseInt(left_track[i]) + parseInt(x1_track[i]);
var y1 = parseInt(top_track[i]) + parseInt(y1_track[i]);
var x2 = parseInt(left_track[i]) + parseInt(x2_track[i]);
var y2 = parseInt(top_track[i]) + parseInt(y2_track[i]);
var slope = (y2 - y1) / (x2 - x1);
var line = (slope * xcoord) - ycoord - x1 + y1;
if (line == 0) {
asset = "track";
}
}
document.getElementById("lines").title =coords;
}
use this to position you tooltip
HTML-Tooltip position relative to mouse pointer
I am trying to solve a javascript puzzle.
Draw a 3D Cube wireframe and rotate it along the axes that passes through its center. The rotating object should decelerate at a rate of ‘X’ degrees/sec^2 before it comes to a standstill.
The object should respond as follows to the following user inputs
Swipe
/Drag
: Accelerates or decelerates the rotating object as per the difference in velocity
between
rotation and swipe with the friction factor Y.
Touch
/Click
generates friction that should decelerate the rotation further by a Y (friction factor)
This is the code I have written
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="1000" height="1000"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.translate(200,200);
var x1,x2,y1,y2,tempx,tempy,up=false,down = false,inter, interval;
function line(context, p1,p2) {
context.beginPath();
context.moveTo(p1.x, p1.y);
context.lineTo(p2.x, p2.y);
context.closePath();
context.stroke();
}
function project() {
ctx.clearRect(-500, -500, canvas.width, canvas.height);
for(var i=0;i<edges.length;i++)
{
// var x1 = vertices[edges[i][0]][0];
// var y1 = vertices[edges[i][0]][1];
// var x2 = vertices[edges[i][1]][0];
// var y2 = vertices[edges[i][1]][1];
// var z1 = vertices[edges[i][0]][3];
// var z2 = vertices[edges[i][1]][3];
// vertices[edges[i][0]][0] = x1 + 20;
// vertices[edges[i][0]][1] = y1 + 20;
// vertices[edges[i][1]][0] = x2 + 20;
// vertices[edges[i][1]][1] = y2 + 20;
line(ctx,{x:vertices[edges[i][0]][0],y:vertices[edges[i][0]][1]}, {x:vertices[edges[i][1]][0],y:vertices[edges[i][1]][1]});
}
}
function rep()
{
rotateX(tempy/3000);
rotateY(tempx/3000);
project();
}
function stop()
{
console.log(inter);
inter += 0.5;
rotateX(tempy/3000);
rotateY(tempx/3000);
project();
clearInterval(interval);
interval = setInterval(stop, inter);
}
var vertices = [[-100,-100,-100],[-100,-100,100],[-100,100,-100], [-100,100,100],[100,-100,-100],[100,-100,100],[100,100,-100],[100,100,100]];
var edges =[[0,1],[1,3],[3,2],[2,0],[4,5],[5,7],[7,6],[6,4],[0,4],[1,5],[2,6],[3,7]];
var rotateX = function(theta) {
var sina = Math.sin(theta);
var cosa = Math.cos(theta);
for (var i=0; i<vertices.length; i++) {
var vertice = vertices[i];
var y = vertice[1];
var z = vertice[2];
vertice[1] = y * cosa - z * sina;
vertice[2] = z * cosa + y * sina;
}
};
var rotateY = function(theta) {
var sina = Math.sin(theta);
var cosa = Math.cos(theta);
for (var i=0; i<vertices.length; i++) {
var vertice = vertices[i];
var x = vertice[0];
var z = vertice[2];
vertice[0] = x * cosa - z * sina;
vertice[2] = z * cosa + x * sina;
}
};
var rotateZ = function(theta) {
var sina = Math.sin(theta);
var cosa = Math.cos(theta);
for (var i=0; i<vertices.length; i++) {
var vertice = vertices[i];
var x = vertice[0];
var y = vertice[1];
vertice[0] = x * cosa - y * sina;
vertice[1] = y * cosa + x * sina;
}
};
rotateZ(60);
rotateY(60);
rotateZ(60);
project();
canvas.addEventListener("mousedown",function(event)
{
old = Date.now();
x1 = event.clientX;
y1 = event.clientY;
down = true;
},false);
canvas.addEventListener("mouseup",function(event)
{
up = true;
newt = Date.now();
dt = newt - old;
x2 = event.clientX;
y2 = event.clientY;
dx = Math.sqrt(Math.pow((x2-x1),2)-Math.pow((y2-y1),2));
inter = (dx / dt) * 2;
//console.log(inter);
tempx = x2 - x1;
tempy = y2 - y1;
interval = setInterval(rep, inter);
// console.log("x1:" + x1 +" y1:" + y1 + "x2:" + x2 + "y2:" + y2);
},false);
canvas.addEventListener("mousemove",function(event)
{
if(down){
newt = Date.now();
dt = newt - old;
x2 = event.clientX;
y2 = event.clientY;
// console.log("x1:" + x1 +" y1:" + y1 + "x2:" + x2 + "y2:" + y2);
rotateX((y2-y1)/3000);
rotateY((x2-x1)/3000);
project();
}
},false);
canvas.addEventListener("click",function(event)
{
if(down)
{
down = false;
}
if(up)
{
clearInterval(interval);
interval = setInterval(stop, inter);
up = false;
}
},false);
// canvas.addEventListener("swipe",function)
</script>
<body>
</html>
I want to stop the cube by slowing the rotation speed linearly and stop. How to improve my code for that
<html>
<body>
<canvas id="myCanvas" width="1000" height="1000"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.translate(200,200);
var x1,x2,y1,y2,tempx,tempy,up=false,down = false,inter, interval;
function line(context, p1,p2) {
context.beginPath();
context.moveTo(p1.x, p1.y);
context.lineTo(p2.x, p2.y);
context.closePath();
context.stroke();
}
function project() {
ctx.clearRect(-500, -500, canvas.width, canvas.height);
for(var i=0;i<edges.length;i++)
{
line(ctx,{x:vertices[edges[i][0]][0],y:vertices[edges[i][0]][1]}, {x:vertices[edges[i][1]][0],y:vertices[edges[i][1]][1]});
}
}
function rep()
{
rotateX(tempy/1000);
rotateY(tempx/1000);
project();
}
function stop()
{
console.log(inter);
inter += 0.5;
rotateX(tempy/1000);
rotateY(tempx/1000);
project();
clearInterval(interval);
interval = setInterval(stop, inter);
}
var vertices = [[-100,-100,-100],[-100,-100,100],[-100,100,-100], [-100,100,100],[100,-100,-100],[100,-100,100],[100,100,-100],[100,100,100]];
var edges =[[0,1],[1,3],[3,2],[2,0],[4,5],[5,7],[7,6],[6,4],[0,4],[1,5],[2,6],[3,7]];
var rotateX = function(theta) {
var sina = Math.sin(theta);
var cosa = Math.cos(theta);
for (var i=0; i<vertices.length; i++) {
var vertice = vertices[i];
var y = vertice[1];
var z = vertice[2];
vertice[1] = y * cosa - z * sina;
vertice[2] = z * cosa + y * sina;
}
};
var rotateY = function(theta) {
var sina = Math.sin(theta);
var cosa = Math.cos(theta);
for (var i=0; i<vertices.length; i++) {
var vertice = vertices[i];
var x = vertice[0];
var z = vertice[2];
vertice[0] = x * cosa - z * sina;
vertice[2] = z * cosa + x * sina;
}
};
var rotateZ = function(theta) {
var sina = Math.sin(theta);
var cosa = Math.cos(theta);
for (var i=0; i<vertices.length; i++) {
var vertice = vertices[i];
var x = vertice[0];
var y = vertice[1];
vertice[0] = x * cosa - y * sina;
vertice[1] = y * cosa + x * sina;
}
};
rotateZ(60);
rotateY(60);
rotateZ(60);
project();
canvas.addEventListener("mousedown",function(event)
{
old = Date.now();
x1 = event.clientX;
y1 = event.clientY;
down = true;
},false);
canvas.addEventListener("mousemove",function(event)
{
if(down){
newt = Date.now();
dt = newt - old;
x2 = event.clientX;
y2 = event.clientY;
// console.log("x1:" + x1 +" y1:" + y1 + "x2:" + x2 + "y2:" + y2);
rotateX((y2-y1)/1000);
rotateY((x2-x1)/1000);
project();
}
},false);
canvas.addEventListener("click",function(event)
{
if(down)
{
down = false;
}
if(up)
{
clearInterval(interval);
interval = setInterval(stop, inter);
up = false;
}
},false);
</script>
<body>
I realise the title might be misleading, but did not know how to phrase it any other way.
The problem im facing is that I draw up a SVG panel from a JSON object, and in that object there is moving parts that is being controlled by a server that is sending values to us. I get the moving part to be in the right position, but after awhile it keeps adding X position to itself so much that it goes out of the border, which its not meant to do. Basically what it does is add X+X+X repeatedly from the initialposition, but I want it to consider the initialposition first when calculating a new position to be at.
Here is the function behind that, I tried having an if statement that checked for a variable standardX and standardY, while they were set as undefined it would set obj.transform.baseVal.getItem(length).matrix.e as the value to it, but that did not work.
Any tips on any workaround?
Thanks in advance.
var moveX = function(elem, i) {
return function () {
var stepvalue = 6.25;
var step = "0";
var x1 = "0";
var y1 = "0";
var obj = elem.dyn[i].obj;
var standardX = obj.transform.baseVal.getItem(length).matrix.e;
var standardY = obj.transform.baseVal.getItem(length).matrix.f;
console.log(elem.value);
if (elem.value <= elem.dyn[i].rlow) {
step = 0;
x1 = standardY;
y1 = standardX;
obj.setAttribute("transform", "translate("+ x1 + "," + y1 +")");
} else if (elem.value > elem.dyn[i].rlow && elem.value <= elem.dyn[i].rhigh) {
step = stepvalue * elem.value;
x1 = step -25;
y1 = standardY;
x1 += standardX;
obj.setAttribute("transform", "translate("+ x1 + "," + y1 +")");
} else {
step = stepvalue * elem.dyn[i].rhigh;
x1 = step -25;
y1 = standardY;
x1 += standardX;
obj.setAttribute("transform", "translate("+ x1 + "," + y1 +")");
}
}};
Not really sure as we don't have access to the whole code.
From what I gather the problem you're having is that you are initializing standardX and standardY at every call of the function.
You might want to initialize them when you declare the function, like so :
var moveX = function(elem, i) {
return function () {
var stepvalue = 6.25;
var step = "0";
var x1 = "0";
var y1 = "0";
var obj = elem.dyn[i].obj;
console.log(elem.value);
if (elem.value <= elem.dyn[i].rlow) {
step = 0;
x1 = moveX.standardY;
y1 = moveX.standardX;
obj.setAttribute("transform", "translate("+ x1 + "," + y1 +")");
} else if (elem.value > elem.dyn[i].rlow && elem.value <= elem.dyn[i].rhigh) {
step = stepvalue * elem.value;
x1 = step -25;
y1 = moveX.standardY;
x1 += moveX.standardX;
obj.setAttribute("transform", "translate("+ x1 + "," + y1 +")");
} else {
step = stepvalue * elem.dyn[i].rhigh;
x1 = step -25;
y1 = moveX.standardY;
x1 += moveX.standardX;
obj.setAttribute("transform", "translate("+ x1 + "," + y1 +")");
}
};
};
moveX.standardX = obj.transform.baseVal.getItem(length).matrix.e;
moveX.standardY = obj.transform.baseVal.getItem(length).matrix.f;
Another option might be the following, if it needs some kind of dynamic initialization.
var moveX = function(elem, i) {
var standardX = obj.transform.baseVal.getItem(length).matrix.e;
var standardY = obj.transform.baseVal.getItem(length).matrix.f;
return function () {
var stepvalue = 6.25;
var step = "0";
var x1 = "0";
var y1 = "0";
var obj = elem.dyn[i].obj;
console.log(elem.value);
if (elem.value <= elem.dyn[i].rlow) {
step = 0;
x1 = standardY;
y1 = standardX;
obj.setAttribute("transform", "translate("+ x1 + "," + y1 +")");
} else if (elem.value > elem.dyn[i].rlow && elem.value <= elem.dyn[i].rhigh) {
step = stepvalue * elem.value;
x1 = step -25;
y1 = standardY;
x1 += standardX;
obj.setAttribute("transform", "translate("+ x1 + "," + y1 +")");
} else {
step = stepvalue * elem.dyn[i].rhigh;
x1 = step -25;
y1 = standardY;
x1 += standardX;
obj.setAttribute("transform", "translate("+ x1 + "," + y1 +")");
}
};
};
To be noted that all of this is possible because you can access variables declared outside the current function.
You can find more on function scope and context switch in this article.