Drawing dynamic changing curves/branches

Hi,

Can someone explain the general solution for creating curves/lines which grow and ‘circle’ around at a nice change angle. Like this: http://blog.oaxoa.com/wp-content/examples/showExample.php?f=black-branches.swf&w=800&h=600

This site has some code which is used to draw these brances:

  
  
private function grow():void {  
			power*=decay;  
			r=power;  
	  
			if(r<.3) stopThis();  
			offsets[0].x+=1;  
			offsets[0].y-=.4;  
			  
			offsets[1].x-=.3;  
			offsets[1].y=.1;  
			  
			bd.perlinNoise(perlinSize, perlinSize, 2, seed, false, true, 7, true, offsets);  
			colorValue=bd.getPixel(0,0)>>16;  
			rotSpeed=(-128+colorValue)/255*maxRotSpeed;  
  
			angle+=rotSpeed;  
			angleRadians=angle/180*Math.PI;  
  
			tx+=Math.cos(angleRadians)*power;  
			ty+=Math.sin(angleRadians)*power;  
			  
			line.graphics.lineStyle(r*1.5, 0);  
			line.graphics.lineTo(tx,ty);  
		}  
  

I’m not sure but if I understand this correctly the general idea is this:

  • increase the angle that we use to rotate randomly using perlin noise. Though I’m wondering why he is using the mapping, like: rotSpeed = (-128+colorValue)/255 * maxRotSpeed()?
  • than he converts the angle to radians and use that to get the new position.

I’m wondering how I can let these branches grow using OF w/o using setAutoBackground(false)

Thanks!

Roxlu

I guess that if you want to clear the background you’d need something like a dynamic array for each tentacle which stores the updating coordinates, and then you draw all of these every frame over the top of the new background.

Alternatively, you may be able to draw them to a texture or something with a transparent background, and then draw this over the background each frame. I think there’s some forum threads that mention this technique to optimise font rendering.

Hi,

Thanks!

Though I’m also interested in how I could create those nice curls in the branches. Do I need to change the ‘distance’ like: y + sin(angle)* distance ?

Roxlu

maybe try something like this spiral code?

http://stackoverflow.com/questions/3446-…-iral-in-js

I just adapted that code to a bit of an oF demo to draw a spiral…

testApp.cpp

  
  
//--------------------------------------------------------------  
void testApp::setup(){  
	ofSetBackgroundAuto(false);  
	ofBackground(255, 255, 255);  
	  
	this->rotations = 3;  
	this->maxAngle = PI * 2 * rotations;  
	this->increment = 0.01;  
	this->multiplier = 1.0;  
	this->multiplierIncrement = 0.01;  
	this->cAngle = 0.0;  
}  
  
//--------------------------------------------------------------  
void testApp::draw(){  
	if(this->cAngle <= this->maxAngle){  
		float x = this->multiplier * this->cAngle * cos(this->cAngle);  
		float y = this->multiplier * this->cAngle * sin(this->cAngle);  
		x += ofGetWidth()/2.0;  
		y += ofGetHeight()/2.0;  
		ofSetColor(0, 0, 0);  
		ofCircle(x, y, 2);  
		this->cAngle += this->increment;  
		this->multiplier += this->multiplierIncrement;  
	}  
}  
  

testApp.h

  
  
class testApp : public ofBaseApp{  
	private:  
		int rotations;  
		float maxAngle, increment, multiplier, multiplierIncrement, cAngle;  
  
	public:  
		void setup();  
		void draw();  
}  
  

It looks like the tentacles move outwards on just a randomly shrinking sin curve, then start to curl in their last bit of life. You could use this bit of code for the spiraling part at least. Maybe make a tentacle class that adds its points in update(), then draws them in draw(). Probably would be more efficient if you could get the drawing to texture thing working though.