svg + js +logo?

[Seahorsepip Veteran]

http://seapip.com/jslogo/

 

I tried to make a logo program myself that uses svg to draw graphics.

 

It has the most basic functions and it?s written in js so it uses the js syntax for functions, loops, arrays, variables etc.

 

Why did I make this?

I wanted to make a simple way to create graphs like the one below in a easy way.

 

 

Any suggestions and ideas?

I plan to add additional functionality to add classes to drawn objects so they can be used as selector in css and in jquery for interaction(on click etc).

 

 

Functions:

pen(var color);
fill(var color);
forward(int steps);
right(int angle);
left(int angle);
step(int x, int y);
stepA(int x, int y);
arc(int radius, int rotation);
gradient(var id, var color1, var color2, int angle);
text(var text, var color);

 

Variables:

log
rotation
penColor
fillColor
positionX
positionY
height
width

 

Example program below that's animated and technically not very efficient (yes I know about css3 animations :P):

function version() { 
    var side = 100; 
    var i = 0; 
    setInterval(function() { 
        var x = new jslogo("#jslogo"); 
        x.pen("none"); 
        x.step(x.width/2,x.height/2); 
        x.right(i);//Rotation; 
        i += 1; 
        if(i > 360) { 
            i -=360; 
        } 
        x.step(side/-2,side/2); 
        x.pen("hsl("+i+",80%,30%)"); 
        x.fill("hsla("+i+",80%,30%,.2)"); 
        for(y=0;y<4;y++) { 
            x.right(90);x.forward(side); 
        } 
        x.pen("none"); 
        x.fill("none"); 
        x.step(side/2,side/-2); 
        x.left(i); 
        x.text("JSLogo v1.7","hsl("+i+",80%,30%)"); 
    }, 10); 
}

The code for the graph shown above:

var p = [75,57,67,77,71,49,59,41,75,57,67,77]; //Percentage
var h = p.length;
var m = 360/(h*2)*(Math.PI/180); //Graden naar radialen
var k = (width-2)*Math.sin(m);//(width-2) wegens bijkomende breedte van de rand 2x 1px

pen("none");
step(width/2,height-1);
pen("#888");
right(90-180/h)
for(x=0;x<h;x++) {
	right(360/h);
	forward(k);
}
pen("none");
right(-rotation+90-180/h);
for(x=1;x<5;x++) {
	stepA(width/2,(0.5-0.1*x)*(height-1)+2);
	for(y=0;y<h;y++) {
		pen("rgba(0,0,0,.1)");
		right(360/h);
		forward(1-0.2*x*k);
		pen("none");
	}
}
pen("none");
stepA(width/2,height/2);
right(-rotation); //set rotation to 0
for(x=0;x<h;x++) {
	pen("rgba(0,0,0,.1)");
	right(x*360/h);
	forward((width-2)/2);
	pen("none");
	forward(-(width-2)/2);
	right(-rotation); //set rotation to 0
}
for(x=0;x<h;x++) {
	pen("none");
	right(x*360/h);
	forward((p[x]/100)*height/2-1);
	var saveX = positionX;
	var saveY = positionY;
	//fill("hsl("+((x/h)*180+90)+",80%,40%)");
	gradient("learypen"+x,"hsl("+((x/h)*120+180)+",70%,60%)","hsl("+((x/h)*120+180)+",90%,30%)",(x+0.5)*360/h);
	gradient("learyfill"+x,"hsl("+((x/h)*120+180)+",70%,70%)","hsl("+((x/h)*120+180)+",90%,40%)",(x+0.5)*360/h);
	pen("url(#learypen"+x+")");
	fill("url(#learyfill"+x+")");
	forward((p[x]/100)*-height/2+1);
	right(360/h);
	forward((p[x]/100)*height/2-1);
	stepA(saveX,saveY);
	pen("none");
	fill("none");
	stepA(width/2,height/2);
	right(-rotation); //set rotation to 0
	right((x+0.5)*360/h); //set rotation to 0
	forward(0.4*width);
	text(p[x]+"%","rgba(0,0,0,.7)");
	$("#jslogo text").css({"font-weight":"700","font-size":"18px","text-anchor":"middle"});//Text css...
	stepA(width/2,height/2);
	right(-rotation); //set rotation to 0
}

[astropheed Veteran]

Have you not taken a look at D3.js? 

 

Here is a gallery of some things that it can do: https://github.com/mbostock/d3/wiki/Gallery

[Seahorsepip Veteran]

Have you not taken a look at D3.js?

Here is a gallery of some things that it can do: https://github.com/mbostock/d3/wiki/Gallery

I did but d3 requires still quite some knowledge about html and svg syntax. I tried to mimic the logo language instead since it's the simplest visual language that exists that I know of.

D3 is mainly focused on graphs. Logo is not focused at anything at all, which makes it more flexible in my opinion.