smooth animation using deviceorientation - javascript

I'm creating a game using the device deviceorientation with the createjs library,
I have a graphic that moves on it's x axis depending on the tilt of the phone.
The problem I'm having is the graphic animation is jerky.
I'm wondering if it's down to the logic I'm using?
I have two functions "handleOrientation" and "render"
window.addEventListener('deviceorientation', handleOrientation);
function handleOrientation(event) {
nextX = car.x;
x = Math.round(event.beta); // In degree in the range [-180,180]
y = Math.round(event.gamma); // In degree in the range [-90,90]
// Because we don't want to have the device upside down
// We constrain the x value to the range [-90,90]
if (x > 90) { x = 90};
if (x < -90) { x = -90};
hit = "nothing"
// To make computation easier we shift the range of
// x and y to [0,180]
x += 90;
//y += 90;
if(y >0){
nextX = car.x +carSpeed;
}
if(y < 0){
nextX = car.x -carSpeed;
};
car.nextX= nextX;
}
function render(){
if(gameState=="game started"){
if (car.nextX < 0 + car.width / 2){
car.x = 0 + car.width / 2 ;
}else if(car.nextX > stage.canvas.width - car.width / 2){
car.x = stage.canvas.width - car.width / 2;
} else{
car.x = car.nextX;
}
}
}
function tick(){
render();
stage.update();
}
I know that deviceorientation is quite sensitive, maybe calling the function in a timer, so it's not updating so often?
Any pointers?

maybe calling the function in a timer, so it's not updating so often
Instead of updating the location on every tick, you could read multiple readings before updating the position, take an average, and update position using that average.
Alternatively, you could update the position on every tick but use last N readings to get the average in a similar way.
Here's a simple example of the second suggestion:
window.addEventListener('deviceorientation', handleOrientation);
xAvg = 0;
yAvg = 0;
//how much stored "average" affects current speed
coef = 0.9;
function handleOrientation(event) {
nextX = car.x;
x = Math.round(event.beta); // In degree in the range [-180,180]
y = Math.round(event.gamma); // In degree in the range [-90,90]
// Because we don't want to have the device upside down
// We constrain the x value to the range [-90,90]
if (x > 90) { x = 90};
if (x < -90) { x = -90};
hit = "nothing"
// To make computation easier we shift the range of
// x and y to [0,180]
x += 90;
y += 90;
//include current readings to the "average"
xAvg = xAvg*coef + x*(1.0 - coef);
yAvg = yAvg*coef + y*(1.0 - coef);
x = xAvg;
y = yAvg;
if(y >0){
nextX = car.x +carSpeed;
}
if(y < 0){
nextX = car.x -carSpeed;
};
car.nextX= nextX;
}
function render(){
if(gameState=="game started"){
if (car.nextX < 0 + car.width / 2){
car.x = 0 + car.width / 2 ;
}else if(car.nextX > stage.canvas.width - car.width / 2){
car.x = stage.canvas.width - car.width / 2;
} else{
car.x = car.nextX;
}
}
}
function tick(){
render();
stage.update();
}
I have not tested this, and you should play around with coef value.

Related

Three.js rotating a cube around a sphere

