Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
tree: 85e34be7ce
Fetching contributors…

Cannot retrieve contributors at this time

177 lines (162 sloc) 5.721 kb
<!doctype html>
<html lang="en">
<head>
<title>Additive Waves - PJS + WebGL - toxiclibs.js examples</title>
<meta name="author" content="Kyle Phillips">
<link rel="stylesheet" href="css/style.css" type="text/css">
<!-- Date: 2011-01-09 -->
<script type="text/javascript" src="../build/toxiclibs.js"></script>
<script type="text/javascript" src="js/processing.js"></script>
</head>
<body class="container_12">
<header class="grid_12">
<hgroup>
<h1>Additive Waves</h1>
<h2>w/ <a href="http://processingjs.org">Processing.js</a> and <a href="http://khronos.org/webgl">WebGL</a></h2>
</hgroup>
</header>
<script type="text/processing" data-processing-target="myCanvas">
/*
* Copyright (c) 2009 Karsten Schmidt
*
* This library is free software; you can redistribute it and/or
* modify it under the terms of the GNU Lesser General Public
* License as published by the Free Software Foundation; either
* version 2.1 of the License, or (at your option) any later version.
*
* http://creativecommons.org/licenses/LGPL/2.1/
*
* This library is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
* Lesser General Public License for more details.
*
* You should have received a copy of the GNU Lesser General Public
* License along with this library; if not, write to the Free Software
* Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA
*/
import processing.opengl.*;
import toxi.math.waves.*;
toxi.AbstractWave waveX,waveY;
int STEP = 25;
int DIM = 800;
int D2 = DIM/2;
int AMP = 50;
void setup() {
size(940, 600, OPENGL);
noStroke();
waveX=createRandomWave();
waveY=createRandomWave();
textFont(createFont("SansSerif", 14));
}
void draw() {
background(0);
//lights();
pushMatrix();
translate(width*0.5, height*0.4, 0);
rotateX(0.8);
rotateZ(mouseX*0.01);
scale(0.5);
float prevY = waveY.update();
float colPrevY = 0;
waveY.push();
for(int y = 0; y < DIM; y += STEP) {
float valueY = waveY.update();
float colY = valueY * 128 + 128;
waveX.push();
beginShape(TRIANGLE_STRIP);
for(int x = 0; x < DIM; x += STEP) {
float valueX = waveX.update();
float colX = valueX * 128 + 128;
fill(colX, 0, colPrevY);
vertex(x - D2, y - STEP - D2, (valueX + prevY) * AMP);
fill(colX, 0, colY);
vertex(x - D2, y - D2, (valueX + valueY) * AMP);
}
endShape();
waveX.pop();
prevY = valueY;
colPrevY = colY;
}
waveY.pop();
waveX.update();
waveY.update();
popMatrix();
fill(255);
text(waveX.getClass(), 20, 30);
text(waveY.getClass(), 20, 45);
}
void mousePressed() {
waveX=createRandomWave();
waveY=createRandomWave();
}
toxi.AbstractWave createRandomWave() {
toxi.AbstractWave w=null;
toxi.AbstractWave fmod=new toxi.SineWave(0, random(0.005, 0.02), random(0.1, 0.5), 0);
float freq=random(0.005, 0.05);
switch((int)random(7)) {
case 0:
w = new toxi.FMTriangleWave(0, freq, 1, 0, fmod);
break;
case 1:
w = new toxi.FMSawtoothWave(0, freq, 1, 0, fmod);
break;
case 2:
w = new toxi.FMSquareWave(0, freq, 1, 0, fmod);
break;
case 3:
w = new toxi.FMHarmonicSquareWave(0, freq, 1, 0, fmod);
((toxi.FMHarmonicSquareWave)w).maxHarmonics=(int)random(3,30);
break;
case 4:
w = new toxi.FMSineWave(0, freq, 1, 0, fmod);
break;
case 5:
w = new toxi.AMFMSineWave(0, freq, 0, fmod, new toxi.SineWave(0, random(0.01,0.2), random(2, 3), 0));
break;
case 6:
w = new toxi.ConstantWave(random(-1,1));
break;
}
return w;
}
</script>
<canvas class="grid_12" id="myCanvas" width="200" height="200">
your browser doesnt support canvas
</canvas>
<section id="details" class="grid_12">
<aside id="authors" class="grid_6"><p>original example by <a href="http://postspectacular.com">Karsten Schmidt</a><br/>
Toxiclibs ported to js by <a href="http://workofkylephillips.com">Kyle Phillips</a></p>
</aside>
<aside class="grid_6">
<p><strong>Usage:</strong><br>move mouse to rotate view, click to regenerate 2 random waves.</p>
</aside>
<article id="description" class="grid_12">
<p>AdditiveWaves demo is showing how to add 2 randomly chosen waveforms
to create a 3D terrain. One wave is moving along the X axis and is mapped
to the red color channel, the other is propagating along Y and is mapped to
blue. In this demo each wave's frequency is modulated by a secondary wave
(here hardcoded as sine wave). Three of the possible waveforms chosen have
additional options/special behaviour:
<ul><li>AMFMSineWave also modulates the wave's overall amplitude on top of
frequency modulation</li>
<li>FMHarmonicSquareWave's shape can tweaked by adjusting the number of harmonics
used (the higher the more square-like the wave becomes).</li>
<li>ConstantWave is simply representing a fixed value</li></ul>
</p>
<p>Currently available wave forms are:
<ul><li>SineWave, FMSineWave, AMFMSineWave</li>
<li>FMTriangleWave</li>
<li>FMSawtoothWave</li>
<li>FMSquareWave, FMHarmonicSquareWave</li>
<li>ConstantWave</li></ul>
<del><p class="strike">For a demonstration how to use these wave generators as oscillators to
synthesize audio samples, please have a look at the toxiclibs audioutils sub-package
which is being distributed separately.</p></del>
<p>You can also create entirely new waveforms by subclassing the parent AbstractWave
type and overwriting the update() method.</p>
</article>
</section>
<footer class="grid_12"><a href="http://haptic-data.com/toxiclibsjs/">toxiclibs.js</a></footer>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.