Permalink
Browse files

Merge branch 'master' of https://github.com/mrienstra/cleuler

  • Loading branch information...
mrienstra committed Sep 20, 2012
2 parents d342780 + ad1916f commit 2b9f3b9069ce53aec1d021f29ec882df6f57316c
Showing with 127 additions and 92 deletions.
  1. +127 −92 latest.html
View
@@ -37,16 +37,19 @@
== Cool Values
<< Magic Orb >>
-{"minX":-0.1,"maxX":0.1,"minY":-0.15,"maxY":0.05,"TF":10,"dt":0.001,"clxpo":1,"cloff":0.02,"colorMode":"color","opacity":1,"thicknessMode":"fixed","minThickness":2,"maxThickness":20,"maxSegments":5,"overdraw":2,"animateThickness":0}
+{"minX":-0.1,"maxX":0.1,"minY":-0.15,"maxY":0.05,"TF":10,"dt":0.001,"clxpo":1,"cloff":0.02,"colorMode":"color","opacity":1,"thicknessMode":"fixed","minThickness":2,"maxThickness":20,"maxSegments":2,"overdraw":2,"animateThickness":0,"animateDelay":0}
<< Tim Burton's Trophy >>
-{"minX":-0.1,"maxX":0.1,"minY":-0.15,"maxY":0.05,"TF":10,"dt":0.001,"clxpo":1,"cloff":0.02,"colorMode":"grayscale","opacity":1,"thicknessMode":"random","minThickness":2,"maxThickness":50,"maxSegments":5,"overdraw":2,"animateThickness":0}
+{"minX":-0.1,"maxX":0.1,"minY":-0.15,"maxY":0.05,"TF":10,"dt":0.001,"clxpo":1,"cloff":0.02,"colorMode":"grayscale","opacity":1,"thicknessMode":"random","minThickness":2,"maxThickness":50,"maxSegments":5,"overdraw":2,"animateThickness":0,"animateDelay":0}
<< Bird's Nest >>
-{"minX":-0.001,"maxX":0.001,"minY":-0.001,"maxY":0.001,"TF":10,"dt":0.001,"clxpo":1,"cloff":0.04,"colorMode":"grayscale","opacity":1,"thicknessMode":"fixed","minThickness":2,"maxThickness":10,"maxSegments":5,"overdraw":2,"animateThickness":0}
+{"minX":-0.001,"maxX":0.001,"minY":-0.001,"maxY":0.001,"TF":10,"dt":0.001,"clxpo":1,"cloff":0.04,"colorMode":"grayscale","opacity":1,"thicknessMode":"fixed","minThickness":2,"maxThickness":10,"maxSegments":5,"overdraw":2,"animateThickness":0,"animateDelay":0}
<< The Wipeout >>
-{"minX":-0.001,"maxX":0.001,"minY":-0.001,"maxY":0.001,"TF":10,"dt":0.001,"clxpo":1,"cloff":0.04,"colorMode":"grayscale","opacity":1,"thicknessMode":"fixec","minThickness":2,"maxThickness":10,"maxSegments":5,"overdraw":2,"animateThickness":0}
+{"minX":-0.001,"maxX":0.001,"minY":-0.001,"maxY":0.001,"TF":10,"dt":0.001,"clxpo":1,"cloff":0.04,"colorMode":"grayscale","opacity":1,"thicknessMode":"fixec","minThickness":2,"maxThickness":10,"maxSegments":5,"overdraw":2,"animateThickness":0,"animateDelay":0}
+
+<< Mikey's Default >>
+{"minX":-0.0225,"maxX":0.0075,"minY":-0.0175,"maxY":0.012499999999999997,"TF":10,"dt":0.0001,"clxpo":1,"cloff":0.5,"colorMode":"rainbow","opacity":1,"thicknessMode":"fixed","minThickness":1,"maxThickness":1,"maxSegments":50,"overdraw":1,"animateThickness":0,"animateDelay":0}
*/
@@ -59,97 +62,107 @@
dt: '1 / Math.pow(10, 4)',
clxpo: 1,
cloff: 0.5,
- colorMode: 'color', // supports 'color', 'grayscale', 'black', '#F00', 'rgb(75, 0, 100)'
+ colorMode: 'rainbow', // supports 'color', 'rainbow', 'grayscale', 'black', '#F00', 'rgb(75, 0, 100)'
opacity: 1,
thicknessMode: 'fixed', // supports 'random', 'fixed'
minThickness: 1,
maxThickness: 1,
- maxSegments: 0,
+ maxSegments: 50,
+ maxSteps: 200000, // you may set this to 0 to run forever
overdraw: 1,
- animateThickness: 0
+ animateThickness: 0,
+ animateDelay: 0
},
- delta_t,
first,
+ heartbeat = 0,
l,
x,
y,
+ T = -options.TF,
+ theta = 0,
+ x1 = 0,
+ x2 = 0,
hideAxes = true;
-function RenderClaire() {
- var T = [],
- i = -1 * options.TF,
- theta = [0],
- x1 = [0],
- x2 = [0],
- velocity = 1;
-
- while (i <= options.TF * options.overdraw) {
- T.push(i);
- i += options.dt;
- }
-
- for (i = 1, l = T.length; i < l; i++) {
- theta[i] = theta[i - 1] - Math.PI / (options.cloff * Math.pow(T[i], options.clxpo) + Math.pow(10,-12));
- }
-
- for (i = 1, l = T.length; i < l; i++) {
- delta_t = T[i] - T[i - 1];
- x1[i] = x1[i - 1] + velocity * delta_t * Math.cos(theta[i - 1]);
- x2[i] = x2[i - 1] + velocity * delta_t * Math.sin(theta[i - 1]);
- }
+function eulerSpiral(){
+ x1 += options.dt * Math.cos(theta);
+ x2 += options.dt * Math.sin(theta);
+ T += options.dt;
+ theta -= Math.PI / (options.cloff * Math.pow(T, options.clxpo) + Math.pow(10,-12));
+}
-// put the pen down (initial values) //
- i = 0;
- l = T.length;
-
- if (options.maxSegments === 0) {
- // All in one go
- setStrokeColor();
- setStrokeThickness();
- setLineCap();
- Ctx.beginPath();
- for (i = 0; i < l; i++){
- if (i === 0) {
- x = XC(x1[i]);
- y = YC(x2[i]);
- Ctx.moveTo(x, y);
- } else {
- x = XC(x1[i]);
- y = YC(x2[i]);
- Ctx.lineTo(x, y);
- }
- }
- Ctx.stroke();
- } else {
- // Animate
+function RenderClaire() {
+ l = 2*options.TF/options.dt;
+
+ // Draw all at once
+ if (options.maxSegments === 0) {
+ // initialize the canvas //
+ setStrokeColor();
+ setStrokeThickness();
+ setLineCap();
+ Ctx.beginPath();
+ // compute segments //
+ while (heartbeat < l) {
+ eulerSpiral();
+ if (heartbeat === 0) {
+ x = XC(x1);
+ y = YC(x2);
+ Ctx.moveTo(x, y);
+ } else {
+ x = XC(x1);
+ y = YC(x2);
+ Ctx.lineTo(x, y);
+ }
+ heartbeat++;
+ }
+ // draw segments //
+ Ctx.stroke();
+ } else {
+ // Draw animated
// Todo: use "requestAnimationFrame"
- var drawCanvas = setInterval(function(){
- setStrokeColor();
- setStrokeThickness();
- setLineCap();
- // NOW START DRAWING...
- Ctx.beginPath();
- if (i === 0) {
- x = XC(x1[i]);
- y = YC(x2[i]);
- Ctx.moveTo(x, y);
- i++;
- } else {
- Ctx.moveTo(x, y);
- for (j = 0; j < options.maxSegments; j++){
- x = XC(x1[i]);
- y = YC(x2[i]);
- Ctx.lineTo(x, y);
- i++;
- }
- }
- Ctx.stroke();
- if (isNaN(x)) {
- console.log('done');
- clearInterval(drawCanvas);
- }
- }, 0);
- }
+ var drawCanvas = setInterval(function(){
+ // initialize the canvas //
+ setStrokeColor();
+ setStrokeThickness();
+ setLineCap();
+ Ctx.beginPath();
+ // compute segments //
+ if (heartbeat === 0) {
+ x = XC(x1);
+ y = YC(x2);
+ Ctx.moveTo(x, y);
+ heartbeat++;
+ } else {
+ for (j = 0; j < options.maxSegments; j++){
+ Ctx.moveTo(x, y);
+ x = XC(x1);
+ y = YC(x2);
+ Ctx.lineTo(x, y);
+ eulerSpiral();
+ heartbeat++;
+ }
+ }
+ // draw segments //
+ Ctx.stroke();
+ // end loop when we've hit maxSteps
+ if (options.maxSteps != 0 && heartbeat > options.maxSteps) {
+ console.log('done');
+ clearInterval(drawCanvas);
+ }
+ }, options.animateDelay);
+ }
+}
+
+function rainbowColor(counter, phase, frequency) {
+ if (phase == undefined) phase = 0;
+ if (frequency == undefined) frequency = .3;
+ var colorValues = new Object();
+ center = 128;
+ width = 127;
+ colorValues.red = Math.floor(Math.sin(frequency*counter+2+phase) * width + center);
+ colorValues.green = Math.floor(Math.sin(frequency*counter+0+phase) * width + center);
+ colorValues.blue = Math.floor(Math.sin(frequency*counter+4+phase) * width + center);
+ return colorValues;
}
function setStrokeColor() {
@@ -158,18 +171,24 @@
var i, l, red, green, blue;
if (options.colorMode === 'color') {
- for (i = 0, l = 3; i < l; i++) {
- red = Math.floor(Math.random() * 255);
- green = Math.floor(Math.random() * 255);
- blue = Math.floor(Math.random() * 255);
- if (255 * 3 - (red + green + blue) > 64) break; // Acceptable deviation from background color
- }
- Ctx.strokeStyle = 'rgba(' + red + ',' + green + ',' + blue + ',' + options.opacity + ')';
+ for (i = 0, l = 3; i < l; i++) {
+ red = Math.floor(Math.random() * 255);
+ green = Math.floor(Math.random() * 255);
+ blue = Math.floor(Math.random() * 255);
+ if (255 * 3 - (red + green + blue) > 64) break; // Acceptable deviation from background color
+ }
+ Ctx.strokeStyle = 'rgba(' + red + ',' + green + ',' + blue + ',' + options.opacity + ')';
+ } else if (options.colorMode === 'rainbow') {
+ var colorValues = rainbowColor(heartbeat);
+ red = colorValues.red;
+ green = colorValues.green;
+ blue = colorValues.blue;
+ Ctx.strokeStyle = 'rgba(' + red + ',' + green + ',' + blue + ',' + options.opacity + ')';
} else if (options.colorMode === 'grayscale') {
- red = green = blue = Math.floor(Math.random() * 128);
- Ctx.strokeStyle = 'rgba(' + red + ',' + green + ',' + blue + ',' + options.opacity + ')';
+ red = green = blue = Math.floor(Math.random() * 128);
+ Ctx.strokeStyle = 'rgba(' + red + ',' + green + ',' + blue + ',' + options.opacity + ')';
} else {
- Ctx.strokeStyle = options.colorMode;
+ Ctx.strokeStyle = options.colorMode;
}
}
@@ -196,6 +215,13 @@
Draw();
}
+function initLinks(){
+ $('.colorSwitcher').click(function(e){
+ e.preventDefault();
+ options.colorMode = $(this).attr('data-colorMode');
+ })
+}
+
function populateForm() {
var prop;
for(prop in options) {
@@ -420,7 +446,8 @@
Ctx = null;
Width = Height = $(window).width();
$canvas.attr('width', Width).attr('height', Width);
-
+
+ initLinks();
populateForm();
refresh();
@@ -451,14 +478,22 @@
<label>dt</label> <input type="text" name="dt">
<label>clxpo</label> <input type="text" name="clxpo">
<label>cloff</label> <input type="text" name="cloff">
+ <br>
+ <a href="#" class="colorSwitcher" data-colorMode="color">color</a> |
+ <a href="#" class="colorSwitcher" data-colorMode="rainbow">rainbow</a> |
+ <a href="#" class="colorSwitcher" data-colorMode="grayscale">grayscale</a> |
+ <a href="#" class="colorSwitcher" data-colorMode="black">black</a>
+ <br>
<label>colorMode</label> <input type="text" name="colorMode">
<label>opacity</label> <input type="text" name="opacity">
<label>thicknessMode</label> <input type="text" name="thicknessMode">
<label>minThickness</label> <input type="text" name="minThickness">
<label>maxThickness</label> <input type="text" name="maxThickness">
<label>maxSegments</label> <input type="text" name="maxSegments">
+ <label>maxSteps</label> <input type="text" name="maxSteps">
<label>overdraw</label> <input type="text" name="overdraw">
<label>animateThickness</label> <input type="text" name="animateThickness"><br>
+ <label>animateDelay</label> <input type="text" name="animateDelay"><br>
<input class="btn-primary" type="submit" value="Draw">
</form>
<br>

0 comments on commit 2b9f3b9

Please sign in to comment.