API tools faq
paste
Advertisement
BrU32

JS Canvas Throu The Looking Glass Webcam SRC

BrU32
Nov 3rd, 2016
99
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 6.89 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <body onload="setInterval(doit,101);" bgcolor="black">
  4.  
  5. <canvas id="myCanvas" width="1000" height="1000" style="border:1px solid #black;">
  6. Your browser does not support the HTML5 canvas tag.</canvas>
  7.  
  8. <script>
  9. function doit(){
  10. var c = document.getElementById("myCanvas");
  11. var ctx = c.getContext("2d");
  12. var i=90
  13. var gradient = ctx.createLinearGradient(Math.random()*400-i,Math.random()*400-i, Math.random()*235, Math.random()*235);
  14. gradient.addColorStop("0", "black");
  15. gradient.addColorStop("0.5", "green");
  16. gradient.addColorStop("1.0", "black");
  17.  
  18. ctx.fillStyle = gradient;
  19. ctx.lineWidth = 10;
  20. ctx.fillRect(0, 0, 500,250);
  21. ctx.fillRect(12, 0, 500,250);
  22. }
  23. </script>
  24. </body>
  25. </html>
  26. <center>
  27. <body bgcolor="black" onmousemove="drawe();" onmousedown="drawe" onchange="drawe" ondoubkeclick="drawe;">
  28. <video id="video" autoplay hidden>
  29. </video>
  30. <canvas id="canvas" onchange="drawe;" topmost=false onchange="drawe;" width="500" height="500" style="opacity:1.0;fillColor:none;">
  31. <script>
  32. var ii=1;
  33. var inn=244;
  34. var video = document.getElementById("video");
  35. var c = document.getElementById("canvas");
  36. var ctx = c.getContext("2d");
  37. var canvas = document.getElementById('canvas');
  38. var context = canvas.getContext('2d');
  39. var video = document.getElementById('video');
  40. var mediaConfig = { video: true,audio:false};
  41. function drawe(){
  42. var possible = "FABCGDE0123456789";
  43. var text = "";
  44. var canvas = document.getElementById("canvas");
  45. var ctx = canvas.getContext("2d");
  46. for(var i=0; i!=6; i++)
  47. text+=possible.charAt(Math.floor(Math.random()*possible.length))
  48. ctx.strokeStyle="#"+text;
  49. ctx.moveTo(event.x+4,event.y-4);
  50. ctx.lineTo(event.x+4,event.y-1);
  51. ctx.topmost=true;
  52. text='red';
  53. }
  54. navigator.mediaDevices.getUserMedia(mediaConfig).then(function(stream) {
  55. if(ctx.width==500){event.mouseMove++;}
  56. video.src = this.window.URL.createObjectURL(stream);
  57. video.play();
  58. video.addEventListener("play", function() {i = window.setInterval(function() {
  59.  
  60. canvas.style.opacity+=1.0;
  61. ctx.topmost=false;
  62.  
  63. ctx.fillImage(video,40,40)},0.1);
  64. ctx.draw();
  65. drawe;
  66. }, false);
  67. });
  68. </script>
  69. <script>
  70.  
  71. </script>
  72. <center>
  73. <video id="video" autoplay hidden>
  74. </video> <canvas id="canvas" width="500" height="500" style="border:0px solid">
  75. <script>
  76. var video = document.getElementById("video");
  77. var c = document.getElementById("canvas");
  78. var ctx = c.getContext("2d");
  79. var i=0; var canvas = document.getElementById('canvas');
  80. var context = canvas.getContext('2d');
  81. var video = document.getElementById('video');
  82. var mediaConfig = { video: true,audio:false};
  83. navigator.mediaDevices.getUserMedia(mediaConfig).then(function(stream) {
  84. video.src = this.window.URL.createObjectURL(stream);
  85. video.play(); video.addEventListener("play", function() {
  86. i = window.setInterval(function() {
  87. for(var u=20;u<=250;u++)
  88. ctx.drawImage(video,u,u,u,u)},1);
  89. ctx.scale(1,1)
  90.  
  91. }, false); });
  92.  
  93. </script>
  94. </center>
  95. <style>
  96.  
  97. body{
  98.  
  99. top:0;
  100. left:0;
  101. z-index:$indexbody;
  102.  
  103. filter:invert(1);
  104. }
  105.  
  106. .container{
  107. position: absolute;
  108. z-index:$indexc1;
  109. width: random()*5vmax+1vmax;
  110. height: random()*15vmax+10vmax;
  111. top: 50%;
  112. left: 50%;
  113. animation: spin $timec1 cubic-bezier(1,floor(-4.332),sqrt(.4),7.33) infinite;
  114. mix-blend-mode:color;
  115. }
  116.  
  117. .container2{
  118. position: absolute;
  119. z-index:$indexc2;
  120. width: random()*5vmax+1vmax;
  121. height: random()*10vmax+1vmax;
  122. top: 50%;
  123. left: 50%;
  124. animation: spin2 atan(2)+$timec2 cubic-bezier(1,sqrt(4.33),.1,-3.33) infinite alternate;
  125. mix-blend-mode:color-dodge;
  126. filter:invert(1);
  127. }
  128.  
  129.  
  130. .container3{
  131. position: absolute;
  132. z-index:$indexc3;
  133. width: random()*15vmax+1vmax;
  134. height: random()*10vmax+5vmax;
  135. top: 50%;
  136. left: 50%;
  137. animation: spin sqrt(19)+$timec3 cubic-bezier(1,abs(3.33),.1,atan(-55.33)) infinite reverse;
  138. mix-blend-mode:exclusion;
  139. filter:contrast(1.2);
  140.  
  141. }
  142.  
  143. section {
  144. position: absolute;
  145. z-index:$indexs;
  146. mix-blend-mode:xor;
  147. left: 50%;
  148. bottom: 50%;
  149. width: $width;
  150. height: $height;
  151. clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
  152. transform-origin: 50% 100%;
  153. background-image: url('http://www.lacor.info/gnrl/codepen/we/entrance_pixies_s_house.jpg');
  154. background-size: auto 333% ;
  155. animation: move-background $timebg infinite alternate cubic-bezier(1,abs(.33),.1,-1.33);
  156. }
  157.  
  158. @for $i from 1 through $sections {
  159. .sect-#{$i} {
  160. @if(($i % 2) == 0) {
  161. transform: translateX(-50%) rotateZ($i * $angle * 1deg) ;
  162. }
  163. @else {
  164. transform: translateX(-50%) rotateY(180deg) rotateZ($i * $angle * 1deg) scale(1.6,1.3);
  165. }
  166. }
  167. }
  168.  
  169. @keyframes spin {
  170. 0% {
  171. transform: translateX(-50%) translateY(-50%) rotateZ(0deg);
  172. }
  173. 100% {
  174. transform: translateX(-50%) translateY(-50%) rotateZ(-360deg) ;
  175. filter:brightness(1.5) ;
  176. }
  177. }
  178.  
  179. @keyframes spin2 {
  180. 0% {
  181. transform: translateX(-50%) translateY(-50%) rotateZ(cos(10)+1deg) ;
  182. }
  183. 100% {
  184. transform: translateX(-50%) translateY(-50%) rotateZ(-360deg) scale(1.2,1.2);
  185. filter:brightness(1.2) ;
  186. }
  187. }
  188.  
  189. @keyframes move-background {
  190. 0% {
  191. background-position: 100% 0%;
  192. }
  193.  
  194. 50%{
  195. background-size:96% auto;
  196. filter:hue-rotate(360deg) ;
  197. z-index:$indexcanv;
  198. }
  199. 100% {
  200. background-position: 0% 100%;
  201. }
  202. }
  203.  
  204. canvas {
  205. position:absolute;
  206. top:0;
  207. left:0;
  208. z-index:$indexcanv;
  209. mix-blend-mode:difference;
  210. background-blend-mode:hue;
  211. filter:invert(0) hue-rotate(20deg) contrast(1.0);
  212. width: 100%;
  213. height: 100%;
  214. }
  215. </style>
  216. <video id="video" width="1000" height="1000" autoplay></video>
  217. <canvas id="canvas" width="1000" height="1000"></canvas>
  218. <script>
  219. var canvas = document.getElementById('canvas');
  220. var context = canvas.getContext('2d');
  221. var video = document.getElementById('video');
  222. var mediaConfig = { video: true,audio:true};
  223. navigator.mediaDevices.getUserMedia(mediaConfig).then(function(stream) {
  224. video.src = window.URL.createObjectURL(stream);
  225. video.play();
  226. });
  227. </script>
  228. <canvas id="canvas" width='1000' height='1000'></canvas>
  229.  
  230. <body bgcolor="black" onmousemove="drawe();" onmousedown="drawe"
  231. onchange="drawe" ondoubleclick="drawe;">
  232. <video id="video" autoplay hidden>
  233. </video>
  234. <canvas id="canvas" width="1000"
  235. height="1000"style="opacity:0.0;fillColor:none;">
  236. <script>
  237. var ii=10;
  238.  
  239. var video = document.getElementById("video");
  240. var c = document.getElementById("canvas");
  241. var ctx = c.getContext("2d");
  242. var canvas = document.getElementById('canvas');
  243. var context = canvas.getContext('2d');
  244. var video = document.getElementById('video');
  245. var mediaConfig = { video: true,audio:true};
  246. function drawe(){
  247. }
  248. navigator.mediaDevices.getUserMedia(mediaConfig).then(function(stream) {
  249. video.src = this.window.URL.createObjectURL(stream);
  250. video.play();
  251. ii+=50;
  252. video.addEventListener("play", function() {i = window.setInterval(function() {
  253. canvas.style.opacity+=1.9;
  254. ctx.drawImage(video,i++,i++,Math.random()*473,Math.random()*414)},.1);
  255. ctx.draw();
  256. drawe();
  257. }, false);
  258. });
  259. </script>
  260. </center>
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!