Smoothing movement effect that follows mouse position - javascript

I want to create a very simple effect moving a background image when the mouse moves. For that Im recording the mouse position and using it to modify a css property:
$('#landing-content').mousemove(function(e){
var amountMovedX = (e.pageX * -1 / 6);
var amountMovedY = (e.pageY * -1 / 6);
$(this).css('background-position', amountMovedX + 'px ' + amountMovedY + 'px');
});
http://jsfiddle.net/X7UwG/580/
I want to make the background movements less aggressive, at first i though well, lets just increase the divider factor in the equation in order to make larger mouse positions lower:
http://jsfiddle.net/X7UwG/581/
The main problem with this approach is that the background is indeed moving slower BUT also very choppy (move the mouse slowly). Since we are now dividing by 100 instead of 6, the non decimal part of the result change after several pixels of movement (open console and see the result). Since background position only takes non decimal values as correct, the movement is not fluid.
I guess I have two ways of solving this, smoothing the transitions between the movements or have a different equation that transforms mouse position into background diferential position, but i cant figure out how to fix it.
The second part of the problem is to prevent the background movement to surpass the background size:

Would something like this work for you?
I simply reduced the divisor by half and increased the size of the background image to account for the movement and applied margin:0 on the body to hide the whitespace that was present in the fiddle
http://jsfiddle.net/X7UwG/582/
$('#landing-content').mousemove(function(e){
var amountMovedX = (e.pageX * -1 / 50);
var amountMovedY = (e.pageY * -1 / 50);
$(this).css('background-position', amountMovedX + 'px ' + amountMovedY + 'px');
console.log(amountMovedX);
});
body {
margin:0px;
}
#landing-content {
overflow: hidden;
background-image: url(http://i.imgur.com/F2FPRMd.jpg);
width: 100%;
background-size: 115%;
background-repeat: no-repeat;
max-height: 500px;
border-bottom: solid;
border-bottom-color: #628027;
border-bottom-width: 5px;
padding:0px;
}

Related

How to find out if an object is touching another object in JS

(excuse my bad english, I am 13 years old)
alright, even though i just joined stackoverflow today, I have been coding for a while. I'm trying to make a simple game (and may make it something bigger later) and I want the hammer (the player sprite) not be able to go through the box toward the middle of the screen, but I don't know how. here is what I have:
var sq = document.getElementById("box");
var posX = 0;
var posY = 0;
var rot = "rotate(0deg)";
var id = null;
function move(object, pixels, xa){
if(xa == true) {
posX+=pixels;
object.style.left = posX + 'px';
}else{
posY+=pixels;
object.style.top = posY + 'px';
}
}
OBJect.style.left = "200px";
OBJect.style.top = "200px";
document.addEventListener('keydown', logKey);
function logKey(e) {
if (`${e.code}` == "ArrowRight") {
rot = "rotate(90deg)";
sq.style.transform = rot;
move(sq, 5, true);
if(posX > 470){
posX = 5;
}
}
if (`${e.code}` == "ArrowLeft") {
rot = "rotate(270deg)";
sq.style.transform = rot;
move(sq, -5, true);
if(posX < 0){
posX = 465;
}
}
if (`${e.code}` == "ArrowDown") {
rot = "rotate(180deg)";
sq.style.transform = rot;
move(sq, 5, false);
if(posY > 465){
posY = 5;
}
}
if (`${e.code}` == "ArrowUp") {
rot = "rotate(0deg)";
sq.style.transform = rot;
move(sq, -5, false);
if(posY < 0){
posY = 470;
}
}
}
setInterval(function(){
xaxis.innerHTML = "x: " + posX;
yaxis.innerHTML = "y: " + posY;
rotate.innerHTML = rot;
},1);
#myContainer {
width: 500px;
height: 500px;
position: relative;
background: black;
outline: red solid 10px;
}
#box {
width: 30px;
height: 30px;
position: absolute;
background-color: gray;
}
#OBJect {
width: 30px;
height: 30px;
position: absolute;
background-color: gray;
}
<!DOCTYPE html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<style>
/*style would go here/*
</style>
<body>
<div id="myContainer">
<img src="https://cdn.glitch.com/7f9c2ae2-9b45-42a1-a387-380de7f5d3bd%2Fhammer.png?v=1615308683807" alt="hammer" id="box">
<div id="OBJect"></div>
</div>
<br><br>
<div id="xaxis"></div>
<div id="yaxis"></div>
<div id="rotate"></div>
<script>
//script would go here
</script>
</body>
</html>
yeah, yeah, I know. I could definetly improve, but I only know basic things,and some of these from either Stackoverflow or w3schools, and yes, I know there is a lot of solved answers with this problem, but I get confused by them because they are too complicated for me. I just request easy, simple code to understand (if it isn't, please label things so I know).
sorry if this is too much, I just need help :/
so to do this you need to know the 4 corners of each element then you need to check if the other object is within the players bounds
they're both rectangles and to be touching 1 of these statements have to be true
the top left corner of the square is to the right of the top left corner of the player and the top left corner of the square is to the left of the top right corner of the player while the top left corner of the square is less than the y of the top side and higher than the y of the bottom side
the top right corner of the square is to the left of the top right corner of the player and the top right corner of the square is to the right of the top left corner of the player while the top right corner of the square is less than the y of the top side and higher than the y of the bottom side
same as 1 & 2 but with the bottom left and right corners
if one of the corners has the same x and y as a corner on the other object or if the position of one object is the same as the other
a second way to do this is using Pythagoras theorem to get the distance between two points
a^2 + b^2 = c^2
how that would look in code
let c = Math.sqrt(Math.pow(Math.abs(x1 - x2), 2) + Math.pow(Math.abs(x2, y2), 2))
this is a little tricky but the distance between two points is a triangle in a sense so the distance on x and y form the two legs then to get the actual distance we need the hypotenuse which is what Pythagoras theorem gets us. So to get a and b we need to get the absolute value of the first minus second x and y to get the distance on x and y then we square them with Math.pow() and add them but that gives us c^2 and we just want c so we get the square root with Math.sqrt() which gives us the distance then the one other thing we have to do is get the center of the objects to use as a and b. Since you're working with javascript on a webpage the X and Y values are for the top left corner so you need to add half the width and height to x and y appropriately to get the center of the object, then you can use the distance formula. the only problem with this approach is that it works best for circles because every point around the edge is equally distant from the center which isn't true for a square.
So personally I would use the first method, you can get the other corners by using width and height to add to the position of the top left corner to get the other positions. it's more code but more precise than distance because you're checking the bounds of each object rather than checking distance from center
I also joined today and I am 12. since the hammer is an img, you can use css:
I think your question was that you want to move the hammer, if yes:
var left = 0; /*left and top can be edited in your code but*/
var top = 0;/*you have to reset them using the code below*/
var hammer = document.querySelector('#hammer');
hammer.style.left = left + 'px';
hammer.style.top = top + 'px';
#hammer {
position: absolute;
left: 0px;
right: 0px;
}/*set left and right via js*/
<!--just add an id like #hammer to the hammer-->

