Javascript - mouse follow + Lighting? - javascript

I'm practicing my Javascript, so i made a follow-mouse function. I got it working, but now i have a new idea, which i'm not sure is possible.
Is there a way, to make a '' orb of vision '' follow the mouse, so that everything in that area gets visible?. Kind of like using a torch, to see a small area where your mouse is.
NOTE : I'm not asking for someone to code it for me, but rather a explanation, since i'm curious to learn it myself, but i do need a guide-line!**
function mouseMovement(e) {
var x = document.getElementById('x_show');
var y = document.getElementById('y_show');
x.innerHTML = e.clientX;
y.innerHTML = e.clientY;
document.getElementById("followDiv").style.left = event.clientX - 15 + "px";
document.getElementById("followDiv").style.top = event.clientY - 15 + "px";
}
document.onmousemove = mouseMovement;
#followDiv {
background-color: lightblue;
height: 30px;
width: 30px;
position: absolute;
}
<p id="x_show">0</p>
<p id="y_show">0</p>
<div id="followDiv"></div>

A non-canvas way would be :
Set page background to black
Round the borders of #followDiv using 'border-radius: 50%;'
Set the background of this div to image
Play with the background-position to move opposite to mouse
Edit:
A final touch by softening the edges using box-shadow
function mouseMovement(e) {
var x = document.getElementById('x_show');
var y = document.getElementById('y_show');
x.innerHTML = e.clientX;
y.innerHTML = e.clientY;
var followDiv = document.getElementById("followDiv");
followDiv.style.left = event.clientX - 60 + "px";
followDiv.style.top = event.clientY - 60 + "px";
followDiv.style.backgroundPositionX = (-event.clientX) + 'px';
followDiv.style.backgroundPositionY = (-event.clientY) + 'px';
}
document.onmousemove = mouseMovement;
body {
background: black;
}
#followDiv {
background-color: lightblue;
height: 120px;
width: 120px;
position: absolute;
border-radius: 50%;
box-shadow: 0 0 12px 12px black inset, /* workaround for a soft edge issue :
http://stackoverflow.com/a/37460870/5483521
*/
0 0 2px 2px black inset, 0 0 2px 2px black inset, 0 0 2px 2px black inset;
background: url(https://dl.dropboxusercontent.com/u/139992952/multple/annotateMe.jpg) no-repeat;
}
<p id="x_show">0</p>
<p id="y_show">0</p>
<div id="followDiv"></div>

#Bulent Vural, this was my solution. But i can't get the circle ' smaller ' since i have to re-size it to fit the screen, which won't work with %'s.
The only way this works, is adding alot of " black, black, black ". Which isn't very pleasing.
function mouseMovement(e)
{
var x = document.getElementById('x_show');
var y = document.getElementById('y_show');
x.innerHTML = e.clientX;
y.innerHTML = e.clientY;
document.getElementById("followDiv").style.left = event.clientX-2000+"px";
document.getElementById("followDiv").style.top = event.clientY-2000+"px";
}
document.onmousemove = mouseMovement;
</script>
html, body {margin: 0; height: 100%; overflow: hidden}
#followDiv {
/* background-color: lightblue; */
height: 4000px;
width: 4000px;
position: absolute;
background: -webkit-radial-gradient(circle, rgba(248, 255, 252, 0),black);
background: -o-radial-gradient(circle, rgba(248, 255, 252, 0),black);
background: -moz-radial-gradient(circle, rgba(248, 255, 252, 0),black);
background: radial-gradient(circle, rgba(248, 255, 252, 0),black);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p id="x_show">0</p>
<p id="y_show">0</p>
<div id="followDiv"></div>
</body>

