Forked from: matarillo's 2011-08-23 koma-univ diff(54) forked: 2011-08-23 koma-univ matarillo Follow 2011-08-27 09:44:04 License: MIT License Fork0 Fav0 View2285 2011/8/23 たけしのコマ大数学科 車輪Aはゆっくりと反時計回り 車輪Bは車輪Aの7倍の速さで反時計回り 車輪Cは車輪Aの17倍の速さで時計回り 車輪Bは車輪Aの半分の半径 車輪cは車輪Aの3分の1の半径 インラインsvgとjavascriptでアニメーション。IEなら9以降で。 Play Stop Reload Fullscreen Smart Phone Readme JavaScript 64 lines HTML 21 lines CSS 2 lines 2011/8/23 たけしのコマ大数学科 車輪Aはゆっくりと反時計回り 車輪Bは車輪Aの7倍の速さで反時計回り 車輪Cは車輪Aの17倍の速さで時計回り 車輪Bは車輪Aの半分の半径 車輪cは車輪Aの3分の1の半径 インラインsvgとjavascriptでアニメーション。IEなら9以降で。 forked: 2011-08-23 koma-univ // forked from matarillo's "2011-08-23 koma-univ" http://jsdo.it/matarillo/u0gX var Wheel = function(r, om) { this.x = 0; this.y = 0; this.th = 0; this.r = r; this.om = om; this.observers = new Array(); this.notifyAll = function() { for (var i = 0; i < this.observers.length; i++) { if (typeof(this.observers[i].notify) == 'function') { this.observers[i].notify(this); } } }; this.roll = function(parent) { if (parent) { this.x = parent.x + parent.r * Math.cos(parent.th); this.y = parent.y + parent.r * Math.sin(parent.th); } this.th += this.om; this.notifyAll(); }; this.notify = function(subject) { this.roll(subject); }; }; var wheelA = new Wheel(90, -Math.PI / 180); wheelA.x = 200; wheelA.y = 150; var wheelB = new Wheel(wheelA.r / 2, wheelA.om * 7); wheelA.observers.push(wheelB); var wheelC = new Wheel(wheelA.r / 3, wheelA.om * -17); wheelB.observers.push(wheelC); var passenger = new Wheel(0, 0); wheelC.observers.push(passenger); var view = { points: '', pos: function(w){return w.x + ',' + w.y;}, degree: function(w){return 180*w.th/Math.PI;}, set: function(id,n,v){document.getElementById(id).setAttribute(n,v);}, notify: function(subject) { this.set('pa', 'transform', 'translate(' + this.pos(wheelA) + ')'); this.set('da', 'transform', 'rotate(' + this.degree(wheelA) + ')'); this.set('pb', 'transform', 'translate(' + this.pos(wheelB) + ')'); this.set('db', 'transform', 'rotate(' + this.degree(wheelB) + ')'); this.set('pc', 'transform', 'translate(' + this.pos(wheelC) + ')'); this.set('dc', 'transform', 'rotate(' + this.degree(wheelC) + ')'); this.points = this.points + passenger.x + ',' + passenger.y + ' '; this.set('passenger', 'points', this.points); if (-2 * Math.PI < wheelA.th) { window.setTimeout(function() { wheelA.roll(); }, 30); } } }; passenger.observers.push(view); wheelA.roll(); <svg width="400" height="300" style="background-color:white"> <g id="pa" transform="translate(200,150)"> <g id="da" transform="rotate(0)"> <circle cx="0" cy="0" r="90" fill="none" stroke="red" stroke-width="1" /> <line x1="0" y1="0" x2="90" y2="0" fill="none" stroke="red" stroke-width="1" /> </g> </g> <g id="pb" transform="translate(290,150)"> <g id="db" transform="rotate(0)"> <circle cx="0" cy="0" r="45" fill="none" stroke="green" stroke-width="1" /> <line x1="0" y1="0" x2="45" y2="0" fill="none" stroke="green" stroke-width="1" /> </g> </g> <g id="pc" transform="translate(335,150)"> <g id="dc" transform="rotate(0)"> <circle cx="0" cy="0" r="30" fill="none" stroke="blue" stroke-width="1" /> <line x1="0" y1="0" x2="30" y2="0" fill="none" stroke="blue" stroke-width="1" /> </g> </g> <polyline id="passenger" fill="none" stroke="black" stroke-width="2" points=""/> </svg> forked: 2011-08-23 koma-univ body { background-color: #DDDDDD; } canvas { background-color: #FFFFFF; } 2011/8/23 たけしのコマ大数学科 車輪Aはゆっくりと反時計回り 車輪Bは車輪Aの7倍の速さで反時計回り 車輪Cは車輪Aの17倍の速さで時計回り 車輪Bは車輪Aの半分の半径 車輪cは車輪Aの3分の1の半径 インラインsvgとjavascriptでアニメーション。IEなら9以降で。 // forked from matarillo's "2011-08-23 koma-univ" http://jsdo.it/matarillo/u0gX var Wheel = function(r, om) { this.x = 0; this.y = 0; this.th = 0; this.r = r; this.om = om; this.observers = new Array(); this.notifyAll = function() { for (var i = 0; i < this.observers.length; i++) { if (typeof(this.observers[i].notify) == 'function') { this.observers[i].notify(this); } } }; this.roll = function(parent) { if (parent) { this.x = parent.x + parent.r * Math.cos(parent.th); this.y = parent.y + parent.r * Math.sin(parent.th); } this.th += this.om; this.notifyAll(); }; this.notify = function(subject) { this.roll(subject); }; }; var wheelA = new Wheel(90, -Math.PI / 180); wheelA.x = 200; wheelA.y = 150; var wheelB = new Wheel(wheelA.r / 2, wheelA.om * 7); wheelA.observers.push(wheelB); var wheelC = new Wheel(wheelA.r / 3, wheelA.om * -17); wheelB.observers.push(wheelC); var passenger = new Wheel(0, 0); wheelC.observers.push(passenger); var view = { points: '', pos: function(w){return w.x + ',' + w.y;}, degree: function(w){return 180*w.th/Math.PI;}, set: function(id,n,v){document.getElementById(id).setAttribute(n,v);}, notify: function(subject) { this.set('pa', 'transform', 'translate(' + this.pos(wheelA) + ')'); this.set('da', 'transform', 'rotate(' + this.degree(wheelA) + ')'); this.set('pb', 'transform', 'translate(' + this.pos(wheelB) + ')'); this.set('db', 'transform', 'rotate(' + this.degree(wheelB) + ')'); this.set('pc', 'transform', 'translate(' + this.pos(wheelC) + ')'); this.set('dc', 'transform', 'rotate(' + this.degree(wheelC) + ')'); this.points = this.points + passenger.x + ',' + passenger.y + ' '; this.set('passenger', 'points', this.points); if (-2 * Math.PI < wheelA.th) { window.setTimeout(function() { wheelA.roll(); }, 30); } } }; passenger.observers.push(view); wheelA.roll(); <svg width="400" height="300" style="background-color:white"> <g id="pa" transform="translate(200,150)"> <g id="da" transform="rotate(0)"> <circle cx="0" cy="0" r="90" fill="none" stroke="red" stroke-width="1" /> <line x1="0" y1="0" x2="90" y2="0" fill="none" stroke="red" stroke-width="1" /> </g> </g> <g id="pb" transform="translate(290,150)"> <g id="db" transform="rotate(0)"> <circle cx="0" cy="0" r="45" fill="none" stroke="green" stroke-width="1" /> <line x1="0" y1="0" x2="45" y2="0" fill="none" stroke="green" stroke-width="1" /> </g> </g> <g id="pc" transform="translate(335,150)"> <g id="dc" transform="rotate(0)"> <circle cx="0" cy="0" r="30" fill="none" stroke="blue" stroke-width="1" /> <line x1="0" y1="0" x2="30" y2="0" fill="none" stroke="blue" stroke-width="1" /> </g> </g> <polyline id="passenger" fill="none" stroke="black" stroke-width="2" points=""/> </svg> body { background-color: #DDDDDD; } canvas { background-color: #FFFFFF; } use an iframe compat browser, deer Play on jsdo.it games Share Embed QR Tag Download Complete! Description どんなゲームですか？ 2011/8/23 たけしのコマ大数学科 車輪Aはゆっくりと反時計回り 車輪Bは車輪Aの7倍の速さで反時計回り 車輪Cは車輪Aの17倍の速さで時計回り 車輪Bは車輪Aの半分の半径 車輪cは車輪Aの3分の1の半径 インラインsvgとjavascriptでアニメーション。IEなら9以降で。 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/lDCF/js?view=design"></script><p class="ttlBpJsdoit" style="width: 465px; margin: 0; text-align: right; font-size: 11px;"><a href="http://jsdo.it/matarillo/lDCF" title="forked: 2011-08-23 koma-univ">forked: 2011-08-23 koma-univ - jsdo.it - share JavaScript, HTML5 and CSS</a></p> math Tweet twitter Tags math
