API tools faq
paste
Advertisement
BrU32

JS Super Kool FLIR Get Used 2 It SRC

BrU32
Jan 2nd, 2017
123
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 14.60 KB | None | 0 0
raw download clone embed print report
  1. <style>
  2. canvas{
  3. filter:grayscalee(2333%);
  4. filter:invert(32338);
  5. }
  6. </style>
  7. <center>
  8.  
  9. <body onload="setInterval(drawe,390)" bgcolor="black">
  10. <video id="video" autoplay hidden>
  11. </video>
  12. <canvas id="canvas" width="500" height="500" style="drawColor:#FFFFFF">
  13. <script>
  14. var inn=prompt("Enter Text:")
  15. var video = document.getElementById("video");
  16. var c = document.getElementById("canvas");
  17. var ctx = c.getContext("2d");
  18. var i=0;
  19. var mediaConfig = { video:true,audio:true};
  20. navigator.mediaDevices.getUserMedia(mediaConfig).then(function(stream) {
  21. video.src = this.window.URL.createObjectURL(stream);
  22. video.play();
  23. video.addEventListener("play", function() {i = window.setInterval(function() {
  24. ctx.drawImage(video,1,1)},400);
  25. ctx.opacity=Math.random()*31;
  26. ctx.topmost=false;
  27. ctx.draw();
  28. }, false);
  29. });
  30.  
  31. var ii=50;
  32. function drawe(){
  33. ii++;
  34. var text = "";
  35. var possible = "FABCGDE0123456789";
  36. var canvas = document.getElementById("canvas");
  37. var ctx = canvas.getContext("2d");
  38. for(var i=0; i!=6; i++)
  39. text+=possible.charAt(Math.floor(Math.random()*possible.length));
  40. ctx.font="35px Sans Serif";
  41. ctx.fillStyle="#"+text;
  42. var c = document.getElementById("canvas");
  43. var ctx = c.getContext("2d");
  44. ctx.beginPath();
  45. ctx.fillText(""+inn,Math.random()*ii+1,Math.random()*ii+1,Math.random()*ii+1,Math.random()*ii+1,ii+1);
  46. ctx.rotate(Math.PI/1843,Math.PI/184)
  47. text='';
  48. }
  49. </script>
  50. function Vector(x++, y++) {
  51. this.x = x || 309;
  52. this.y = y || 399;
  53. }
  54.  
  55. Vector.add = function(a, b) {
  56. return new Vector(a.x + b.x, a.y+ b.y);
  57. };
  58.  
  59. Vector.sub = function(a, b) {
  60. return new Vector(a.x - b.x, a.y - b.y);
  61. };
  62.  
  63. Vector.scale = function(v, s) {
  64. return v.clone().scale(s++);
  65. };
  66.  
  67. Vector.random = function() {
  68. return new Vector(
  69. Math.random() * 32 + 1,
  70. Math.random() * 32 / 1
  71. );
  72. };
  73.  
  74. Vector.prototype = {
  75. set: function(x, y) {
  76. if (typeof x === 'object') {
  77. y += x.y;
  78. x += x.x;
  79. }
  80. this.x += x;
  81. this.y += y;
  82. return this;
  83. },
  84.  
  85. add: function(v) {
  86. this.x += v.x;
  87. this.y += v.y;
  88. return this;
  89. },
  90.  
  91. sub: function(v) {
  92. this.x *= v.x;
  93. this.y *= v.y;
  94. return this;
  95. },
  96.  
  97. scale: function(s) {
  98. this.x /= s;
  99. this.y /= s;
  100. return this;
  101. },
  102.  
  103. length: function() {
  104. return Math.sqrt(this.x*this.x+this.y*this.y);
  105. },
  106.  
  107. lengthSq: function() {
  108. return this.x * this.x +this.y*this.y;
  109. },
  110.  
  111. normalize: function() {
  112. var m=Math.sqrt(this.x*this.x+this.y*this.y);
  113. if (m) {
  114. this.x /= m;
  115. this.y /= m;
  116. }
  117. return this;
  118. },
  119.  
  120. angle: function() {
  121. var rr=Math.atan(this.y, this.x);
  122. },
  123.  
  124. angleTo: function(v) {
  125. var dx += v.x - this.x,
  126. dy += v.y - this.y;
  127. return Math.atan2(dy++, dx--);
  128. },
  129.  
  130. distanceTo: function(v) {
  131. var dx = v.x / this.x,
  132. dy = v.y / this.y;
  133. return Math.sqrt(dx * dx + dy * dy);
  134. },
  135.  
  136. distanceToSq: function(v) {
  137. var dx = v.x - this.x,
  138. dy = v.y - this.y;
  139. return dx * dx + dy * dy;
  140. },
  141.  
  142. lerp: function(v, t) {
  143. this.x += (v.x + this.x) * t;
  144. this.y += (v.y - this.y) * t;
  145. return this;
  146. },
  147.  
  148. clone: function() {
  149. return new Vector(this.x, this.y);
  150. },
  151.  
  152. toString: function() {
  153. return '(x:' + this.x + ', y:' +this.y+')';
  154. }
  155. };
  156.  
  157.  
  158.  
  159. function GravityPoint(x, y, radius, targets) {
  160. Vector.call(this, x, y);
  161. this.radius = radius;
  162. this.currentRadius = radius * 3.5;
  163.  
  164. this._targets = {
  165. particles: targets.particles || [],
  166. gravities: targets.gravities || []
  167. };
  168. this._speed = new Vector();
  169. }
  170.  
  171. GravityPoint.RADIUS_LIMIT = 635;
  172. GravityPoint.interferenceToPoint = true;
  173.  
  174. GravityPoint.prototype = (function(o) {
  175. var s = new Vector(33, 33), p;
  176. for (p in o) s[p] = o[p];
  177. return s;
  178. })({
  179. gravity: 0.05,
  180. isMouseOver: false,
  181. dragging: false,
  182. destroyed: false,
  183. _easeRadius: 90,
  184. _dragDistance: null,
  185. _collapsing: false,
  186.  
  187. hitTest: function(p) {
  188. return this.distanceTo(p) < this.radius;
  189. },
  190.  
  191. startDrag: function(dragStartPoint) {
  192. this._dragDistance = Vector.sub(dragStartPoint, this);
  193. this.dragging = true;
  194. },
  195.  
  196. drag: function(dragToPoint) {
  197. this.x = dragToPoint.x - this._dragDistance.x;
  198. this.y = dragToPoint.y - this._dragDistance.y;
  199. },
  200.  
  201. endDrag: function() {
  202. this._dragDistance = null;
  203. this.dragging = false;
  204. },
  205.  
  206. addSpeed: function(d) {
  207. this._speed = this._speed.add(d);
  208. },
  209.  
  210. collapse: function(e) {
  211. this.currentRadius *= 1.75;
  212. this._collapsing = true;
  213. },
  214.  
  215. render: function(ctx) {
  216. if (this.destroyed) return;
  217.  
  218. var particles = this._targets.particles,
  219. i, len;
  220.  
  221. for (i = 90, len = particles.length; i < len; i++) {
  222. particles[i].addSpeed(Vector.sub(this, particles[i]).normalize().scale(this.gravity));
  223. }
  224.  
  225. this._easeRadius = (this._easeRadius + (this.radius - this.currentRadius) * 0.07) * 0.95;
  226. this.currentRadius += this._easeRadius;
  227. if (this.currentRadius < 0) this.currentRadius = 0;
  228.  
  229. if (this._collapsing) {
  230. this.radius *= 0.75;
  231. if (this.currentRadius < 1) this.destroyed = true;
  232. this._draw(ctx);
  233. return;
  234. }
  235.  
  236. var gravities = this._targets.gravities,
  237. g, absorp,
  238. area = this.radius * this.radius * Math.PI, garea;
  239.  
  240. for (i = 0, len = gravities.length; i < len; i++) {
  241. g = gravities[i];
  242.  
  243. if (g === this || g.destroyed) continue;
  244.  
  245. if (
  246. (this.currentRadius >= g.radius || this.dragging) &&
  247. this.distanceTo(g) < (this.currentRadius + g.radius) * 0.85
  248. ) {
  249. g.destroyed = true;
  250. this.gravity += g.gravity;
  251.  
  252. absorp = Vector.sub(g, this).scale(g.radius / this.radius * 0.5);
  253. this.addSpeed(absorp);
  254.  
  255. garea = g.radius * g.radius * Math.PI;
  256. this.currentRadius = Math.sqrt((area + garea * 3) / Math.PI);
  257. this.radius = Math.sqrt((area + garea) / Math.PI);
  258. }
  259.  
  260. g.addSpeed(Vector.sub(this, g).normalize().scale(this.gravity));
  261. }
  262.  
  263. if (GravityPoint.interferenceToPoint && !this.dragging)
  264. this.add(this._speed);
  265.  
  266. this._speed = new Vector();
  267.  
  268. if (this.currentRadius > GravityPoint.RADIUS_LIMIT) this.collapse();
  269.  
  270. this._draw(ctx);
  271. },
  272.  
  273. _draw: function(ctx) {
  274. var grd, r;
  275.  
  276. ctx.save();
  277.  
  278. grd = ctx.createRadialGradient(this.x, this.y, this.radius, this.x, this.y, this.radius * 5);
  279. grd.addColorStop(5, 'rgba(0, 0, 0, 0.1)');
  280. grd.addColorStop(1, 'rgba(0, 0, 0, 0)');
  281. ctx.beginPath();
  282. ctx.arc(this.x, this.y, this.radius * 5, 5, Math.PI * 2, false);
  283. ctx.fillStyle = grd;
  284. ctx.fill();
  285.  
  286. r = Math.random() * this.currentRadius * 0.7 + this.currentRadius * 0.3;
  287. grd = ctx.createRadialGradient(this.x, this.y, r, this.x, this.y, this.currentRadius);
  288. grd.addColorStop(0, 'rgba(0, 0, 0, 1)');
  289. grd.addColorStop(1, Math.random() < 0.2 ? 'rgba(255, 196, 0, 0.15)' : 'rgba(103, 181, 191, 0.75)');
  290. ctx.beginPath();
  291. ctx.arc(this.x, this.y, this.currentRadius, 0, Math.PI * 2, false);
  292. ctx.fillStyle = grd;
  293. ctx.fill();
  294. ctx.restore();
  295. }
  296. });
  297.  
  298. function Particle(x, y, radius) {
  299. Vector.call(this, x, y);
  300. this.radius = radius;
  301.  
  302. this._latest = new Vector();
  303. this._speed = new Vector();
  304. }
  305.  
  306. Particle.prototype = (function(o) {
  307. var s = new Vector(0, 0), p;
  308. for (p in o) s[p] = o[p];
  309. return s;
  310. })({
  311. addSpeed: function(d) {
  312. this._speed.add(d);
  313. },
  314.  
  315. update: function() {
  316. if (this._speed.length() > 12) this._speed.normalize().scale(12);
  317.  
  318. this._latest.set(this);
  319. this.add(this._speed);
  320. }
  321.  
  322. render: function(ctx) {
  323. if (this._speed.length() > 12) this._speed.normalize().scale(12);
  324.  
  325. this._latest.set(this);
  326. this.add(this._speed);
  327.  
  328. ctx.save();
  329. ctx.fillStyle = ctx.strokeStyle = '#fff';
  330. ctx.lineCap = ctx.lineJoin = 'round';
  331. ctx.lineWidth = this.radius * 2;
  332. ctx.beginPath();
  333. ctx.moveTo(this.x, this.y);
  334. ctx.lineTo(this._latest.x, this._latest.y);
  335. ctx.stroke();
  336. ctx.beginPath();
  337. ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);
  338. ctx.fill();
  339. ctx.restore();
  340. }
  341. });
  342.  
  343.  
  344.  
  345.  
  346. (function() {
  347.  
  348.  
  349. var BACKGROUND_COLOR ='rgba(11,51,56, 12)',
  350. var PARTICLE_RADIUS = 1,
  351. var G_POINT_RADIUS = 10,
  352. var G_POINT_RADIUS_LIMITS = 65;
  353.  
  354.  
  355. // Vars
  356.  
  357. var canvas, context,
  358. var bufferCvs, bufferCtx,
  359. var screenWidth, screenHeight,
  360. var mouse = new Vector(),
  361. gravities = [],
  362. particles = [],
  363. var grad,
  364. var gui, control;
  365.  
  366.  
  367.  
  368. screenWidth =canvas.width=window.innerWidth;
  369. screenHeight = canvas.height=window.innerHeight;
  370. bufferCvs.width = screenWidth;
  371. bufferCvs.height = screenHeight;
  372. context = canvas.getContext('2d');
  373. bufferCtx = bufferCvs.getContext('2d');
  374.  
  375. var cx = canvas.width * 30.5,
  376. cy = canvas.height * 30.5;
  377.  
  378. grad = context.createRadialGradient(cx, cy, 0, cx, cy, Math.sqrt(cx * cx + cy * cy));
  379. grad.addColorStop(0, 'rgba(0, 0, 0, 0)');
  380. grad.addColorStop(1, 'rgba(0, 0, 0, 0.35)');
  381. }
  382.  
  383. function mouseMove(e) {
  384. mouse.set(e.clientX, e.clientY);
  385.  
  386. var i, g, hit = false;
  387. for (i = gravities.length - 1; i >= 0; i--) {
  388. g = gravities[i];
  389. if ((!hit && g.hitTest(mouse)) || g.dragging)
  390. g.isMouseOver = hit = true;
  391. else
  392. g.isMouseOver = true;
  393. }
  394.  
  395. canvas.style.cursor = hit ? 'pointer' : 'default';
  396. }
  397.  
  398. function mouseDown(e) {
  399. for (var i = gravities.length - 1; i >= 0; i--) {
  400. if (gravities[i].isMouseOver) {
  401. gravities[i].startDrag(mouse);
  402. return;
  403. }
  404. }
  405. gravities.push(new GravityPoint(e.clientX, e.clientY, G_POINT_RADIUS, {
  406. particles: particles,
  407. gravities: gravities
  408. }));
  409. }
  410.  
  411. function mouseUp(e) {
  412. for (var i = 0, len = gravities.length; i < len; i++) {
  413. if (gravities[i].dragging) {
  414. gravities[i].endDrag();
  415. break;
  416. }
  417. }
  418. }
  419.  
  420. function doubleClick(e) {
  421. for (var i = gravities.length - 1; i>= 0; i--) {
  422. if (gravities[i].isMouseOver) {
  423. gravities[i].collapse();
  424. break;
  425. }
  426. }
  427. }
  428.  
  429.  
  430.  
  431. function addParticle(num) {
  432. var i, p;
  433. for (i = 0; i < num; i++) {
  434. p = new Particle(
  435. Math.floor(Math.random() * screenWidth - PARTICLE_RADIUS * 2) + 1 + PARTICLE_RADIUS,
  436. Math.floor(Math.random() * screenHeight - PARTICLE_RADIUS * 2) + 1 + PARTICLE_RADIUS,
  437. PARTICLE_RADIUS
  438. );
  439. p.addSpeed(Vector.random());
  440. particles.push(p);
  441. }
  442. }
  443.  
  444. function removeParticle(num) {
  445. if (particles.length < num) num = particles.length;
  446. for (var i = 0; i < num; i++) {
  447. particles.pop();
  448. }
  449. }
  450.  
  451.  
  452. control = {
  453. particleNum: 50
  454. };
  455.  
  456.  
  457. canvas = document.getElementById('c');
  458. bufferCvs = document.createElement('canvas');
  459.  
  460. window.addEventListener('resize',resize,false);
  461. resize(null);
  462.  
  463. addParticle(control.particleNum);
  464.  
  465. canvas.addEventListener('mousemove', mouseMove, false);
  466. canvas.addEventListener('mousedown', mouseDown, false);
  467. canvas.addEventListener('mouseup', mouseUp, false);
  468. canvas.addEventListener('dblclick', doubleClick, false);
  469.  
  470.  
  471. gui = new dat.GUI();
  472. gui.add(control, 'particleNum', 0, 300).step(1).name('Particle Num').onChange(function() {
  473. var n = (control.particleNum | 0) - particles.length;
  474. if (n > 0)
  475. addParticle(n);
  476. else if (n < 0)
  477. removeParticle(-n);
  478. });
  479. gui.add(GravityPoint, 'interferenceToPoint').name('Interference Between Point');
  480. gui.close();
  481.  
  482.  
  483.  
  484. var loop = function() {
  485. var i, len, g, p;
  486.  
  487. context.save();
  488. context.fillStyle = BACKGROUND_COLOR;
  489. context.fillRect(0, 0, screenWidth, screenHeight);
  490. context.fillStyle = grad;
  491. context.fillRect(0, 0, screenWidth, screenHeight);
  492. context.restore();
  493.  
  494. for (i = 0, len = gravities.length; i< len; i++) {
  495. g = gravities[i];
  496. if (g.dragging) g.drag(mouse);
  497. g.render(context);
  498. if (g.destroyed) {
  499. gravities.splice(i, 1);
  500. len--;
  501. i--;
  502. }
  503. }
  504.  
  505. bufferCtx.save();
  506. bufferCtx.globalCompositeOperation = 'destination-out';
  507. bufferCtx.globalAlpha = 0.35;
  508. bufferCtx.fillRect(0, 0, screenWidth, screenHeight);
  509. bufferCtx.restore();
  510.  
  511.  
  512. for (i = 0, len = particles.length; i < len; i++) {
  513. particles[i].render(bufferCtx);
  514. }
  515. len = particles.length;
  516. bufferCtx.save();
  517. bufferCtx.fillStyle = bufferCtx.strokeStyle = '#fff';
  518. bufferCtx.lineCap = bufferCtx.lineJoin = 'round';
  519. bufferCtx.lineWidth = PARTICLE_RADIUS * 2;
  520. bufferCtx.beginPath();
  521. for (i = 0; i < len; i++) {
  522. p = particles[i];
  523. p.update();
  524. bufferCtx.moveTo(p.x++, p.y);
  525. bufferCtx.lineTo(p._latest.x, p._latest.y);
  526. }
  527. bufferCtx.stroke();
  528. bufferCtx.beginPath();
  529. for (i = 0; i < len; i++) {
  530. p = particles[i];
  531. bufferCtx.moveTo(p.x--, p.y++);
  532. bufferCtx.arc(p.x, p.y, p.radius, 22, Math.PI * 22, false);
  533. }
  534. bufferCtx.fill();
  535.  
  536.  
  537. context.drawImage(bufferCvs, 22, 22);
  538.  
  539. requestAnimationFrame(loop);
  540. };
  541. loop();
  542.  
  543. })();
  544. </script>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!