i think this could help you what you want.
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;
function reOffset(){
var BB=canvas.getBoundingClientRect();
offsetX=BB.left;
offsetY=BB.top;
}
var offsetX,offsetY;
reOffset();
window.onscroll=function(e){ reOffset(); }
window.onresize=function(e){ reOffset(); }
$("#canvas").mousemove(function(e){handleMouseMove(e);});
var radius=30;
var img=new Image();
img.onload=function(){
draw(150,150,30);
}
img.src='https://dl.dropboxusercontent.com/u/139992952/multple/annotateMe.jpg'
function draw(cx,cy,radius){
ctx.save();
ctx.clearRect(0,0,cw,ch);
var radialGradient = ctx.createRadialGradient(cx, cy, 1, cx, cy, radius);
radialGradient.addColorStop(0, 'rgba(0,0,0,1)');
radialGradient.addColorStop(.65, 'rgba(0,0,0,1)');
radialGradient.addColorStop(1, 'rgba(0,0,0,0)');
ctx.beginPath();
ctx.arc(cx,cy,radius,0,Math.PI*2);
ctx.fillStyle=radialGradient;
ctx.fill();
ctx.globalCompositeOperation='source-atop';
ctx.drawImage(img,0,0);
ctx.globalCompositeOperation='destination-over';
ctx.fillStyle='black';
ctx.fillRect(0,0,cw,ch);
ctx.restore();
}
function handleMouseMove(e){
// tell the browser we're handling this event
e.preventDefault();
e.stopPropagation();
mouseX=parseInt(e.clientX-offsetX);
mouseY=parseInt(e.clientY-offsetY);
draw(mouseX,mouseY,30);
}
body{ background-color: ivory; }
#canvas{border:1px solid red; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h4>Move mouse to reveal image with "flashlight"</h4>
<canvas id="canvas" width=300 height=300></canvas>

Related

Move image inside div text using hover

I'm trying to imitate this project in jsfiddle and how do I do this hover effect inside my React project without using jquery. Here's my current script tag : <script src="/umi.js"></script> in index.html. Is there any way to implement this effect without having to include <script>?
Here's my css code:
.bigTitle{
font-weight: 800;
color: transparent;
font-size:120px;
background: url("https://phandroid.s3.amazonaws.com/wp-content/uploads/2014/05/rainbow-nebula.jpg") repeat;
background-position: 40% 50%;
-webkit-background-clip: text;
position:relative;
text-align:center;
line-height:90px;
letter-spacing: -8px;
}
I would want the image inside the text to react according to my mouse position.
const windowWidth = window.innerWidth;
const windowHeight = window.innerHeight;
const mouseMove = (e) => {
let mouseX, mouseY;
let traX, traY;
mouseX = e.pageX;
mouseY = e.pageY;
traX = ((4 * mouseX) / 570) + 40;
traY = ((4 * mouseY) / 570) + 50;
document.getElementById('bigTitle').style.backgroundPosition = traX + "%" + traY + "%";
}
#bigTitle{
font-weight: 800;
color: transparent;
font-size:120px;
background: url("https://phandroid.s3.amazonaws.com/wp-content/uploads/2014/05/rainbow-nebula.jpg") repeat;
background-position: 40% 50%;
-webkit-background-clip: text;
position:relative;
text-align:center;
line-height:90px;
letter-spacing: -8px;
}
<div id="bigTitle" onmousemove="mouseMove(event)">It works?</div>
This should do it, I just translated whatever it was in the example you provided in javascript.

How can I download html5 canvas drawing as image

