플로팅 요소가있는 JavaScript의 웨이브 시뮬레이션

HTML 캔버스의 새로운 기능. 나는 웨이브 생성을위한 좋은 포인터를 가지고있다. Shovan Dhara 플로팅 요소가있는 JavaScript의 웨이브 시뮬레이션

코드. 그러나 나는이 물결의 상단에 떠 다니는 사각형을 얻고 싶습니다. 모든 포인터가 유용 할 것입니다. 감사합니다. .

PS 아래 찾을 코드 :

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
 
    <title>Oscillators</title> 
 

 
    <style type='text/css'> 
 
    body { 
 
     margin:0; 
 
     padding:0; 
 
     overflow:hidden; 
 
     background:#e6e5e5; 
 
    } 
 
    </style> 
 

 

 

 
<script type='text/javascript'> 
 
// shim layer with setTimeout fallback 
 
window.requestAnimFrame = (function(){ 
 
    return window.requestAnimationFrame  || 
 
      window.webkitRequestAnimationFrame || 
 
      window.mozRequestAnimationFrame || 
 
      function(callback){ 
 
      window.setTimeout(callback, 1000/60); 
 
      }; 
 
})(); 
 
//<![CDATA[ 
 
window.onload=function(){ 
 
/** 
 
* Wave oscillators by Ken Fyrstenberg Nilsen 
 
* http://abdiassoftware.com/ 
 
* 
 
* CC-Attribute 3.0 License 
 
*/ 
 
var ctx = canvas.getContext('2d'), 
 
    w, h; 
 
canvas.width = w = window.innerWidth * 1.1; 
 
canvas.height = h = window.innerHeight * 1; 
 
var osc1 = new osc(), 
 
    osc2 = new osc(), 
 
    osc3 = new osc(), 
 
    horizon = h * 0.5; 
 
    count = 40, 
 
    step = Math.ceil(w/count), 
 
    //points = new Array(count); 
 
    buffer = new ArrayBuffer(count * 4), 
 
    points = new Float32Array(buffer); 
 
osc1.max = 15;//h * 0.7; 
 
osc2.max = 5; 
 
osc2.speed = 0.03; 
 
osc2.max = 5; 
 
osc2.speed = 0.015; 
 
function fill() { 
 
    for(var i = 0; i < count; i++) { 
 
     points[i] = mixer(osc1, osc2, osc3); 
 
    } 
 
} 
 
fill(); 
 
ctx.lineWidth = 20; 
 
ctx.strokeStyle = '#0000'; 
 
ctx.fillStyle = '#1d96d3'; 
 
function loop() { 
 
    var i; 
 
    /// move points to the left 
 
    for(i = 0; i < count - 1; i++) { 
 
     points[i] = points[i + 1]; 
 
    } 
 
    /// get a new point 
 
    points[count - 1] = mixer(osc1, osc2, osc3); 
 
    ctx.clearRect(0, 0, w, h); 
 
    //ctx.fillRect(0, 0, w, h); 
 
    /// render wave 
 
    ctx.beginPath(); 
 
    ctx.moveTo(-5, points[0]); 
 
    for(i = 1; i < count; i++) { 
 
     ctx.lineTo(i * step, points[i]); 
 
    } 
 
    ctx.lineTo(w, h); 
 
    ctx.lineTo(-5, h); 
 
    ctx.lineTo(-5, points[1]); 
 
    ctx.stroke(); 
 
    ctx.fill(); 
 
    ctx.strokeRect(100,h/2,150,100); 
 
} 
 
/// oscillator object 
 
function osc() { 
 
    this.variation = 0.4; 
 
    this.max = 150; 
 
    this.speed = 0.02; 
 
    var me = this, 
 
     a = 0, 
 
     max = getMax(); 
 
    this.getAmp = function() { 
 
     a += this.speed; 
 
     if (a >= 2.0) { 
 
      a = 0; 
 
      max = getMax(); 
 
     } 
 
     return max * Math.sin(a * Math.PI); 
 
    } 
 
    function getMax() { 
 
     return Math.random() * me.max * me.variation + 
 
      me.max * (1 - me.variation); 
 
    } 
 
    return this; 
 
} 
 
function mixer() { 
 
    var d = arguments.length, 
 
     i = d, 
 
     sum = 0; 
 
    if (d < 1) return 0; 
 
    while(i--) sum += arguments[i].getAmp(); 
 
    return sum/d + horizon; 
 
} 
 
(function animloop(){ 
 
    requestAnimFrame(animloop); 
 
    loop(); 
 
})(); 
 
}//]]> 
 
</script> 
 

 

 
</head> 
 
<body> 
 
    <canvas id="canvas"></canvas> 
 

 
</body> 
 

 

 
</html>

출처

2017-04-23 Arvis

I 화면의 폭을 가져다 그때 Y가 소정의 X 좌표 박스에 사용되는 포인트 계산 포인트 수로 나눈 좌표를 기준으로합니다. 포인트는 단지 Y 좌표이므로 포인트의 웨이브 높이입니다. 사람들은 내 계산은 다음과 같습니다

var rectX = 500; 
var rectWidth = 200; 
var rectHeight = 100; 
var centerX = rectX + rectWidth/2; 
var pointToUse = Math.floor(centerX/(w/points.length));

