I am attempting to do some simple motion with threejs. My goal is to have a box you can move around that cannot walk through walls. As of right now my motion code looks like this
function handleMotion(mesh) {
var xClone = mesh.clone();
xClone.position.x += mesh.velocity.x;
if (checkColl(xClone, collisionMeshList, [mesh.uuid])) {
mesh.velocity.x = 0;
}
var yClone = mesh.clone();
yClone.position.y += mesh.velocity.y;
if (checkColl(yClone, collisionMeshList, [mesh.uuid])) {
mesh.velocity.y = 0;
}
var zClone = mesh.clone();
zClone.position.z += mesh.velocity.z;
if (checkColl(zClone, collisionMeshList, [mesh.uuid])) {
mesh.velocity.z = 0;
}
mesh.position.add(mesh.velocity);
}
It checks each axis of motion to ensure that it is not going to move into a wall on the next frame. The problem is it does not prevent the cube from moving into the wall, however, once it moves into the wall it prevents the cube move moving out.
I also tried adding a "sim step" just to check if it could be increased by increasing the number of calculations it did however led to no change. The code is basically acting like the clones are at the same position as the mesh however I have confirmed they are indeed offset.
Related
I'm currently working on a first person 3D game in javascript using Three.js. I'm using PointerLockControls to control camera movement, and for some reason, the camera seems to be jumping around randomly on the Y axis. It's not noticable in the game itself but if I print out camera.position in my render loop, it changes sporadically. I'm using WASD to call controls.moveForward() and controls.moveRight() which shouldn't affect Y position (I think, correct me if I'm wrong) but it changes nonetheless. This is the code of interest:
var controls = new THREE.PointerLockControls(camera, document.body);
document.onclick = function () {
controls.lock();
}
function loop() {
if (wDown) {
controls.moveForward(0.1);
}
if (sDown) {
controls.moveForward(-0.1);
}
if (dDown) {
controls.moveRight(0.1);
}
if (aDown) {
controls.moveRight(-0.1);
}
// printing out camera position
console.log(camera.position);
renderer.render(scene, camera);
requestAnimationFrame(loop);
}
Edit: I should note, the Y position only changes when I move using WASD.
In p5.js, I am trying to process each pixel of an image for a personal project so I thought I would start out slow and just try to make each pixel black. For some reason the screen is just staying white and I have no idea why the pixels aren't being updated. Here's the code:
var Canvas;
var srcImg;
var defaultImg = "http://i.imgur.com/ARg0OOy.jpg";
function preload() {
srcImg = loadImage(defaultImg);
}
function setup () {
createCanvas(srcImg.width,srcImg.height);
noLoop();
}
function draw() {
srcImg.loadPixels();
for (var x = 0; x < srcImg.width; x++) {
for (var y = 0; y < srcImg.height; y++) {
var loc = x + y*srcImg.width;
srcImg.pixels[loc] = color(224,29,29);
}
}
console.log(loc);
console.log(srcImg.width);
console.log(srcImg.height);
console.log(srcImg.width * srcImg.height);
srcImg.updatePixels();
//image(srcImg, 0,0,srcImg.width, srcImg.height);
}
Also, if I uncomment the last line, I see the original picture and it is cut off at the top (and it hasn't turned every pixel black). You can see for yourself here. Any thoughts on why this is happening?
Edit: I tried even doing one row of pixels to be a vibrant red color and the reason I'm getting a white screen is because no matter what color I set the pixels to, they become white... Also, when I tried making the whole row this red color, it stopped at about 1/4 the way through as shown here (and is still white). I don't know why this is happening.
You're making all of the pixels black, but then you're drawing srcImage on top of those black pixels. So all you see is srcImage.
Try commenting out the image(srcImg, 0,0,srcImg.width, srcImg.height); line to see the black pixels.
First time posting here, hope I'm doing this right :) I am trying to create a 360 spin in Adobe Animate with createJS, using a sequence of images embedded in a MovieClip. I have managed to get control of the timeline playhead using the code below:-
var start_x;
var startFrame;
var changeDistance;
var travelDistance;
this.threeSixty.addEventListener("mousedown", onMouseDown.bind(this));
this.threeSixty.addEventListener("pressup", onMouseUp.bind(this));
function onMouseDown(e) {
start_x = e.stageX;
startFrame = this.threeSixty.timeline.position;
this.threeSixty.addEventListener("pressmove", onMouseMove.bind(this));
}
function onMouseUp(e) {
this.threeSixty.removeEventListener("pressmove", onMouseMove.bind(this));
}
function onMouseMove(e) {
var changeDistance = e.stageX-start_x;
var travelDistance = startFrame+changeDistance;
if (travelDistance > this.threeSixty.timeline.duration){
this.threeSixty.gotoAndStop(travelDistance % this.threeSixty.timeline.duration);
}else if (travelDistance < 0){
this.threeSixty.gotoAndStop (this.threeSixty.timeline.duration + (travelDistance % threeSixty.timeline.duration));
} else {
this.threeSixty.gotoAndStop(travelDistance);
}
}
The problem is, when you click and drag the image along the X axis, the image sequence only moves forward/backwards by a single frame, as opposed to continuing the image sequence until the either mouse has stopped moving, or the mouse click is released. Any ideas where I might be going wrong here?
Thanks
So Im trying to make something where the user is able to drag planets along their orbits and it will continuously update the other planets. Ideally I would like this to work with ellipses too.
So far I can drag an image node with jquery and check/change the coordinates, but i cannot update the position reliably while the user is dragging the object. I know there is an axis and a rectangle containment for draggable but this doesn't really help me.
I have a site for calculating planetary orbits http://www.stjarnhimlen.se/comp/ppcomp.html and a formula i think should help me if i can figure out how to constrain the draggable object with coordinate checks Calculating point on a circle's circumference from angle in C#?
But it seems like there should be an easier way to have a user drag a sphere along a circular track while it updates coords for other spheres
here's what i have so far. It's not much
http://jsfiddle.net/b3247uc2/2/
Html
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
Js
var $newPosX = 100,
$newPosY = 100;
//create image node
var x = document.createElement("IMG");
x.src = "http://upload.wikimedia.org/wikipedia/commons/a/a4/Sol_de_Mayo_Bandera_Argentina.png";
x.width = 100;
x.height = 100;
x.id = "sun";
x.hspace = 100;
x.vspace = 100;
document.body.appendChild(x);
//coords
var text = document.createTextNode($newPosX + " " + $newPosY);
document.body.appendChild(text);
//make sun draggable and update coords
$("#sun").draggable({
drag: function (event, ui) {
$newPosX = $(this).offset().left;
$newPosY = $(this).offset().top;
}
});
//0 millisecond update for displayed coords
setInterval(check, 0);
function check() {
//tries to constrain movement, doesn't work well
/*
if ($newPosX > 300) {
$("#sun").offset({
left: 200
});
}
*/
text.nodeValue = ($newPosX + " " + $newPosY);
}
Edit:
I found this and am trying to modify it to suit my purposes but have so far not had luck.
http://jsfiddle.net/7Asn6/
Ok so i got it to drag
http://jsfiddle.net/7Asn6/103/
This is pretty close to what I want but can be moved without being clicked on directly
http://jsfiddle.net/7Asn6/104/
Ok final edit on this question. This one seems to work well and have fixed my problems. I would still very much like to hear peoples implementation ideas or ideas to make it work smoother.
http://jsfiddle.net/7Asn6/106/
I can determine where on a globe the user has clicked.
When the user first clicks the mouse button down, I can store where they have clicked; lets call it the pin.
Then, as they drag the mouse around, I want to put the pin under the mouse cursor.
Here is some code that seems to roughly keep the pin under the mouse pointer, but doesn't correctly maintain the globe; it flickers and spins randomly. Sometimes it flips the axis entirely so the globe is momentarily back-to-front.
function evtPos(evt) {
if(!scene.ortho) return null;
var x = lerp(scene.ortho[0],scene.ortho[1],evt.clientX/canvas.width),
y = lerp(scene.ortho[3],scene.ortho[2],evt.clientY/canvas.height), // flipped
sqrd = x*x+y*y;
return (sqrd > 1)?
null:
mat4_vec3_multiply(mat4_inverse(scene.mvMatrix),[x,y,Math.sqrt(1-sqrd)]);
}
function onMouseDown(evt) {
pin = evtPos(evt);
}
function onMouseMove(evt,keys,isMouseDown) {
if(!isMouseDown) return;
var pt = evtPos(evt);
if(pin == null) pin = pt;
if(pt == null) return;
var d = vec3_sub(pt,pin),
rotx = Math.atan2(d[1],d[2]),
roty = (d[2] >= 0)?
-Math.atan2(d[0] * Math.cos(rotx),d[2]):
Math.atan2(d[0] * Math.cos(rotx),-d[2]),
rotz = Math.atan2(Math.cos(rotx),Math.sin(rotx)*Math.sin(roty));
scene.mvMatrix = mat4_multiply(scene.mvMatrix,mat4_rotation(rotx,[1,0,0]));
scene.mvMatrix = mat4_multiply(scene.mvMatrix,mat4_rotation(roty,[0,1,0]));
scene.mvMatrix = mat4_multiply(scene.mvMatrix,mat4_rotation(rotz,[0,0,1]));
}
function onMouseUp(evt) {
pin = null;
}
Also, over time, an error seems to build up and the pin drifts further and further from the mouse pointer. I presume I should somehow compute the mvMatrix completely rather than by lots of samll increments each event?
I want the user to be able to drag the globe around to navigate naturally. All code to spin globes that I've found uses fixed speeds e.g. arrow keys, rather than 'pinning' the globe under a mouse pointer. Unity has a function Quaternion.FromToRotation(fromPos,toPos) which seems very promising but the source is not available.
One of the approaches for doing this is the arcBall algorithm. There are even JavaScript implementations available so you don't need to roll your own.