商艳涛 / other-demo · Commits

Commit c827dab9bb13c09348d33382a3dffdd610657a14

Authored by Key
1 parent ea3f665e

no message

Inline Side-by-side
Showing 1 changed file with 154 additions and 0 deletions
wave.html 0 → 100644
  View file @c827dab
  1 +<!DOCTYPE html>
  2 +<html>
  3 +
  4 +<head>
  5 + <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  6 + <title>Oscillators</title>
  7 + <style type='text/css'>
  8 + body {
  9 + margin: 0;
  10 + padding: 0;
  11 + overflow: hidden;
  12 + background: #e6e5e5;
  13 + }
  14 + </style>
  15 + <script type='text/javascript'>
  16 + // shim layer with setTimeout fallback
  17 + window.requestAnimFrame = (function() {
  18 + return window.requestAnimationFrame ||
  19 + window.webkitRequestAnimationFrame ||
  20 + window.mozRequestAnimationFrame ||
  21 + function(callback) {
  22 + window.setTimeout(callback, 1000 / 60);
  23 + };
  24 + })();
  25 +
  26 +
  27 + //<![CDATA[
  28 + window.onload = function() {
  29 + /**
  30 + * Wave oscillators by Ken Fyrstenberg Nilsen
  31 + * http://abdiassoftware.com/
  32 + *
  33 + * CC-Attribute 3.0 License
  34 + */
  35 + var ctx = canvas.getContext('2d'),
  36 + w, h;
  37 +
  38 + canvas.width = w = window.innerWidth * 1.1;
  39 + canvas.height = h = window.innerHeight * 1;
  40 +
  41 + var osc1 = new osc(),
  42 + osc2 = new osc(),
  43 + osc3 = new osc(),
  44 + horizon = h * 0.5;
  45 + count = 40,
  46 + step = Math.ceil(w / count),
  47 + //points = new Array(count);
  48 + buffer = new ArrayBuffer(count * 4),
  49 + points = new Float32Array(buffer);
  50 +
  51 + osc1.max = 15; //h * 0.7;
  52 +
  53 + osc2.max = 5;
  54 + osc2.speed = 0.03;
  55 +
  56 + osc2.max = 5;
  57 + osc2.speed = 0.015;
  58 +
  59 + function fill() {
  60 + for (var i = 0; i < count; i++) {
  61 + points[i] = mixer(osc1, osc2, osc3);
  62 + }
  63 + }
  64 + fill();
  65 +
  66 + ctx.lineWidth = 0;
  67 + ctx.strokeStyle = 'rgba(255, 255, 255, 0.6)';
  68 + ctx.fillStyle = 'rgba(255, 255, 255, 0.6)';
  69 +
  70 + function loop() {
  71 +
  72 + var i;
  73 +
  74 + /// move points to the left
  75 + for (i = 0; i < count - 1; i++) {
  76 + points[i] = points[i + 1];
  77 + }
  78 +
  79 + /// get a new point
  80 + points[count - 1] = mixer(osc1, osc2, osc3);
  81 +
  82 + ctx.clearRect(0, 0, w, h);
  83 + //ctx.fillRect(0, 0, w, h);
  84 +
  85 + /// render wave
  86 + ctx.beginPath();
  87 + ctx.moveTo(-5, points[0]);
  88 +
  89 + for (i = 1; i < count; i++) {
  90 + ctx.lineTo(i * step, points[i]);
  91 + }
  92 +
  93 + ctx.lineTo(w, h);
  94 + ctx.lineTo(-5, h);
  95 + ctx.lineTo(-5, points[1]);
  96 +
  97 + ctx.stroke();
  98 + ctx.fill();
  99 + }
  100 +
  101 + /// oscillator object
  102 + function osc() {
  103 +
  104 + this.variation = 0.4;
  105 + this.max = 150;
  106 + this.speed = 0.02;
  107 +
  108 + var me = this,
  109 + a = 0,
  110 + max = getMax();
  111 +
  112 + this.getAmp = function() {
  113 +
  114 + a += this.speed;
  115 +
  116 + if (a >= 2.0) {
  117 + a = 0;
  118 + max = getMax();
  119 + }
  120 +
  121 + return max * Math.sin(a * Math.PI);
  122 + }
  123 +
  124 + function getMax() {
  125 + return Math.random() * me.max * me.variation +
  126 + me.max * (1 - me.variation);
  127 + }
  128 +
  129 + return this;
  130 + }
  131 +
  132 + function mixer() {
  133 + var d = arguments.length,
  134 + i = d,
  135 + sum = 0;
  136 + if (d < 1) return 0;
  137 + while (i--) sum += arguments[i].getAmp();
  138 + return sum / d + horizon;
  139 + }
  140 +
  141 + (function animloop() {
  142 + requestAnimFrame(animloop);
  143 + loop();
  144 + })();
  145 +
  146 + } //]]>
  147 + </script>
  148 +</head>
  149 +
  150 +<body>
  151 + <canvas id="canvas"></canvas>
  152 +</body>
  153 +
  154 +</html>
... ...