Permalink
Browse files

many bugfixes

  • Loading branch information...
hapticdata committed Mar 6, 2011
1 parent 8365e04 commit 931dd340f45fa236931ea7bfb992713d08b927b2
@@ -13,14 +13,15 @@
<script type="text/javascript" src="../src/core/geom/BernsteinPolynomial.js"></script>
<script type="text/javascript" src="../src/core/geom/Vec2D.js"></script>
<script type="text/javascript" src="../src/core/geom/Spline2D.js"></script>
- <script type="text/javascript" src="js/processing.js"></script>
+ <script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
+
<script type="text/javascript">
window.onload = init;
var canvas, ctx,spline;
var points, lastSplineVertices;
- var sampleDistance = 50;
+ var sampleDistance = 75;
function init(){
canvas = document.getElementById('myCanvas');
@@ -30,9 +31,36 @@
spline = new Spline2D();
points = [];
+
+ $("#distance").change(function(){
+ console.log($(this));
+ sampleDistance = $(this).val();
+ updateLabels();
+ });
+
+ $("#tightness").change(function(){
+ spline.setTightness($(this).val());
+ updateLabels();
+ });
+
+ $("#clear").click(function(){
+ ctx.clearRect(0,0,canvas.width,canvas.height);
+ });
+
+ window.onmousemove = function(e){
+ update(e.pageX,e.pageY);
+ }
+ updateLabels();
+
+
}
+ function updateLabels(){
+ $("label[for='distance']").html("sample distance: "+sampleDistance);
+ $("label[for='tightness']").html("spline tightness: "+spline.tightness.toString().slice(0,5));
+ }
+
function update(mouseX,mouseY){
var numP=points.length;
var currP=new Vec2D(mouseX,mouseY);
@@ -97,9 +125,7 @@
}
- window.onmousemove = function(e){
- update(e.pageX,e.pageY);
- }
+
document.ontouchmove = function(e){
e.preventDefault(); //prevents scrolling
@@ -111,6 +137,9 @@
</script>
</head>
<body>
+<label for="distance">distance</label><input id="distance" type="range" min="5" max="200" value="50"/>
+<label for="tightness">spline tightness</label><input id="tightness" type="range" min="0.001", max="0.5" step="0.025" value="0.25" />
+<input id="clear" type="button" value="clear"/>
<canvas id="myCanvas" width="200" height="200">
your browser doesnt support canvas
</canvas>
View
@@ -52,69 +52,127 @@
<body>
<h1>TColor Example</h1>
<script type="application/processing">
+import toxi.color.*;
+import toxi.color.theory.*;
-TColor c1;
-TColor c2;
-
-PFont font;
-
-void setup()
-{
-
- size(200,200);
-
- font = createFont("Arial",14);
- textFont(font);
- textSize(14);
-
- //setup colors
- c1 = TColor.newRGB(1.0,0,0);
- c2 = TColor.newHSV(0.5,1.0,1.0);
-
- //NOTICE IM CHANGING THE COLOR MODE TO BE BETWEEN 0.0 - 1.0
- colorMode(RGB,1.0);
-
- background(0);
-
- fill(c1.red(),c1.green(),c1.blue());
- rect(10,10,25,25);
- fill(c2.red(),c2.green(),c2.blue());
- rect(45,10,25,25);
- fill(1,1,1);
- text("blend between 2 colors",10,55);
- text("darken colors",10,110);
- text("desaturate colors", 10, 170);
+import toxi.math.conversion.*;
+import toxi.geom.*;
+import toxi.math.*;
+import toxi.geom.mesh2d.*;
+import toxi.util.datatypes.*;
+import toxi.util.events.*;
+import toxi.geom.mesh.subdiv.*;
+import toxi.geom.mesh.*;
+import toxi.math.waves.*;
+import toxi.util.*;
+import toxi.math.noise.*;
+
+
+import processing.opengl.*;
+boolean running = true;
+
+float radius = 120;
+float subRadius = 100;
+float numPoints = 50;
+float subCircle = 5; // second number of circles
+float ellipseRadius = 80;
+float subEllipseRadius = 10;
+float rot = 0.0;
+float subRot = 0.0;
+
+boolean step = true;
+
+
+void setup() {
+ size(1000,1000,OPENGL);
+ smooth();
+ hint(ENABLE_OPENGL_4X_SMOOTH);
+ /*
+ a 360 degree rotation around a point is equal to PI * 2 in radians,
+ radians is the unit of measurement to use
+ */
+ float radian = radians(360);
+ println("radians: "+radian); //this prints out the value of TWO_PI
+ float deg = degrees(radian);
+ println("degrees: "+deg); //this prints out 360
+ colorMode(RGB,1.0);
+}
+
+
+void draw() {
+ if(!step)return;
+ if(running){
+ rot += 0.01;
+ subRot += 0.02;
+ }
+ background(0.1);
+ translate(width/2,height/2); // lets put our origin in the center
+ scale(1.5);
+ rotate(rot);
+
+
+ //here we take the full rotation around a circle and divide it by the number of points we want
+ float radialStep = radians(360) / (numPoints);
+ float subStep = radians(360) / (subCircle);
+ //scary stuff
+
+ for(int i=0;i<numPoints;i++) {
+ float currentAngle = i * radialStep;
+ //cos will return a value between -1 and 1, so we multiply that by our desired radius
+ float x = cos(currentAngle) * radius;
+ float y = sin(currentAngle) * radius;
+ TColor c = TColor.newRGB(i/numPoints,0.35,0.35);
+ fill(c.red(),c.green(),c.blue(),0.5);
+ stroke(c.red(),c.green(),c.blue(),0.85);
+ pushMatrix(); //push a new context to our stack
+ translate(x,y); // lets put our origin in the center
+ rotate(subRot);
+ //ellipse(0,0,ellipseRadius,ellipseRadius);
+
+ float lastX = 0, lastY = 0;
+ float firstX = 0, firstY = 0;
+ for(int j=0; j<subCircle;j++) {
+ float r = (subRadius/2) * cos((subRot*1.5));
+ r+= subRadius;
+ float subAngle = j * subStep;
+ float subX = cos(subAngle) * r;
+ float subY = sin(subAngle) * r;
+
+ strokeWeight(1.5);
+ //translate(x,y); // lets put our origin in the center
+ if(j>0)
+ {
+ line(lastX,lastY,subX,subY);
+ }
+ else {
+ firstX = subX;
+ firstY = subY;
+ }
+
+ lastX = subX;
+ lastY = subY;
+ //ellipse(subX,subY,subEllipseRadius,subEllipseRadius);
+
+ }
+ line(lastX,lastY,firstX,firstY);
+ popMatrix(); //remove that new context (this returns us back to the center origin
+ }
+
+// step = false;
}
-void draw()
-{
- stroke(1,1,1);
- float step = ((frameCount%1000)/1000);
- TColor c3 = c1.copy().blend(c2,step);
- fill(c3.red(),c3.green(),c3.blue());
- rect(80,10,110,25);
-
- TColor c1Dark = c1.copy().darken(step);
- TColor c2Dark = c2.copy().darken(step);
- fill(c1Dark.red(),c1Dark.green(),c1Dark.blue());
- rect(10,70,85,25);
- fill(c2Dark.red(),c2Dark.green(),c2Dark.blue());
- rect(105,70,85,25);
-
- TColor c1de = c1.copy().desaturate(step);
- TColor c2de = c2.copy().desaturate(step);
- fill(c1de.red(),c1de.green(),c1de.blue());
- rect(10,130,85,25);
- fill(c2de.red(),c2de.green(),c2de.blue());
- rect(105,130,85,25);
-
- noStroke();
- fill(0,0,0);
- rect(width-100,height-25,100,25);
- noFill();
- fill(1,1,1);
- text("step: "+step,width-80,height-10);
-
+
+void keyPressed(){
+ if(key == 's'){
+ saveFrame(frameCount+".tif");
+ }
+ else if(key == 'r'){
+ running = (running)?false : true;
+ }
+ else
+ {
+ step = true;
+ }
}
</script>
Oops, something went wrong.

0 comments on commit 931dd34

Please sign in to comment.