i'm trying to rotate a cube around a sphere, when i press the spacebar, the cube starts rotating around the sphere just fine, but it goes a lot quicker than i wanted, i wrote a function which would calculate the rotation using "angle" as a parameter. a full rotation would require the angle to go from 0 to 359 (or 1 to 360), but somehow the cube rotates around the sphere completely when the angle increases by just 7 degrees.
code: (im excluding the initialization of the cube and sphere meshes, just the functions)
var rotationAngle = 0;
function rotate(angle)
{
if(angle == 0)
{
keu.position.x = whiteBall.position.x + 1;
keu.position.z = whiteBall.position.z;
} else if(angle > 0 && angle < 90)
{
keu.position.x = whiteBall.position.x + Math.cos(angle);
keu.position.z = whiteBall.position.z - Math.sin(angle);
} else if(angle == 90)
{
keu.position.x = whiteBall.position.x;
keu.position.z = whiteBall.position.z - 1;
} else if(angle > 90 && angle < 180)
{
angle -= 90;
keu.position.x = whiteBall.position.x - Math.sin(angle);
keu.position.z = whiteBall.position.z - Math.cos(angle);
} else if(angle == 180)
{
keu.position.x = whiteBall.position.x - 1;
keu.position.z = whiteBall.position.z;
} else if(angle > 180 && angle < 270)
{
angle -= 180;
keu.position.x = whiteBall.position.x - Math.cos(angle);
keu.position.z = whiteBall.position.z + Math.sin(angle);
} else if(angle == 270)
{
keu.position.x = whiteBall.position.x;
keu.position.z = whiteBall.position.z + 1;
}else if(angle > 270 && angle < 360)
{
angle -= 270;
keu.position.x = whiteBall.position.x + Math.sin(angle);
keu.position.z = whiteBall.position.z + Math.cos(angle);
}
console.log(angle);
}
in the code above "whiteball is the sphere, and "keu" is the cube.
in my render function i have to following code to increase the angle and apply the rotation:
if(isKeyPressed)
{
if(rotationAngle < 360)
{
rotationAngle += 1;
}
if(rotationAngle == 360)
rotationAngle = 0;
}
rotate(rotationAngle);
i have no idea why an increase of just 7 degrees would cause the cube to make a full rotation around the sphere, any code snippets / advice would be appreciated.
Treat x position of the cube as Math.sin(counter) and y position as Math.cos(counter) where counter is some number being incremented in some requestAnimationFrame loop and if spacebar is down then increment the counter and if up then stop incrementing it. You can also modify the distance from your central point around which you move the cube by multiplying Math.sin(counter) by that distance (in pixels). You surely know range of sin is from -1 to 1.
So the code would look something like:
let isMoving = false;
document.body.addEventListener('keydown', event => {
if (event.key === 'Space') {
isMoving = true;
}
});
document.body.addEventListener('keyup', event => {
if (event.key === 'Space') {
isMoving = false;
}
});
const X = ...; //your central point, X coordinate of the sphere
const Y = ...// your central point, Y coordinate of the sphere
const distance = 100;
const speed = ...; // how fast do you want your cube to move around the sphere
let counter = 0;
let wholeCircle = false; // will be set to true after first round and stop further movement of the cube
function render() {
if (isMoving) {
counter += speed;
}
cube.position.x = X + distance * Math.sin(counter);
cube.position.y = Y + distance * Math.cos(counter);
}
render();
This is not a code to copy and paste, you needto adjust it to your situation and variable names. It is just to give you an idea on how to do this kind of movement. I didn't use the wholeCircle, you can surely figure it out.

Smooth canvas line and on curser start point

