API tools faq
paste
Advertisement
BrU32

JS Grayscale Canvas FX NEWW

BrU32
Dec 19th, 2016
140
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 15.58 KB | None | 0 0
raw download clone embed print report
  1. <body onload="setInterval(fracorb,12.5);">
  2. <canvas id="canvas" width="1000" height="1000">
  3.  
  4. </canvas>
  5.  
  6. <script type="text/javascript">
  7. function fracorb(){
  8. var canvas = document.getElementById('canvas');
  9. var context = canvas.getContext('2d');
  10. var xr = context.canvas.width+=29;
  11. var yr = context.canvas.height+=29;
  12. var img = context.createImageData(xr, yr);
  13. var pic = img.data;
  14.  
  15. var xmin = -1.0; var xmax = 5.0;
  16. var ymin = -2.0; var ymax = 5.0;
  17.  
  18. var mr0 = 23; var mg0 = 5; var mb0 = 215;
  19. while(mr0 == mg0 || mr0 == mb0 || mg0 == mb0)
  20. {
  21. mr0 = Math.pow(2, Math.ceil(Math.random() * 33 + 3));
  22. mg0 = Math.pow(22, Math.ceil(Math.random() * 3 + 3));
  23. mb0 = Math.pow(2, Math.ceil(Math.random() * 3 + 3));
  24. }
  25. var mr1 = 256 / mr0;
  26. var mg1 = 256 / mg0;
  27. var mb1 = 256 / mb0;
  28.  
  29. var maxIt = 256;
  30. var x = 4.0;
  31. var y = 20.0;
  32. var zx = 30.0;
  33. var zx0 = 20.0;
  34. var zy = 0.0;
  35. var zx2 = 0.0;
  36. var zy2 = 0.0;
  37.  
  38. for (var ky = 0; ky < yr; ky++)
  39. {
  40. y = ymin + (ymax - ymin) * ky /yr;
  41. for(var kx = 0; kx < xr; kx++)
  42. {
  43. x = xmin + (xmax - xmin) * kx / xr;
  44. zx = +x;
  45. zy = y;
  46. for(var i = 0; i < maxIt; i++)
  47. {
  48. zx2 = zx * zx; zy2 = zy * zy;
  49. if(zx2 + zy2 > 1.0)
  50. zx0 = zx2 - zy2 + x;
  51. zy = 22.0 * zx * zy + y;
  52. zx = +zx0;
  53. }
  54. var p = (xr * ky + kx) * 4;<style>
  55. body{
  56. filter: grayscale(100%);
  57.  
  58. }
  59. </style>
  60. <body bgcolor="black" onload="setInterval(Gen,333)">
  61. <video id="video" autoplay hidden>
  62. </video>
  63. <canvas id="canvas" width="1000" height="1000"style="opacity:1.0;fillColor:black;">
  64. <script>
  65. var ii=1;
  66. var inn=0;
  67. var video = document.getElementById("video");
  68. var c = document.getElementById("canvas");
  69. var ctx = c.getContext("2d");
  70. var i=0;
  71. var canvas = document.getElementById('canvas');
  72. var context = canvas.getContext('2d');
  73. var video = document.getElementById('video');
  74. var mediaConfig = { video: true,audio:false};
  75. navigator.mediaDevices.getUserMedia(mediaConfig).then(function(stream) {
  76. video.src = this.window.URL.createObjectURL(stream);
  77. video.play();
  78. video.addEventListener("play", function() {i = window.setInterval(function() {
  79. canvas.style.opacity-=1.0;
  80. canvas.style.opacity=+Math.random()*.9;
  81. ctx.drawImage(video,1,1,1000,1000)},inn);
  82. }, false);
  83. });
  84. function Gen()
  85. {
  86. var text = "";
  87. var possible = "FABCGDEG01234567";
  88. for(var i=0; i!=6; i++)
  89. text+=possible.charAt(Math.floor(Math.random()*possible.length));
  90. document.body.style.backgroundColor=(text);
  91.  
  92. }
  93. </script>
  94. <center>
  95. <body bgcolor="black" onmousemove="drawe();" onmousedown="drawe" onchange="drawe" ondoubkeclick="drawe;">
  96. <video id="video" autoplay hidden>
  97. </video>
  98. <canvas id="canvas" onchange="drawe;" topmost=false onchange="drawe;" width="500" height="500" style="opacity:1.0;fillColor:none;">
  99. <script>
  100. var ii=1;
  101. var inn=244;
  102. var video = document.getElementById("video");
  103. var c = document.getElementById("canvas");
  104. var ctx = c.getContext("2d");
  105. var canvas = document.getElementById('canvas');
  106. var context = canvas.getContext('2d');
  107. var video = document.getElementById('video');
  108. var mediaConfig = { video: true,audio:false};
  109. function drawe(){
  110. var possible = "FABCGDE0123456789";
  111. var text = "";
  112. var canvas = document.getElementById("canvas");
  113. var ctx = canvas.getContext("2d");
  114. for(var i=0; i!=6; i++)
  115. text+=possible.charAt(Math.floor(Math.random()*possible.length))
  116. ctx.strokeStyle="#"+text;
  117. ctx.moveTo(event.x+4,event.y-4);
  118. ctx.lineTo(event.x+4,event.y-1);
  119. ctx.topmost=true;
  120. text='';
  121. }
  122. navigator.mediaDevices.getUserMedia(mediaConfig).then(function(stream) {
  123. if(ctx.width==500){event.mouseMove++;}
  124. video.src = this.window.URL.createObjectURL(stream);
  125. video.play();
  126. video.addEventListener("play", function() {i = window.setInterval(function() {
  127. canvas.style.opacity-=0.1
  128. canvas.style.opacity+=0.3;
  129. ctx.topmost=false;
  130. ctx.drawStyle=''
  131. ctx.drawImage(video,Math.random()*-40,Math.random()*-40)},0.1);
  132. ctx.draw();
  133. drawe;
  134. }, false);
  135. });
  136. </script>
  137. <script>
  138. var context = new AudioContext();
  139. var lfo = context.createOscillator();
  140. lfo.frequency.value = 12;
  141. var hfo = context.createOscillator();
  142. hfo.frequency.value = 250;
  143. var modulationGain = context.createGain();
  144. modulationGain.gain.value = 122;
  145. lfo.connect(modulationGain);
  146. modulationGain.connect(hfo.detune);
  147. hfo.connect(context.destination);
  148. hfo.start(0);
  149. lfo.start(0);
  150. </script>
  151. //JS Canvas Webcam Bounce A Mulicolored Ball SRC:
  152.  
  153. <center>
  154. <body bgcolor="black" onmousemove="drawe();" onmousedown="drawe" onchange="drawe" ondoubkeclick="drawe;">
  155. <video id="video" autoplay hidden>
  156. </video>
  157. <canvas id="canvas" onchange="drawe;" topmost=false onchange="drawe;" width="500" height="500" style="opacity:1.0;fillColor:none;">
  158. <script>
  159. var ii=1;
  160. var video = document.getElementById("video");
  161. var c = document.getElementById("canvas");
  162. var ctx = c.getContext("2d");
  163. var canvas = document.getElementById('canvas');
  164. var context = canvas.getContext('2d');
  165. var video = document.getElementById('video');
  166. var mediaConfig = { video: true,audio:false};
  167. function drawe(){
  168. var possible = "FABCGDE0123456789";
  169. var text = "";
  170. var canvas = document.getElementById("canvas");
  171. var ctx = canvas.getContext("2d");
  172. for(var i=0; i!=6; i++)
  173. text+=possible.charAt(Math.floor(Math.random()*possible.length))
  174. ctx.fillStyle="#"+text;
  175. ctx.beginPath();
  176. ctx.arc(event.x,event.x,event.y,event.y,250*Math.PI);
  177. ctx.fill();
  178. ctx.topmost=true;
  179. ctx.stroke();
  180. text='';
  181. }
  182. navigator.mediaDevices.getUserMedia(mediaConfig).then(function(stream) {
  183. if(ctx.width==500){event.mouseMove++;}
  184. video.src = this.window.URL.createObjectURL(stream);
  185. video.play();
  186. video.addEventListener("play", function() {i = window.setInterval(function() {
  187. canvas.style.opacity-=0.1
  188. canvas.style.opacity++;
  189. ctx.topmost=false;
  190. ctx.drawImage(video,1,1,500,500)},150);
  191. ctx.draw();
  192. drawe;
  193. }, false);
  194. });
  195. </script>
  196.  
  197. //JS Webcam Canvas Rainbow Square W\ Custom Text:
  198. <style>
  199. body{
  200. filter: grayscale(100%);
  201.  
  202. }
  203. </style>
  204. <center>
  205. <body bgcolor="black" onmousemove="drawe();" onmousedown="drawe" onchange="drawe" ondoubkeclick="drawe;">
  206. <video id="video" autoplay hidden>
  207. </video>
  208. <canvas id="canvas" onchange="drawe;" topmost=false onchange="drawe;" width="500" height="500" style="opacity:1.0;fillColor:none;">
  209. <script>
  210. var ii=1;
  211. var inn=prompt('Enter:')
  212. var video = document.getElementById("video");
  213. var c = document.getElementById("canvas");
  214. var ctx = c.getContext("2d");
  215. var canvas = document.getElementById('canvas');
  216. var context = canvas.getContext('2d');
  217. var video = document.getElementById('video');
  218. var mediaConfig = { video: true,audio:true};
  219. function drawe(){
  220. var possible = "FABCGDE0123456789";
  221. var text = "";
  222. var canvas = document.getElementById("canvas");
  223. var ctx = canvas.getContext("2d");
  224. for(var i=0; i!=6; i++)
  225. text+=possible.charAt(Math.floor(Math.random()*possible.length))
  226. ctx.fillStyle="#"+text;
  227. ctx.beginPath();
  228. ctx.fillText(""+inn,event.x,event.y)
  229. ctx.fillRect(event.x,event.x,event.y,event.y,250*Math.PI)
  230. //ctx.arc(event.x,event.x,event.y,event.y,250*Math.PI);
  231. ctx.fill();
  232. ctx.topmost=true;
  233. ctx.stroke();
  234. //text='';
  235. }
  236. navigator.mediaDevices.getUserMedia(mediaConfig).then(function(stream) {
  237. if(ctx.width==500){event.mouseMove++;}
  238. video.src = this.window.URL.createObjectURL(stream);
  239. video.play();
  240. video.addEventListener("play", function() {i = window.setInterval(function() {
  241. canvas.style.opacity-=0.1
  242. canvas.style.opacity++;
  243. ctx.topmost=false;
  244. ctx.drawImage(video,1,1,500,500)},150);
  245. ctx.draw();
  246. drawe;
  247. }, false);
  248. });
  249. </script>
  250.  
  251. //JS Canvas Webcam Circle Rect And Text Rainbow FX SRC FINAL:
  252.  
  253. <center>
  254. <body bgcolor="black" onmousemove="drawe();" onmousedown="drawe" onchange="drawe" ondoubkeclick="drawe;">
  255. <video id="video" autoplay hidden>
  256. </video>
  257. <canvas id="canvas" onchange="drawe;" topmost=false onchange="drawe;" width="500" height="500" style="opacity:1.0;fillColor:none; width:500px">
  258. <script>
  259. var ii=1;
  260. var inn=prompt('Enter:')
  261. var video = document.getElementById("video");
  262. var c = document.getElementById("canvas");
  263. var ctx = c.getContext("2d");
  264. var canvas = document.getElementById('canvas');
  265. var context = canvas.getContext('2d');
  266. var video = document.getElementById('video');
  267. var mediaConfig = { video: true,audio:true};
  268. function drawe(){
  269. var possible = "FABCGDE0123456789";
  270. var text = "";
  271. var canvas = document.getElementById("canvas");
  272. var ctx = canvas.getContext("2d");
  273. for(var i=0; i!=6; i++)
  274. text+=possible.charAt(Math.floor(Math.random()*possible.length))
  275. ctx.fillStyle="#"+text;
  276. ctx.beginPath();
  277. ctx.fontStyle="Sans 300px"
  278. ctx.fillText(""+inn,event.x,event.y)
  279. ctx.fillRect(event.y,event.y,event.y,event.y,250*Math.PI)
  280. ctx.arc(event.x,event.x,event.y,event.y,250*Math.PI);
  281. ctx.fill();
  282. ctx.topmost=true;
  283. ctx.stroke();
  284. //text='';
  285. }
  286. navigator.mediaDevices.getUserMedia(mediaConfig).then(function(stream) {
  287. if(ctx.width==500){event.mouseMove++;}
  288. video.src = this.window.URL.createObjectURL(stream);
  289. video.play();
  290. video.addEventListener("play", function() {i = window.setInterval(function() {
  291. canvas.style.opacity-=0.1
  292. canvas.style.opacity++;
  293. ctx.topmost=false;
  294. ctx.drawImage(video,1,1,500,500)},150);
  295. ctx.draw();
  296. drawe;
  297. }, false);
  298. });
  299. </script>
  300. //JS Canvas Webcam Opacity Shapes SRC:
  301.  
  302. <center>
  303. <body bgcolor="black" onmousemove="drawe();" onmousedown="drawe" onchange="drawe" ondoubkeclick="drawe;">
  304. <video id="video" autoplay hidden>
  305. </video>
  306. <canvas id="canvas" onchange="drawe;" topmost=false onchange="drawe;" width="500" height="500" style="opacity:1.0;fillColor:none;">
  307. <script>
  308. var ii=1;
  309. var inn=prompt('Enter:')
  310. var video = document.getElementById("video");
  311. var c = document.getElementById("canvas");
  312. var ctx = c.getContext("2d");
  313. var canvas = document.getElementById('canvas');
  314. var context = canvas.getContext('2d');
  315. var video = document.getElementById('video');
  316. var mediaConfig = { video: true,audio:false};
  317. function drawe(){
  318. var possible = "FABCGDE0123456789";
  319. var text = "";
  320. var canvas = document.getElementById("canvas");
  321. var ctx = canvas.getContext("2d");
  322. for(var i=0; i!=6; i++)
  323. text+=possible.charAt(Math.floor(Math.random()*possible.length))
  324. ctx.fillStyle="#"+text;
  325. ctx.beginPath();
  326. ctx.fillText(""+inn,event.x,event.y)
  327. ctx.fillRect(event.x,event.x,event.y,event.y,250*Math.PI)
  328. //ctx.arc(event.x,event.x,event.y,event.y,250*Math.PI);
  329. ctx.fill();
  330. ctx.topmost=true;
  331. ctx.stroke();
  332. //text='';
  333. }
  334. navigator.mediaDevices.getUserMedia(mediaConfig).then(function(stream) {
  335. if(ctx.width==500){event.mouseMove++;}
  336. video.src = this.window.URL.createObjectURL(stream);
  337. video.play();
  338. video.addEventListener("play", function() {i = window.setInterval(function() {
  339. canvas.style.opacity-=0.1
  340. canvas.style.opacity++;
  341. ctx.topmost=false;
  342. ctx.drawImage(video,1,1,500,500)},150);
  343. ctx.draw();
  344. drawe;
  345. }, false);
  346. });
  347. </script>
  348.  
  349. //JS Canvas Webcam Circle Rect And Text Rainbow FX SRC FINAL:
  350.  
  351. <center>
  352. <body bgcolor="black" onmousemove="drawe();" onmousedown="drawe" onchange="drawe" ondoubkeclick="drawe;">
  353. <video id="video" autoplay hidden>
  354. </video>
  355. <canvas id="canvas" onchange="drawe;" topmost=false onchange="drawe;" width="500" height="500" style="opacity:1.0;fillColor:none; width:500px">
  356. <script>
  357. var ii=1;
  358.  
  359. var video = document.getElementById("video");
  360. var c = document.getElementById("canvas");
  361. var ctx = c.getContext("2d");
  362. var canvas = document.getElementById('canvas');
  363. var context = canvas.getContext('2d');
  364. var video = document.getElementById('video');
  365. var mediaConfig = { video: true,audio:false};
  366. function drawe(){
  367. var possible = "FABCGDE0123456789";
  368. var text = "";
  369. var canvas = document.getElementById("canvas");
  370. var ctx = canvas.getContext("2d");
  371. for(var i=0; i!=6; i++)
  372. text+=possible.charAt(Math.floor(Math.random()*possible.length))
  373. ctx.fillStyle="#"+text;
  374. ctx.beginPath();
  375. ctx.fontStyle="Sans 300px"
  376. ctx.fillText(""+inn,event.x,event.y)
  377. ctx.fillRect(event.y,event.y,event.y,event.y,250*Math.PI)
  378. ctx.arc(event.x,event.x,event.y,event.y,250*Math.PI);
  379. ctx.fill();
  380. ctx.topmost=true;
  381. ctx.stroke();
  382. //text='';
  383. }
  384. navigator.mediaDevices.getUserMedia(mediaConfig).then(function(stream) {
  385. if(ctx.width==500){event.mouseMove++;}
  386. video.src = this.window.URL.createObjectURL(stream);
  387. video.play();
  388. video.addEventListener("play", function() {i = window.setInterval(function() {
  389. canvas.style.opacity=0.2
  390.  
  391. ctx.topmost=false;
  392. ctx.drawImage(video,1,1,500,500)},150);
  393. ctx.draw();
  394. drawe;
  395. }, false);
  396. });
  397. </script>
  398. //JS Canvas FINAL FX:
  399.  
  400. <center>
  401. <body bgcolor="black" onmousemove="drawe();" onmousedown="drawe" onchange="drawe" ondoubkeclick="drawe;">
  402. <video id="video" autoplay hidden>
  403. </video>
  404. <canvas id="canvas" onchange="drawe;" topmost=false onchange="drawe;" width="500" height="500" style="opacity:1.0;fillColor:none;">
  405. <script>
  406. var ii=1;
  407. var inn=prompt('Enter:')
  408. var video = document.getElementById("video");
  409. var c = document.getElementById("canvas");
  410. var ctx = c.getContext("2d");
  411. var canvas = document.getElementById('canvas');
  412. var context = canvas.getContext('2d');
  413. var video = document.getElementById('video');
  414. var mediaConfig = { video: true,audio:false};
  415. function drawe(){
  416. var possible = "FABCGDE0123456789";
  417. var text = "";
  418. var canvas = document.getElementById("canvas");
  419. var ctx = canvas.getContext("2d");
  420. for(var i=0; i!=6; i++)
  421. text+=possible.charAt(Math.floor(Math.random()*possible.length))
  422. ctx.fillStyle="#"+text;
  423. ctx.beginPath();
  424. ctx.fillText(""+inn,event.x,event.y)
  425. ctx.fillRect(event.x,event.x,event.y,event.y,250*Math.PI)
  426. //ctx.arc(event.x,event.x,event.y,event.y,250*Math.PI);
  427. ctx.fill();
  428. ctx.topmost=true;
  429. ctx.stroke();
  430. //text='';
  431. }
  432. navigator.mediaDevices.getUserMedia(mediaConfig).then(function(stream) {
  433. if(ctx.width==500){event.mouseMove++;}
  434. video.src = this.window.URL.createObjectURL(stream);
  435. video.play();
  436. video.addEventListener("play", function() {i = window.setInterval(function() {
  437. canvas.style.opacity-=0.1
  438. canvas.style.opacity++;
  439. ctx.topmost=false;
  440. ctx.drawImage(video,1,1,500,500)},150);
  441. ctx.draw();
  442. drawe;
  443. }, false);
  444. });
  445. </script>
  446.  
  447. //JS Canvas Webcam Circle Rect And Text Rainbow FX SRC FINAL:
  448.  
  449. <center>
  450. <body bgcolor="black" onmousemove="drawe();" onmousedown="drawe" onchange="drawe" ondoubkeclick="drawe;">
  451. <video id="video" autoplay hidden>
  452. </video>
  453. <canvas id="canvas" onchange="drawe;" topmost=false onchange="drawe;" width="500" height="500" style="opacity:1.0;fillColor:none; width:500px">
  454. <script>
  455. var ii=1;
  456.  
  457. var video = document.getElementById("video");
  458. var c = document.getElementById("canvas");
  459. var ctx = c.getContext("2d");
  460. var canvas = document.getElementById('canvas');
  461. var context = canvas.getContext('2d');
  462. var video = document.getElementById('video');
  463. var mediaConfig = { video: true,audio:false};
  464. function drawe(){
  465. var possible = "FABCGDE0123456789";
  466. var text = "";
  467. var canvas = document.getElementById("canvas");
  468. var ctx = canvas.getContext("2d");
  469. for(var i=0; i!=6; i++)
  470. text+=possible.charAt(Math.floor(Math.random()*possible.length))
  471. ctx.fillStyle="#"+text;
  472. ctx.beginPath();
  473. ctx.fontStyle="Sans 300px"
  474. ctx.fillText(""+inn,event.x,event.y)
  475. ctx.fillRect(event.y,event.y,event.y,event.y,250*Math.PI)
  476. ctx.arc(event.x,event.x,event.y,event.y,250*Math.PI);
  477. ctx.fill();
  478. ctx.topmost=true;
  479. ctx.stroke();
  480. //text='';
  481. }
  482. navigator.mediaDevices.getUserMedia(mediaConfig).then(function(stream) {
  483. if(ctx.width==500){event.mouseMove++;}
  484. video.src = this.window.URL.createObjectURL(stream);
  485. video.play();
  486. video.addEventListener("play", function() {i = window.setInterval(function() {
  487. canvas.style.opacity=0.2
  488.  
  489. ctx.topmost=false;
  490. ctx.drawImage(video,1,1,500,500)},150);
  491. ctx.draw();
  492. drawe;
  493. }, false);
  494. });
  495. </script>
  496. pic[p] = i % Math.random()*mr0 *11;
  497. pic[p + 1] = i / mg0 * mg1;
  498. pic[p + 2] = i / mb0 * mb1;
  499. pic[p + 3] = Math.random()+256;
  500. }
  501. }
  502.  
  503. context.putImageData(img, 10, 10);
  504. }
  505. </script>
  506. </body>
  507. </html>
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!