Star Generator Update

Leave a comment

This app extends a previous one with the addition of a gradient fill.

starGen2Text

Click to Try

This is the text:

<!DOCTYPE html>
<html>
<head>
<title>Star Generator</title>
<style>
body {margin-left:0;margin-right:0;font:normal normal normal 15px Arial;}
a{ text-decoration: }:link { color: rgb(0, 0, 255) }:visited {color :rgb(100, 0,100) }:hover { }:active { }
svg{position: absolute; width: 100%; height: 85%; left: 0; top: 50px; border: 1px solid black}
input{width: 100px}
#c1{width: 20px}
textarea{position: absolute; left: 800px; top: 50px; width: 500px; height: 85%}
</style>

</head>
<body>
<input type=”text” id=”t1″ style = “top: 0″ name=”t1″ value=”sides” onclick=’document.getElementById(“t1”).value = “”;’ /> <input type=”text” id=”t2″ style = “top: 0″ name=”t2″ value=”size” onclick=’document.getElementById(“t2”).value = “”;’ /> <input type=’color’ id=’color1′ value= simple color /> <input type=”text” id=”t4″ style = “top: 0″ name=”t4″ value=”none” onclick=’document.getElementById(“t4”).value = “”;’ /> <input type=”text” id=”t3″ style = “top: 0″ name=”t3″ value=”stroke size” onclick=’document.getElementById(“t3”).value = “”;’ /> <input type=’color’ id=’color2′ value= simple color /> <input type=”checkbox” id=”c1″ value=”” /><span>GradientFill</span> <input type=”button” id=”b1″ style = “top: 0″ name=”b1″ value=”Save” onclick=’sve();’ /> <textarea id=”ta”></textarea>

<svg id = “canvas” ></svg>

<script type=’text/javascript’>
var ang = 0; var px = []; var py = []; var l = 100; var px0 = 300; var py0 = 300; var pts = “”; var sids = 0; var sw = 0;
var posX;var posY; var cnt = 0;
document.getElementById(“ta”).style.left = (screen.width – 500) + “px”;

function sve() {
document.getElementById(“ta”).focus();
document.getElementById(“ta”).select();
success = document.execCommand(“copy”);
}

var IE = document.all?true:false;

document.onclick = getMouse2;

function getMouse2(e) {
if (IE) {
posX = event.clientX + document.body.scrollLeft;
posY = event.clientY + document.body.scrollTop;
}
else {
posX = e.pageX -10;
posY = e.pageY + 10;
}
if (posY > 100) poly();
}

function poly() {
var colr;
if (document.getElementById(“c1”).checked) {
cnt ++;
document.getElementById(“canvas”).innerHTML += ‘<defs><radialGradient id=”gradient’ + cnt + ‘” cx=”50%” cy=”50%” r=”50%” fx=”50%” fy=”50%”><stop offset=”0%” style=”stop-color:’+ document.getElementById(“color1″).value + ‘;stop-opacity:0″/><stop offset=”100%” style=”stop-color:’+ document.getElementById(“color2”).value + ‘;stop-opacity:1″/></radialGradient></defs>\n’;
document.getElementById(“ta”).value = document.getElementById(“canvas”).innerHTML;
colr = “url(#gradient” + cnt + “)”;
}
px0 = posX + 10;
py0 = posY – 60;
sids = parseInt(document.getElementById(“t1”).value);
pts = “”;
l = parseInt(document.getElementById(“t2”).value);
if (document.getElementById(“t4”).value != “none”) {
if (! document.getElementById(“c1”).checked) colr = document.getElementById(“color1”).value;
} else if (document.getElementById(“c1”).checked) {
colr = “url(#gradient” + cnt + “)”;
} else {
colr = “none”;
}
var strokecolor = document.getElementById(“color2”).value;
sw = parseInt(document.getElementById(“t3”).value);
ang = parseInt(180/sids);

if (sids % 2 == 1) {
for (var j = 1;j <=sids; j ++) {
var dx = px0 + l * (Math.sin( (j * 720/sids + ang) * (Math.PI/180)));
var dy = py0 + l * (Math.cos( (j * 720/sids + ang) * (Math.PI/180)));
if (j > 0) {
px[j] =parseInt(dx);
py[j] = parseInt(dy);
}
pts = pts + px[j] + “,” + py[j] + ” ” ;
}
document.getElementById(“canvas”).innerHTML +='<polygon points=”‘ + pts + ‘” style=”fill: ‘ + colr + ‘; stroke:’ + strokecolor + ‘; stroke-width:’ + sw + ‘” />\n\n’ ;
document.getElementById(“ta”).value = document.getElementById(“canvas”).innerHTML;
} else {
pts = “”;
ang = 360/sids;
for (var j = 1;j <=sids/2; j ++) {
var dx = px0 + l * (Math.sin( (j * 720/sids + ang) * (Math.PI/180)));
var dy = py0 + l * (Math.cos( (j * 720/sids + ang) * (Math.PI/180)));
if (j > 0) {
px[j] =parseInt(dx);
py[j] = parseInt(dy);
}
pts = pts + px[j] + “,” + py[j] + ” ” ;
}
document.getElementById(“canvas”).innerHTML +='<polygon points=”‘ + pts + ‘” style=”fill: ‘ + colr + ‘; stroke:’ + strokecolor + ‘; stroke-width:’ + sw + ‘” />\n’;
pts = “”;
ang += 360/sids;
for (var j = 1;j <=sids/2; j ++) {
var dx = px0 + l * (Math.sin( (j * 720/sids + ang) * (Math.PI/180)));
var dy = py0 + l * (Math.cos( (j * 720/sids + ang) * (Math.PI/180)));
if (j > 0) {
px[j] =parseInt(dx);
py[j] = parseInt(dy);
}
pts = pts + px[j] + “,” + py[j] + ” ” ;
}
document.getElementById(“canvas”).innerHTML +='<polygon points=”‘ + pts + ‘” style=”fill: ‘ + colr + ‘; stroke:’ + strokecolor + ‘; stroke-width:’ + sw + ‘” />\n\n’;
document.getElementById(“ta”).value = document.getElementById(“canvas”).innerHTML;
}

}
</script>
</body>
</html>

This is the code to generate the gradient:
if (document.getElementById(“c1”).checked) {
cnt ++;
document.getElementById(“canvas”).innerHTML += ‘<defs><radialGradient id=”gradient’ + cnt + ‘” cx=”50%” cy=”50%” r=”50%” fx=”50%” fy=”50%”><stop offset=”0%” style=”stop-color:’+ document.getElementById(“color1″).value + ‘;stop-opacity:0″/><stop offset=”100%” style=”stop-color:’+ document.getElementById(“color2”).value + ‘;stop-opacity:1″/></radialGradient></defs>\n’;
document.getElementById(“ta”).value = document.getElementById(“canvas”).innerHTML;
colr = “url(#gradient” + cnt + “)”;
}

It also copies the code to the clipboard on clicking the save button:
function sve() {
document.getElementById(“ta”).focus();
document.getElementById(“ta”).select();
success = document.execCommand(“copy”);
}

Leave a comment