現在以下のサイトを見てsketch.jsのparticleの実装を行なっています。
http://soulwire.github.io/sketch.js/examples/particles.html
基本的にはコードをコピペしているだけです。
このような実装を例えば
html
1<div class="main"></div>
のbackgroundとして表示するやり方を調べているのですが、なかなか答えが見つかりません。
どなたかお教えしていただくことは可能でしょうか?
なお、開発はrailsで行なっており、現在はhtml.erbのファイルにsketch.jsを読み込ませて、上記サイトのhtmlファイルに記述されているscriptをコピペしている状態です。
追記
現在、railsで開発をしていて、index.html.erbは下記のようになっております。
script
1<canvas id="canvas"></canvas> 2<section id="body"> 3// 中身 4</section> 5 6<script src="../js/sketch.js"></script> 7<script> 8 9 // ---------------------------------------- Particle ---------------------------------------- 10 function Particle(x, y, radius) { 11 this.init(x, y, radius); 12 } 13 Particle.prototype = { 14 init: function (x, y, radius) { 15 this.alive = true; 16 this.radius = radius || 10; 17 this.wander = 0.15; 18 this.theta = random(TWO_PI); 19 this.drag = 0.92; 20 this.color = '#fff'; 21 this.x = x || 0.0; 22 this.y = y || 0.0; 23 this.vx = 0.0; 24 this.vy = 0.0; 25 }, 26 move: function () { 27 this.x += this.vx; 28 this.y += this.vy; 29 this.vx *= this.drag; 30 this.vy *= this.drag; 31 this.theta += random(-0.5, 0.5) * this.wander; 32 this.vx += sin(this.theta) * 0.1; 33 this.vy += cos(this.theta) * 0.1; 34 this.radius *= 0.96; 35 this.alive = this.radius > 0.5; 36 }, 37 draw: function (ctx) { 38 ctx.beginPath(); 39 ctx.arc(this.x, this.y, this.radius, 0, TWO_PI); 40 ctx.fillStyle = this.color; 41 ctx.fill(); 42 } 43 }; 44 // ---------------------------------------- Example ---------------------------------------- 45 var MAX_PARTICLES = 280; 46 var COLOURS = [ 47 '#69D2E7', 48 '#A7DBD8', 49 '#E0E4CC', 50 '#F38630', 51 '#FA6900', 52 '#FF4E50', 53 '#F9D423' 54 ]; 55 var particles = []; 56 var pool = []; 57 var demo = Sketch.create({container: document.getElementById('canvas'), retina: 'auto'}); 58 demo.setup = function () { 59 // Set off some initial particles. 60 var i, 61 x, 62 y; 63 for (i = 0; i < 20; i++) { 64 x = (demo.width * 0.5) + random(-100, 100); 65 y = (demo.height * 0.5) + random(-100, 100); 66 demo.spawn(x, y); 67 } 68 }; 69 demo.spawn = function (x, y) { 70 71 var particle, 72 theta, 73 force; 74 if (particles.length >= MAX_PARTICLES) 75 pool.push(particles.shift()); 76 particle = pool.length 77 ? pool.pop() 78 : new Particle(); 79 particle.init(x, y, random(5, 40)); 80 particle.wander = random(0.5, 2.0); 81 particle.color = random(COLOURS); 82 particle.drag = random(0.9, 0.99); 83 theta = random(TWO_PI); 84 force = random(2, 8); 85 particle.vx = sin(theta) * force; 86 particle.vy = cos(theta) * force; 87 particles.push(particle); 88 }; 89 demo.update = function () { 90 var i, 91 particle; 92 for (i = particles.length - 1; i >= 0; i--) { 93 particle = particles[i]; 94 if (particle.alive) 95 particle.move(); 96 else 97 pool.push(particles.splice(i, 1)[0]); 98 } 99 }; 100 demo.draw = function () { 101 demo.globalCompositeOperation = 'lighter'; 102 for (var i = particles.length - 1; i >= 0; i--) { 103 particles[i].draw(demo); 104 } 105 }; 106 demo.mousemove = function () { 107 var particle, 108 theta, 109 force, 110 touch, 111 max, 112 i, 113 j, 114 n; 115 for (i = 0, n = demo.touches.length; i < n; i++) { 116 touch = demo.touches[i], 117 max = random(1, 4); 118 for (j = 0; j < max; j++) { 119 demo.spawn(touch.x, touch.y); 120 } 121 } 122 }; 123</script>
ですがスケッチが背景に指定されません。どなたか回答お願いします。
回答3件
あなたの回答
tips
プレビュー