Code to create 3d surface patch using multiple Bezier curves, js

gistfile1.txt

function plot() {
	    ctx.fillRect(0, 0, canvas.width, canvas.height);
	    // draw top line and find the points
	    set[0] = [];
	    set[1] = [];
	    ctx.beginPath();
	    ctx.moveTo(p1[0], p1[1]);
	    drawPoint(p1[0], p1[1]);
	    var c = 0;
	    for(var t = 0; t <= 1; t += .001) {
	    	var x = Math.pow((1-t),3)*p1[0] + 3*t*(1-t)*(1-t)*p2[0] + 3*t*t*(1-t)*p3[0] + t*t*t*(p1[0] + width);
	    	var y = Math.pow((1-t),3)*p1[1] + 3*t*(1-t)*(1-t)*(p1[1] + d1)
	    			+ 3*t*t*(1-t)*(p1[1] +d2) + t*t*t*p1[1];
	    	ctx.lineTo(x,y);
	    	++c;
	    	if (c % 100 == 0) {
	    		set[0][set[0].length] = [x,y];
	    		ctx.stroke();
	    		drawPoint(x,y);
	    		ctx.beginPath();
	    	}
	    	
	    }
	    // draw first verticle line and collect the points 
	    ctx.moveTo(p1[0], p1[1]);
	    var c = 0;
	    for(var t = 0; t <= 1; t += .001) {
	    	var x = Math.pow((1-t),3)*p1[0] + 3*t*(1-t)*(1-t)*(p1[0] + d1)
	    			+ 3*t*t*(1-t)*(p1[0] +d2) + t*t*t*p1[0];
	    	var y = Math.pow((1-t),3)*p1[1] + 3*t*(1-t)*(1-t)*p5[1] + 3*t*t*(1-t)*p6[1] + t*t*t*(p1[1]+height);
	    	ctx.lineTo(x,y);
	    	++c;
	    	if (c % 100 == 0) {
	    		set[1][set[1].length] = [x,y];
	    		ctx.stroke();
	    		drawPoint(x,y);
	    		ctx.beginPath();
	    	}
	    	
	    }
	    // draw all vertical lines in a loop
	    // then draw horizontal lines in a loop
	    for(i = 0; i <= 9; i++) {
		    ctx.moveTo(set[0][i][0], set[0][i][1]);
		    var c = 0;
		    for(var t = 0; t <= 1; t += .001) {
		    	var x = Math.pow((1-t),3)*set[0][i][0] + 3*t*(1-t)*(1-t)*(set[0][i][0] + d1)
		    	+ 3*t*t*(1-t)*(set[0][i][0] + d2) + t*t*t*set[0][i][0];
		    	var y = Math.pow((1-t),3)*set[0][i][1] + 3*t*(1-t)*(1-t)*(180)
		    	+ 3*t*t*(1-t)*(300) + t*t*t*(set[0][i][1] + height);
		    	ctx.lineTo(x,y);
		    	++c;
		    	if (c % 100 == 0) {
		    		set[0][set[0].length] = [x,y];
		    		ctx.stroke();
		    		drawPoint(x,y);
		    		ctx.beginPath();
	    		}
		    }
		}
	    for(i = 0; i <= 9; i++) {
		    ctx.moveTo(set[1][i][0], set[1][i][1]);
		    var c = 0;
		    for(var t = 0; t <= 1; t += .001) {
		    	var y = Math.pow((1-t),3)*set[1][i][1] + 3*t*(1-t)*(1-t)*(set[1][i][1] + d1)
		    	+ 3*t*t*(1-t)*(set[1][i][1] + d2) + t*t*t*set[1][i][1];
		    	var x = Math.pow((1-t),3)*(set[1][i][0]) + 3*t*(1-t)*(1-t)*(180)
		    	+ 3*t*t*(1-t)*(300) + t*t*t*(set[1][i][0] + width);
		    	ctx.lineTo(x,y);
		    	++c;
		    	if (c % 100 == 0) {
		    		set[0][set[0].length] = [x,y];
		    		ctx.stroke();
		    		drawPoint(x,y);
		    		ctx.beginPath();
	    		}
		    }
		}
	    ctx.stroke();
	}