mirror of
https://git.sleeping.town/mirrors/foxy-moxy
synced 2024-11-22 03:57:43 +00:00
Luke Davis
GitHub
commit
739f2ed2e1
10 changed files with 140 additions and 1919 deletions
444
js/appv0.0.1.js
444
js/appv0.0.1.js
|
|
@ -1,444 +0,0 @@
|
|||
$(document).ready(function(){
|
||||
app.c.init();
|
||||
app.v.init();
|
||||
app.c.listeners();
|
||||
})
|
||||
/////////////////////////////////////////////////////////////////////////////////
|
||||
|
||||
var app={m:{},v:{},c:{}};
|
||||
|
||||
/////////////////////////////////////////////////////////////////////////////////
|
||||
|
||||
|
||||
/////////////////////////////////////////////////////////////////////////////////
|
||||
|
||||
app.c.init=function(){
|
||||
app.m.password=false;
|
||||
app.m.metadata={"name":"Iconic","version":"0.0.2"};
|
||||
var b=app.c.bounds();
|
||||
app.m.genome={};
|
||||
app.m.genome.r=[];
|
||||
app.m.genome.rf=[];
|
||||
app.m.genome.color=[];
|
||||
app.m.genome.lw=[];
|
||||
app.m.genome.steps=[];
|
||||
app.m.genome.incrementMod=[];
|
||||
app.m.genome.n=[];
|
||||
app.m.genome.rotation=[];
|
||||
app.m.genome.fadeColor=[];
|
||||
app.m.genome.fadeRadius=[];
|
||||
};
|
||||
|
||||
app.c.listeners=function(){
|
||||
$("#mitLicense").on("click",function(){
|
||||
$("#license").slideToggle();
|
||||
});
|
||||
|
||||
|
||||
$("input#clear").on("click",function(){
|
||||
$("div#icons").html("");
|
||||
for (var i=0;i<5;i++){
|
||||
var iconWidth=$("input[name=size]:checked").val();
|
||||
iconWidth=parseInt(iconWidth);
|
||||
app.v.icon("div#icons",iconWidth);
|
||||
//console.log(iconWidth);
|
||||
}
|
||||
});
|
||||
|
||||
/*
|
||||
$(window).resize(function(){
|
||||
$("body").fadeOut(function(){
|
||||
$("body").html("");
|
||||
app.c.init();
|
||||
app.v.init();
|
||||
$("body").fadeIn();
|
||||
})
|
||||
});
|
||||
*/
|
||||
};
|
||||
|
||||
app.c.bounds=function(){
|
||||
var b=app.m.bounds={};
|
||||
b.left=0;
|
||||
b.top=0;
|
||||
b.right=$(document).width();
|
||||
b.bottom=$(document).height();
|
||||
b.centerX=b.right/2;
|
||||
b.centerY=b.bottom/2;
|
||||
|
||||
return b;
|
||||
};
|
||||
|
||||
/////////////////////////////////////////////////////////////////////////////////
|
||||
|
||||
app.v.init=function(){
|
||||
app.v.style();
|
||||
var b=app.m.bounds;
|
||||
var d="";
|
||||
d+="<input type='text' value='Iconic'>";
|
||||
d+="<div id='radios'><form actio=''>";
|
||||
|
||||
d+="<table><tr>";
|
||||
d+="<td><input type='radio' name='size' value='1024'><br>1024</td>";
|
||||
d+="<td><input type='radio' name='size' value='512' ><br>512</td>";
|
||||
d+="<td><input type='radio' name='size' value='144' checked><br>144</td>";
|
||||
d+="<td><input type='radio' name='size' value='72' ><br>72</td>";
|
||||
d+="</tr></table>";
|
||||
d+="</form></div>";
|
||||
d+="<div id='icons'></div>";
|
||||
d+="<div id='controlls'>";
|
||||
d+="<input type='button' value='more' id='clear'></input>";
|
||||
d+="</div>";
|
||||
d+="<p>click the icons you save below for a png version</p>"
|
||||
d+="<div id='saved'></div>";
|
||||
d+=davis.license();
|
||||
$("body").html(d);
|
||||
var iconWidth=$("input[name=size]:checked").val();
|
||||
iconWidth=parseInt(iconWidth);
|
||||
//console.log(iconWidth);
|
||||
for (var i=0;i<5;i++){
|
||||
app.v.icon("div#icons",iconWidth);
|
||||
}
|
||||
};
|
||||
|
||||
app.v.icon=function(target,width){
|
||||
app.m.text=$("input[type=text]").val().split("")[0];
|
||||
|
||||
var width=width || 144;
|
||||
var height=width;
|
||||
var target=target || "body";
|
||||
var id=davis.randomWord()+davis.random(100);
|
||||
var c=app.v.canvas(width,height,id);
|
||||
$(target).append(c);
|
||||
$("div#icons canvas#"+id).on("click",function(){
|
||||
|
||||
$("div#saved").prepend(this);
|
||||
if ($("div#icons > canvas").size()<5){
|
||||
var iconWidth=$("input[name=size]:checked").val();
|
||||
iconWidth=parseInt(iconWidth);
|
||||
app.v.icon("div#icons",iconWidth);
|
||||
///console.log(iconWidth);
|
||||
}
|
||||
|
||||
$("div#saved canvas#"+id).on("click",function(){
|
||||
var dataURL = this.toDataURL();
|
||||
if (!window.open(dataURL)) {
|
||||
document.location.href = dataURL;
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
//send it to the database
|
||||
if (app.m.password!=false){
|
||||
var dataURL=document.getElementById(id).toDataURL();
|
||||
$.ajax({
|
||||
type: "POST",
|
||||
url: "http://peopleofthebit.com/luke_davis/labs/iconic/php/createRecord.php",
|
||||
data: {image:dataURL,password:app.m.password}
|
||||
}).done(function(o) {
|
||||
//console.log('saved');
|
||||
});
|
||||
}
|
||||
|
||||
});
|
||||
c=document.getElementById(id);
|
||||
var ctx=c.getContext("2d");
|
||||
|
||||
app.v.radial(ctx,width,height);
|
||||
davis.maybe(1,3,function(){
|
||||
ctx.clearRect(0, 0, width, height);
|
||||
app.v.textIcon(ctx,width,height);
|
||||
})
|
||||
|
||||
//app.v.textIcon(ctx,width,height);
|
||||
//app.v.bilateral(ctx,width,height);
|
||||
//app.v.radial(ctx,width,height);
|
||||
|
||||
};
|
||||
|
||||
|
||||
app.v.textIcon=function(ctx,width,height){ctx.beginPath();
|
||||
|
||||
var color=davis.randomColor();
|
||||
var gradient=ctx.createLinearGradient(0,0,0,height);
|
||||
gradient.addColorStop(0,color);
|
||||
gradient.addColorStop(1,davis.pick([color,davis.randomColor(),"#000","#fff",davis.alpha(color,0)]));
|
||||
ctx.fillStyle=gradient;
|
||||
ctx.fillRect(0,0,width,height);
|
||||
|
||||
|
||||
for (var j=0;j<davis.random(4);j++){
|
||||
var r=davis.random(width/2);
|
||||
var rf=davis.random(width/2);
|
||||
var color=davis.randomColor();
|
||||
davis.maybe(2,3,function(){color=davis.randomColor("grey");});
|
||||
var lw=1+davis.random(width/10);
|
||||
var steps=1+davis.random(30);
|
||||
var incrementMod=davis.random(3)*90;
|
||||
var n=davis.random(6);
|
||||
var rotation=90*davis.random(3);
|
||||
var fadeColor=davis.pick(["rgba(0,0,0,0)","rgba(255,255,255,0)"]);
|
||||
var fadeRadius=Math.random();
|
||||
davis.maybe(1,5,function(){fadeRadius=0;});
|
||||
davis.maybe(1,5,function(){fadeRadius=false;});
|
||||
for (var i=0;i<steps;i++){
|
||||
var increment=i*360/steps;
|
||||
var x=geo.getPoint(width/2,height/2,rf,increment+incrementMod).x2;
|
||||
var y=geo.getPoint(width/2,height/2,rf,increment+incrementMod).y2;
|
||||
|
||||
app.v.circle({
|
||||
n:n,
|
||||
gradient:true,
|
||||
context:ctx,
|
||||
x:x,
|
||||
y:y,
|
||||
r:r,
|
||||
rotation:rotation,
|
||||
lineWidth:lw,
|
||||
color:color,
|
||||
fadeColor:fadeColor,
|
||||
fadeRadius:fadeRadius
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
pattern=ctx.createPattern(ctx.canvas,"no-repeat");
|
||||
ctx.clearRect(0, 0, width, height);
|
||||
|
||||
|
||||
app.v.ngon({
|
||||
n:3+davis.random(9),
|
||||
gradient:true,
|
||||
context:ctx,
|
||||
x:width/2,
|
||||
y:height/2,
|
||||
r:width/4+davis.random(width/4),
|
||||
fill:pattern,
|
||||
lineWidth:davis.random(width/15)
|
||||
});
|
||||
|
||||
var x=width/2;
|
||||
var y=height/2;
|
||||
var fonts=[
|
||||
"Verdana, Geneva, sans-serif",
|
||||
"Courier, monospace",
|
||||
"Monaco, monospace",
|
||||
"Helvetica, sans-serif",
|
||||
"Impact, Charcoal, sans-serif",
|
||||
"cursive, sans-serif",
|
||||
"'Arial Black', Gadget, sans-serif",
|
||||
"'Times New Roman', Times, serif",
|
||||
"'Palatino Linotype', 'Book Antiqua', Palatino, serif"
|
||||
];
|
||||
var text=app.m.text;
|
||||
if (typeof text!="string"){
|
||||
text=" ";
|
||||
}
|
||||
davis.maybe(1,4,function(){text=text.toUpperCase();});
|
||||
davis.maybe(1,4,function(){text=text.toLowerCase();});
|
||||
ctx.textAlign = "center";
|
||||
ctx.textBaseline = "middle";
|
||||
ctx.font="900 "+((width/4)+davis.random(width/4))+"px "+davis.pick(fonts);
|
||||
//ctx.fillStyle=pattern;
|
||||
ctx.fillStyle="#fff";
|
||||
ctx.fillText(text,x,y);
|
||||
};
|
||||
|
||||
|
||||
app.v.bilateral=function(ctx,width,height){
|
||||
var color=davis.randomColor();
|
||||
var strokeStyle=davis.alpha(davis.randomColor("grey"),(0.5+(Math.random()/2)));
|
||||
var fillStyle=davis.alpha(color,Math.random());
|
||||
for (var i=0;i<4;i++){
|
||||
davis.maybe(1,2,function(){
|
||||
|
||||
var lineWidth=1+davis.random(width/100);
|
||||
var r=davis.random(width/3);
|
||||
|
||||
var x=r+lineWidth+davis.random((width/2)-r-lineWidth);
|
||||
var y=r+lineWidth+davis.random((height)-(2*(r+lineWidth)));
|
||||
ctx.beginPath();
|
||||
ctx.strokeStyle=strokeStyle;
|
||||
ctx.arc(x,y,r,0,2*Math.PI);
|
||||
ctx.lineWidth=lineWidth;
|
||||
ctx.fillStyle=fillStyle;
|
||||
ctx.fill();
|
||||
ctx.stroke();
|
||||
ctx.beginPath();
|
||||
x=width/2+(width/2)-x;
|
||||
ctx.arc(x,y,r,0,2*Math.PI);
|
||||
ctx.fillStyle=fillStyle;
|
||||
ctx.fill();
|
||||
ctx.stroke();
|
||||
});
|
||||
}
|
||||
for (var i=0;i<3;i++){
|
||||
davis.maybe(1,2,function(){
|
||||
var lineWidth=1+davis.random(width/100);
|
||||
var r=davis.random(width/3);
|
||||
var x=width/2;
|
||||
var y=r+lineWidth+davis.random((height)-(2*(r+lineWidth)));
|
||||
ctx.beginPath();
|
||||
ctx.strokeStyle=strokeStyle;
|
||||
ctx.arc(x,y,r,0,2*Math.PI);
|
||||
ctx.lineWidth=lineWidth;
|
||||
ctx.fillStyle=fillStyle;
|
||||
davis.maybe(1,3,function(){ctx.fill();});
|
||||
ctx.stroke();
|
||||
})
|
||||
}
|
||||
};
|
||||
|
||||
app.v.radial=function(ctx,width,height){
|
||||
ctx.beginPath();
|
||||
ctx.arc(width/2,width/2,davis.random(width/2),0,2*Math.PI);
|
||||
ctx.strokeStyle=davis.randomColor();
|
||||
ctx.lineWidth=1+davis.random(0.5*width);
|
||||
ctx.stroke();
|
||||
|
||||
|
||||
for (var j=0;j<davis.random(4);j++){
|
||||
var r=davis.random(width/2);
|
||||
var rf=davis.random(width/2);
|
||||
var color=davis.randomColor();
|
||||
davis.maybe(2,3,function(){color=davis.randomColor("grey");});
|
||||
var lw=1+davis.random(width/10);
|
||||
var steps=1+davis.random(30);
|
||||
var incrementMod=davis.random(3)*90;
|
||||
var n=davis.random(6);
|
||||
var rotation=90*davis.random(3);
|
||||
var fadeColor=davis.pick(["rgba(0,0,0,0)","rgba(255,255,255,0)"]);
|
||||
var fadeRadius=Math.random();
|
||||
davis.maybe(1,5,function(){fadeRadius=0;});
|
||||
davis.maybe(1,5,function(){fadeRadius=false;});
|
||||
for (var i=0;i<steps;i++){
|
||||
var increment=i*360/steps;
|
||||
var x=geo.getPoint(width/2,height/2,rf,increment+incrementMod).x2;
|
||||
var y=geo.getPoint(width/2,height/2,rf,increment+incrementMod).y2;
|
||||
|
||||
app.v.circle({
|
||||
n:n,
|
||||
gradient:true,
|
||||
context:ctx,
|
||||
x:x,
|
||||
y:y,
|
||||
r:r,
|
||||
rotation:rotation,
|
||||
lineWidth:lw,
|
||||
color:color,
|
||||
fadeColor:fadeColor,
|
||||
fadeRadius:fadeRadius
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
app.v.circle=function(c){
|
||||
var ctx= c.context || false;
|
||||
var x=c.x || 100;
|
||||
var y=c.y || x;
|
||||
var r=c.r || 10;
|
||||
var color=c.color || davis.randomColor("grey");
|
||||
var fadeColor=c.fadeColor || "rgba(0,0,0,0)";
|
||||
var fadeRadius=c.fadeRadius || Math.random();
|
||||
var cr=ctx.canvas.width/2;
|
||||
//console.log(cw);
|
||||
var gradient=ctx.createRadialGradient(cr,cr,(fadeRadius*cr),cr,cr,cr);
|
||||
gradient.addColorStop(0,color);
|
||||
gradient.addColorStop(1,fadeColor);
|
||||
var lineWidth=c.lineWidth || 1;
|
||||
ctx.beginPath();
|
||||
ctx.arc(x,y,r,0,2*Math.PI);
|
||||
ctx.strokeStyle=gradient;
|
||||
ctx.lineWidth=lineWidth;
|
||||
|
||||
ctx.stroke();
|
||||
|
||||
|
||||
return true;
|
||||
};
|
||||
|
||||
app.v.ngon=function(c){
|
||||
var n=c.n || 3;
|
||||
|
||||
var ctx= c.context || false;
|
||||
var x=c.x || 100;
|
||||
var y=c.y || x;
|
||||
var r=c.r || 100;
|
||||
if (n%2==0){
|
||||
var rotation=360/(n*2)*davis.random(n*2);
|
||||
}
|
||||
else {
|
||||
var rotation=90+(180*davis.random(2));
|
||||
};
|
||||
rotation=c.rotation || rotation;
|
||||
var color=c.color || davis.randomColor("grey");
|
||||
var lineWidth=c.lineWidth || 1;
|
||||
var fill=c.fill || davis.randcomColor();
|
||||
ctx.beginPath();
|
||||
for (var i=0;i<n+2;i++){
|
||||
var nx=geo.getPoint(x,y,r,rotation+(i*360/n)).x2;
|
||||
var ny=geo.getPoint(x,y,r,rotation+(i*360/n)).y2;
|
||||
ctx.lineTo(nx,ny);
|
||||
}
|
||||
ctx.lineJoin='miter';
|
||||
ctx.strokeStyle=color;
|
||||
ctx.lineWidth=lineWidth;
|
||||
ctx.fillStyle=fill;
|
||||
ctx.fill();
|
||||
ctx.stroke();
|
||||
return true;
|
||||
};
|
||||
app.v.canvas=function(w,h,id){
|
||||
var c="";
|
||||
c+="<canvas width='"+w+"' height='"+h+"' id='"+id+"'></canvas>";
|
||||
return c;
|
||||
};
|
||||
|
||||
app.v.style=function(){
|
||||
davis.style("body",{
|
||||
"width":"100%",
|
||||
"margin":"0px",
|
||||
"padding":"0px",
|
||||
"text-align":"center",
|
||||
"background":"#ddd"
|
||||
});
|
||||
davis.style("canvas",{
|
||||
"margin":"20px",
|
||||
"cursor":"pointer"
|
||||
});
|
||||
davis.style("div",{
|
||||
"text-align":"center",
|
||||
"border":"1px solid #111",
|
||||
"margin":"20px"
|
||||
});
|
||||
davis.style("input[type=text]",{
|
||||
"font-size":"3em",
|
||||
"color":"#111",
|
||||
"text-align":"center",
|
||||
"margin-top":"30px"
|
||||
});
|
||||
davis.style("input[type=button]",{
|
||||
"font-size":"3em",
|
||||
"width":"100%",
|
||||
"margin":"0px",
|
||||
"cursor":"pointer",
|
||||
"background":"#EC1313",
|
||||
"color":"#fff"
|
||||
});
|
||||
davis.style("table",{
|
||||
"width":"100%",
|
||||
"table-layout":"fixed",
|
||||
"text-align":"center"
|
||||
});
|
||||
davis.style("input[type=radio]",{
|
||||
"margin-top":"20px",
|
||||
"width":"20px",
|
||||
"height":"20px"
|
||||
});
|
||||
davis.style("canvas",{
|
||||
"width":"100px",
|
||||
"height":"100px"
|
||||
});
|
||||
|
||||
};
|
||||
236
js/davis.js
236
js/davis.js
|
|
@ -1,236 +0,0 @@
|
|||
davis=
|
||||
{
|
||||
random:function (x){return (Math.floor(Math.random()*x));},
|
||||
|
||||
bell: function (x)
|
||||
{
|
||||
var i=Math.round((davis.random(x)+davis.random(x)+davis.random(x))/3);
|
||||
return i;
|
||||
},
|
||||
|
||||
randomColor:function (x,full){
|
||||
if (x){ x=x.toLowerCase();}
|
||||
else{x=="none"}
|
||||
if (!full){var full=false;}
|
||||
|
||||
var red=davis.random(255);
|
||||
var green=davis.random(255);
|
||||
var blue=davis.random(255);
|
||||
if (x=="grey" || x=="gray" || x=="fullgrey" || x=="fullgray"){
|
||||
blue=red;
|
||||
green=red;
|
||||
}
|
||||
if (x=='warm' || x=='hot'){
|
||||
red=200+davis.random(55);
|
||||
blue=davis.random(30);
|
||||
}
|
||||
if (x=='cool' || x=='cold'){
|
||||
blue=100+davis.random(155);
|
||||
red=davis.random(50);
|
||||
}
|
||||
if (x=="mammal" || x=="mammalian"){
|
||||
red=160+davis.random(85);
|
||||
green=red-40;
|
||||
blue=green/2;
|
||||
}
|
||||
var color="rgb("+red+","+green+","+blue+")";
|
||||
|
||||
if (full==true){
|
||||
var text="#eee";
|
||||
var alpha0="rgba("+red+","+green+","+blue+",0)";
|
||||
var alpha1="rgba("+red+","+green+","+blue+",1)";
|
||||
if ((red+green+blue)>400){text="#111";}
|
||||
return {red:red,green:green,blue:blue,rgb:color,text:text,alpha0:alpha0,alpha1:alpha1};
|
||||
}
|
||||
else{
|
||||
return color;
|
||||
}
|
||||
},
|
||||
|
||||
alpha:function(colorString,number){
|
||||
colorString=colorString.replace(/rgb/,"rgba");
|
||||
colorString=colorString.replace(/[)]/,(","+number+")"));
|
||||
return colorString;
|
||||
},
|
||||
|
||||
randomWord:function(x){
|
||||
if (!x){x=1;}
|
||||
var vo=["a","e","i","o","u"];
|
||||
var con=["b","c","d","f","g","h","j","k","l","m","n","p","q","r","s","t","v","w","x","y","z"];
|
||||
var phrase=[];
|
||||
for (var j=0;j<x;j++){
|
||||
var word="";
|
||||
for (var i=0;i<(1+davis.random(3));i++){
|
||||
word+=davis.pick(con)+davis.pick(vo);
|
||||
}
|
||||
if (davis.random(5)>2){
|
||||
word+=davis.pick(con);
|
||||
}
|
||||
phrase.push(word);
|
||||
}
|
||||
word=phrase.join(" ");
|
||||
return word;
|
||||
},
|
||||
|
||||
pick: function (x)
|
||||
{return x[davis.random(x.length)];},
|
||||
|
||||
sumTo:function(x){
|
||||
if (!x){return false;}
|
||||
var y=[];
|
||||
while (x>0){
|
||||
var redux=1+davis.random(x);
|
||||
y.push(redux);
|
||||
x=x-redux;
|
||||
}
|
||||
return y;
|
||||
},
|
||||
|
||||
mutate:function(x,p){
|
||||
var p=p || 10;
|
||||
p=p*0.01*x;
|
||||
var x=x-(p)+davis.random(2*p);
|
||||
return x;
|
||||
},
|
||||
|
||||
//this takes two arrays - one the source of new material, the other saved material from the past, and decides which to return an element from, then selects a random element from the ancestral or mutational array.
|
||||
darwin:function(mutation,ancestry)
|
||||
{
|
||||
var anar=ancestry.length;
|
||||
var m=(9*anar*anar)/((anar*anar)+100);
|
||||
var d=1+this.random(10);
|
||||
if (m>d){ return this.pick(ancestry);}
|
||||
else{ return this.pick(mutation);}
|
||||
},
|
||||
|
||||
style:function(selector,values){
|
||||
if (!jQuery){return false};
|
||||
if ($("head style#dynamic").get().length==0){
|
||||
$("head").append("<style id='dynamic'></style>");
|
||||
}
|
||||
if (selector=="clear" || !selector){$("head style#dynamic").html("");}
|
||||
|
||||
var s=selector+"{";
|
||||
for (i in values){
|
||||
s+=i+":"+values[i]+";";
|
||||
}
|
||||
s+="}";
|
||||
|
||||
$("head style#dynamic").append(s);
|
||||
},
|
||||
|
||||
grid:function(xSteps,ySteps,bounds){
|
||||
var grid=[];
|
||||
var b=bounds;
|
||||
console.log(b);
|
||||
var xInterval=(bounds.right-bounds.left)/xSteps;
|
||||
var yInterval=(bounds.bottom-bounds.top)/ySteps;
|
||||
for (var i=0;i<xSteps;i++){
|
||||
grid.push([]);
|
||||
for (var j=0;j<ySteps;j++){
|
||||
var left=b.left+(xInterval*i);
|
||||
var top=b.top+(yInterval*j);
|
||||
var width=xInterval;
|
||||
var height=yInterval;
|
||||
grid[i].push(this.quickBox(left,top,width,height));
|
||||
}
|
||||
}
|
||||
|
||||
return grid;
|
||||
},
|
||||
|
||||
gridLegend:function(grid,context){
|
||||
grid.legend=[];
|
||||
for (var i=0;i<grid.length;i++){
|
||||
for (var j=0;j<grid[i].length;j++){
|
||||
var locus=grid[i][j];
|
||||
var lll=context.text(locus.centerX,locus.centerY,(i+","+j))
|
||||
.attr({"font-size":30,"opacity":0});
|
||||
grid.legend.push(lll);
|
||||
}
|
||||
}
|
||||
|
||||
grid.show=function(ms){
|
||||
var ms=ms || 3000;
|
||||
for (var i=0;i<this.legend.length;i++){
|
||||
this.legend[i].animate({"opacity":1},(ms/10));
|
||||
}
|
||||
setTimeout(function(){
|
||||
for (var i=0;i<grid.legend.length;i++){
|
||||
grid.legend[i].animate({"opacity":0},(ms/10));
|
||||
}
|
||||
},ms);
|
||||
};
|
||||
|
||||
return grid;
|
||||
},
|
||||
|
||||
quickBox:function(x,y,w,h){
|
||||
var box={};
|
||||
box.top=y;
|
||||
box.bottom=y+h;
|
||||
box.left=x;
|
||||
box.right=x+w;
|
||||
box.centerX=(box.right+box.left)/2;
|
||||
box.centerY=(box.bottom+box.top)/2;
|
||||
box.width=w;
|
||||
box.height=h;
|
||||
return box;
|
||||
},
|
||||
|
||||
table:function(array,bounds,context,options){
|
||||
var options=options || {};
|
||||
var b=bounds;
|
||||
var table=array;
|
||||
var c=context;
|
||||
var t=[];
|
||||
|
||||
var xStep=0;
|
||||
for (key in table[0]){xStep++;}
|
||||
var yStep=table.length+1;
|
||||
var grid=davis.grid(xStep,yStep,b);
|
||||
|
||||
var x=0;
|
||||
for (var key in table[x]){
|
||||
c.text(grid[x][0].centerX,grid[x][0].centerY,key)
|
||||
.attr(options)
|
||||
.attr({"font-size":20});
|
||||
x++;
|
||||
}
|
||||
|
||||
for (var i=1;i<(table.length+1);i++){
|
||||
var x=0;
|
||||
for (var key in table[i-1]){
|
||||
var item=c.text(grid[x][i].centerX,grid[x][i].centerY,table[i-1][key])
|
||||
.attr(options)
|
||||
.attr({"font-size":15})
|
||||
.data(key,table[i-1][key]);
|
||||
t.push(item);
|
||||
x++;
|
||||
}
|
||||
}
|
||||
return t;
|
||||
},
|
||||
|
||||
maybe:function(n,d,f){
|
||||
var d=davis.random(d);
|
||||
if (d<n){
|
||||
f.call();
|
||||
}
|
||||
else{return false;}
|
||||
},
|
||||
|
||||
license:function(x){
|
||||
var license="<h3 id='mitLicense' style='cursor:pointer;'>The MIT License (MIT)</h3>";
|
||||
license+="<div id='license' style='display:none;'>";
|
||||
license+="<p>Copyright (c) "+(new Date().getFullYear())+" Luke Davis</p>";
|
||||
license+="<p>Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the 'Software'), to DEALINGS in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:</p>";
|
||||
license+="<p>The above copyright notice and this permission notice shall be included included all copies or substantial portions of the Software.</p>";
|
||||
license+="<p>THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.</p>";
|
||||
license+="</div>";
|
||||
return license;
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
module.exports = davis;
|
||||
|
|
@ -1,234 +0,0 @@
|
|||
davis=
|
||||
{
|
||||
random:function (x){return (Math.floor(Math.random()*x));},
|
||||
|
||||
bell: function (x)
|
||||
{
|
||||
var i=Math.round((davis.random(x)+davis.random(x)+davis.random(x))/3);
|
||||
return i;
|
||||
},
|
||||
|
||||
randomColor:function (x,full){
|
||||
if (x){ x=x.toLowerCase();}
|
||||
else{x=="none"}
|
||||
if (!full){var full=false;}
|
||||
|
||||
var red=davis.random(255);
|
||||
var green=davis.random(255);
|
||||
var blue=davis.random(255);
|
||||
if (x=="grey" || x=="gray" || x=="fullgrey" || x=="fullgray"){
|
||||
blue=red;
|
||||
green=red;
|
||||
}
|
||||
if (x=='warm' || x=='hot'){
|
||||
red=200+davis.random(55);
|
||||
blue=davis.random(30);
|
||||
}
|
||||
if (x=='cool' || x=='cold'){
|
||||
blue=100+davis.random(155);
|
||||
red=davis.random(50);
|
||||
}
|
||||
if (x=="mammal" || x=="mammalian"){
|
||||
red=160+davis.random(85);
|
||||
green=red-40;
|
||||
blue=green/2;
|
||||
}
|
||||
var color="rgb("+red+","+green+","+blue+")";
|
||||
|
||||
if (full==true){
|
||||
var text="#eee";
|
||||
var alpha0="rgba("+red+","+green+","+blue+",0)";
|
||||
var alpha1="rgba("+red+","+green+","+blue+",1)";
|
||||
if ((red+green+blue)>400){text="#111";}
|
||||
return {red:red,green:green,blue:blue,rgb:color,text:text,alpha0:alpha0,alpha1:alpha1};
|
||||
}
|
||||
else{
|
||||
return color;
|
||||
}
|
||||
},
|
||||
|
||||
alpha:function(colorString,number){
|
||||
colorString=colorString.replace(/rgb/,"rgba");
|
||||
colorString=colorString.replace(/[)]/,(","+number+")"));
|
||||
return colorString;
|
||||
},
|
||||
|
||||
randomWord:function(x){
|
||||
if (!x){x=1;}
|
||||
var vo=["a","e","i","o","u"];
|
||||
var con=["b","c","d","f","g","h","j","k","l","m","n","p","q","r","s","t","v","w","x","y","z"];
|
||||
var phrase=[];
|
||||
for (var j=0;j<x;j++){
|
||||
var word="";
|
||||
for (var i=0;i<(1+davis.random(3));i++){
|
||||
word+=davis.pick(con)+davis.pick(vo);
|
||||
}
|
||||
if (davis.random(5)>2){
|
||||
word+=davis.pick(con);
|
||||
}
|
||||
phrase.push(word);
|
||||
}
|
||||
word=phrase.join(" ");
|
||||
return word;
|
||||
},
|
||||
|
||||
pick: function (x)
|
||||
{return x[davis.random(x.length)];},
|
||||
|
||||
sumTo:function(x){
|
||||
if (!x){return false;}
|
||||
var y=[];
|
||||
while (x>0){
|
||||
var redux=1+davis.random(x);
|
||||
y.push(redux);
|
||||
x=x-redux;
|
||||
}
|
||||
return y;
|
||||
},
|
||||
|
||||
mutate:function(x,p){
|
||||
var p=p || 10;
|
||||
p=p*0.01*x;
|
||||
var x=x-(p)+davis.random(2*p);
|
||||
return x;
|
||||
},
|
||||
|
||||
//this takes two arrays - one the source of new material, the other saved material from the past, and decides which to return an element from, then selects a random element from the ancestral or mutational array.
|
||||
darwin:function(mutation,ancestry)
|
||||
{
|
||||
var anar=ancestry.length;
|
||||
var m=(9*anar*anar)/((anar*anar)+100);
|
||||
var d=1+this.random(10);
|
||||
if (m>d){ return this.pick(ancestry);}
|
||||
else{ return this.pick(mutation);}
|
||||
},
|
||||
|
||||
style:function(selector,values){
|
||||
if (!jQuery){return false};
|
||||
if ($("head style#dynamic").get().length==0){
|
||||
$("head").append("<style id='dynamic'></style>");
|
||||
}
|
||||
if (selector=="clear" || !selector){$("head style#dynamic").html("");}
|
||||
|
||||
var s=selector+"{";
|
||||
for (i in values){
|
||||
s+=i+":"+values[i]+";";
|
||||
}
|
||||
s+="}";
|
||||
|
||||
$("head style#dynamic").append(s);
|
||||
},
|
||||
|
||||
grid:function(xSteps,ySteps,bounds){
|
||||
var grid=[];
|
||||
var b=bounds;
|
||||
console.log(b);
|
||||
var xInterval=(bounds.right-bounds.left)/xSteps;
|
||||
var yInterval=(bounds.bottom-bounds.top)/ySteps;
|
||||
for (var i=0;i<xSteps;i++){
|
||||
grid.push([]);
|
||||
for (var j=0;j<ySteps;j++){
|
||||
var left=b.left+(xInterval*i);
|
||||
var top=b.top+(yInterval*j);
|
||||
var width=xInterval;
|
||||
var height=yInterval;
|
||||
grid[i].push(this.quickBox(left,top,width,height));
|
||||
}
|
||||
}
|
||||
|
||||
return grid;
|
||||
},
|
||||
|
||||
gridLegend:function(grid,context){
|
||||
grid.legend=[];
|
||||
for (var i=0;i<grid.length;i++){
|
||||
for (var j=0;j<grid[i].length;j++){
|
||||
var locus=grid[i][j];
|
||||
var lll=context.text(locus.centerX,locus.centerY,(i+","+j))
|
||||
.attr({"font-size":30,"opacity":0});
|
||||
grid.legend.push(lll);
|
||||
}
|
||||
}
|
||||
|
||||
grid.show=function(ms){
|
||||
var ms=ms || 3000;
|
||||
for (var i=0;i<this.legend.length;i++){
|
||||
this.legend[i].animate({"opacity":1},(ms/10));
|
||||
}
|
||||
setTimeout(function(){
|
||||
for (var i=0;i<grid.legend.length;i++){
|
||||
grid.legend[i].animate({"opacity":0},(ms/10));
|
||||
}
|
||||
},ms);
|
||||
};
|
||||
|
||||
return grid;
|
||||
},
|
||||
|
||||
quickBox:function(x,y,w,h){
|
||||
var box={};
|
||||
box.top=y;
|
||||
box.bottom=y+h;
|
||||
box.left=x;
|
||||
box.right=x+w;
|
||||
box.centerX=(box.right+box.left)/2;
|
||||
box.centerY=(box.bottom+box.top)/2;
|
||||
box.width=w;
|
||||
box.height=h;
|
||||
return box;
|
||||
},
|
||||
|
||||
table:function(array,bounds,context,options){
|
||||
var options=options || {};
|
||||
var b=bounds;
|
||||
var table=array;
|
||||
var c=context;
|
||||
var t=[];
|
||||
|
||||
var xStep=0;
|
||||
for (key in table[0]){xStep++;}
|
||||
var yStep=table.length+1;
|
||||
var grid=davis.grid(xStep,yStep,b);
|
||||
|
||||
var x=0;
|
||||
for (var key in table[x]){
|
||||
c.text(grid[x][0].centerX,grid[x][0].centerY,key)
|
||||
.attr(options)
|
||||
.attr({"font-size":20});
|
||||
x++;
|
||||
}
|
||||
|
||||
for (var i=1;i<(table.length+1);i++){
|
||||
var x=0;
|
||||
for (var key in table[i-1]){
|
||||
var item=c.text(grid[x][i].centerX,grid[x][i].centerY,table[i-1][key])
|
||||
.attr(options)
|
||||
.attr({"font-size":15})
|
||||
.data(key,table[i-1][key]);
|
||||
t.push(item);
|
||||
x++;
|
||||
}
|
||||
}
|
||||
return t;
|
||||
},
|
||||
|
||||
maybe:function(n,d,f){
|
||||
var d=davis.random(d);
|
||||
if (d<n){
|
||||
f.call();
|
||||
}
|
||||
else{return false;}
|
||||
},
|
||||
|
||||
license:function(x){
|
||||
var license="<h3 id='mitLicense' style='cursor:pointer;'>The MIT License (MIT)</h3>";
|
||||
license+="<div id='license' style='display:none;'>";
|
||||
license+="<p>Copyright (c) "+(new Date().getFullYear())+" Luke Davis</p>";
|
||||
license+="<p>Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the 'Software'), to DEALINGS in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:</p>";
|
||||
license+="<p>The above copyright notice and this permission notice shall be included included all copies or substantial portions of the Software.</p>";
|
||||
license+="<p>THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.</p>";
|
||||
license+="</div>";
|
||||
return license;
|
||||
}
|
||||
|
||||
};
|
||||
66
js/geo.js
66
js/geo.js
|
|
@ -1,66 +0,0 @@
|
|||
geo={};
|
||||
|
||||
geo.getPoint=function(x,y,r,theta){
|
||||
theta+=90;
|
||||
theta=theta*(Math.PI/180);
|
||||
var x2=x+(r*Math.sin(theta));
|
||||
var y2=y+(r*Math.cos(theta));
|
||||
var circle={x1:x,y1:y,r:r,x2:x2,y2:y2};
|
||||
return circle;
|
||||
};
|
||||
|
||||
geo.arcPath=function(x,y,r,theta1,theta2,w){
|
||||
var f1=0;
|
||||
var f2=0;
|
||||
var f3=0;
|
||||
var f4=1;
|
||||
if ((theta2-theta1)>180){
|
||||
f1=1;
|
||||
f3=1;
|
||||
}
|
||||
|
||||
var arcPath="";
|
||||
arcPath+="M "+geo.getPoint(x,y,r,theta1).x2+" "+geo.getPoint(x,y,r,theta1).y2;
|
||||
arcPath+=" A "+r+" "+r+" "+(theta2-theta1)+" "+f1+" "+f2+" "+geo.getPoint(x,y,r,theta2).x2+" "+geo.getPoint(x,y,r,theta2).y2;
|
||||
arcPath+=" L "+geo.getPoint(x,y,(r-w),theta2).x2+" "+geo.getPoint(x,y,(r-w),theta2).y2;
|
||||
arcPath+=" A "+(r-w)+" "+(r-w)+" "+(theta2-theta1)+" "+f3+" "+f4+" "+geo.getPoint(x,y,(r-w),theta1).x2+" "+geo.getPoint(x,y,(r-w),theta1).y2;
|
||||
arcPath+=" Z";
|
||||
return arcPath;
|
||||
};
|
||||
|
||||
geo.ngon=function(x,y,r,n){
|
||||
if (!n){n=3};
|
||||
var path="";
|
||||
path+="M "+geo.getPoint(x,y,r,0).x2+" "+geo.getPoint(x,y,r,0).y2;
|
||||
for (var i=0;i<n;i++){
|
||||
var interval=360/n;
|
||||
var theta=interval*i;
|
||||
path+=" L"+geo.getPoint(x,y,r,theta).x2+" "+geo.getPoint(x,y,r,theta).y2;
|
||||
}
|
||||
path+="Z";
|
||||
var ngon=model.paper.path(path).attr({"stroke":"#fff"});
|
||||
return ngon;
|
||||
};
|
||||
|
||||
geo.orbital=function(x,y,r,n,color){
|
||||
if (!x){x=model.bounds.right/2;}
|
||||
if (!y){y=model.bounds.bottom/2;}
|
||||
if (!r){r=model.bounds.bottom/3;}
|
||||
if (!n){n=1;}
|
||||
if (!color){color="#FFF";}
|
||||
var set=[];
|
||||
|
||||
for (var i=0;i<n;i++){
|
||||
var theta1=_.random(180);
|
||||
var theta2=theta1+(18*_.random(1,20));
|
||||
var w=(0.1*r)*_.random(1,3);
|
||||
|
||||
var arcPath=geo.arcPath(x,y,r,theta1,theta2,w);
|
||||
var circle=model.paper.path(arcPath)
|
||||
.attr({"fill":color,"fill-opacity":0.5})
|
||||
set.push(circle);
|
||||
}
|
||||
return set;
|
||||
};
|
||||
|
||||
module.exports = geo;
|
||||
|
|
@ -1,66 +0,0 @@
|
|||
geo={};
|
||||
|
||||
geo.getPoint=function(x,y,r,theta){
|
||||
theta+=90;
|
||||
theta=theta*(Math.PI/180);
|
||||
var x2=x+(r*Math.sin(theta));
|
||||
var y2=y+(r*Math.cos(theta));
|
||||
var circle={x1:x,y1:y,r:r,x2:x2,y2:y2};
|
||||
return circle;
|
||||
};
|
||||
|
||||
geo.arcPath=function(x,y,r,theta1,theta2,w){
|
||||
var f1=0;
|
||||
var f2=0;
|
||||
var f3=0;
|
||||
var f4=1;
|
||||
if ((theta2-theta1)>180){
|
||||
f1=1;
|
||||
f3=1;
|
||||
}
|
||||
|
||||
var arcPath="";
|
||||
arcPath+="M "+geo.getPoint(x,y,r,theta1).x2+" "+geo.getPoint(x,y,r,theta1).y2;
|
||||
arcPath+=" A "+r+" "+r+" "+(theta2-theta1)+" "+f1+" "+f2+" "+geo.getPoint(x,y,r,theta2).x2+" "+geo.getPoint(x,y,r,theta2).y2;
|
||||
arcPath+=" L "+geo.getPoint(x,y,(r-w),theta2).x2+" "+geo.getPoint(x,y,(r-w),theta2).y2;
|
||||
arcPath+=" A "+(r-w)+" "+(r-w)+" "+(theta2-theta1)+" "+f3+" "+f4+" "+geo.getPoint(x,y,(r-w),theta1).x2+" "+geo.getPoint(x,y,(r-w),theta1).y2;
|
||||
arcPath+=" Z";
|
||||
return arcPath;
|
||||
};
|
||||
|
||||
geo.ngon=function(x,y,r,n){
|
||||
if (!n){n=3};
|
||||
var path="";
|
||||
path+="M "+geo.getPoint(x,y,r,0).x2+" "+geo.getPoint(x,y,r,0).y2;
|
||||
for (var i=0;i<n;i++){
|
||||
var interval=360/n;
|
||||
var theta=interval*i;
|
||||
path+=" L"+geo.getPoint(x,y,r,theta).x2+" "+geo.getPoint(x,y,r,theta).y2;
|
||||
}
|
||||
path+="Z";
|
||||
var ngon=model.paper.path(path).attr({"stroke":"#fff"});
|
||||
return ngon;
|
||||
};
|
||||
|
||||
geo.orbital=function(x,y,r,n,color){
|
||||
if (!x){x=model.bounds.right/2;}
|
||||
if (!y){y=model.bounds.bottom/2;}
|
||||
if (!r){r=model.bounds.bottom/3;}
|
||||
if (!n){n=1;}
|
||||
if (!color){color="#FFF";}
|
||||
var set=[];
|
||||
|
||||
for (var i=0;i<n;i++){
|
||||
var theta1=_.random(180);
|
||||
var theta2=theta1+(18*_.random(1,20));
|
||||
var w=(0.1*r)*_.random(1,3);
|
||||
|
||||
var arcPath=geo.arcPath(x,y,r,theta1,theta2,w);
|
||||
var circle=model.paper.path(arcPath)
|
||||
.attr({"fill":color,"fill-opacity":0.5})
|
||||
set.push(circle);
|
||||
}
|
||||
return set;
|
||||
};
|
||||
|
||||
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -1,663 +0,0 @@
|
|||
/*!
|
||||
* jQuery Color Animations v@VERSION
|
||||
* https://github.com/jquery/jquery-color
|
||||
*
|
||||
* Copyright 2013 jQuery Foundation and other contributors
|
||||
* Released under the MIT license.
|
||||
* http://jquery.org/license
|
||||
*
|
||||
* Date: @DATE
|
||||
*/
|
||||
(function( jQuery, undefined ) {
|
||||
|
||||
var stepHooks = "backgroundColor borderBottomColor borderLeftColor borderRightColor borderTopColor color columnRuleColor outlineColor textDecorationColor textEmphasisColor",
|
||||
|
||||
// plusequals test for += 100 -= 100
|
||||
rplusequals = /^([\-+])=\s*(\d+\.?\d*)/,
|
||||
// a set of RE's that can match strings and generate color tuples.
|
||||
stringParsers = [{
|
||||
re: /rgba?\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*(?:,\s*(\d?(?:\.\d+)?)\s*)?\)/,
|
||||
parse: function( execResult ) {
|
||||
return [
|
||||
execResult[ 1 ],
|
||||
execResult[ 2 ],
|
||||
execResult[ 3 ],
|
||||
execResult[ 4 ]
|
||||
];
|
||||
}
|
||||
}, {
|
||||
re: /rgba?\(\s*(\d+(?:\.\d+)?)\%\s*,\s*(\d+(?:\.\d+)?)\%\s*,\s*(\d+(?:\.\d+)?)\%\s*(?:,\s*(\d?(?:\.\d+)?)\s*)?\)/,
|
||||
parse: function( execResult ) {
|
||||
return [
|
||||
execResult[ 1 ] * 2.55,
|
||||
execResult[ 2 ] * 2.55,
|
||||
execResult[ 3 ] * 2.55,
|
||||
execResult[ 4 ]
|
||||
];
|
||||
}
|
||||
}, {
|
||||
// this regex ignores A-F because it's compared against an already lowercased string
|
||||
re: /#([a-f0-9]{2})([a-f0-9]{2})([a-f0-9]{2})/,
|
||||
parse: function( execResult ) {
|
||||
return [
|
||||
parseInt( execResult[ 1 ], 16 ),
|
||||
parseInt( execResult[ 2 ], 16 ),
|
||||
parseInt( execResult[ 3 ], 16 )
|
||||
];
|
||||
}
|
||||
}, {
|
||||
// this regex ignores A-F because it's compared against an already lowercased string
|
||||
re: /#([a-f0-9])([a-f0-9])([a-f0-9])/,
|
||||
parse: function( execResult ) {
|
||||
return [
|
||||
parseInt( execResult[ 1 ] + execResult[ 1 ], 16 ),
|
||||
parseInt( execResult[ 2 ] + execResult[ 2 ], 16 ),
|
||||
parseInt( execResult[ 3 ] + execResult[ 3 ], 16 )
|
||||
];
|
||||
}
|
||||
}, {
|
||||
re: /hsla?\(\s*(\d+(?:\.\d+)?)\s*,\s*(\d+(?:\.\d+)?)\%\s*,\s*(\d+(?:\.\d+)?)\%\s*(?:,\s*(\d?(?:\.\d+)?)\s*)?\)/,
|
||||
space: "hsla",
|
||||
parse: function( execResult ) {
|
||||
return [
|
||||
execResult[ 1 ],
|
||||
execResult[ 2 ] / 100,
|
||||
execResult[ 3 ] / 100,
|
||||
execResult[ 4 ]
|
||||
];
|
||||
}
|
||||
}],
|
||||
|
||||
// jQuery.Color( )
|
||||
color = jQuery.Color = function( color, green, blue, alpha ) {
|
||||
return new jQuery.Color.fn.parse( color, green, blue, alpha );
|
||||
},
|
||||
spaces = {
|
||||
rgba: {
|
||||
props: {
|
||||
red: {
|
||||
idx: 0,
|
||||
type: "byte"
|
||||
},
|
||||
green: {
|
||||
idx: 1,
|
||||
type: "byte"
|
||||
},
|
||||
blue: {
|
||||
idx: 2,
|
||||
type: "byte"
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
hsla: {
|
||||
props: {
|
||||
hue: {
|
||||
idx: 0,
|
||||
type: "degrees"
|
||||
},
|
||||
saturation: {
|
||||
idx: 1,
|
||||
type: "percent"
|
||||
},
|
||||
lightness: {
|
||||
idx: 2,
|
||||
type: "percent"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
propTypes = {
|
||||
"byte": {
|
||||
floor: true,
|
||||
max: 255
|
||||
},
|
||||
"percent": {
|
||||
max: 1
|
||||
},
|
||||
"degrees": {
|
||||
mod: 360,
|
||||
floor: true
|
||||
}
|
||||
},
|
||||
support = color.support = {},
|
||||
|
||||
// element for support tests
|
||||
supportElem = jQuery( "<p>" )[ 0 ],
|
||||
|
||||
// colors = jQuery.Color.names
|
||||
colors,
|
||||
|
||||
// local aliases of functions called often
|
||||
each = jQuery.each;
|
||||
|
||||
// determine rgba support immediately
|
||||
supportElem.style.cssText = "background-color:rgba(1,1,1,.5)";
|
||||
support.rgba = supportElem.style.backgroundColor.indexOf( "rgba" ) > -1;
|
||||
|
||||
// define cache name and alpha properties
|
||||
// for rgba and hsla spaces
|
||||
each( spaces, function( spaceName, space ) {
|
||||
space.cache = "_" + spaceName;
|
||||
space.props.alpha = {
|
||||
idx: 3,
|
||||
type: "percent",
|
||||
def: 1
|
||||
};
|
||||
});
|
||||
|
||||
function clamp( value, prop, allowEmpty ) {
|
||||
var type = propTypes[ prop.type ] || {};
|
||||
|
||||
if ( value == null ) {
|
||||
return (allowEmpty || !prop.def) ? null : prop.def;
|
||||
}
|
||||
|
||||
// ~~ is an short way of doing floor for positive numbers
|
||||
value = type.floor ? ~~value : parseFloat( value );
|
||||
|
||||
// IE will pass in empty strings as value for alpha,
|
||||
// which will hit this case
|
||||
if ( isNaN( value ) ) {
|
||||
return prop.def;
|
||||
}
|
||||
|
||||
if ( type.mod ) {
|
||||
// we add mod before modding to make sure that negatives values
|
||||
// get converted properly: -10 -> 350
|
||||
return (value + type.mod) % type.mod;
|
||||
}
|
||||
|
||||
// for now all property types without mod have min and max
|
||||
return 0 > value ? 0 : type.max < value ? type.max : value;
|
||||
}
|
||||
|
||||
function stringParse( string ) {
|
||||
var inst = color(),
|
||||
rgba = inst._rgba = [];
|
||||
|
||||
string = string.toLowerCase();
|
||||
|
||||
each( stringParsers, function( i, parser ) {
|
||||
var parsed,
|
||||
match = parser.re.exec( string ),
|
||||
values = match && parser.parse( match ),
|
||||
spaceName = parser.space || "rgba";
|
||||
|
||||
if ( values ) {
|
||||
parsed = inst[ spaceName ]( values );
|
||||
|
||||
// if this was an rgba parse the assignment might happen twice
|
||||
// oh well....
|
||||
inst[ spaces[ spaceName ].cache ] = parsed[ spaces[ spaceName ].cache ];
|
||||
rgba = inst._rgba = parsed._rgba;
|
||||
|
||||
// exit each( stringParsers ) here because we matched
|
||||
return false;
|
||||
}
|
||||
});
|
||||
|
||||
// Found a stringParser that handled it
|
||||
if ( rgba.length ) {
|
||||
|
||||
// if this came from a parsed string, force "transparent" when alpha is 0
|
||||
// chrome, (and maybe others) return "transparent" as rgba(0,0,0,0)
|
||||
if ( rgba.join() === "0,0,0,0" ) {
|
||||
jQuery.extend( rgba, colors.transparent );
|
||||
}
|
||||
return inst;
|
||||
}
|
||||
|
||||
// named colors
|
||||
return colors[ string ];
|
||||
}
|
||||
|
||||
color.fn = jQuery.extend( color.prototype, {
|
||||
parse: function( red, green, blue, alpha ) {
|
||||
if ( red === undefined ) {
|
||||
this._rgba = [ null, null, null, null ];
|
||||
return this;
|
||||
}
|
||||
if ( red.jquery || red.nodeType ) {
|
||||
red = jQuery( red ).css( green );
|
||||
green = undefined;
|
||||
}
|
||||
|
||||
var inst = this,
|
||||
type = jQuery.type( red ),
|
||||
rgba = this._rgba = [];
|
||||
|
||||
// more than 1 argument specified - assume ( red, green, blue, alpha )
|
||||
if ( green !== undefined ) {
|
||||
red = [ red, green, blue, alpha ];
|
||||
type = "array";
|
||||
}
|
||||
|
||||
if ( type === "string" ) {
|
||||
return this.parse( stringParse( red ) || colors._default );
|
||||
}
|
||||
|
||||
if ( type === "array" ) {
|
||||
each( spaces.rgba.props, function( key, prop ) {
|
||||
rgba[ prop.idx ] = clamp( red[ prop.idx ], prop );
|
||||
});
|
||||
return this;
|
||||
}
|
||||
|
||||
if ( type === "object" ) {
|
||||
if ( red instanceof color ) {
|
||||
each( spaces, function( spaceName, space ) {
|
||||
if ( red[ space.cache ] ) {
|
||||
inst[ space.cache ] = red[ space.cache ].slice();
|
||||
}
|
||||
});
|
||||
} else {
|
||||
each( spaces, function( spaceName, space ) {
|
||||
var cache = space.cache;
|
||||
each( space.props, function( key, prop ) {
|
||||
|
||||
// if the cache doesn't exist, and we know how to convert
|
||||
if ( !inst[ cache ] && space.to ) {
|
||||
|
||||
// if the value was null, we don't need to copy it
|
||||
// if the key was alpha, we don't need to copy it either
|
||||
if ( key === "alpha" || red[ key ] == null ) {
|
||||
return;
|
||||
}
|
||||
inst[ cache ] = space.to( inst._rgba );
|
||||
}
|
||||
|
||||
// this is the only case where we allow nulls for ALL properties.
|
||||
// call clamp with alwaysAllowEmpty
|
||||
inst[ cache ][ prop.idx ] = clamp( red[ key ], prop, true );
|
||||
});
|
||||
|
||||
// everything defined but alpha?
|
||||
if ( inst[ cache ] && jQuery.inArray( null, inst[ cache ].slice( 0, 3 ) ) < 0 ) {
|
||||
// use the default of 1
|
||||
inst[ cache ][ 3 ] = 1;
|
||||
if ( space.from ) {
|
||||
inst._rgba = space.from( inst[ cache ] );
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
return this;
|
||||
}
|
||||
},
|
||||
is: function( compare ) {
|
||||
var is = color( compare ),
|
||||
same = true,
|
||||
inst = this;
|
||||
|
||||
each( spaces, function( _, space ) {
|
||||
var localCache,
|
||||
isCache = is[ space.cache ];
|
||||
if (isCache) {
|
||||
localCache = inst[ space.cache ] || space.to && space.to( inst._rgba ) || [];
|
||||
each( space.props, function( _, prop ) {
|
||||
if ( isCache[ prop.idx ] != null ) {
|
||||
same = ( isCache[ prop.idx ] === localCache[ prop.idx ] );
|
||||
return same;
|
||||
}
|
||||
});
|
||||
}
|
||||
return same;
|
||||
});
|
||||
return same;
|
||||
},
|
||||
_space: function() {
|
||||
var used = [],
|
||||
inst = this;
|
||||
each( spaces, function( spaceName, space ) {
|
||||
if ( inst[ space.cache ] ) {
|
||||
used.push( spaceName );
|
||||
}
|
||||
});
|
||||
return used.pop();
|
||||
},
|
||||
transition: function( other, distance ) {
|
||||
var end = color( other ),
|
||||
spaceName = end._space(),
|
||||
space = spaces[ spaceName ],
|
||||
startColor = this.alpha() === 0 ? color( "transparent" ) : this,
|
||||
start = startColor[ space.cache ] || space.to( startColor._rgba ),
|
||||
result = start.slice();
|
||||
|
||||
end = end[ space.cache ];
|
||||
each( space.props, function( key, prop ) {
|
||||
var index = prop.idx,
|
||||
startValue = start[ index ],
|
||||
endValue = end[ index ],
|
||||
type = propTypes[ prop.type ] || {};
|
||||
|
||||
// if null, don't override start value
|
||||
if ( endValue === null ) {
|
||||
return;
|
||||
}
|
||||
// if null - use end
|
||||
if ( startValue === null ) {
|
||||
result[ index ] = endValue;
|
||||
} else {
|
||||
if ( type.mod ) {
|
||||
if ( endValue - startValue > type.mod / 2 ) {
|
||||
startValue += type.mod;
|
||||
} else if ( startValue - endValue > type.mod / 2 ) {
|
||||
startValue -= type.mod;
|
||||
}
|
||||
}
|
||||
result[ index ] = clamp( ( endValue - startValue ) * distance + startValue, prop );
|
||||
}
|
||||
});
|
||||
return this[ spaceName ]( result );
|
||||
},
|
||||
blend: function( opaque ) {
|
||||
// if we are already opaque - return ourself
|
||||
if ( this._rgba[ 3 ] === 1 ) {
|
||||
return this;
|
||||
}
|
||||
|
||||
var rgb = this._rgba.slice(),
|
||||
a = rgb.pop(),
|
||||
blend = color( opaque )._rgba;
|
||||
|
||||
return color( jQuery.map( rgb, function( v, i ) {
|
||||
return ( 1 - a ) * blend[ i ] + a * v;
|
||||
}));
|
||||
},
|
||||
toRgbaString: function() {
|
||||
var prefix = "rgba(",
|
||||
rgba = jQuery.map( this._rgba, function( v, i ) {
|
||||
return v == null ? ( i > 2 ? 1 : 0 ) : v;
|
||||
});
|
||||
|
||||
if ( rgba[ 3 ] === 1 ) {
|
||||
rgba.pop();
|
||||
prefix = "rgb(";
|
||||
}
|
||||
|
||||
return prefix + rgba.join() + ")";
|
||||
},
|
||||
toHslaString: function() {
|
||||
var prefix = "hsla(",
|
||||
hsla = jQuery.map( this.hsla(), function( v, i ) {
|
||||
if ( v == null ) {
|
||||
v = i > 2 ? 1 : 0;
|
||||
}
|
||||
|
||||
// catch 1 and 2
|
||||
if ( i && i < 3 ) {
|
||||
v = Math.round( v * 100 ) + "%";
|
||||
}
|
||||
return v;
|
||||
});
|
||||
|
||||
if ( hsla[ 3 ] === 1 ) {
|
||||
hsla.pop();
|
||||
prefix = "hsl(";
|
||||
}
|
||||
return prefix + hsla.join() + ")";
|
||||
},
|
||||
toHexString: function( includeAlpha ) {
|
||||
var rgba = this._rgba.slice(),
|
||||
alpha = rgba.pop();
|
||||
|
||||
if ( includeAlpha ) {
|
||||
rgba.push( ~~( alpha * 255 ) );
|
||||
}
|
||||
|
||||
return "#" + jQuery.map( rgba, function( v ) {
|
||||
|
||||
// default to 0 when nulls exist
|
||||
v = ( v || 0 ).toString( 16 );
|
||||
return v.length === 1 ? "0" + v : v;
|
||||
}).join("");
|
||||
},
|
||||
toString: function() {
|
||||
return this._rgba[ 3 ] === 0 ? "transparent" : this.toRgbaString();
|
||||
}
|
||||
});
|
||||
color.fn.parse.prototype = color.fn;
|
||||
|
||||
// hsla conversions adapted from:
|
||||
// https://code.google.com/p/maashaack/source/browse/packages/graphics/trunk/src/graphics/colors/HUE2RGB.as?r=5021
|
||||
|
||||
function hue2rgb( p, q, h ) {
|
||||
h = ( h + 1 ) % 1;
|
||||
if ( h * 6 < 1 ) {
|
||||
return p + (q - p) * h * 6;
|
||||
}
|
||||
if ( h * 2 < 1) {
|
||||
return q;
|
||||
}
|
||||
if ( h * 3 < 2 ) {
|
||||
return p + (q - p) * ((2/3) - h) * 6;
|
||||
}
|
||||
return p;
|
||||
}
|
||||
|
||||
spaces.hsla.to = function ( rgba ) {
|
||||
if ( rgba[ 0 ] == null || rgba[ 1 ] == null || rgba[ 2 ] == null ) {
|
||||
return [ null, null, null, rgba[ 3 ] ];
|
||||
}
|
||||
var r = rgba[ 0 ] / 255,
|
||||
g = rgba[ 1 ] / 255,
|
||||
b = rgba[ 2 ] / 255,
|
||||
a = rgba[ 3 ],
|
||||
max = Math.max( r, g, b ),
|
||||
min = Math.min( r, g, b ),
|
||||
diff = max - min,
|
||||
add = max + min,
|
||||
l = add * 0.5,
|
||||
h, s;
|
||||
|
||||
if ( min === max ) {
|
||||
h = 0;
|
||||
} else if ( r === max ) {
|
||||
h = ( 60 * ( g - b ) / diff ) + 360;
|
||||
} else if ( g === max ) {
|
||||
h = ( 60 * ( b - r ) / diff ) + 120;
|
||||
} else {
|
||||
h = ( 60 * ( r - g ) / diff ) + 240;
|
||||
}
|
||||
|
||||
// chroma (diff) == 0 means greyscale which, by definition, saturation = 0%
|
||||
// otherwise, saturation is based on the ratio of chroma (diff) to lightness (add)
|
||||
if ( diff === 0 ) {
|
||||
s = 0;
|
||||
} else if ( l <= 0.5 ) {
|
||||
s = diff / add;
|
||||
} else {
|
||||
s = diff / ( 2 - add );
|
||||
}
|
||||
return [ Math.round(h) % 360, s, l, a == null ? 1 : a ];
|
||||
};
|
||||
|
||||
spaces.hsla.from = function ( hsla ) {
|
||||
if ( hsla[ 0 ] == null || hsla[ 1 ] == null || hsla[ 2 ] == null ) {
|
||||
return [ null, null, null, hsla[ 3 ] ];
|
||||
}
|
||||
var h = hsla[ 0 ] / 360,
|
||||
s = hsla[ 1 ],
|
||||
l = hsla[ 2 ],
|
||||
a = hsla[ 3 ],
|
||||
q = l <= 0.5 ? l * ( 1 + s ) : l + s - l * s,
|
||||
p = 2 * l - q;
|
||||
|
||||
return [
|
||||
Math.round( hue2rgb( p, q, h + ( 1 / 3 ) ) * 255 ),
|
||||
Math.round( hue2rgb( p, q, h ) * 255 ),
|
||||
Math.round( hue2rgb( p, q, h - ( 1 / 3 ) ) * 255 ),
|
||||
a
|
||||
];
|
||||
};
|
||||
|
||||
|
||||
each( spaces, function( spaceName, space ) {
|
||||
var props = space.props,
|
||||
cache = space.cache,
|
||||
to = space.to,
|
||||
from = space.from;
|
||||
|
||||
// makes rgba() and hsla()
|
||||
color.fn[ spaceName ] = function( value ) {
|
||||
|
||||
// generate a cache for this space if it doesn't exist
|
||||
if ( to && !this[ cache ] ) {
|
||||
this[ cache ] = to( this._rgba );
|
||||
}
|
||||
if ( value === undefined ) {
|
||||
return this[ cache ].slice();
|
||||
}
|
||||
|
||||
var ret,
|
||||
type = jQuery.type( value ),
|
||||
arr = ( type === "array" || type === "object" ) ? value : arguments,
|
||||
local = this[ cache ].slice();
|
||||
|
||||
each( props, function( key, prop ) {
|
||||
var val = arr[ type === "object" ? key : prop.idx ];
|
||||
if ( val == null ) {
|
||||
val = local[ prop.idx ];
|
||||
}
|
||||
local[ prop.idx ] = clamp( val, prop );
|
||||
});
|
||||
|
||||
if ( from ) {
|
||||
ret = color( from( local ) );
|
||||
ret[ cache ] = local;
|
||||
return ret;
|
||||
} else {
|
||||
return color( local );
|
||||
}
|
||||
};
|
||||
|
||||
// makes red() green() blue() alpha() hue() saturation() lightness()
|
||||
each( props, function( key, prop ) {
|
||||
// alpha is included in more than one space
|
||||
if ( color.fn[ key ] ) {
|
||||
return;
|
||||
}
|
||||
color.fn[ key ] = function( value ) {
|
||||
var vtype = jQuery.type( value ),
|
||||
fn = ( key === "alpha" ? ( this._hsla ? "hsla" : "rgba" ) : spaceName ),
|
||||
local = this[ fn ](),
|
||||
cur = local[ prop.idx ],
|
||||
match;
|
||||
|
||||
if ( vtype === "undefined" ) {
|
||||
return cur;
|
||||
}
|
||||
|
||||
if ( vtype === "function" ) {
|
||||
value = value.call( this, cur );
|
||||
vtype = jQuery.type( value );
|
||||
}
|
||||
if ( value == null && prop.empty ) {
|
||||
return this;
|
||||
}
|
||||
if ( vtype === "string" ) {
|
||||
match = rplusequals.exec( value );
|
||||
if ( match ) {
|
||||
value = cur + parseFloat( match[ 2 ] ) * ( match[ 1 ] === "+" ? 1 : -1 );
|
||||
}
|
||||
}
|
||||
local[ prop.idx ] = value;
|
||||
return this[ fn ]( local );
|
||||
};
|
||||
});
|
||||
});
|
||||
|
||||
// add cssHook and .fx.step function for each named hook.
|
||||
// accept a space separated string of properties
|
||||
color.hook = function( hook ) {
|
||||
var hooks = hook.split( " " );
|
||||
each( hooks, function( i, hook ) {
|
||||
jQuery.cssHooks[ hook ] = {
|
||||
set: function( elem, value ) {
|
||||
var parsed, curElem,
|
||||
backgroundColor = "";
|
||||
|
||||
if ( value !== "transparent" && ( jQuery.type( value ) !== "string" || ( parsed = stringParse( value ) ) ) ) {
|
||||
value = color( parsed || value );
|
||||
if ( !support.rgba && value._rgba[ 3 ] !== 1 ) {
|
||||
curElem = hook === "backgroundColor" ? elem.parentNode : elem;
|
||||
while (
|
||||
(backgroundColor === "" || backgroundColor === "transparent") &&
|
||||
curElem && curElem.style
|
||||
) {
|
||||
try {
|
||||
backgroundColor = jQuery.css( curElem, "backgroundColor" );
|
||||
curElem = curElem.parentNode;
|
||||
} catch ( e ) {
|
||||
}
|
||||
}
|
||||
|
||||
value = value.blend( backgroundColor && backgroundColor !== "transparent" ?
|
||||
backgroundColor :
|
||||
"_default" );
|
||||
}
|
||||
|
||||
value = value.toRgbaString();
|
||||
}
|
||||
try {
|
||||
elem.style[ hook ] = value;
|
||||
} catch( e ) {
|
||||
// wrapped to prevent IE from throwing errors on "invalid" values like 'auto' or 'inherit'
|
||||
}
|
||||
}
|
||||
};
|
||||
jQuery.fx.step[ hook ] = function( fx ) {
|
||||
if ( !fx.colorInit ) {
|
||||
fx.start = color( fx.elem, hook );
|
||||
fx.end = color( fx.end );
|
||||
fx.colorInit = true;
|
||||
}
|
||||
jQuery.cssHooks[ hook ].set( fx.elem, fx.start.transition( fx.end, fx.pos ) );
|
||||
};
|
||||
});
|
||||
|
||||
};
|
||||
|
||||
color.hook( stepHooks );
|
||||
|
||||
jQuery.cssHooks.borderColor = {
|
||||
expand: function( value ) {
|
||||
var expanded = {};
|
||||
|
||||
each( [ "Top", "Right", "Bottom", "Left" ], function( i, part ) {
|
||||
expanded[ "border" + part + "Color" ] = value;
|
||||
});
|
||||
return expanded;
|
||||
}
|
||||
};
|
||||
|
||||
// Basic color names only.
|
||||
// Usage of any of the other color names requires adding yourself or including
|
||||
// jquery.color.svg-names.js.
|
||||
colors = jQuery.Color.names = {
|
||||
// 4.1. Basic color keywords
|
||||
aqua: "#00ffff",
|
||||
black: "#000000",
|
||||
blue: "#0000ff",
|
||||
fuchsia: "#ff00ff",
|
||||
gray: "#808080",
|
||||
green: "#008000",
|
||||
lime: "#00ff00",
|
||||
maroon: "#800000",
|
||||
navy: "#000080",
|
||||
olive: "#808000",
|
||||
purple: "#800080",
|
||||
red: "#ff0000",
|
||||
silver: "#c0c0c0",
|
||||
teal: "#008080",
|
||||
white: "#ffffff",
|
||||
yellow: "#ffff00",
|
||||
|
||||
// 4.2.3. "transparent" color keyword
|
||||
transparent: [ null, null, null, 0 ],
|
||||
|
||||
_default: "#ffffff"
|
||||
};
|
||||
|
||||
}( jQuery ));
|
||||
134
js/render-fox.js
Normal file
134
js/render-fox.js
Normal file
|
|
@ -0,0 +1,134 @@
|
|||
var renderFox = function (canvas, opts) {
|
||||
var width = opts.canvas.width;
|
||||
var height = opts.canvas.height;
|
||||
var ctx = canvas.getContext('2d');
|
||||
|
||||
ctx.fillStyle = opts.canvas.color;
|
||||
ctx.fillRect(0, 0, width, height);
|
||||
renderEars(ctx, opts.ears);
|
||||
renderHead(ctx, opts.head);
|
||||
renderEyes(ctx, opts.eyes);
|
||||
renderNose(ctx, opts.nose);
|
||||
renderMouth(ctx, opts.mouth);
|
||||
};
|
||||
|
||||
function renderHead(ctx, opts) {
|
||||
ctx.save();
|
||||
ctx.translate(ctx.canvas.width/2, ctx.canvas.height/2);
|
||||
ctx.rotate(Math.PI / 4);
|
||||
drawEllipseByCenter(ctx, 0, 0, opts.width, opts.height, opts.color, null, opts.kappa);
|
||||
ctx.restore();
|
||||
ctx.clip();
|
||||
drawEllipseByCenter(ctx, ctx.canvas.width / 2, ctx.canvas.height, opts.maskWidth, opts.maskHeight, '#fff', '#fff', 0.5);
|
||||
}
|
||||
|
||||
function renderEars(ctx, opts) {
|
||||
var offset = {
|
||||
x: ctx.canvas.width/2,
|
||||
y: ctx.canvas.height/2
|
||||
}
|
||||
ctx.save();
|
||||
ctx.translate(offset.x, offset.y);
|
||||
ctx.rotate(-opts.left.angle);
|
||||
drawEllipseByCenter(ctx, opts.left.x - offset.x, opts.left.y - offset.y, opts.left.width, opts.left.height, opts.color, null, opts.kappa);
|
||||
ctx.restore();
|
||||
|
||||
ctx.save();
|
||||
ctx.translate(offset.x, offset.y);
|
||||
ctx.rotate(-opts.right.angle);
|
||||
drawEllipseByCenter(ctx, opts.right.x - offset.x, opts.right.y - offset.y, opts.right.width, opts.right.height, opts.color, null, opts.kappa);
|
||||
ctx.restore();
|
||||
}
|
||||
|
||||
function renderEyes(ctx, opts) {
|
||||
switch (opts.style) {
|
||||
case "ellipse":
|
||||
drawEllipseByCenter(ctx, opts.left.x, opts.left.y, opts.width, opts.height, "black", null, 0.5);
|
||||
drawEllipseByCenter(ctx, opts.right.x, opts.right.y, opts.width, opts.height, "black", null, 0.5);
|
||||
break;
|
||||
case "smiley":
|
||||
ctx.strokeStyle = "black";
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(opts.left.x - opts.width, opts.left.y + opts.height);
|
||||
ctx.bezierCurveTo(opts.left.x - opts.width, opts.left.y + opts.height, opts.left.x, opts.left.y, opts.left.x + opts.width, opts.left.y + opts.height);
|
||||
ctx.lineWidth = 2;
|
||||
ctx.stroke();
|
||||
ctx.closePath();
|
||||
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(opts.right.x - opts.width, opts.right.y + opts.height);
|
||||
ctx.bezierCurveTo(opts.right.x - opts.width, opts.right.y + opts.height, opts.right.x, opts.right.y, opts.right.x + opts.width, opts.right.y + opts.height);
|
||||
ctx.lineWidth = 2;
|
||||
ctx.stroke();
|
||||
ctx.closePath();
|
||||
break;
|
||||
case "none":
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
function renderNose(ctx, opts) {
|
||||
|
||||
ctx.strokeStyle = "black";
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(opts.x - opts.width/2, opts.y - opts.height/2);
|
||||
ctx.bezierCurveTo(opts.x - opts.width/2, opts.y - opts.height/2, opts.x, opts.y - opts.height, opts.x + opts.width/2, opts.y - opts.height/2);
|
||||
ctx.bezierCurveTo(opts.x + opts.width/2, opts.y - opts.height/2, opts.x + opts.width/2, opts.y + opts.height/2, opts.x, opts.y + opts.height/2);
|
||||
ctx.bezierCurveTo(opts.x, opts.y + opts.height/2, opts.x - opts.width/2, opts.y + opts.height/2, opts.x - opts.width/2, opts.y - opts.height/2);
|
||||
ctx.fillStyle = "black";
|
||||
ctx.fill();
|
||||
ctx.stroke();
|
||||
}
|
||||
|
||||
function renderMouth(ctx, opts) {
|
||||
ctx.strokeStyle = "black";
|
||||
ctx.lineWidth = 2;
|
||||
ctx.beginPath();
|
||||
switch (opts.style) {
|
||||
case "smirk":
|
||||
ctx.moveTo(opts.x - opts.width/2, opts.y - opts.height/2);
|
||||
ctx.bezierCurveTo(opts.x - opts.width/2, opts.y - opts.height/2,
|
||||
opts.x - opts.width/2, opts.y + opts.height/2,
|
||||
opts.x + opts.width/2, opts.y
|
||||
)
|
||||
break;
|
||||
case "cat":
|
||||
ctx.moveTo(opts.x - opts.width/2, opts.y + opts.height/2);
|
||||
ctx.lineTo(opts.x, opts.y - opts.height/2);
|
||||
ctx.lineTo(opts.x + opts.width/2, opts.y + opts.height/2);
|
||||
break;
|
||||
}
|
||||
ctx.stroke();
|
||||
}
|
||||
|
||||
function drawEllipseByCenter(ctx, cx, cy, w, h, color, fillColor, kappa) {
|
||||
drawEllipse(ctx, cx - w/2.0, cy - h/2.0, w, h, color, fillColor, kappa);
|
||||
}
|
||||
|
||||
function drawEllipse(ctx, x, y, w, h, color, fillColor, kappa) {
|
||||
var kappa = kappa || 0.3,
|
||||
ox = (w / 2) * kappa, // control point offset horizontal
|
||||
oy = (h / 2) * kappa, // control point offset vertical
|
||||
xe = x + w, // x-end
|
||||
ye = y + h, // y-end
|
||||
xm = x + w / 2, // x-middle
|
||||
ym = y + h / 2; // y-middle
|
||||
|
||||
if (color) {
|
||||
ctx.strokeStyle = color;
|
||||
}
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(x, ym);
|
||||
ctx.bezierCurveTo(x, ym - oy, xm - ox, y, xm, y);
|
||||
ctx.bezierCurveTo(xm + ox, y, xe, ym - oy, xe, ym);
|
||||
ctx.bezierCurveTo(xe, ym + oy, xm + ox, ye, xm, ye);
|
||||
ctx.bezierCurveTo(xm - ox, ye, x, ym + oy, x, ym);
|
||||
var fillColor = fillColor || color;
|
||||
if (fillColor) {
|
||||
ctx.fillStyle = fillColor;
|
||||
ctx.fill();
|
||||
}
|
||||
ctx.stroke();
|
||||
}
|
||||
|
||||
module.exports = renderFox;
|
||||
File diff suppressed because one or more lines are too long
209
server.js
209
server.js
|
|
@ -1,210 +1,17 @@
|
|||
var fs = require('fs');
|
||||
var express = require('express');
|
||||
var Canvas = require('canvas');
|
||||
|
||||
var Fox = require('./js/fox.js');
|
||||
var davis = require('./js/davis.js');
|
||||
var geo = require('./js/geo.js');
|
||||
|
||||
// var ngon = function (c) {
|
||||
// var n=c.n || 3;
|
||||
//
|
||||
// var ctx= c.context || false;
|
||||
// var x=c.x || 500;
|
||||
// var y=c.y || x;
|
||||
// var r=c.r || 500;
|
||||
// if (n%2==0){
|
||||
// var rotation=360/(n*2)*davis.random(n*2);
|
||||
// }
|
||||
// else {
|
||||
// var rotation=90+(180*davis.random(2));
|
||||
// };
|
||||
// rotation=c.rotation || rotation;
|
||||
// var color=c.color || davis.randomColor("grey");
|
||||
// var lineWidth=c.lineWidth || 1;
|
||||
// var fill=c.fill || davis.randcomColor();
|
||||
// ctx.beginPath();
|
||||
// for (var i=0;i<n+2;i++){
|
||||
// var nx=geo.getPoint(x,y,r,rotation+(i*360/n)).x2;
|
||||
// var ny=geo.getPoint(x,y,r,rotation+(i*360/n)).y2;
|
||||
// ctx.lineTo(nx,ny);
|
||||
// }
|
||||
// ctx.lineJoin='miter';
|
||||
// ctx.strokeStyle=color;
|
||||
// ctx.lineWidth=lineWidth;
|
||||
// ctx.fillStyle=fill;
|
||||
// ctx.fill();
|
||||
// ctx.stroke();
|
||||
// return true;
|
||||
// };
|
||||
|
||||
var renderFox = function (canvas, opts) {
|
||||
var width = opts.canvas.width;
|
||||
var height = opts.canvas.height;
|
||||
var ctx = canvas.getContext('2d');
|
||||
|
||||
ctx.fillStyle = opts.canvas.color;
|
||||
ctx.fillRect(0, 0, width, height);
|
||||
// draw ears
|
||||
renderEars(ctx, opts.ears);
|
||||
// draw head
|
||||
renderHead(ctx, opts.head);
|
||||
// draw eyes
|
||||
renderEyes(ctx, opts.eyes);
|
||||
// draw cheeks
|
||||
// draw eyes
|
||||
// draw nose
|
||||
renderNose(ctx, opts.nose);
|
||||
// draw mouth
|
||||
renderMouth(ctx, opts.mouth);
|
||||
};
|
||||
|
||||
function renderHead(ctx, opts) {
|
||||
|
||||
ctx.save();
|
||||
ctx.translate(ctx.canvas.width/2, ctx.canvas.height/2);
|
||||
ctx.rotate(Math.PI / 4);
|
||||
drawEllipseByCenter(ctx, 0, 0, opts.width, opts.height, opts.color, null, opts.kappa);
|
||||
ctx.restore();
|
||||
ctx.clip();
|
||||
drawEllipseByCenter(ctx, ctx.canvas.width / 2, ctx.canvas.height, opts.maskWidth, opts.maskHeight, '#fff', '#fff', 0.5);
|
||||
}
|
||||
|
||||
function renderEars(ctx, opts) {
|
||||
var offset = {
|
||||
x: ctx.canvas.width/2,
|
||||
y: ctx.canvas.height/2
|
||||
}
|
||||
ctx.save();
|
||||
ctx.translate(offset.x, offset.y);
|
||||
ctx.rotate(-opts.left.angle);
|
||||
drawEllipseByCenter(ctx, opts.left.x - offset.x, opts.left.y - offset.y, opts.left.width, opts.left.height, opts.color, null, opts.kappa);
|
||||
ctx.restore();
|
||||
|
||||
ctx.save();
|
||||
ctx.translate(offset.x, offset.y);
|
||||
ctx.rotate(-opts.right.angle);
|
||||
drawEllipseByCenter(ctx, opts.right.x - offset.x, opts.right.y - offset.y, opts.right.width, opts.right.height, opts.color, null, opts.kappa);
|
||||
ctx.restore();
|
||||
}
|
||||
|
||||
function renderEyes(ctx, opts) {
|
||||
switch (opts.style) {
|
||||
case "ellipse":
|
||||
drawEllipseByCenter(ctx, opts.left.x, opts.left.y, opts.width, opts.height, "black", null, 0.5);
|
||||
drawEllipseByCenter(ctx, opts.right.x, opts.right.y, opts.width, opts.height, "black", null, 0.5);
|
||||
break;
|
||||
case "smiley":
|
||||
ctx.strokeStyle = "black";
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(opts.left.x - opts.width, opts.left.y + opts.height);
|
||||
ctx.bezierCurveTo(opts.left.x - opts.width, opts.left.y + opts.height, opts.left.x, opts.left.y, opts.left.x + opts.width, opts.left.y + opts.height);
|
||||
ctx.lineWidth = 2;
|
||||
ctx.stroke();
|
||||
ctx.closePath();
|
||||
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(opts.right.x - opts.width, opts.right.y + opts.height);
|
||||
ctx.bezierCurveTo(opts.right.x - opts.width, opts.right.y + opts.height, opts.right.x, opts.right.y, opts.right.x + opts.width, opts.right.y + opts.height);
|
||||
ctx.lineWidth = 2;
|
||||
ctx.stroke();
|
||||
ctx.closePath();
|
||||
break;
|
||||
case "none":
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
function renderNose(ctx, opts) {
|
||||
|
||||
ctx.strokeStyle = "black";
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(opts.x - opts.width/2, opts.y - opts.height/2);
|
||||
ctx.bezierCurveTo(opts.x - opts.width/2, opts.y - opts.height/2, opts.x, opts.y - opts.height, opts.x + opts.width/2, opts.y - opts.height/2);
|
||||
ctx.bezierCurveTo(opts.x + opts.width/2, opts.y - opts.height/2, opts.x + opts.width/2, opts.y + opts.height/2, opts.x, opts.y + opts.height/2);
|
||||
ctx.bezierCurveTo(opts.x, opts.y + opts.height/2, opts.x - opts.width/2, opts.y + opts.height/2, opts.x - opts.width/2, opts.y - opts.height/2);
|
||||
ctx.fillStyle = "black";
|
||||
ctx.fill();
|
||||
ctx.stroke();
|
||||
}
|
||||
|
||||
function renderMouth(ctx, opts) {
|
||||
ctx.strokeStyle = "black";
|
||||
ctx.lineWidth = 2;
|
||||
ctx.beginPath();
|
||||
switch (opts.style) {
|
||||
case "smirk":
|
||||
ctx.moveTo(opts.x - opts.width/2, opts.y - opts.height/2);
|
||||
ctx.bezierCurveTo(opts.x - opts.width/2, opts.y - opts.height/2,
|
||||
opts.x - opts.width/2, opts.y + opts.height/2,
|
||||
opts.x + opts.width/2, opts.y
|
||||
)
|
||||
break;
|
||||
case "cat":
|
||||
ctx.moveTo(opts.x - opts.width/2, opts.y + opts.height/2);
|
||||
ctx.lineTo(opts.x, opts.y - opts.height/2);
|
||||
ctx.lineTo(opts.x + opts.width/2, opts.y + opts.height/2);
|
||||
break;
|
||||
}
|
||||
ctx.stroke();
|
||||
}
|
||||
|
||||
function drawEllipseByCenter(ctx, cx, cy, w, h, color, fillColor, kappa) {
|
||||
console.log("ellipse coords", cx, cy, w, h);
|
||||
drawEllipse(ctx, cx - w/2.0, cy - h/2.0, w, h, color, fillColor, kappa);
|
||||
}
|
||||
|
||||
function drawEllipse(ctx, x, y, w, h, color, fillColor, kappa) {
|
||||
var kappa = kappa || 0.3,
|
||||
ox = (w / 2) * kappa, // control point offset horizontal
|
||||
oy = (h / 2) * kappa, // control point offset vertical
|
||||
xe = x + w, // x-end
|
||||
ye = y + h, // y-end
|
||||
xm = x + w / 2, // x-middle
|
||||
ym = y + h / 2; // y-middle
|
||||
|
||||
if (color) {
|
||||
ctx.strokeStyle = color;
|
||||
}
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(x, ym);
|
||||
ctx.bezierCurveTo(x, ym - oy, xm - ox, y, xm, y);
|
||||
ctx.bezierCurveTo(xm + ox, y, xe, ym - oy, xe, ym);
|
||||
ctx.bezierCurveTo(xe, ym + oy, xm + ox, ye, xm, ye);
|
||||
ctx.bezierCurveTo(xm - ox, ye, x, ym + oy, x, ym);
|
||||
var fillColor = fillColor || color;
|
||||
if (fillColor) {
|
||||
ctx.fillStyle = fillColor;
|
||||
ctx.fill();
|
||||
}
|
||||
//ctx.closePath(); // not used correctly, see comments (use to close off open path)
|
||||
ctx.stroke();
|
||||
}
|
||||
|
||||
var circle = function(c){
|
||||
var ctx= c.context || false;
|
||||
var x=c.x || 500;
|
||||
var y=c.y || x;
|
||||
var r=c.r || 10;
|
||||
var cr=ctx.canvas.width/2;
|
||||
var lineWidth=c.lineWidth || 1;
|
||||
ctx.beginPath();
|
||||
ctx.arc(x,y,r,0,2*Math.PI);
|
||||
ctx.lineWidth=lineWidth;
|
||||
|
||||
ctx.fillStyle="red";
|
||||
ctx.fill();
|
||||
ctx.stroke();
|
||||
|
||||
|
||||
return true;
|
||||
};
|
||||
var renderFox = require('./js/render-fox.js');
|
||||
|
||||
function writeFoxesToDisk (width, height, n=10) {
|
||||
var fileNames = [];
|
||||
for (var i = 0; i < n; i++) {
|
||||
var Image = Canvas.Image;
|
||||
var canvas = new Canvas(width, height);
|
||||
var ctx = canvas.getContext('2d');
|
||||
var fox = Fox(width, height);
|
||||
renderFox(canvas, fox);
|
||||
var img = new Buffer(canvas.toDataURL(), 'base64');
|
||||
var fileName = "fox" + Math.floor(Math.random() * 10000) + ".png";
|
||||
var filePath = __dirname + '/images/' + fileName;
|
||||
|
||||
|
|
@ -217,16 +24,12 @@ function writeFoxesToDisk (width, height, n=10) {
|
|||
return fileNames;
|
||||
};
|
||||
|
||||
var Canvas = require('canvas');
|
||||
var express = require('express');
|
||||
var fs = require('fs');
|
||||
|
||||
var app = express();
|
||||
|
||||
app.use(express.static(__dirname + '/images'));
|
||||
|
||||
app.get('/', function(req, res) {
|
||||
var fileNames = writeFoxesToDisk(300, 300, 30);
|
||||
var fileNames = writeFoxesToDisk(200, 200, 30);
|
||||
var images = fileNames.map(fileName => '<img src="/' + fileName + '"/>');
|
||||
res.send(images.join(''));
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in a new issue