I just recently uploaded my code files to a server. My website is a simple html5 drawing application where users are able to draw freely. I have this part done fine, however I am looking to implement a download button that simply downloads whatever the user has drawn as an image directly to their device i.e. phone, table, desktop. I have been looking for solutions to this for hours now and cant find anything. Is it a problem with my server? or anything like that? any help would be much appreciated. Below is my code
<!DOCTYPE html>
<html>
<head>
<title>Elemental</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
#import url('https://fonts.googleapis.com/css?family=Montserrat+Alternates');
#media screen and (max-width: 425px){
html,body{
overflow-x: hidden;
width: 100%;
margin: 0;
}
canvas { border: 3px solid #0BF446;
border-radius: 15px 0px 15px 0px;
display: block;
margin: 0 auto;
margin-top: 35px;
background-color:#313131;
position: relative;}
#download{background-color:#04A12B ;
border-radius: 0 15px 0 15px;
padding: 20px 40px;
margin: 0 auto;
display: block;
font-size: 14px;
margin-top: 35px;
color: white;
font-family: 'Montserrat Alternates', sans-serif;}
#clearbutton{background-color:#04A12B ;
border-radius: 0 15px 0 15px;
padding: 20px;
margin: 0 auto;
display: block;
font-size: 14px;
color: white;
font-family: 'Montserrat Alternates', sans-serif;
margin-top: 35px;}
</style>
</head>
<body>
<body onload="init()">
<img src="minilogo.png" id ="logo">
<canvas id="c" width="350px" height="350px"></canvas>
<button id = "download">Download</button>
<input type = "submit" value="Clear Sketchpad" id="clearbutton" onclick="clearCanvas(canvas,ctx);">
<script>
function init() {
// Get the specific canvas element from the HTML document
canvas = document.getElementById('c');
}
function midPointBtw(p1, p2) {
return {
x: p1.x + (p2.x - p1.x) / 2,
y: p1.y + (p2.y - p1.y) / 2
};
}
function getPattern() {
return ctx.createPattern(img, 'repeat');
}
var el = document.getElementById('c');
var ctx = el.getContext('2d');
ctx.lineWidth = 30;
ctx.lineJoin = ctx.lineCap = 'round';
var img = new Image;
img.onload = function() {
ctx.strokeStyle = getPattern();
};
img.src = "https://i.postimg.cc/rF2R0GRY/dick2.png";
var isDrawing, points = [];
var getXY = function(e) {
var source = e.touches ? e.touches[0] : e;
return {
x: source.clientX,
y: source.clientY
};
};
var startDrawing = function(e) {
isDrawing = true;
points.push(getXY(e));
event.preventDefault();
};
var keepDrawing = function(e) {
if (!isDrawing) return;
points.push(getXY(e));
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
var p1 = points[0];
var p2 = points[1];
ctx.moveTo(p1.x, p1.y);
for (var i = 1, len = points.length; i < len; i++) {
var midPoint = midPointBtw(p1, p2);
ctx.quadraticCurveTo(p1.x, p1.y, midPoint.x, midPoint.y);
p1 = points[i];
p2 = points[i + 1];
}
ctx.lineTo(p1.x, p1.y);
ctx.stroke();
event.preventDefault();
};
var stopDrawing = function() {
isDrawing = false;
points = [];
};
el.addEventListener('touchstart', startDrawing);
el.addEventListener('mousedown', startDrawing);
el.addEventListener('touchmove', keepDrawing);
el.addEventListener('mousemove', keepDrawing);
el.addEventListener('touchend', stopDrawing);
el.addEventListener('mouseup', stopDrawing);
function clearCanvas(canvas,ctx) {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.beginPath()
}
</script>
</body>
</html>
You can use the Canvas#toDataURL method to generate a URL containing all the data of the canvas's current image. This can then be used in place of any URL -- a link's href, a window.open, etc. For a download link, you can use the download attribute on a link, which is an HTML5 addition. The value of the download attribute is the filename that will be used as the default save filename.
So to put all that together:
<a id='downloadLink' download='myDrawing.png'>Download Image</a>
<script>
function createDownload() {
const downloadURL = document.getElementById('c').toDataURL();
document.getElementById('downloadLink').href = downloadURL;
}
</script>

How can I get my game character to stay within the canvas?