Background color change on mouse move

I have found this pen on codepen. I would like to use this effect, but in a grayscale.
Could anyone help me?
Thanks in advance!
// Create a HTML div Element called 'page'
var page = document.createElement('DIV');
// Gives the page variable full height
page.style.height = '100vh';
// Applies the page element to the document(web page)
document.body.appendChild(page);
//Creates variables for x & y for know where our mouse is
//x is for horizontal values, and y for vertical ones
var x = 0;
var y = 0;
// Add Event Listener for page. Listens for any mouse movement
// inside the page element. If found, run function below
page.addEventListener('mousemove', function(event) {
//Takes the mouse movement we listened for and saves it into two variables
x = event.clientX;
y = event.clientY;
//Here we set the background color to the x & y value that the mouse has over the web page. See css part for rgb explaination
page.style.backgroundColor = 'rgb(' + x + ', ' + y + ', 100)';
//By writing variable + ', ' we combine the value with text to make it write like rgb(x, y, 100); when sent to style part (css)
//Adds a text element to the page. It writes out the x & y value
page.textContent = x + ', ' + y;
});
// Find the css element called 'box' to use in future
var box = document.getElementById('box');
//Function for a box that follows the mouse around
var mousebox = function() {
//Calls the css code to push the box away from the left & top
//the same x & y values that the mouse has
box.style.left = x + 'px';
box.style.top = y + 'px';
}
// Find the css element called 'rbox' to use in future
var rbox = document.getElementById('rbox');
//Variable to hold our current angle/degree of rbox
var degree = 0;
//Setup a rotating box in the center
var rotatebox = function(){
//Adds rotation, but makes it go (357, 358, 359, 0, 1, 2)
degree = (degree + 1) % 360;
//adds the current rotation to the rbox
rbox.style.transform = 'rotate('+degree+'deg)';
//Pushes the box from left & top by half of window width & height
rbox.style.left = window.innerWidth / 2 + 'px';
rbox.style.top = window.innerHeight / 2 + 'px';
}
//Sets up an update interval of how often both boxes happen. Number is in milliseconds so 100ms = 10 times per second
setInterval(mousebox,100);
setInterval(rotatebox,10);
body {
margin: 0; /* Removes any margin so anything within the body fills the space */
}
/* Box that will follow the mouse around */
#box {
position: absolute; /* Allows us to move it around */
color: #FFF; /* Makes the text white */
font-size: 24px; /* Makes the box text larger (24 pixels tall) */
transition: ease-out 1s; /* Gives a smooth movement following the box, s for seconds. Feel free to increase lower */
}
/* Rotating box that will spin in the middle */
#rbox {
position: absolute; /* Allows us to move it around */
width: 50px; /* Size with width/height */
height: 50px;
background-color: #FFF; /* Makes the background white, if removed its transparent. If all are the same you can write just 3, but otherwise hexagon letter/numbers come in 6 */
/* When talking RGB colour, 0 or 00 gives no colour (black) while 255 or FF is full colour */
/* RGB: For red #FF0000 , green is #00FF00 , and blue is #0000FF. Inbetween these you can mix and match*/
/* Use to find specific colours you like https://www.w3schools.com/colors/colors_picker.asp */
color: #000; /* Text in the box is black */
text-align: center; /* Puts the text in middle */
font-size: 36px; /* Text size, fits the size we set above */
}
<div id="box">Hello!</div>
<div id="rbox">:)</div>
Just use a single variable in all three color's places, i.e rgb(x, x, x)
var page = document.createElement('DIV');
page.style.height = '100vh';
document.body.appendChild(page);
var x = 0;
var y = 0;
page.addEventListener('mousemove', function(event) {
x = event.clientX;
y = event.clientY;
// ================== Solution ======================
Gray = y; // or Math.min(x, y) or (x + y) / 2
color = [Gray, Gray, Gray].join(", ");
page.style.backgroundColor = 'rgb(' + color + ')';
// =====================================================
page.textContent = x + ', ' + y;
});
var box = document.getElementById('box');
var mousebox = function() {
box.style.left = x + 'px';
box.style.top = y + 'px';
}
var rbox = document.getElementById('rbox');
var degree = 0;
var rotatebox = function() {
degree = (degree + 1) % 360;
rbox.style.transform = 'rotate(' + degree + 'deg)';
rbox.style.left = window.innerWidth / 2 + 'px';
rbox.style.top = window.innerHeight / 2 + 'px';
}
setInterval(mousebox, 100);
setInterval(rotatebox, 10);
body {
margin: 0;
/* Removes any margin so anything within the body fills the space */
}
/* Box that will follow the mouse around */
#box {
position: absolute;
/* Allows us to move it around */
color: #FFF;
/* Makes the text white */
font-size: 24px;
/* Makes the box text larger (24 pixels tall) */
transition: ease-out 1s;
/* Gives a smooth movement following the box, s for seconds. Feel free to increase lower */
}
/* Rotating box that will spin in the middle */
#rbox {
position: absolute;
/* Allows us to move it around */
width: 50px;
/* Size with width/height */
height: 50px;
background-color: #FFF;
/* Makes the background white, if removed its transparent. If all are the same you can write just 3, but otherwise hexagon letter/numbers come in 6 */
/* When talking RGB colour, 0 or 00 gives no colour (black) while 255 or FF is full colour */
/* RGB: For red #FF0000 , green is #00FF00 , and blue is #0000FF. Inbetween these you can mix and match*/
/* Use to find specific colours you like https://www.w3schools.com/colors/colors_picker.asp */
color: #000;
/* Text in the box is black */
text-align: center;
/* Puts the text in middle */
font-size: 36px;
/* Text size, fits the size we set above */
}
<div id="box">Hello!</div>
<div id="rbox">:)</div>
Explanation
There are several ways of converting RGB to Gray Scale, but none of them apply in this case. Take a look at all of them here: Gray Scale Algorithms
Using a single variable say rgb(y, y, y) works because, gray scale colors generally appear like this: #d3d3d3, rgb(63,63,63), etc. A single value in all channels
If you want to use both the variables, you can do Math.min(x, y) or (x + y) / 2 and then pass it to a variable Gray, which then can be set like so: rgb(Gray, Gray, Gray)
color = [Gray, Gray, Gray].join(", "), this just joins the values separated by comma, in order to avoid writing comma manually.
Change this line:
//Here we set the background color to the x & y value that the mouse has over the web page. See css part for rgb explaination
page.style.backgroundColor = 'rgb(' + x + ', ' + y + ', 100)';
To this
page.style.backgroundColor = 'grayscale(rgb(' + x + ', ' + y + ', 100))';

