123 lines
4.1 KiB
HTML
123 lines
4.1 KiB
HTML
<html>
|
|
<head></head>
|
|
<body>
|
|
<canvas id="scene" width="800" height="800" style="width:800px;height:800px;border:1px solid #000;">
|
|
</canvas>
|
|
<script type="text/javascript">
|
|
//http://www.mathopenref.com/triggraphsine.html
|
|
var width = 800;
|
|
var height = 800;
|
|
var x = 1; // # start at left of screen
|
|
var y = height / 2; // # middle of the screen
|
|
var t = 1;
|
|
|
|
var sample_rate = width; // sample rate
|
|
|
|
var frequency = 2.0; // The frequency of a sine wave is the number of complete cycles that happen every second.
|
|
var amplitude = 20.0; // how many pixels tall the waves with rise/fall.
|
|
var velocity = parseFloat(width); //
|
|
var wavelength = velocity / frequency; //λ
|
|
|
|
var pi2 = Math.PI * 2.0;
|
|
var pi2_frequency = pi2 * frequency;
|
|
|
|
function* timeloop(wavelength=100, multiplyer=0.1){
|
|
/* looped time, instead of continuosly counting up
|
|
# we just repeat once one wavelength has been travelled*/
|
|
var a = 0;
|
|
while (true){
|
|
if (a > wavelength)
|
|
a = 0;
|
|
a += multiplyer;
|
|
yield a;
|
|
}
|
|
}
|
|
|
|
function wave_point(time, x, y, amplitude, frequency, sample_rate){
|
|
new_y = y + amplitude * Math.cos((pi2_frequency * ((x + time) / sample_rate)));
|
|
return [parseInt(x), parseInt(new_y)];
|
|
}
|
|
|
|
|
|
var c = document.getElementById("scene");
|
|
var ctx = c.getContext("2d");
|
|
var img = new Image();
|
|
img.src = 'icon.png';
|
|
var timestep = timeloop(wavelength=wavelength, multiplyer=6);
|
|
|
|
var rotate = 1;
|
|
|
|
function rotate(ctx, img, x, y, width, height, deg){
|
|
ctx.save();
|
|
var point = [x - width / 2, y - height / 2];
|
|
ctx.translate(point[0], point[1]);
|
|
ctx.rotate(deg * (Math.PI/180));
|
|
|
|
ctx.translate(-point[0], -point[1]);
|
|
ctx.drawImage(img, point[0], point[1], 32, 32);
|
|
ctx.restore();
|
|
}
|
|
|
|
ctx.lineWidth = 10;
|
|
|
|
// set line color
|
|
ctx.strokeStyle = '#ff0000';
|
|
|
|
setInterval(function(){
|
|
ctx.clearRect(0, 0, width, height);
|
|
|
|
console.log('draw');
|
|
var points = new Array();
|
|
var count = 0;
|
|
|
|
ctx.beginPath();
|
|
ctx.moveTo(0, height);
|
|
points.push(wave_point(time=t, x=0, height, amplitude=amplitude, frequency=frequency, sample_rate=sample_rate));
|
|
y = height / 2;
|
|
|
|
var wave_points = 10;
|
|
for (x = 0; x < width+wave_points+1; x=x+wave_points) {
|
|
points.push(wave_point(time=t, x=parseFloat(x), y=y, amplitude=amplitude, frequency=frequency, sample_rate=sample_rate));
|
|
ctx.lineTo(points[count][0], parseInt(points[count][1]));
|
|
count += 1;
|
|
}
|
|
point = wave_point(time=t, width, height, amplitude=amplitude, frequency=frequency, sample_rate=sample_rate);
|
|
ctx.lineTo(width, height);
|
|
ctx.fill();
|
|
ctx.stroke();
|
|
|
|
x = (width / 2);
|
|
y = (height / 2);
|
|
var x_center = x + 16;
|
|
var y_center = y + 16;
|
|
//~ rotate = 45;
|
|
var point = [x, y];
|
|
var point = wave_point(time=t, x=parseFloat(x), y=y, amplitude=amplitude, frequency=frequency, sample_rate=sample_rate);
|
|
|
|
ctx.beginPath()
|
|
ctx.arc(400,400,5,0,2*Math.PI);
|
|
ctx.stroke();
|
|
|
|
|
|
ctx.save();
|
|
var r = rotate * (Math.PI / 180);
|
|
ctx.translate(point[0], point[1]-16);
|
|
ctx.rotate(r);
|
|
ctx.drawImage(img, -16, -16, 32, 32);
|
|
ctx.restore();
|
|
|
|
//~ ctx.fill();
|
|
rotate = rotate + 5;
|
|
|
|
ctx.beginPath()
|
|
ctx.arc(400,400,5,0,2*Math.PI);
|
|
ctx.stroke()
|
|
ctx.save();
|
|
|
|
t = timestep.next().value;
|
|
}, 60);
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|