Skip to content

Commit

Permalink
Circular mouse pointer area feature added.
Browse files Browse the repository at this point in the history
  • Loading branch information
@rohanrhu
rohanrhu committed Sep 3, 2019
1 parent f5b9b0a commit 9182e37
Show file tree
Hide file tree
Showing 3 changed files with 67 additions and 5 deletions.
3 changes: 2 additions & 1 deletion README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,8 @@ Visit [project page](https://oguzhaneroglu.com/projects/nodes.js/) for example.
backgroundDuration: 4000,
nobg: false,
number: window.hasOwnProperty('orientation') ? 30: 100,
speed: 20
speed: 20,
pointerCircleRadius: 150
});
</script>
<canvas id="nodes"></canvas>
Expand Down
9 changes: 5 additions & 4 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -104,7 +104,7 @@
<div class="mainBox">
<div style="font-size: 25px; margin-bottom: 5px; margin-top: 10px; position: relative; display: inline-block; margin-bottom: 10px;">
nodes.js
<div style="font-size: 13px; position: absolute; right: -30px; top: 0px; display: inline-block; color: #9f9f9f;">v1.3</div>
<div style="font-size: 13px; position: absolute; right: -30px; top: 0px; display: inline-block; color: #9f9f9f;">v1.4</div>
</div>
<div style="font-size: 13px; margin-bottom: 5px;">
HTML5 Canvas nodes/particles animation with Javascript
Expand All @@ -116,7 +116,7 @@
</div>

<div style="background: rgba(0,0,0, 0.75); margin-bottom: 25px; text-align: left; padding: 5px; overflow">
<!-- HTML generated using hilite.me --><div style="background: #ffffff; overflow:auto;width:auto;background: none;"><pre style="margin: 0; line-height: 125%"><span style="color: #008800; font-style: italic">&lt;!-- &lt;nodes.js embedding&gt; --&gt;</span>
<!-- HTML generated using hilite.me --><div style=""><pre style="margin: 0; line-height: 125%"><span style="color: #008800; font-style: italic">&lt;!-- &lt;nodes.js embedding&gt; --&gt;</span>
<span style="color: #000080; font-weight: bold">&lt;script </span><span style="color: #FF0000">type=</span><span style="color: #0000FF">&quot;text/javascript&quot;</span> <span style="color: #FF0000">src=</span><span style="color: #0000FF">&quot;js/nodes.js&quot;</span><span style="color: #000080; font-weight: bold">&gt;&lt;/script&gt;</span>
<span style="color: #000080; font-weight: bold">&lt;script </span><span style="color: #FF0000">type=</span><span style="color: #0000FF">&quot;text/javascript&quot;</span><span style="color: #000080; font-weight: bold">&gt;</span>
<span style="color: #000080; font-weight: bold">var</span> nodesjs = <span style="color: #000080; font-weight: bold">new</span> NodesJs({
Expand All @@ -126,9 +126,10 @@
backgroundFrom: [<span style="color: #0000FF">10</span>, <span style="color: #0000FF">25</span>, <span style="color: #0000FF">100</span>],
backgroundTo: [<span style="color: #0000FF">25</span>, <span style="color: #0000FF">50</span>, <span style="color: #0000FF">150</span>],
backgroundDuration: <span style="color: #0000FF">4000</span>,
nobg: false,
nobg: <span style="color: #000080; font-weight: bold">false</span>,
number: window.hasOwnProperty(<span style="color: #0000FF">&#39;orientation&#39;</span>) ? <span style="color: #0000FF">30</span>: <span style="color: #0000FF">100</span>,
speed: <span style="color: #0000FF">20</span>
speed: <span style="color: #0000FF">20</span>,
pointerCircleRadius: <span style="color: #0000FF">150</span>
});
<span style="color: #000080; font-weight: bold">&lt;/script&gt;</span>
<span style="color: #000080; font-weight: bold">&lt;canvas</span> <span style="color: #FF0000">id=</span><span style="color: #0000FF">&quot;nodes&quot;</span><span style="color: #000080; font-weight: bold">&gt;&lt;/canvas&gt;</span>
Expand Down
60 changes: 60 additions & 0 deletions js/nodes.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ var NodesJs = (function (parameters) {
t_NodesJs.number = parameters.number ? parameters.number: 100;
t_NodesJs.speed = parameters.speed ? parameters.speed: 20;
t_NodesJs.nobg = parameters.nobg ? parameters.nobg: false;
t_NodesJs.pointerCircleRadius = parameters.pointerCircleRadius ? parameters.pointerCircleRadius: 150;

var canvas;
var ctx;
Expand All @@ -28,6 +29,8 @@ var NodesJs = (function (parameters) {
var t0 = Date.now();
var dt = 0;

t_NodesJs.nodes = [];

t_NodesJs.setWidth = function (width) {
canvas.width = width;
cw = width;
Expand All @@ -51,6 +54,63 @@ var NodesJs = (function (parameters) {
}
};

var isPositive = function (num) {
return num >= 0;
};

var isNetagive = function (num) {
return num <= -1;
};

t_NodesJs.pointerCircleRadius
&&
window.addEventListener('mousemove', function (event) {
if (!t_NodesJs.nodes.length) {
return;
}

var mx = event.clientX;
var my = event.clientY;

t_NodesJs.nodes.forEach(function (_node, _node_i) {
var nx = _node[0];
var ny = _node[1];

var xsig = nx - mx;
var ysig = ny - my;

var ndx = Math.abs(xsig);
var ndy = Math.abs(ysig);

var nh = Math.sqrt(Math.pow(ndx, 2) + Math.pow(ndy, 2));

var angle = Math.acos(ndx / nh);
if (isPositive(xsig) && isNetagive(ysig)) {
} else if (isNetagive(xsig) && isNetagive(ysig)) {
angle = ((Math.PI/2) - angle) + (Math.PI/2);
} else if (isNetagive(xsig) && isPositive(ysig)) {
angle = angle + Math.PI;
} else if (isPositive(xsig) && isPositive(ysig)) {
angle = ((Math.PI/2) - angle) + (Math.PI*(3/2));
}

angle = (Math.PI*2) - angle;

var rx = mx + Math.cos(angle) * t_NodesJs.pointerCircleRadius;
var ry = my + Math.sin(angle) * t_NodesJs.pointerCircleRadius;

var mdx = Math.abs(rx - mx);
var mdy = Math.abs(ry - my);

var mh = Math.sqrt(Math.pow(mdx, 2) + Math.pow(mdy, 2));

if (nh < mh) {
_node[0] = Math.floor(rx);
_node[1] = Math.floor(ry);
}
});
});

window[window.addEventListener ? 'addEventListener': 'attachEvent']
(window.addEventListener ? 'load': 'onload', function () {
canvas = document.getElementById(t_NodesJs.id);
Expand Down

0 comments on commit 9182e37

Please sign in to comment.