logo
down
shadow

HTML5 canvas following mouse effect jquery


HTML5 canvas following mouse effect jquery

By : Tom Grogan
Date : November 17 2020, 11:55 AM
wish help you to fix your issue I'm searching the web for quite sometime for the name of this effect... I've seen it on many sites but can't find a guide or a name to look for it and learn how to do it. , check this. i just ctrl + c,v.
code :
(function() {

    var width, height, largeHeader, canvas, ctx, points, target, animateHeader = true;

    // Main
    initHeader();
    initAnimation();
    addListeners();

    function initHeader() {
        width = window.innerWidth;
        height = window.innerHeight;
        target = {x: width/2, y: height/2};

        largeHeader = document.getElementById('large-header');
        largeHeader.style.height = height+'px';

        canvas = document.getElementById('demo-canvas');
        canvas.width = width;
        canvas.height = height;
        ctx = canvas.getContext('2d');

        // create points
        points = [];
        for(var x = 0; x < width; x = x + width/20) {
            for(var y = 0; y < height; y = y + height/20) {
                var px = x + Math.random()*width/20;
                var py = y + Math.random()*height/20;
                var p = {x: px, originX: px, y: py, originY: py };
                points.push(p);
            }
        }

        // for each point find the 5 closest points
        for(var i = 0; i < points.length; i++) {
            var closest = [];
            var p1 = points[i];
            for(var j = 0; j < points.length; j++) {
                var p2 = points[j]
                if(!(p1 == p2)) {
                    var placed = false;
                    for(var k = 0; k < 5; k++) {
                        if(!placed) {
                            if(closest[k] == undefined) {
                                closest[k] = p2;
                                placed = true;
                            }
                        }
                    }

                    for(var k = 0; k < 5; k++) {
                        if(!placed) {
                            if(getDistance(p1, p2) < getDistance(p1, closest[k])) {
                                closest[k] = p2;
                                placed = true;
                            }
                        }
                    }
                }
            }
            p1.closest = closest;
        }

        // assign a circle to each point
        for(var i in points) {
            var c = new Circle(points[i], 2+Math.random()*2, 'rgba(255,255,255,0.3)');
            points[i].circle = c;
        }
    }

    // Event handling
    function addListeners() {
        if(!('ontouchstart' in window)) {
            window.addEventListener('mousemove', mouseMove);
        }
        window.addEventListener('scroll', scrollCheck);
        window.addEventListener('resize', resize);
    }

    function mouseMove(e) {
        var posx = posy = 0;
        if (e.pageX || e.pageY) {
            posx = e.pageX;
            posy = e.pageY;
        }
        else if (e.clientX || e.clientY)    {
            posx = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
            posy = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
        }
        target.x = posx;
        target.y = posy;
    }

    function scrollCheck() {
        if(document.body.scrollTop > height) animateHeader = false;
        else animateHeader = true;
    }

    function resize() {
        width = window.innerWidth;
        height = window.innerHeight;
        largeHeader.style.height = height+'px';
        canvas.width = width;
        canvas.height = height;
    }

    // animation
    function initAnimation() {
        animate();
        for(var i in points) {
            shiftPoint(points[i]);
        }
    }

    function animate() {
        if(animateHeader) {
            ctx.clearRect(0,0,width,height);
            for(var i in points) {
                // detect points in range
                if(Math.abs(getDistance(target, points[i])) < 4000) {
                    points[i].active = 0.3;
                    points[i].circle.active = 0.6;
                } else if(Math.abs(getDistance(target, points[i])) < 20000) {
                    points[i].active = 0.1;
                    points[i].circle.active = 0.3;
                } else if(Math.abs(getDistance(target, points[i])) < 40000) {
                    points[i].active = 0.02;
                    points[i].circle.active = 0.1;
                } else {
                    points[i].active = 0;
                    points[i].circle.active = 0;
                }

                drawLines(points[i]);
                points[i].circle.draw();
            }
        }
        requestAnimationFrame(animate);
    }

    function shiftPoint(p) {
        TweenLite.to(p, 1+1*Math.random(), {x:p.originX-50+Math.random()*100,
            y: p.originY-50+Math.random()*100, ease:Circ.easeInOut,
            onComplete: function() {
                shiftPoint(p);
            }});
    }

    // Canvas manipulation
    function drawLines(p) {
        if(!p.active) return;
        for(var i in p.closest) {
            ctx.beginPath();
            ctx.moveTo(p.x, p.y);
            ctx.lineTo(p.closest[i].x, p.closest[i].y);
            ctx.strokeStyle = 'rgba(156,217,249,'+ p.active+')';
            ctx.stroke();
        }
    }

    function Circle(pos,rad,color) {
        var _this = this;

        // constructor
        (function() {
            _this.pos = pos || null;
            _this.radius = rad || null;
            _this.color = color || null;
        })();

        this.draw = function() {
            if(!_this.active) return;
            ctx.beginPath();
            ctx.arc(_this.pos.x, _this.pos.y, _this.radius, 0, 2 * Math.PI, false);
            ctx.fillStyle = 'rgba(156,217,249,'+ _this.active+')';
            ctx.fill();
        };
    }

    // Util
    function getDistance(p1, p2) {
        return Math.pow(p1.x - p2.x, 2) + Math.pow(p1.y - p2.y, 2);
    }

})();


