Forked from: ble_pikacyu's forked: 加速度センサーの値を視覚的に表示してみる View Diff (1) forked: 加速度センサーの値を視覚的に表示してみる ble_pikacyu Follow 2016-10-24 09:51:24 License: MIT License Fork1 Fav0 View1051 Play Stop Reload Fullscreen Smart Phone Fork tree Readme JavaScript 70 lines HTML 13 lines CSS 34 lines forked: 加速度センサーの値を視覚的に表示してみる // forked from ble_pikacyu's "forked: 加速度センサーの値を視覚的に表示してみる" http://jsdo.it/ble_pikacyu/Iy1m // forked from edo_m18's "加速度センサーの値を視覚的に表示してみる" http://jsdo.it/edo_m18/jc7j (function (win, doc) { 'use strict'; var cv = document.querySelector('canvas'), ctx = cv.getContext('2d'), w = cv.width, h = cv.height, swt = { x: true, y: true, z: true }, color = { x: 'red', y: 'blue', z: 'white' }, i = 0; win.addEventListener('devicemotion', function(e) { var acc = e.accelerationIncludingGravity, cap = ctx.getImageData(0, 0, w, h); ctx.clearRect(0, 0, w, h); ctx.save(); //draw before status. ctx.putImageData(cap, -2, 0); //move to center a canvas. ctx.translate(w / 2, h / 2); //draw acc if (swt.x) { ctx.beginPath(); ctx.arc(0, acc.x * 2, 2, 0, (2 * Math.PI), true); ctx.fillStyle = color.x; ctx.fill(); } if (swt.y) { ctx.beginPath(); ctx.arc(0, acc.y * 2, 2, 0, (2 * Math.PI), true); ctx.fillStyle = color.y; ctx.fill(); } if (swt.z) { ctx.beginPath(); ctx.arc(0, acc.z * 2, 2, 0, (2 * Math.PI), true); ctx.fillStyle = color.z; ctx.fill(); } ctx.restore(); }, false); document.querySelector('#x').addEventListener('click', function () { swt.x = !swt.x; }, false); document.querySelector('#y').addEventListener('click', function () { swt.y = !swt.y; }, false); document.querySelector('#z').addEventListener('click', function () { swt.z = !swt.z; }, false); }(window, document)); <div id="color"> <p class="cx">[X] <span></span></p> <p class="cy">[Y] <span></span></p> <p class="cz">[Z] <span></span></p> </div> <div id="graph"> <canvas id="canvas" width="800" height="300"></canvas> <!-- /#graph --></div> <div id="ctrl"> <button id="x">[X]</button> <button id="y">[Y]</button> <button id="z">[Z]</button> </div> forked: 加速度センサーの値を視覚的に表示してみる canvas { background-color: #000; } #color { position: absolute; color: white; font-size: 11px; } #color p { float: left; } #color .cx span { display: inline-block; width: 10px; height: 10px; background-color: red; } #color .cy span { display: inline-block; width: 10px; height: 10px; background-color: blue; } #color .cz span { display: inline-block; width: 10px; height: 10px; background-color: white; } // forked from ble_pikacyu's "forked: 加速度センサーの値を視覚的に表示してみる" http://jsdo.it/ble_pikacyu/Iy1m // forked from edo_m18's "加速度センサーの値を視覚的に表示してみる" http://jsdo.it/edo_m18/jc7j (function (win, doc) { 'use strict'; var cv = document.querySelector('canvas'), ctx = cv.getContext('2d'), w = cv.width, h = cv.height, swt = { x: true, y: true, z: true }, color = { x: 'red', y: 'blue', z: 'white' }, i = 0; win.addEventListener('devicemotion', function(e) { var acc = e.accelerationIncludingGravity, cap = ctx.getImageData(0, 0, w, h); ctx.clearRect(0, 0, w, h); ctx.save(); //draw before status. ctx.putImageData(cap, -2, 0); //move to center a canvas. ctx.translate(w / 2, h / 2); //draw acc if (swt.x) { ctx.beginPath(); ctx.arc(0, acc.x * 2, 2, 0, (2 * Math.PI), true); ctx.fillStyle = color.x; ctx.fill(); } if (swt.y) { ctx.beginPath(); ctx.arc(0, acc.y * 2, 2, 0, (2 * Math.PI), true); ctx.fillStyle = color.y; ctx.fill(); } if (swt.z) { ctx.beginPath(); ctx.arc(0, acc.z * 2, 2, 0, (2 * Math.PI), true); ctx.fillStyle = color.z; ctx.fill(); } ctx.restore(); }, false); document.querySelector('#x').addEventListener('click', function () { swt.x = !swt.x; }, false); document.querySelector('#y').addEventListener('click', function () { swt.y = !swt.y; }, false); document.querySelector('#z').addEventListener('click', function () { swt.z = !swt.z; }, false); }(window, document)); <div id="color"> <p class="cx">[X] <span></span></p> <p class="cy">[Y] <span></span></p> <p class="cz">[Z] <span></span></p> </div> <div id="graph"> <canvas id="canvas" width="800" height="300"></canvas> <!-- /#graph --></div> <div id="ctrl"> <button id="x">[X]</button> <button id="y">[Y]</button> <button id="z">[Z]</button> </div> canvas { background-color: #000; } #color { position: absolute; color: white; font-size: 11px; } #color p { float: left; } #color .cx span { display: inline-block; width: 10px; height: 10px; background-color: red; } #color .cy span { display: inline-block; width: 10px; height: 10px; background-color: blue; } #color .cz span { display: inline-block; width: 10px; height: 10px; background-color: white; } use an iframe compat browser, deer Play on jsdo.it games Author Share ブログに埋め込む QR Tag Download Complete! Description What kind of game? Control Device Smartphone Controllerjsdo.it WebSocket Controller» Mouse Keyboard Touch Device Fullscreen Activated Inactivated jsdo.it games から削除する Submit Author ble_pikacyu Tweet Default Panel Auto play Screenshot Readme JavaScript HTML CSS Size Width: px Height: px code <script type="text/javascript" src="http://jsdo.it/blogparts/OuyN/js"></script> Acceleration iOS4.2 iPhone smartphones&tablets アニメーション サンプル パーティクル 加速度センサー Discussion Questions on this code? Tags Acceleration iOS4.2 iPhone smartphones&tablets アニメーション サンプル パーティクル 加速度センサー Forked sort by latest page views favorite forked forked: 加速度センサーの値を視覚的に表示してみる ble_pikacyu 10 1064 71/13/34 Acceleration iOS4.2 iPhone smartphones&tablets アニメーション サンプル パーティクル 加速度センサー