I've been searching around and still couldnt find a fix to how to keep this moving object within the borders of my canvas. We tried to put an if statement into each arrow key movement functions, but that didnt seem to work completely. I'm not sure whether or not this is the right way to go about handling game movement since the image that we are moving is defined in the HTML and not defined as a variable in the javascript.
var width = 80;
var height = 40;
function leftArrowPressed() {
var element = document.getElementById("image1");
element.style.left = parseInt(element.style.left) - 17+'px';
}
function rightArrowPressed() {
var element = document.getElementById("image1");
element.style.left = parseInt(element.style.left) + 25 +'px';
}
function upArrowPressed() {
var element = document.getElementById("image1");
element.style.top = parseInt(element.style.top) - 17 + 'px';
}
function downArrowPressed() {
var element = document.getElementById("image1");
element.style.top = parseInt(element.style.top) + 17 + 'px';
}
function moveSelection(evt) {
switch (evt.keyCode) {
case 37:
leftArrowPressed();
break;
case 39:
rightArrowPressed();
break;
case 38:
upArrowPressed();
break;
case 40:
downArrowPressed();
break;
}
};
function docReady()
{
window.addEventListener('keydown', moveSelection);
}
var canvas = new fabric.Canvas('c', { selection: false });
var grid = 50;
// create grid
for (var i = 0; i < (600 / grid); i++) {
canvas.add(new fabric.Line([ i * grid, 0, i * grid, 600], { stroke: '#ccc', selectable: false }));
canvas.add(new fabric.Line([ 0, i * grid, 600, i * grid], { stroke: '#ccc', selectable: false }))
}
// add objects
canvas.add(new fabric.Rect({
left: 100,
top: 100,
width: 50,
height: 50,
fill: '#faa',
originX: 'left',
originY: 'top',
centeredRotation: true
}));
canvas.add(new fabric.Circle({
left: 300,
top: 300,
radius: 50,
fill: '#9f9',
originX: 'left',
originY: 'top',
centeredRotation: true
}));
// snap to grid
canvas.on('object:moving', function(options) {
options.target.set({
left: Math.round(options.target.left / grid) * grid,
top: Math.round(options.target.top / grid) * grid
});
});
canvas.on('object:moving', function (e) {
var obj = document.getElementById("image1");
// if object is too big ignore
if(obj.currentHeight > obj.canvas.height || obj.currentWidth > obj.canvas.width){
return;
}
obj.setCoords();
// top-left corner
if(obj.getBoundingRect().top < 0 || obj.getBoundingRect().left < 0){
obj.top = Math.max(obj.top, obj.top-obj.getBoundingRect().top);
obj.left = Math.max(obj.left, obj.left-obj.getBoundingRect().left);
}
// bot-right corner
if(obj.getBoundingRect().top+obj.getBoundingRect().height > obj.canvas.height || obj.getBoundingRect().left+obj.getBoundingRect().width > obj.canvas.width){
obj.top = Math.min(obj.top, obj.canvas.height-obj.getBoundingRect().height+obj.top-obj.getBoundingRect().top);
obj.left = Math.min(obj.left, obj.canvas.width-obj.getBoundingRect().width+obj.left-obj.getBoundingRect().left);
}
});
body::-webkit-scrollbar {
width: 1em;
}
body::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}
body::-webkit-scrollbar-thumb {
background-color: darkgrey;
outline: 1px solid slategrey;
}
body {
overflow
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script type="text/javascript" src="GridEXEMovement.js"></script>
<title>Test Move Object</title>
<link rel="stylesheet" href="dimRoom.css">
</head>
<body onload="docReady()" onkeydown="" onkeyup="">
<!-- uncomment this div when you want to implement the green desktop Div -->
<nav>
<ul>
<li><button id="zeldaDeskTop">deskTop</button></li>
<span>|</span>
<li><button id="zeldaBrowser">browser</button></li>
<span>|</span>
<li><button id="zeldaExe">.exe</button></li>
<span>|</span>
<li><button id="zeldaGrid">grid</button></li>
</ul>
</nav>
<div id="screen">
<div id="content"></div>
<style>
body::-webkit-scrollbar {
width: 1em;
}
body::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}
html {
height: 100%;
}
body::-webkit-scrollbar-thumb {
background-color: darkgrey;
outline: 1px solid slategrey;
}
body {
overflow-x: hidden;
}
html {
height: 100%;
}
#content{
background-color: transparent;
background-image: linear-gradient(0deg, transparent 24%, rgba(255, 255, 255, .05) 25%, rgba(255, 255, 255, .05) 26%, transparent 27%, transparent 74%, rgba(255, 255, 255, .05) 75%, rgba(255, 255, 255, .05) 76%, transparent 77%, transparent), linear-gradient(90deg, transparent 24%, rgba(255, 255, 255, .05) 25%, rgba(255, 255, 255, .05) 26%, transparent 27%, transparent 74%, rgba(255, 255, 255, .05) 75%, rgba(255, 255, 255, .05) 76%, transparent 77%, transparent);
height:100%;
background-size:50px 50px;
}
.follow-me {
position:absolute;
bottom:10px;
right:10px;
text-decoration: none;
color: #FFFFFF;
}
</style>
</div>
<img id="image1" src="https://www.bigbluebubble.com/wp-content/uploads/2017/07/PixelDodggers_Classic8-bitExperience.png" style="position: absolute; right: 100; left:980; top:300; z-index: 2; margin:0;" height="50" width="50">
<img id="DigitalCave" src="http://pixelartmaker.com/art/8fb5394537feede.png" style="position:absolute; left:560; top:146; z-index: 1;" height="30" width="40">
<img id="DataNode" src="http://pixelart.studio/Gallery/Image/100b0c98-d22d-4ffc-868a-9862aad1da4a?type=png" style="position:absolute; left:360; top:544; z-index: 1;" height="30" width="40">
<img id="Fire" src="https://cdn.theatlantic.com/assets/media/mt/science/flame-330.png" style="position:absolute; left:510; top:537; z-index: 1;" height="30" width="40">
<script type="text/javascript" src="dimRoom.js"></script>
</body>
</html>
Create a variable for speed:
var yspeed = 17;
var xspeed = 25;
You made a mistake there by the way. You sideways speeds are different each way.
Sideways speed should be the same both ways 25px each way.
If you canvas width is on 50px then the player will move very quickly across the canvas with a speed of 17px and 25px.
Then check if the speed isn’t equal to zero
if (speed !== 0) { // you are moving your character
// put your JavaScript you just created for wish and height checking here
}
Also in order to check if you’ve pressed your arrows return a Boolean when they have been used like this:
function leftArrowPressed() {
var element = document.getElementById("image1");
element.style.left = parseInt(element.style.left) - xspeed+'px';
return true;
}
function rightArrowPressed() {
var element = document.getElementById("image1");
element.style.left = parseInt(element.style.left) + xspeed +'px';
return true;
}
function upArrowPressed() {
var element = document.getElementById("image1");
element.style.top = parseInt(element.style.top) - yspeed + 'px';
return true;
}
function downArrowPressed() {
var element = document.getElementById("image1");
element.style.top = parseInt(element.style.top) + yspeed + 'px';
return true;
}
I hope this helps.
I would make an x and y speed, and do something like this for the player:
player = {
x: 0,
y: 0,
width: 50,
height: 50,
xspeed: 0,
yspeed: 0
};
Then I would do an if statement like this:
if (player.x < 0 || player.x > canvas.width) {
player.x = 0;
player.xspeed = 0;
}
if (player.y < 0 || player.y > canvas.height) {
player.y = 0;
player.yspeed = 0;
}
That should keep the player visible. Correct me if I'm wrong.

