Javascript help please anyone?

Mason- · 8 Dec 2012 at 04:36

I have the following two code snippets:

Code:

Sun.prototype.kochSegment = function(context, depth, length, angle)
	{
	
		context.lineWidth = 1;
		
		if (depth == 0)
		{
			//draw line
				context.strokeStyle = 'white';
				
				context.moveTo(this.currentX, this.currentY);
				context.lineTo(this.currentX + length*Math.cos(angle),this.currentY + length*Math.sin(angle));
				this.currentX = this.currentX + length*Math.cos(angle);
				this.currentY = this.currentY + length*Math.sin(angle);
				
			
			
		}
		else
		{
			this.kochSegment(context,depth-1, length/3, 0+angle);
			
			this.kochSegment(context,depth-1, length/3, Math.PI/3+angle);
			
			this.kochSegment(context,depth-1, length/3, -Math.PI/3+angle);
			
			this.kochSegment(context,depth-1, length/3, 0+angle);
		}
	}

and

Code:

Sun.prototype.draw = function(context)
	{
		
		context.save();
		context.scale(this.scale,this.scale);
		
		context.beginPath();
		context.fillStyle="ffff00";
		context.strokeStyle = 'white';
		if (this.fractalMode != true)
		{
		context.arc(this.getX(),
                this.getY(),
                40, 
                0, 
                2*Math.PI, 
                false
					);	
		}
		else
		{
			
		context.translate(-this.length/2,this.length/3);
		this.currentX = 0;
		this.currentY = 0;
		this.kochSegment(context,this.depth,this.length,0);
		
		context.translate(Math.cos(Math.PI/3)*this.length,-Math.sin(Math.PI/3)*this.length);
		
		context.rotate(2*Math.PI/3);
		this.currentX = 0;
		this.currentY = 0;
		this.kochSegment(context,this.depth,this.length,0);
		
		context.translate(Math.cos(Math.PI/3)*this.length,-Math.sin(Math.PI/3)*this.length);
		
		context.rotate(2*Math.PI/3);
		this.currentX = 0;
		this.currentY = 0;
		this.kochSegment(context,this.depth,this.length,0);
		}
		context.closePath();
		context.stroke();
		
		
		context.fill();
		
		context.restore();
	}

Now the problem is as follows:
the following code generates this:

This isn't what I want because it's not filling, I know why, because I'm doing a moveTo, then a lineTo in my kochSegment for every line drawn and fill() only fills after a load of lineTos.

So if I move the moveTo, outside to just before I call the first kochSegment in the second code section I get this:

Any help would be appreciated.

GravyMonster · 8 Dec 2012 at 09:34

It would be easier for people to help you if you could provide a working example on jsfiddle

Mason- · 8 Dec 2012 at 12:06

I'm tempted but it's part of my coursework so I don't particularly want it on the internet at the moment.

It's just the fact that:

In the code above I have a load of. moveTo() then lineTo(), then moveTo() then lineTo().

And context.fill() only fills in if it's in the format, moveTo(), lineTo(), lineTo(), lineTo().

So I moved the moveTo() out of the kochSegment function and moved it to just before where it's called for the first time. And it ends up with that strange shape haha.

Mason- · 8 Dec 2012 at 14:01

Fixed it, if anyones interested I can upload the code.

It's a recursive method for drawing a Koch ********* in JS.