Display a bézier curve in the browser
39240 points (190 chars)

&lt;script&gt;P='&lt;svg&gt;&lt;path stroke=red d=M'+X[n]+','+Y[n]
for(t=N=99;t--;P+='L'+x+','+y)for(x=y=i=0,z=Math.pow(1-t/N,n);i&lt;=n;z*=t/(N-t)*(n-i)/++i)x+=z*X[i],y+=z*Y[i]
document.write(P+'&gt;')&lt;/script&gt;


Input is supplied in three variables: X and Y hold the coordinates, and n holds the degree of the polynomial. If more coordinates are supplied than are needed, the surplus ones are ignored. The line is stroked in red and filled in black.

This example draws substantially from the existing ones, but with an improvement of 40% in character count over the current best character count I think it's worth a separate answer.

Demo: http://jsfiddle.net/MBCGJ/7/

This is stretching the flexibility of the rules too far IMO, but three characters can be saved by making N a "fineness" parameter which must be initialised along with the input coordinates and degree.

Also, Chrome at least doesn't care about closing the path element at all, which allows saving the 4 chars +'&gt;', so if that works cross-platform and the fineness parameter abuse is allowed this can go down to 183 chars.



The preferred way of rendering Bézier curves is, of course, adaptive subdivision using the de Casteljau algorithm. Unfortunately this uses more characters because it's necessary to do a test to decide whether to subdivide and then to do a moderate amount of work for the subdivision itself. Currently I'm at 371 chars, although I think this could be reduced with an explicit stack.

&lt;script&gt;P='&lt;svg&gt;&lt;path stroke=red d=M'+X[0]+','+Y[0]
function Z(A,B,E,F){function d(p,q){return(t=A[p]-A[q])*t+(t=B[p]-B[q])*t}for(e=i=0;++i&lt;n;e|=b+c-d(n,0)+Math.sqrt(3.9*b*c)&gt;0)b=d(i,0),c=d(n,i)
for(E=[],F=[i=-1];e?i++&lt;n||Z(E,F)|Z(A,B):0;)for(E[i]=A[0],F[i]=B[j=0];j&lt;n-i;B[j]=(B[j]+B[++j])/2)A[j]=(A[j]+A[j+1])/2
P+='L'+A[n]+','+B[n]}Z(X,Y)
document.write(P+'&gt;')&lt;/script&gt;


The figure 3.9 in the middle there is the quality parameter, which must be less than 4 to avoid infinite recursion. The closer it gets to 4, the better the quality.

http://jsfiddle.net/FrJLn/2/