Ask coding questions

← Back to all posts
Jittered canvas dragging and scaling biased to origin
h
realTronsi (913)

1) I have a cameraZ variable as the scaling of the canvas:

ctx.translate(-cameraX + canvas.width / 2, -cameraY + canvas.height / 2);
ctx.scale(cameraZ, cameraZ, canvas.width / 2, canvas.height / 2); // scale pivot ctx.scale(cameraZ, cameraZ, canvas.width / 2, canvas.height / 2);

Yet the scaling is biased towards the origin of 0, 0. Even with a pivot applied, nothing changes.

To recreate, add a square, zoom out all the way (using scroll), drag on the canvas (not on the square) to move the camera and position the square on the top left of the screen. Then zoom back in.

demonstrated below:


This leads into problem 2) when moving the camera, it jitters heavily.

To recreate, add a square, the drag on the canvas (not on the square) to move the camera. You will notice the square jittering.

The code snippet responsible for camera movement: (some parts removed due to irrelevancy)

canvas.addEventListener("mousemove", e => {
  pmouseX = mouseX;
  pmouseY = mouseY;
  mouseX = (e.clientX - canvas.getBoundingClientRect().left) / cameraZ;
  mouseY = (e.clientY - canvas.getBoundingClientRect().top) / cameraZ;
  mouseX += cameraX / cameraZ - (canvas.width / 2) / cameraZ;
  mouseY += cameraY / cameraZ - (canvas.height / 2) / cameraZ;

  cameraX -= (mouseX - pmouseX) * cameraZ;
  cameraY -= (mouseY - pmouseY) * cameraZ;
});

@CursorsDev @DynamicSquid @xxpertHacker in case you may know something

Comments
hotnewtop
CursorsDev (729)

@realTronsi assuming you havent posted in TCD, pls post there intead cuz frankly its easier to send a discord message than a replit comment

EDIT: i don't see any jittering, it may be a browser issue instead

realTronsi (913)

@CursorsDev the jittering was fixed (see comments), now its just the scaling

DynamicSquid (4629)

Why would I know something? I do C++ not web

realTronsi (913)

@DynamicSquid idk firefish told me you might know something ¯_(ツ)_/¯

DynamicSquid (4629)

@FlaminHotValdez but you know what are pogger? squid

FlaminHotValdez (442)

@DynamicSquid

Pog things list:

  • C++
  • Fire
  • Demigods
  • Squids
xxpertHacker (865)

Sorry, I put checking this out on my personal TODO list, but I put it near the bottom, lol.

I'll check this out in ~4 hours.

xxpertHacker (865)

@realTronsi Barely started, and noticed that when setting pMouseX and pMouseX to 0, instead of mouseX and mouseY, the jittering is gone entirely, but the effects are changed.

Maybe it has to do with math inside of the surrounding if statement that uses them?

realTronsi (913)

@xxpertHacker oh! Perhaps it has to do with the camera moving while dragging, so for example if you move your mouse to the left, the camera also moves to the left at the same time, altering the difference? That would explain why setting pMouse coords to 0 would remove the jittering.

realTronsi (913)

@xxpertHacker ha that was it! The jittering has been fixed, now on to the scaling...

xxpertHacker (865)

@realTronsi Maybe, but at the same, I think it was entering the wrong handler when 0, since it could be clicking on the shape itself, entering the shape's click & drag handlers.

xxpertHacker (865)

@realTronsi Lol, that was fast. Accepted answer?

realTronsi (913)

@xxpertHacker theres still the scaling :eyes:

xxpertHacker (865)

@realTronsi Ik, I'm rebasing my fork to yours rn so I can see it too

xxpertHacker (865)

@realTronsi Seriously, you used way too many global variables. I just checked the update that fixed it (2 hours later, sorry), and you added more.

Try to cut back on them if you can.

realTronsi (913)

@xxpertHacker lol I know, this is for a school project so I'm putting very little effort into it

realTronsi (913)

@xxpertHacker as in I'm putting little effort for clean code since I don't have that much time lol. Otherwise everythiing would be split into functions and different files and my client wouldn't just be a single file :P

xxpertHacker (865)

@realTronsi It requires extra effort all-around to use globals instead of locals, you have to go to the top, declare the variables, then go ~400 lines down, assign them, and then use them.

Like, wtf? Sounds way easier to have just used locals.

realTronsi (913)

@xxpertHacker oh true, I was thinking in case I had to use them later but who cares too lazy to change now :P also didd you figure out the scaling? Perhaps I am using pivot incorrectly?

xxpertHacker (865)

@realTronsi Ugly code =/= short & fast code.

Examples:

ugly & long:

objects.push(new Sprite({
	vertices: [
		new Vector(-50, -50),
		new Vector(50, -50),
		new Vector(50, 50),
		new Vector(-50, 50)
	],
	pos: new Vector(0, 0)
}));
selected = objects[objects.length - 1];
selectedMode = "drag";
sb_show_oe();

(your current code, longer to type, harder to read)

clean & long:

const sprite = new Sprite({
	vertices: [
		new Vector(-50, -50),
		new Vector(50, -50),
		new Vector(50, 50),
		new Vector(-50, 50)
	],
	pos: new Vector(0, 0)
});
objects.push(sprite);
selected = sprite;
selectedMode = "drag";
sb_show_oe();

(theoretical, roughly equivalent in length, much easier to understand)

ugly & short:

objects.push(selected = new Sprite({
	vertices: [
		new Vector(-50, -50),
		new Vector(50, -50),
		new Vector(50, 50),
		new Vector(-50, 50)
	],
	pos: new Vector(0, 0)
}));
selectedMode = "drag";
sb_show_oe();

(my code, much shorter, laughably unreadable, lol)

xxpertHacker (865)

@realTronsi Not yet, was just about to check myself.

realTronsi (913)

@xxpertHacker this is just a one off thing, wasn't expecting to have issues either so stop cyberbullying me :(

xxpertHacker (865)

@realTronsi Did you already fix the scaling, what's wrong with it?

realTronsi (913)

@xxpertHacker didn't fixx it yet, read the post to see whats wrong with it

xxpertHacker (865)

@realTronsi Oh, I see.

I think that this has to do with always using the { top, left } of canvas.getBoundingRect().

Maybe you want to try to get/calculate the center?

realTronsi (913)

@xxpertHacker huh? the bounding rect is for getting the mouse coords relative to the canvas, and the canvas.width and canvas.height adjustment makes it the center.

xxpertHacker (865)

@realTronsi Apparently I read 4 lines, and stopped. The math must be off, I'll try to figure it out.

xxpertHacker (865)

@realTronsi Nevermind, seems like you've got it.

realTronsi (913)

@xxpertHacker

Nevermind, seems like you've got it.

?

xxpertHacker (865)

@realTronsi Oh, I thought it was fixed, but I see that the origin/offset has merely moved.

I won't be able to check it out for a bit; I have stuff to do.

I might be able to come back to it tommorow.

realTronsi (913)

@xxpertHacker aight, I also didn't touch anything so it's unlikely the origin shifted

xxpertHacker (865)

@realTronsi Wait wtf? Then I'm insane ig.

I'll figure it out in a few hours, or tommorow, if no one else does.