Share : facebook icon twitter icon
jQuery - BW effect using the HTML5 canvas

jQuery - BW effect using the HTML5 canvas


By : user3018771
Date : March 29 2020, 07:55 AM
this will help From http://www.ajaxblender.com/howto-convert-image-to-grayscale-using-javascript.html:
(Comments my own)
code :
// create canvas element
var canvas = document.createElement('canvas');
var canvasContext = canvas.getContext('2d');
// assuming imgObj is a DOM representation of your image, get the width    
var imgW = imgObj.width;
// ... and the height
var imgH = imgObj.height;
// set the canvas to the image dimensions
canvas.width = imgW;
canvas.height = imgH;
// draw the image on the canvas
canvasContext.drawImage(imgObj, 0, 0);
// get every pixel in the image
var imgPixels = canvasContext.getImageData(0, 0, imgW, imgH);
// cycle through the pixels vertically
for(>var y = 0; y < imgPixels.height; y++){
     // cycle through the pixels horizontally
     for(>var x = 0; x < imgPixels.width; x++){
          var i = (y * 4) * imgPixels.width + x * 4;
          // create an average grayscale color for the pixel
          var avg = (imgPixels.data[i] + imgPixels.data[i + 1] + imgPixels.data[i + 2]) / 3;
          // set the pixel to the newly created average color
          imgPixels.data[i] = avg;
          // do the same for the next two pixels
          imgPixels.data[i + 1] = avg;
          imgPixels.data[i + 2] = avg;
     }
}
// overwrite the canvas image with the newly created array of pixels
canvasContext.putImageData(imgPixels, 0, 0, 0, 0, imgPixels.width, imgPixels.height);
// get a data URL which is to be used in the SRC attribute of the image
return canvas.toDataURL();
Basic Animation effect - should I use jQuery or HTML5 Canvas?

Basic Animation effect - should I use jQuery or HTML5 Canvas?


By : wu xian
Date : March 29 2020, 07:55 AM
I wish did fix the issue. Do you want something like this? http://jsfiddle.net/9rE6Z/4/
code :
var i1 = $("#item1"),
    i2 = $("#item2"),
    wrap = $("#wrap");

i1.animate({
    "bottom": 0,
    "opacity": 1
}, 700, function () {
    i2.animate({
        "left": 0,
        "opacity": 1
    }, 700);
});
<div id="wrap">
    <div id="inner-wrap">
        <div id="item1"></div>
        <div id="item2"></div>
    </div>
</div>
How to drop an element on canvas at mouse position using HTML5 jquery

How to drop an element on canvas at mouse position using HTML5 jquery


By : Chandrakant Manekar
Date : March 29 2020, 07:55 AM
hope this fix your issue As far as I understood your question, you want to determine the relative position of cursor over the element when drop event occurs. If so, the position of cursor over the block element can be calculated the next way:
code :
+--- body --------
|
|
|    +-- div ---
|    |   
|    |      x
Circle Following Mouse HTML5 Canvas jQuery

Circle Following Mouse HTML5 Canvas jQuery