I am attempting to create a canvas web application and having two main problems. I would love to make the pen tool draw more smoothly. Secondly, each time I clear the sketch and begin to draw again the line begins in a different point to the curser/mouse.
Here is javascript for my drawing tool:
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var radius = 10;
var dragging = false;
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
context.lineWidth = radius*2;
var putPoint = function(e){
if(dragging){
context.lineTo(e.clientX, e.clientY);
context.stroke();
context.beginPath();
context.arc(e.clientX, e.clientY, radius, 0, Math.PI*2);
context.fill();
context.beginPath();
context.moveTo(e.clientX, e.clientY);
}}
var engage = function(){
dragging = true;
}
var disengage = function(){
dragging = false;
}
canvas.addEventListener('mousedown', engage);
canvas.addEventListener('mousemove', putPoint);
canvas.addEventListener('mouseup', disengage);
and this is how I am clearing the sketch:
// JavaScript Document
// bind event handler to clear button
document.getElementById('clear').addEventListener('click', function() {
context.clearRect(0, 0, canvas.width, canvas.height);
}, false);
A live preview can be seen at: http://www.sarahemily.net/canvas/
THANKS FOR YOUR HELP!
First the problem of the line starting in the wrong spot. You are forgetting to finish the path you create. You have beginPath, and moveTo but you leave it hanging. You need to call stroke once when the mouse button is up.
Smoothing.
Line smoothing is a very complicated thing to do with many professional drawing apps tackling the problem with a variety of solutions. There does not seem to be one agreed upon method. The big problem is.. How do you smooth a line but not destroy the desired line? and How do you do it quickly????
Here I present a two stage process.
Reduce the line complexity
Step one, reduce the line complexity. Sampling the mouse gives way to many points. So I need to reduce the number of points, but not lose any details.
I use the Ramer–Douglas–Peucker algorithm. It's quick and does a good job of reducing the complexity (number of points) of a line. Below you can find my implementation of the algorithm. It's not the best as it could do with some optimisation. You could most likely find it in some other language and port it to javascript.
It uses a recursive function to reduce complexity based on length and angle between line segments. At its core is the dot product of two line segments, it is a quick way of determining the angle between the two segments. See the supplied link above for more details.
// Line simplification based on
// the Ramer–Douglas–Peucker algorithm
// referance https://en.wikipedia.org/wiki/Ramer%E2%80%93Douglas%E2%80%93Peucker_algorithm
// points: are and array of arrays consisting of [[x,y],[x,y],...,[x,y]]
// length: is in pixels and is the square of the actual distance.
// returns array of points of the same form as the input argument points.
var simplifyLineRDP = function(points, length) {
var simplify = function(start, end) { // recursive simplifies points from start to end
var maxDist, index, i, xx , yy, dx, dy, ddx, ddy, p1, p2, p, t, dist, dist1;
p1 = points[start];
p2 = points[end];
xx = p1[0];
yy = p1[1];
ddx = p2[0] - xx;
ddy = p2[1] - yy;
dist1 = (ddx * ddx + ddy * ddy);
maxDist = length;
for (var i = start + 1; i < end; i++) {
p = points[i];
if (ddx !== 0 || ddy !== 0) {
// dot product
t = ((p[0] - xx) * ddx + (p[1] - yy) * ddy) / dist1;
if (t > 1) {
dx = p[0] - p2[0];
dy = p[1] - p2[1];
} else
if (t > 0) {
dx = p[0] - (xx + ddx * t);
dy = p[1] - (yy + ddy * t);
} else {
dx = p[0] - xx;
dy = p[1] - yy;
}
}else{
dx = p[0] - xx;
dy = p[1] - yy;
}
dist = dx * dx + dy * dy
if (dist > maxDist) {
index = i;
maxDist = dist;
}
}
if (maxDist > length) { // continue simplification while maxDist > length
if (index - start > 1){
simplify(start, index);
}
newLine.push(points[index]);
if (end - index > 1){
simplify(index, end);
}
}
}
var end = points.length - 1;
var newLine = [points[0]];
simplify(0, end);
newLine.push(points[end]);
return newLine;
}
Smoothing using bezier curves
Next the smoothing. As the line has been simplified it if reasonably quick to then compare the angles between the many lines and create a bezier if the angle is below a required threshold.
Below is a example of how I do it. Though this will not fit the original line it is just concerned with smoothing. It is again a bit of a hack on my part and not based on any tried and tested algorithm. I have another one that does a bezier fit but that is too slow for the example.
Basicly it steps through the line segments and calculates the angle between two segments, if the angle is below the threshold it then adds bezier control points along the tangent of the two line segments, making either 2nd order or 3rd order beziers depending on whether two consecutive points are smoothed. This is a stripped down version of a much more complicated algorithm so excuse the mess.
// This is my own smoothing method The blindman`s smoother
// It creates a set of bezier control points either 2nd order or third order
// bezier curves.
// points: list of points [[x,y],[x,y],...,[x,y]]
// cornerThres: when to smooth corners and represents the angle between to lines.
// When the angle is smaller than the cornerThres then smooth.
// match: if true then the control points will be balanced.
// Function will make a copy of the points
// returns [[x,y],[x,y,bx,by],[x,y,b1x,b1y,b2x,b2y],.....] with x and y line points
// bx,by control points for 2nd order bezier and b1x,b1y,b2x,b2y the control
// points for 3rd order bezier. These are mixed as needed. Test the length of
// each point array to work out which bezier if any to use.
var smoothLine = function(points,cornerThres,match){ // adds bezier control points at points if lines have angle less than thres
var p1, p2, p3, dist1, dist2, x, y, endP, len, angle, i, newPoints, aLen, closed, bal, cont1, nx1, nx2, ny1, ny2, np;
function dot(x, y, xx, yy) { // get do product
// dist1,dist2,nx1,nx2,ny1,ny2 are the length and normals and used outside function
// normalise both vectors
dist1 = Math.sqrt(x * x + y * y); // get length
if (dist1 > 0) { // normalise
nx1 = x / dist1 ;
ny1 = y / dist1 ;
}else {
nx1 = 1; // need to have something so this will do as good as anything
ny1 = 0;
}
dist2 = Math.sqrt(xx * xx + yy * yy);
if (dist2 > 0) {
nx2 = xx / dist2;
ny2 = yy / dist2;
}else {
nx2 = 1;
ny2 = 0;
}
return Math.acos(nx1 * nx2 + ny1 * ny2 ); // dot product
}
newPoints = []; // array for new points
aLen = points.length;
if(aLen <= 2){ // nothing to if line too short
for(i = 0; i < aLen; i ++){ // ensure that the points are copied
newPoints.push([points[i][0],points[i][1]]);
}
return newPoints;
}
p1 = points[0];
endP =points[aLen-1];
i = 0; // start from second poitn if line not closed
closed = false;
len = Math.hypot(p1[0]- endP[0], p1[1]-endP[1]);
if(len < Math.SQRT2){ // end points are the same. Join them in coordinate space
endP = p1;
i = 0; // start from first point if line closed
p1 = points[aLen-2];
closed = true;
}
newPoints.push([points[i][0],points[i][1]])
for(; i < aLen-1; i++){
p2 = points[i];
p3 = points[i + 1];
angle = Math.abs(dot(p2[0] - p1[0], p2[1] - p1[1], p3[0] - p2[0], p3[1] - p2[1]));
if(dist1 !== 0){ // dist1 and dist2 come from dot function
if( angle < cornerThres*3.14){ // bend it if angle between lines is small
if(match){
dist1 = Math.min(dist1,dist2);
dist2 = dist1;
}
// use the two normalized vectors along the lines to create the tangent vector
x = (nx1 + nx2) / 2;
y = (ny1 + ny2) / 2;
len = Math.sqrt(x * x + y * y); // normalise the tangent
if(len === 0){
newPoints.push([p2[0],p2[1]]);
}else{
x /= len;
y /= len;
if(newPoints.length > 0){
var np = newPoints[newPoints.length-1];
np.push(p2[0]-x*dist1*0.25);
np.push(p2[1]-y*dist1*0.25);
}
newPoints.push([ // create the new point with the new bezier control points.
p2[0],
p2[1],
p2[0]+x*dist2*0.25,
p2[1]+y*dist2*0.25
]);
}
}else{
newPoints.push([p2[0],p2[1]]);
}
}
p1 = p2;
}
if(closed){ // if closed then copy first point to last.
p1 = [];
for(i = 0; i < newPoints[0].length; i++){
p1.push(newPoints[0][i]);
}
newPoints.push(p1);
}else{
newPoints.push([points[points.length-1][0],points[points.length-1][1]]);
}
return newPoints;
}
As I did not put that much thought into ease of use you will have to use the following function to render the resulting line.
var drawSmoothedLine = function(line){
var i,p;
ctx.beginPath()
ctx.moveTo(line[0][0],line[0][1])
for(i = 0; i < line.length-1; i++){
p = line[i];
p1 = line[i+1]
if(p.length === 2){ // linear
ctx.lineTo(p[0],p[1])
}else
if(p.length === 4){ // bezier 2nd order
ctx.quadraticCurveTo(p[2],p[3],p1[0],p1[1]);
}else{ // bezier 3rd order
ctx.bezierCurveTo(p[2],p[3],p[4],p[5],p1[0],p1[1]);
}
}
if(p.length === 2){
ctx.lineTo(p1[0],p1[1])
}
ctx.stroke();
}
So to use these to smooth a line. Simply capture the mouse points as you draw. When the done, then send the points to both functions in turn. Erase the drawn line and replace it with the new line. The is a bit of a lag between pen up and the smoothed result, but there is plenty of room for improvement in both functions.
To put it all together I have added a snippet below. The two bars at the top left control the smoothing and detail. The bottom bar controls the first function described above and the top controls the smoothing (bezier) the more red you see the smoother the lines and greater the detail reduction.
Middle mouse button clears or just restart.
Sorry, this was more work than I expected so the comments are a little sparse. I will improve the comments as time permits..
var canvas = document.getElementById("canV");
var ctx = canvas.getContext("2d");
// mouse stuff
var mouse = {
x:0,
y:0,
buttonLastRaw:0, // user modified value
buttonRaw:0,
buttons:[1,2,4,6,5,3], // masks for setting and clearing button raw bits;
};
function mouseMove(event){
mouse.x = event.offsetX; mouse.y = event.offsetY;
if(mouse.x === undefined){ mouse.x = event.clientX; mouse.y = event.clientY;}
if(event.type === "mousedown"){ mouse.buttonRaw |= mouse.buttons[event.which-1];
}else if(event.type === "mouseup"){mouse.buttonRaw &= mouse.buttons[event.which+2];
}else if(event.type === "mouseout"){ mouse.buttonRaw = 0; mouse.over = false;
}else if(event.type === "mouseover"){ mouse.over = true; }
event.preventDefault();
}
canvas.addEventListener('mousemove',mouseMove);
canvas.addEventListener('mousedown',mouseMove);
canvas.addEventListener('mouseup' ,mouseMove);
canvas.addEventListener('mouseout' ,mouseMove);
canvas.addEventListener('mouseover' ,mouseMove);
canvas.addEventListener("contextmenu", function(e){ e.preventDefault();}, false);
// Line simplification based on
// the Ramer–Douglas–Peucker algorithm
// referance https://en.wikipedia.org/wiki/Ramer%E2%80%93Douglas%E2%80%93Peucker_algorithm
// points are and array of arrays consisting of [[x,y],[x,y],...,[x,y]]
// length is in pixels and is the square of the actual distance.
// returns array of points of the same form as the input argument points.
var simplifyLineRDP = function(points, length) {
var simplify = function(start, end) { // recursize simplifies points from start to end
var maxDist, index, i, xx , yy, dx, dy, ddx, ddy, p1, p2, p, t, dist, dist1;
p1 = points[start];
p2 = points[end];
xx = p1[0];
yy = p1[1];
ddx = p2[0] - xx;
ddy = p2[1] - yy;
dist1 = (ddx * ddx + ddy * ddy);
maxDist = length;
for (var i = start + 1; i < end; i++) {
p = points[i];
if (ddx !== 0 || ddy !== 0) {
t = ((p[0] - xx) * ddx + (p[1] - yy) * ddy) / dist1;
if (t > 1) {
dx = p[0] - p2[0];
dy = p[1] - p2[1];
} else
if (t > 0) {
dx = p[0] - (xx + ddx * t);
dy = p[1] - (yy + ddy * t);
} else {
dx = p[0] - xx;
dy = p[1] - yy;
}
}else{
dx = p[0] - xx;
dy = p[1] - yy;
}
dist = dx * dx + dy * dy
if (dist > maxDist) {
index = i;
maxDist = dist;
}
}
if (maxDist > length) { // continue simplification while maxDist > length
if (index - start > 1){
simplify(start, index);
}
newLine.push(points[index]);
if (end - index > 1){
simplify(index, end);
}
}
}
var end = points.length - 1;
var newLine = [points[0]];
simplify(0, end);
newLine.push(points[end]);
return newLine;
}
// This is my own smoothing method
// It creates a set of bezier control points either 2nd order or third order
// bezier curves.
// points: list of points
// cornerThres: when to smooth corners and represents the angle between to lines.
// When the angle is smaller than the cornerThres then smooth.
// match: if true then the control points will be balanced.
// Function will make a copy of the points
var smoothLine = function(points,cornerThres,match){ // adds bezier control points at points if lines have angle less than thres
var p1, p2, p3, dist1, dist2, x, y, endP, len, angle, i, newPoints, aLen, closed, bal, cont1, nx1, nx2, ny1, ny2, np;
function dot(x, y, xx, yy) { // get do product
// dist1,dist2,nx1,nx2,ny1,ny2 are the length and normals and used outside function
// normalise both vectors
dist1 = Math.sqrt(x * x + y * y); // get length
if (dist1 > 0) { // normalise
nx1 = x / dist1 ;
ny1 = y / dist1 ;
}else {
nx1 = 1; // need to have something so this will do as good as anything
ny1 = 0;
}
dist2 = Math.sqrt(xx * xx + yy * yy);
if (dist2 > 0) {
nx2 = xx / dist2;
ny2 = yy / dist2;
}else {
nx2 = 1;
ny2 = 0;
}
return Math.acos(nx1 * nx2 + ny1 * ny2 ); // dot product
}
newPoints = []; // array for new points
aLen = points.length;
if(aLen <= 2){ // nothing to if line too short
for(i = 0; i < aLen; i ++){ // ensure that the points are copied
newPoints.push([points[i][0],points[i][1]]);
}
return newPoints;
}
p1 = points[0];
endP =points[aLen-1];
i = 0; // start from second poitn if line not closed
closed = false;
len = Math.hypot(p1[0]- endP[0], p1[1]-endP[1]);
if(len < Math.SQRT2){ // end points are the same. Join them in coordinate space
endP = p1;
i = 0; // start from first point if line closed
p1 = points[aLen-2];
closed = true;
}
newPoints.push([points[i][0],points[i][1]])
for(; i < aLen-1; i++){
p2 = points[i];
p3 = points[i + 1];
angle = Math.abs(dot(p2[0] - p1[0], p2[1] - p1[1], p3[0] - p2[0], p3[1] - p2[1]));
if(dist1 !== 0){ // dist1 and dist2 come from dot function
if( angle < cornerThres*3.14){ // bend it if angle between lines is small
if(match){
dist1 = Math.min(dist1,dist2);
dist2 = dist1;
}
// use the two normalized vectors along the lines to create the tangent vector
x = (nx1 + nx2) / 2;
y = (ny1 + ny2) / 2;
len = Math.sqrt(x * x + y * y); // normalise the tangent
if(len === 0){
newPoints.push([p2[0],p2[1]]);
}else{
x /= len;
y /= len;
if(newPoints.length > 0){
var np = newPoints[newPoints.length-1];
np.push(p2[0]-x*dist1*0.25);
np.push(p2[1]-y*dist1*0.25);
}
newPoints.push([ // create the new point with the new bezier control points.
p2[0],
p2[1],
p2[0]+x*dist2*0.25,
p2[1]+y*dist2*0.25
]);
}
}else{
newPoints.push([p2[0],p2[1]]);
}
}
p1 = p2;
}
if(closed){ // if closed then copy first point to last.
p1 = [];
for(i = 0; i < newPoints[0].length; i++){
p1.push(newPoints[0][i]);
}
newPoints.push(p1);
}else{
newPoints.push([points[points.length-1][0],points[points.length-1][1]]);
}
return newPoints;
}
// creates a drawable image
var createImage = function(w,h){
var image = document.createElement("canvas");
image.width = w;
image.height =h;
image.ctx = image.getContext("2d");
return image;
}
// draws the smoothed line with bezier control points.
var drawSmoothedLine = function(line){
var i,p;
ctx.beginPath()
ctx.moveTo(line[0][0],line[0][1])
for(i = 0; i < line.length-1; i++){
p = line[i];
p1 = line[i+1]
if(p.length === 2){ // linear
ctx.lineTo(p[0],p[1])
}else
if(p.length === 4){ // bezier 2nd order
ctx.quadraticCurveTo(p[2],p[3],p1[0],p1[1]);
}else{ // bezier 3rd order
ctx.bezierCurveTo(p[2],p[3],p[4],p[5],p1[0],p1[1]);
}
}
if(p.length === 2){
ctx.lineTo(p1[0],p1[1])
}
ctx.stroke();
}
// smoothing settings
var lineSmooth = {};
lineSmooth.lengthMin = 8; // square of the pixel length
lineSmooth.angle = 0.8; // angle threshold
lineSmooth.match = false; // not working.
// back buffer to save the canvas allowing the new line to be erased
var backBuffer = createImage(canvas.width,canvas.height);
var currentLine = [];
mouse.lastButtonRaw = 0; // add mouse last incase not there
ctx.lineWidth = 3;
ctx.lineJoin = "round";
ctx.lineCap = "round";
ctx.strokeStyle = "black";
ctx.clearRect(0,0,canvas.width,canvas.height);
var drawing = false; // if drawing
var input = false; // if menu input
var smoothIt = false; // flag to allow feedback that smoothing is happening as it takes some time.
function draw(){
// if not drawing test for menu interaction and draw the menus
if(!drawing){
if(mouse.x < 203 && mouse.y < 24){
if(mouse.y < 13){
if(mouse.buttonRaw === 1){
ctx.clearRect(3,3,200,10);
lineSmooth.angle = (mouse.x-3)/200;
input = true;
}
}else
if(mouse.buttonRaw === 1){
ctx.clearRect(3,14,200,10);
lineSmooth.lengthMin = (mouse.x-3)/10;
input = true;
}
canvas.style.cursor = "pointer";
}else{
canvas.style.cursor = "crosshair";
}
if(mouse.buttonRaw === 0 && input){
input = false;
mouse.lastButtonRaw = 0;
}
ctx.lineWidth = 1;
ctx.fillStyle = "red";
ctx.fillRect(3,3,lineSmooth.angle*200,10);
ctx.fillRect(3,14,lineSmooth.lengthMin*10,10);
ctx.textAlign = "left";
ctx.textBaseline = "top";
ctx.fillStyle = "#5F2"
ctx.strokeRect(3,3,200,10);
ctx.fillText("Smooth",5,2)
ctx.strokeRect(3,14,200,10);
ctx.fillText("Detail",5,13);
}else{
canvas.style.cursor = "crosshair";
}
if(!input){
ctx.lineWidth = 3;
if(mouse.buttonRaw === 1 && mouse.lastButtonRaw === 0){
currentLine = [];
drawing = true;
backBuffer.ctx.clearRect(0,0,canvas.width,canvas.height);
backBuffer.ctx.drawImage(canvas,0,0);
currentLine.push([mouse.x,mouse.y])
}else
if(mouse.buttonRaw === 1){
var lp = currentLine[currentLine.length-1]; // get last point
// dont record point if no movement
if(mouse.x !== lp[0] || mouse.y !== lp[1] ){
currentLine.push([mouse.x,mouse.y]);
ctx.beginPath();
ctx.moveTo(lp[0],lp[1])
ctx.lineTo(mouse.x,mouse.y);
ctx.stroke();
}
}else
if(mouse.buttonRaw === 0 && mouse.lastButtonRaw === 1){
ctx.textAlign = "center"
ctx.fillStyle = "red"
ctx.fillText("Smoothing...",canvas.width/2,canvas.height/5);
smoothIt = true;
}else
if(smoothIt){
smoothIt = false;
var newLine = smoothLine(
simplifyLineRDP(
currentLine,
lineSmooth.lengthMin
),
lineSmooth.angle,
lineSmooth.match
);
ctx.clearRect(0,0,canvas.width,canvas.height);
ctx.drawImage(backBuffer,0,0);
drawSmoothedLine(newLine);
drawing = false;
}
}
// middle button clear
if(mouse.buttonRaw === 2){
ctx.clearRect(0,0,canvas.width,canvas.height);
}
mouse.lastButtonRaw = mouse.buttonRaw;
requestAnimationFrame(draw);
}
draw();
.canC { width:1000px; height:500px;}
<canvas class="canC" id="canV" width=1000 height=500></canvas>
I would love to make the pen tool draw more smoothly
Use can use quadratic curves instead of lines:
ctx.quadraticCurveTo(cpx, cpy, x, y);
Example: http://www.w3schools.com/tags/canvas_quadraticcurveto.asp