Single pharallax depending on mouse position. (without margins)

So i just saw this [http://jsfiddle.net/X7UwG/][1]. So, when you move mouse to the left, everything is ok, but when you move mouse to the right there are white place. Is there any way not to have that. So just to do single pharallax effect without that white place (margins).
I want full width picture to just move a little depending on mouse position, as in example, but not to have that white place. Is that possible maybe with zooming image or somet
Use percentages for the x-axis and scale the image to 110%
Demo
$('#landing-content').mousemove(function(e){
var amountMovedX = (( e.pageX / window.innerWidth ) * 100) ;
var amountMovedY = (e.pageY * -1 / 6);
$(this).css('background-position', amountMovedX + '% ' + amountMovedY + 'px');
});

Rotate a div towards the direction of the mouse using atan2()

I would like the mouse to align with the top of the div and the div should rotate when the mouse moves with the top part of the div aligned with the mouse. I want to use atan2. It should look something like this.
Javascript:
$(function() {
var stick = $(".stick"), sHeight = stick.outerHeight(),
sWidth = stick.outerWidth(), atan,
sTop = stick.offset().top, sLeft = stick.offset().left;
$(document).on("mousemove", function(e) {
// console.log(e.pageX, " ", e.pageY)
atan = Math.atan2(e.pageY - sTop , e.pageX - sLeft )
console.log(atan)
stick.css({"transform" : "rotate(" + atan + "rad)"} )
})
})
css:
.wrapper{
width: 500px;
height: 400px;
position: relative;
border:1px solid green;
}
.stick{
width: 3px;
height: 200px;
position: absolute;
left: 50%;
top: 50%;
background: green;
transform: rotate(90deg);
}
HTML:
<div class="wrapper">
<div class="stick"></div>
</div>
I made something that works here.
It seems you're not centring properly - you need to take into account the width of the div and the centre point of the container
div.$(function(){
var stick = $(".stick"), sHeight = stick.outerHeight(),
sWidth = stick.outerWidth(), atan,
sTop = stick.offset().top, sLeft = stick.offset().left;
$(document).on("mousemove", function(e){
atan = Math.atan2(e.pageY - 200 , e.pageX - 250) + Math.PI/2;
console.log(atan);
stick.css({"transform" : "rotate(" + atan + "rad)"} );
});
});
(I also removed the rotation in the css, and positioned the stick in the centre.)
The problem is that the angle computation phi=atan2(y,x) assumes a "normal" Cartesian coordinate system where the y axis points upwards. In screen coordinates, it points downwards. Thus you should use phi=atan2(-y,x).
But to be sure you should try out and report where the bar points to when using rotations 0deg and 90deg. With your code the rotation center is the middle of the bar, so orientation is difficult to determine, but it seems that 0deg points upwards and angles are applied clockwise. Thus for the inner coordinate system, where 0° is the X axis and 90° the Y axis, X = centery-y and Y=x-centerx, thus
angle = atan2(x-centerx, centery-y)

Drawing rectangles in web application that show screen position from windows

I have an input string like this:
{ (3200, 1080), (1280, 0) ; (1280, 1024), (0, 0) }
which is basically an input I get from my c# program which takes the coordinates of my screens.
The numbers in brackets are coordinates of the lower right and upper left point and define a rectangle. For example:
(1280, 1024), (0, 0)
means that the first screen has dimensions 1280 x 1024 and starts in the upper left point (0,0). Next to it is the second screen which upper left point is at coordinate (1280, 0) and its lower right coordinate is at point (3200, 1080) - and they form a rectangle.
What I have to do is draw these screen in an web application - nothing fancy just two different colored rectangles would do. Now, I did a little research and saw that html5 canvas might be the way to go, but I want to hear what you think and maybe give me a push in the right direction. If you could give some jsfiddle example that would be appreciated!
You could just use DIVs with position: absolute, as detailed on this jsFiddle (jQuery used for the sake of simplicity, but the same can easily be accomplished without jQuery).
edit (I just added the code if for some reason your jsfiddle gets deleted!):
HTML:
<div id="screens">
<div id="screen0" class="screen"></div>
<div id="screen1" class="screen"></div>
</div>
CSS:
#screens { position: relative }
.screen {position: absolute }
#screen0 { background: blue; }
#screen1 { background: green; }
JS:
var originalScreens = [
{
position: [0,0],
dimensions: [1280,1024]
},
{
position: [1280,0],
dimensions: [1090,1080]
}
];
var scale = 0.1;
for(var i=0; i<originalScreens.length; i++) {
$('#screen' + i).css('left', (originalScreens[i].position[0] * scale) + 'px');
$('#screen' + i).css('top', (originalScreens[i].position[1] * scale) + 'px');
$('#screen' + i).css('width', (originalScreens[i].dimensions[0] * scale) + 'px');
$('#screen' + i).css('height', (originalScreens[i].dimensions[1] * scale) + 'px');
}

Categories