How to link a function to another on a custom drag and drop?

I'm starting to create a custom draggable, everything seems to be fine but the shapes still doesn't move on mousemove, I'm confused on what I could have done wrongly, any hint to the solution would be helpful.
I guess the problem occurs on the dragElement function, every numbers shows correctly without an error but still nothing moves, why ?
function startDrag(event) {
var move = $(this);
$(this).addClass('dragged-item');
position = move.position();
var lastOffset = move.data('lastTransform');
var lastOffsetX = lastOffset ? lastOffset.dx : position.left;
var lastOffsetY = lastOffset ? lastOffset.dy : position.top;
var startX = event.pageX - lastOffsetX;
var startY = event.pageY - lastOffsetY;
this.addEventListener('mousemove', dragElement(startX, startY, event, move));
}
function dragElement(startX, startY, event, move) {
var newDx = event.pageX - startX;
var newDy = event.pageY - startY;
move.css('transform', 'translate3d(' + newDx + 'px, ' + newDy + 'px, 0px)');
// we need to save last made offset
move.data('lastTransform', {
dx: newDx,
dy: newDy
});
}
var elements = document.getElementsByClassName('element');
for(var i = 0; i < elements.length; i++) {
var element= elements[i];
element.addEventListener('mousedown', startDrag);
}
.elements {
position: absolute;
overflow: hidden;
border: 3px solid #ebeced;
background-color: #fff;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
width: 300px;
height: 300px;
border: 1px solid blue;
}
.elements .element:hover {
cursor: pointer;
}
.elements .element {
position: absolute;
width: 50px;
height: 50px;
background: #4dadc9;
}
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<p>Not draggable yet... 0 error on console.</p>
<div class="elements">
<div class="element" style="transform:translate3d(0px, 0px, 0px);">1</div>
<div class="element" style="transform:translate3d(50px, 100px, 0px);">2</div>
<div class="element" style="transform:translate3d(110px, 150px, 0px);">3</div>
<div class="element" style="transform:translate3d(150px, 240px, 0px);">4</div>
</div>
Any suggestion on what is going wrong ?