Random moving position for sprite image

Currently when my sprite is moving on the canvas, it will only bounce off after hitting the side of the canvas. Is there a way to let my sprite change to another direction at random position on the canvas?
Here is my code for the changing of direction and how it moves:
Fish.prototype.changeDirection = function () {
speedXSign = this.speedX > 0 ? 1 : -1;
speedYSign = this.speedY > 0 ? 1 : -1;
this.speedX = speedXSign * (1 + Math.random() * 2);
this.speedY = speedYSign * (1 + Math.random() * 2);
};
Fish.prototype.move = function () {
this.animIndex++;
if ( this.animIndex == animFrames.length) this.animIndex = 0;
this.xPos += this.speedX;
if ((this.xPos + this.frameWidth * this.frameScale / 2) >= canvas.width && this.speedX > 0 ||
(this.xPos - this.frameWidth * this.frameScale / 2) <= 0 && this.speedX <= 0) {
this.speedX = -this.speedX;
}
this.yPos += this.speedY;
if ((this.yPos + this.frameHeight * this.frameScale / 2) >= canvas.height && this.speedY > 0 ||
(this.yPos - this.frameHeight * this.frameScale / 2) <= 0 && this.speedY <= 0) {
this.speedY = -this.speedY;
}
};
One fairly simple option is to pick a random amount of time and have the fish change directions after that amount of time. My first thought would be to use setTimeout. I noticed the comparison in your changeDirection function was backward so I fixed that and set it to call itself after some random amount of time.
Fish.prototype.changeDirection = function () {
var me = this;
var speedXSign = this.speedX < 0 ? 1 : -1;
var speedYSign = this.speedY < 0 ? 1 : -1;
this.speedX = speedXSign * (1 + Math.random() * 2);
this.speedY = speedYSign * (1 + Math.random() * 2);
var time = 1000 + 2000*Math.random();
setTimeout(function() {me.changeDirection()}, time);
};
You can change how frequently they turn around by adjusting the time variable.
Then you'll need to initialize the changeDirection loop when you add a new fish so init might look like this:
function init() {
frameWidth = imgFish.width / frameCount ;
frameHeight = imgFish.height ;
document.getElementById("button").onclick = function() {
// create another fish using the Fish class
var anotherFish = new Fish(xPos, yPos, speedX, speedY, imgFish, frameWidth, frameHeight);
// put this new fish into the fishes[] array
fishes.push(anotherFish) ;
// make it start changing directions
anotherFish.changeDirection();
// draw this new fish
anotherFish.drawFish();
}
animate();
}
Also you don't want to change direction every frame so take the fish.changeDirection(); line out of your animate function.
As a side note, you might consider making them change x and y directions independently or randomly instead of every time. This makes it look a more natural.
var speedXSign = Math.random() < 0.5 ? 1 : -1;
var speedYSign = Math.random() < 0.5 ? 1 : -1;
Edit: JSFiddle