그리고이 같은 상자를 그립니다 :

ctx.strokeRect(rectX, points[pointToUse] - rectHeight, rectWidth, rectHeight);

당신은 더 당신은 또한에 대한 안전 점검을 추가 할 수 있습니다 points[pointToUse] - rectHeight

에 몇 가지를 추가하여 잠수 할 수 있습니다 points.length! = 0 및 (w/points.length)! = 0

작동중인 스 니펫 :

,210

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
 
    <title>Oscillators</title> 
 

 
    <style type='text/css'> 
 
    body { 
 
     margin:0; 
 
     padding:0; 
 
     overflow:hidden; 
 
     background:#e6e5e5; 
 
    } 
 
    </style> 
 

 

 

 
<script type='text/javascript'> 
 
// shim layer with setTimeout fallback 
 
window.requestAnimFrame = (function(){ 
 
    return window.requestAnimationFrame  || 
 
      window.webkitRequestAnimationFrame || 
 
      window.mozRequestAnimationFrame || 
 
      function(callback){ 
 
      window.setTimeout(callback, 1000/60); 
 
      }; 
 
})(); 
 
//<![CDATA[ 
 
window.onload=function(){ 
 
/** 
 
* Wave oscillators by Ken Fyrstenberg Nilsen 
 
* http://abdiassoftware.com/ 
 
* 
 
* CC-Attribute 3.0 License 
 
*/ 
 
var ctx = canvas.getContext('2d'), 
 
    w, h; 
 
canvas.width = w = window.innerWidth * 1.1; 
 
canvas.height = h = window.innerHeight * 1; 
 
var osc1 = new osc(), 
 
    osc2 = new osc(), 
 
    osc3 = new osc(), 
 
    horizon = h * 0.5; 
 
    count = 40, 
 
    step = Math.ceil(w/count), 
 
    //points = new Array(count); 
 
    buffer = new ArrayBuffer(count * 4), 
 
    points = new Float32Array(buffer); 
 
osc1.max = 15;//h * 0.7; 
 
osc2.max = 5; 
 
osc2.speed = 0.03; 
 
osc2.max = 5; 
 
osc2.speed = 0.015; 
 
function fill() { 
 
    for(var i = 0; i < count; i++) { 
 
     points[i] = mixer(osc1, osc2, osc3); 
 
    } 
 
} 
 
fill(); 
 
ctx.lineWidth = 20; 
 
ctx.strokeStyle = '#0000'; 
 
ctx.fillStyle = '#1d96d3'; 
 

 
var rectX = 200; 
 
var rectWidth = 100; 
 
var rectHeight = 50; 
 
var centerX = rectX + rectWidth/2; 
 
var pointToUse = Math.floor(centerX/(w/points.length)); 
 

 
function loop() { 
 
    var i; 
 
    /// move points to the left 
 
    for(i = 0; i < count - 1; i++) { 
 
     points[i] = points[i + 1]; 
 
    } 
 
    /// get a new point 
 
    points[count - 1] = mixer(osc1, osc2, osc3); 
 
    ctx.clearRect(0, 0, w, h); 
 
    //ctx.fillRect(0, 0, w, h); 
 
    /// render wave 
 
    ctx.beginPath(); 
 
    ctx.moveTo(-5, points[0]); 
 
    for(i = 1; i < count; i++) { 
 
     ctx.lineTo(i * step, points[i]); 
 
    } 
 
    ctx.lineTo(w, h); 
 
    ctx.lineTo(-5, h); 
 
    ctx.lineTo(-5, points[1]); 
 
    ctx.stroke(); 
 
    ctx.fill(); 
 
    ctx.strokeRect(rectX, points[pointToUse] - rectHeight, rectWidth, rectHeight); 
 
} 
 
/// oscillator object 
 
function osc() { 
 
    this.variation = 0.4; 
 
    this.max = 150; 
 
    this.speed = 0.02; 
 
    var me = this, 
 
     a = 0, 
 
     max = getMax(); 
 
    this.getAmp = function() { 
 
     a += this.speed; 
 
     if (a >= 2.0) { 
 
      a = 0; 
 
      max = getMax(); 
 
     } 
 
     return max * Math.sin(a * Math.PI); 
 
    } 
 
    function getMax() { 
 
     return Math.random() * me.max * me.variation + 
 
      me.max * (1 - me.variation); 
 
    } 
 
    return this; 
 
} 
 
function mixer() { 
 
    var d = arguments.length, 
 
     i = d, 
 
     sum = 0; 
 
    if (d < 1) return 0; 
 
    while(i--) sum += arguments[i].getAmp(); 
 
    return sum/d + horizon; 
 
} 
 
(function animloop(){ 
 
    requestAnimFrame(animloop); 
 
    loop(); 
 
})(); 
 
}//]]> 
 
</script> 
 

 

 
</head> 
 
<body> 
 
    <canvas id="canvas"></canvas> 
 

 
</body> 
 

 

 
</html>

완벽하게

출처

2017-04-24 03:02:28

작품. 다음 단계는 rect를 x 좌표로 이동하는 것입니다. 나는 이것을 시도하고 나의 대답을 업데이트 할 것이다. 감사 – Arvis

플로팅 요소가있는 JavaScript의 웨이브 시뮬레이션

답변

관련 문제