Cursor position not good

I looked for solutions to this problem for a long time, found some and I thought I understand but apparently I don't. I'd like to make a canvas that ppl can use to sign to confirm a booking. But I can't get the line to follow the user's cursor. My code looks like this:
HTML:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Signature Test</title>
<link rel="stylesheet" href="../css/test.css">
<script src="../js/jquery-3.2.0.js"></script>
</head>
<body>
<header id="header">
</header>
<section id="content">
<canvas id="signaturePad">DSorry your browser is rubbish</canvas>
</section>
<footer>
</footer>
<script src="../js/test.js"></script>
</body>
</html>
CSS:
body
{
margin: 0;
padding: 0;
}
header
{
border: 1px solid black;
width: 100%;
height: 50px;
}
#content
{
border: 1px solid blue;
width: 100%;
height: 300px;
position: relative;
}
#content #signaturePad
{
border: 1px solid red;
width: 200px;
height: 200px;
position: absolute;
left: calc(50% - 100px);
top: calc(50% - 100px);
}
footer
{
border: 1px solid black;
width: 100%;
height: 50px;
}
And finally the JS:
var canvas = document.getElementById("signaturePad");
var context = canvas.getContext("2d");
var radius = 1;
var dragging = false;
context.lineWidth = 2*radius;
function displayMousePosition(mouseX, mouseY) {
var header = document.getElementById("header");
header.innerHTML = "X : " + mouseX + "<br />Y : " + mouseY;
}
function getMousePosition(e) {
var mouseX = 0,
mouseY = 0,
elmX = 0,
elmY = 0,
obj = this;
//get mouse position on document crossbrowser
if (!e){e = window.event;}
if (e.pageX || e.pageY){
mouseX= e.pageX;
mouseY = e.pageY;
} else if (e.clientX || e.clientY){
mouseX = e.clientX + document.body.scrollLeft
+ document.documentElement.scrollLeft;
mouseY = e.clientY + document.body.scrollTop
+ document.documentElement.scrollTop;
}
//get parent element position in document
if (obj.offsetParent){
do{
elmX += obj.offsetLeft;
elmY += obj.offsetTop;
} while (obj = obj.offsetParent);
}
displayMousePosition(mouseX, mouseY);
return [mouseX, mouseY];
}
var putPoint = function(e) {
if(dragging) {
var offset = $("#signaturePad").offset();
var mouseX = getMousePosition(e)[0];
var mouseY = getMousePosition(e)[1];
context.lineTo(mouseX, mouseY);
context.stroke();
context.beginPath();
context.arc(mouseX, mouseY, radius, 0, Math.PI*2);
context.fill();
context.beginPath();
context.moveTo(mouseX, mouseY);
}
}
$(document).on("mousedown", "#signaturePad", function(e) {
dragging = true;
putPoint(e);
});
$(document).on("mouseup", "#signaturePad", function() {
dragging = false;
context.beginPath();
});
$(document).on("mousemove", "#signaturePad", function(e) {
putPoint(e);
});
And the fiddle if you wanna see it live: https://jsfiddle.net/Cellendhyll/yxguemf0/7/

Categories

Resources