calculate the x, y position of a canvas point

I'm trying to learn some canvas in html5 and javascript and I want to create those typical Illustrator sun rays:
But my problem is that I want to automate it and make it full screen.
To calculate the coordinates of the points in the middle isn't hard, it's the outer points that I cant seem to get a grip on.
K, so this is what I got.
The problem lies in the for-loop for creating an array for the outer coordinates.
So it starts calculating from the center of the screen.
If it's the first point (we ignore the inner points for now) it takes the x_coordinate variable (which is the horizontal center of the screen) and adds the width_between_rays divided by two (because I want to mimic the picture above with some space between the two upper rays).
The rest of the points are checked if they are divided by two to see if I should add the width_between_rays (should probably be offset or something) or the width_of_rays to the last points cordinates.
Well this seems pretty straight forward but since the window size isn't a fixed size I need some way of calculating where the point should be if, for example; the position of a point is outside the width/height of the screen.
So my way of calculating this doesn't work (I think).
Anyways, can someone (who's obviously smarter than me) point me in the right direction?
function sun_rays(z_index, element, color, number_of_rays, width_of_rays, width_between_rays) {
// Start the canvas stuff
var canvas = document.getElementById(element);
var ctx = canvas.getContext("2d");
console.log();
ctx.canvas.width = $(window).width();
ctx.canvas.height = $(window).width();
ctx.fillStyle = color;
// calculate the window size and center position
var window_width = $(window).width();
var window_hight = $(window).height();
var x_coordinate = window_width / 2;
var y_coordinate = window_hight / 2;
// create an array for the center coordinates
var center_coordinate_array = new Array();
for(i=0; i < number_of_rays; i++){
center_coordinate_array[i] = new Array(x_coordinate, y_coordinate);
}
// create an array for the outer coordinates
var outer_coordinate_array = new Array();
for(i=1; i == number_of_rays*2; i++){
if(i == 1) {
// X
var last_outer_x_coordinate = x_coordinate + (width_between_rays/2);
// Y
if(last_outer_x_coordinate < window_width) {
last_outer_y_coordinate = last_outer_y_coordinate;
} else {
$x_coordinate_difference = last_outer_x_coordinate - window_width;
last_outer_y_coordinate = x_coordinate_difference;
}
center_coordinate_array[i] = new Array(last_outer_x_coordinate, last_outer_y_coordinate);
} else {
if(i % 2 == 0) {
// X
last_outer_x_coordinate = last_outer_x_coordinate + width_of_rays;
// Y
//calculate the y position
center_coordinate_array[i] = new Array(last_outer_x_coordinate);
} else {
// X
last_outer_x_coordinate = last_outer_x_coordinate + width_between_rays;
// Y
//calculate the y position
center_coordinate_array[i] = new Array(last_outer_x_coordinate);
}
}
}
}
It seems like you should use the trig functions to do something like this.
var coordinate_array = [];
var xCoord = 0;
var yCoord = 0;
var angleIncrement = 15;
var i = 0;
//iterate over angles (in degrees) from 0 to 360
for (var theta = 0; theta < 360; theta += angleIncrement) {
//angle is in sector from bottom right to top right corner
if (theta >= 315 || theta <= 45)
{
xCoord = $(window).width();//point on right side of canvas
yCoord = abs($(window).width()/2 * tan(theta));
yCoord = tranformY(theta,yCoord);
}
//angle is in sector from top right to top left corner
else if (theta > 45 && theta <= 135)
{
yCoord = 0; //top is zero
xCoord = abs($(window).height()/2 * tan(theta));
xCoord = transformX(theta, xCoord);
}
//angle is in sector from top left to bottom left corner
else if (theta > 135 && theta <= 225)
{
xCoord = 0; //left edge on a canvas is zero
yCoord = abs($(window).width()/2 * tan(theta);
yCoord = transformY(theta, yCoord);
}
//angle is in sector from bottom left to bottom right corner
else // theta > 225 && theta < 315
{
yCoord = $(window).height();
xCoord = abs($(window).height()/2 * tan(theta));
xCoord = transformX(theta, xCoord);
}
coordinate_array[i++] = new Array(xCoord, yCoord);
}
//Transform from cartesian coordinates to top left is 0,0
function tranformY(theta, y)
{
var centerYCoord = $(window).height()/2;
//if angle falls in top half (Quadrant 1 or 2)
if(theta > 0 && theta < 180)
{
return centerYCoord - y;
}
elseif(theta > 180 && theta < 360)
{
return centerYCoord + y;
}
//coord falls on 0/360 or 180 (vert. median)
return centerYCoord;
}
//Transform from cartesian coordinates to top left is 0,0
function transformX(theta, x)
{
var centerXCoord = $(window).width()/2;
//if angle falls in right half (Quadrant 1 or 4)
if(theta > 270 || theta < 90)
{
return centerXCoord + x;
}
elseif(theta > 90 && theta < 270)
{
return centerXCoord - x;
}
//coordinate falls on 270 or 90 (center)
return centerXCoord;
}
//now draw your rays from the center coordinates to the points in coordinate_array
//NOTE: This code will need to be cleaned up - I just wrote it in the textbox.
The previous code puts the coordinates for the red points into an array.
This problem is by its very nature related to the incremental change of an angle. Your solution is going to need to deal with the angles using trig functions.

help me improve my basic point to point move animation algorithm

Greetings,
With javascript, I am trying to make a very easy animation, an image moves from one X and Y coordination to another X Y coordination.
I have 4 constant such as:
var startX = 0; //starting X of an image
var startY = 0; //starting Y of an image
var endX = 100; //ending X of an image
var endY = 200; //ending Y of an image
//these 2 are used for keeping the "current" position of animated image,
var currentX = startX ;
var currentY = startY ;
//every 150 ms, updates the location of the coordinates
function move(){
if( (currentX == endX) && (currentY == endY) )
break;
if(currentX < endX){
currentX = currentX + step_amount;
}
if(currentX > endX){
currentX = currentX - step_amount;
}
if(currentY < endY){
currentY = currentY + step_amount;
}
if(currentY > endY){
currentY = currentY - step_amount;
}
setInterval("move()", 150);
}
This does the job, however it is not smooth, I will be grateful if you help me improve my naive algorithm for a better move function that is always going for the "shortest path".
Sounds like you need (a variation of) the Bresenham line drawing algorithm.
The shortest distance between two points is a straight line. So you should probably move along that.
What that would imply is that in your code, you should not use the same step amount for both X and Y coordinates. Instead compute Y step based on X step and the slope of the shortest path line.
slope = (startY - endY) / (startX - endX);
Y_step = X_step * slope;
Secondly, in your current algorithm, once your image reaches the destination point, it'll continue to oscillate about it. I think you should get rid of the statements that take a negative step.
Since you are always moving two coordinates together, you only need to check against one of them, e.g.
if (currentX < endX) {
currentX += xStep;
currentY += yStep;
}
Try something like this to move the object in a straight line:
var numberOfSteps = 100;
var stepDX = (endX - startX) / numberOfSteps;
var stepDY = (endY - startY) / numberOfSteps;
var step = 0;
Inside the move() function:
if (step <= numberOfSteps) {
currentX = startX + stepDX * step;
currentY = startY + stepDY * step;
step++;
}
Cast currentX/currentY to integer before applying to the object you want to move.
This is my implementation, many thanks to Frederik The Fool
Compute slope:
if(this.x === target.x){
this.slope = 1;
}else{
this.slope = (this.y - target.y)/(this.x - target.x);
}
Ystep:
if(this.y > this.target.y){
this.y = Math.max(this.target.y, this.y - Math.abs(this.slope * distance));
}else if(this.shape.y < this.target.y){
this.y = Math.min(this.target.y, this.y + Math.abs(this.slope * distance));
}

Categories