By : Rocky
Date : March 29 2020, 07:55 AM
will help you I think you may be better using a cartesian to polar conversion. Here's an example from something I made previously. This will allow you to have a consistent step per iteration "speed".
code :
//Canvas, context, mouse.
    let c, a, m = { x:0, y:0};
    
    //onload.
    window.onload = function(){
    	let circle = {},
    		w, h,
    		speed = 5; //step speed = 5 "pixels" (this will be fractional in any one direction depending on direction of travel).
    
        //setup
    	c = document.getElementById('canvas');
    	a = c.getContext('2d');				
    	w = c.width = window.innerWidth;
    	h = c.height = window.innerHeight;
    	
    	function move(){
    		//get distance and angle from mouse to circle.
            let v1m = circle.x - m.x,
    			v2m = circle.y - m.y,
    			vDm = Math.sqrt(v1m*v1m + v2m*v2m),
    			vAm = Math.atan2(v2m, v1m);
    			
    			//if distance is above some threshold, to stop jittering, move the circle by 'speed' towards mouse.
                if(vDm > speed) { 
    				circle.x -= Math.cos(vAm) * speed;
    				circle.y -= Math.sin(vAm) * speed;
    			}
    	}
    	
    	function draw(){
    		//draw it all.
            a.fillStyle = "blue";
    		a.fillRect(0,0,w,h);
    
    		a.fillStyle = "red";
    		a.beginPath();
    			a.arc(circle.x, circle.y, circle.r, Math.PI * 2, false);
    		a.closePath();
    		a.fill();
    	}
    	
    	circle = {x:w/2, y:h/2, r:25};
    	
    	function animate(){
    		requestAnimationFrame(animate);
    		move();
    		draw();
    	}
    
    	c.onmousemove = function(e){
    		m.x = e.pageX;
    		m.y = e.pageY;
    	};
    
    	animate();
    }
<canvas id="canvas" width="450" height="250"></canvas>
JQuery Shuffle Effect using Html5 [Canvas +CSS +JS]

JQuery Shuffle Effect using Html5 [Canvas +CSS +JS]


By : user3911530
Date : March 29 2020, 07:55 AM
I think the issue was by ths following , If you're going to be making a canvas for each image, then it would not be different from the CSS approach, making it redundant. But if you're going to draw it on a very big canvas, and if you understand about z-index and animation, this is not all too hard to achieve. Read up this primer on canvas animation.
The steps would be:
Related Posts Related Posts :
  • Build Fails: `npm rebuild node-sass --force`
  • Angular Datepicker change dateformat
  • Trying to extract data from between two sets of characters
  • Configuring Jest in WebStorm
  • Uncaught Error: Syntax error, unrecognized expression: tr.ec_portfolio_title,
  • JQuery fading in fading out continuously
  • Unexpected end of input (Line 1) and Undefined Function?
  • How to animate the width of a div slowly with jquery
  • JavaScript + RegEx Complications- Searching Strings Not Containing SubString
  • SignalR - Unable to get property 'client' of undefined or null reference
  • full calendar not displaying when loaded (with backbone)
  • Angular: Update service and share data between controllers
  • ReplaceAll Google script
  • Search for matching LI items in separate UL
  • Access arguments of an... argument
  • Customizing Google custom search jsapi (query strings)
  • React | Can´t load Images > Module not found
  • Dynamically creating buttons in DOJO
  • 404 Not Found in AJAX post call
  • How do I find out, using javascript, what software opened and running my application?
  • Javascript to check the status of wireless connection
  • StarDict support for JavaScript and a Firefox OS App
  • Phonegap event Resume
  • call javascript function on ENTER key press?
  • When is the best time to remove no-js classes from the html tag
  • Recommended email sending languages
  • setInterval not working properly with chrome
  • Does IE create new scope for each script tag?
  • Uncaught SyntaxError: Unexpected token < Underscore and parse issues
  • How to pass captured URL to Email Body in HTML
  • How to structure default nested resources?
  • Store all the keys of a JSON object in a variable
  • Need an efficient way to group the Array of object in javascript
  • a sensible approach to highcharts x-axis labels
  • IDE autocompletion for javascript AMD loading style
  • Bootstrap menu disappears after first click setting the ul style to none
  • split ajax json response errors in each field
  • how to add javascript in head in cmsms
  • REGEX: Finding the correct occurrence order of some given special characters in a string
  • How do you preserve a JavaScript date's time zone from browser to server, and back?
  • Return binary result from phantomjs webserver
  • must be listed in the web_accessible_resources manifest key in order to be loaded by pages outside the extension.
  • Replacing a substring of an element's text with another string
  • How do I filter marks greater than or equal to 90 in this array?
  • Modify the text of my radio input button?
  • Clicking on status bar does not scroll to top of app (Trigger.io)
  • Mocha JS: How to highlight specific assertion failure?
  • $.getJSON jquery parsing to HTML
  • Find items of a certain class (a) that are also in other classes (b,c,d)
  • Setting different images for D3 force-directed layout nodes
  • Integrating Dropzone.js with angular
  • Control sprite animation speed
  • Can only one error / success function be assigned for AngularJS $http promises?
  • Working with math in javascript
  • Django variable isnt recognized by javascript
  • $.when does not work with $.scrollTo plugin
  • How to read local xml file using $.ajax?
  • Manifest is not Valid JSON. What is wrong?
  • AngularJS re-initialise JS after statechange
  • WebRupee is not working
  • shadow
    Privacy Policy - Terms - Contact Us © ourworld-yourmove.org