Forked from: mrdoob's Water diff(10) Water Remix mrdoob Follow 2010-06-20 02:29:11 License: MIT License Fork0 Fav5 View821 Play Stop Reload Fullscreen Smart Phone Readme JavaScript 173 lines HTML 0 lines CSS 7 lines Water Remix // forked from mrdoob's "Water" http://jsdo.it/mrdoob/tjUi var QUALITY = 2, WIDTH = Math.floor(window.innerWidth / QUALITY), HEIGHT = Math.floor(window.innerHeight / QUALITY), SIZE = WIDTH * HEIGHT, context, image, data, buffer1, buffer2, tempbuffer, isUserInteracting, pointers; init(); setInterval(loop, 1000 / 60); function init() { var container, canvas; container = document.createElement('div'); document.body.appendChild(container); canvas = document.createElement("canvas"); canvas.width = WIDTH; canvas.height = HEIGHT; canvas.style.width = window.innerWidth + "px"; canvas.style.height = window.innerHeight + "px"; container.appendChild(canvas); context = canvas.getContext("2d"); context.fillStyle = "rgb(0, 0, 0)"; context.fillRect (0, 0, WIDTH, HEIGHT); image = context.getImageData(0, 0, WIDTH, HEIGHT); data = image.data; buffer1 = []; buffer2 = []; for (var i = 0; i < WIDTH * HEIGHT; i ++) { buffer1[i] = 0; buffer2[i] = 0; } buffer2[ Math.floor(WIDTH / 2) + 1 + (Math.floor(HEIGHT / 2) * WIDTH)] = 20000; buffer2[ Math.floor(WIDTH / 2) - 1 + (Math.floor(HEIGHT / 2) * WIDTH)] = 20000; document.addEventListener('mousedown', onDocumentMouseDown, false); document.addEventListener('mousemove', onDocumentMouseMove, false); document.addEventListener('mouseup', onDocumentMouseUp, false); document.addEventListener('mouseout', onDocumentMouseOut, false); document.addEventListener('touchstart', onDocumentTouchStart, false); document.addEventListener('touchmove', onDocumentTouchMove, false); document.addEventListener('touchend', onDocumentTouchEnd, false); document.addEventListener('keyup', onDocumentKeyUp, false); } // Event Handlers function onDocumentMouseDown(event) { event.preventDefault(); isUserInteracting = true; pointers = [[event.clientX / QUALITY, event.clientY / QUALITY]]; } function onDocumentMouseMove(event) { pointers = [[event.clientX / QUALITY, event.clientY / QUALITY]]; } function onDocumentMouseUp(event) { isUserInteracting = false; } function onDocumentMouseOut(event) { isUserInteracting = false; } function onDocumentTouchStart(event) { isUserInteracting = true; event.preventDefault(); pointers = []; for (var i = 0; i < event.touches.length; i++) { pointers.push([event.touches[i].pageX / QUALITY, event.touches[i].pageY / QUALITY]); } } function onDocumentTouchMove(event) { event.preventDefault(); pointers = []; for (var i = 0; i < event.touches.length; i++) { pointers.push([event.touches[i].pageX / QUALITY, event.touches[i].pageY / QUALITY]); } } function onDocumentTouchEnd(event) { event.preventDefault(); isUserInteracting = false; } function onDocumentKeyUp(e) { emit( Math.random() * WIDTH, Math.random() * HEIGHT); } // function emit(x, y) { buffer2[ Math.floor(x) + (Math.floor(y) * WIDTH)] = 255; } function loop() { var pixel, i, iMax = (WIDTH * HEIGHT) - WIDTH; if (isUserInteracting) { for (i = 0; i < pointers.length; i++) { emit(pointers[i][0], pointers[i][1]); } } for (i = WIDTH; i < iMax; i ++) { pixel = ((buffer1[i - 1] + buffer1[i + 1] + buffer1[i - WIDTH] + buffer1[i + WIDTH]) >> 1) - buffer2[i]; pixel -= pixel >> 20; buffer2[i] = pixel; pixel = pixel > 255 ? 255 : pixel < 0 ? 0 : pixel; data[ (i * 4) + 1 ] = pixel; data[ ((i + 1) * 4) + 2 ] = pixel; } tempbuffer = buffer1; buffer1 = buffer2; buffer2 = tempbuffer; context.putImageData(image, 0, 0); } Water Remix body { background-color: #000000; margin: 0px; overflow: hidden; } // forked from mrdoob's "Water" http://jsdo.it/mrdoob/tjUi var QUALITY = 2, WIDTH = Math.floor(window.innerWidth / QUALITY), HEIGHT = Math.floor(window.innerHeight / QUALITY), SIZE = WIDTH * HEIGHT, context, image, data, buffer1, buffer2, tempbuffer, isUserInteracting, pointers; init(); setInterval(loop, 1000 / 60); function init() { var container, canvas; container = document.createElement('div'); document.body.appendChild(container); canvas = document.createElement("canvas"); canvas.width = WIDTH; canvas.height = HEIGHT; canvas.style.width = window.innerWidth + "px"; canvas.style.height = window.innerHeight + "px"; container.appendChild(canvas); context = canvas.getContext("2d"); context.fillStyle = "rgb(0, 0, 0)"; context.fillRect (0, 0, WIDTH, HEIGHT); image = context.getImageData(0, 0, WIDTH, HEIGHT); data = image.data; buffer1 = []; buffer2 = []; for (var i = 0; i < WIDTH * HEIGHT; i ++) { buffer1[i] = 0; buffer2[i] = 0; } buffer2[ Math.floor(WIDTH / 2) + 1 + (Math.floor(HEIGHT / 2) * WIDTH)] = 20000; buffer2[ Math.floor(WIDTH / 2) - 1 + (Math.floor(HEIGHT / 2) * WIDTH)] = 20000; document.addEventListener('mousedown', onDocumentMouseDown, false); document.addEventListener('mousemove', onDocumentMouseMove, false); document.addEventListener('mouseup', onDocumentMouseUp, false); document.addEventListener('mouseout', onDocumentMouseOut, false); document.addEventListener('touchstart', onDocumentTouchStart, false); document.addEventListener('touchmove', onDocumentTouchMove, false); document.addEventListener('touchend', onDocumentTouchEnd, false); document.addEventListener('keyup', onDocumentKeyUp, false); } // Event Handlers function onDocumentMouseDown(event) { event.preventDefault(); isUserInteracting = true; pointers = [[event.clientX / QUALITY, event.clientY / QUALITY]]; } function onDocumentMouseMove(event) { pointers = [[event.clientX / QUALITY, event.clientY / QUALITY]]; } function onDocumentMouseUp(event) { isUserInteracting = false; } function onDocumentMouseOut(event) { isUserInteracting = false; } function onDocumentTouchStart(event) { isUserInteracting = true; event.preventDefault(); pointers = []; for (var i = 0; i < event.touches.length; i++) { pointers.push([event.touches[i].pageX / QUALITY, event.touches[i].pageY / QUALITY]); } } function onDocumentTouchMove(event) { event.preventDefault(); pointers = []; for (var i = 0; i < event.touches.length; i++) { pointers.push([event.touches[i].pageX / QUALITY, event.touches[i].pageY / QUALITY]); } } function onDocumentTouchEnd(event) { event.preventDefault(); isUserInteracting = false; } function onDocumentKeyUp(e) { emit( Math.random() * WIDTH, Math.random() * HEIGHT); } // function emit(x, y) { buffer2[ Math.floor(x) + (Math.floor(y) * WIDTH)] = 255; } function loop() { var pixel, i, iMax = (WIDTH * HEIGHT) - WIDTH; if (isUserInteracting) { for (i = 0; i < pointers.length; i++) { emit(pointers[i][0], pointers[i][1]); } } for (i = WIDTH; i < iMax; i ++) { pixel = ((buffer1[i - 1] + buffer1[i + 1] + buffer1[i - WIDTH] + buffer1[i + WIDTH]) >> 1) - buffer2[i]; pixel -= pixel >> 20; buffer2[i] = pixel; pixel = pixel > 255 ? 255 : pixel < 0 ? 0 : pixel; data[ (i * 4) + 1 ] = pixel; data[ ((i + 1) * 4) + 2 ] = pixel; } tempbuffer = buffer1; buffer1 = buffer2; buffer2 = tempbuffer; context.putImageData(image, 0, 0); } body { background-color: #000000; margin: 0px; overflow: hidden; } use an iframe compat browser, deer Play on jsdo.it games Share Embed QR Tag Download Complete! Description どんなゲームですか？ Control Device スマートフォンコントローラー jsdo.it WebSocket Controller» マウス キーボード タッチデバイス Fullscreen 有効 無効 jsdo.it games から削除する Submit Tweet style Design view Code view code <script type="text/javascript" src="http://jsdo.it/blogparts/ctFq/js?view=design"></script><p class="ttlBpJsdoit" style="width: 465px; margin: 0; text-align: right; font-size: 11px;"><a href="http://jsdo.it/mrdoob/ctFq" title="Water Remix">Water Remix - jsdo.it - share JavaScript, HTML5 and CSS</a></p> Tweet twitter Tags visual Favorite by fingaholic tkinjo paq clockmaker tz: visual
