- Author:
- Vincent Guerin
- Twitter:
- @
- GitHub:
- Facebook:
- Google+:
- +
- Reddit:
- /r/
- Pouet:
- Website:
- Compo:
- classic
- Demo link:
- https://js1k.com/2013-spring/demo/1547
- Shortlink:
- https://js1k.com/1547
- Blog post:
- please update here!
- Bytes:
- 936
- Chars:
- 936
- Submission
c.width=1024;c.height=768;a.font="bold 200pt Arial";a.fillStyle="rgb(255,255,255)";a.fillText("spring",50,300);var e=[],f=a.getImageData(0,0,c.width,c.height);for(x=0;x<f.width;x++)for(y=0;y<f.height;y++){var h=f;0<h.data[4*(x+y*h.width)+3]&&e.push([x,y])}setInterval(j,10);var k=40,l=[]; function m(){this.f=function(){var d=e[p][1];this.x=e[p][0];this.y=d;this.width=15;this.b=2*Math.random()*Math.PI-Math.PI;this.length=this.a=0};this.e=function(){this.length<k&&(this.x+=1*Math.cos(this.b),this.y+=1*Math.sin(this.b),this.a+=0.02*Math.random()-0.01,this.a*=1,this.b+=this.a,void 0!=this.c&&(aa=this.length/k,r=8,g=parseInt(255*aa),b=32,a.beginPath(),a.strokeStyle="rgba("+r+","+g+","+b+","+(1-aa)+")",a.moveTo(this.c,this.d),a.lineTo(this.x,this.y),a.closePath(),a.stroke()),this.c=this.x, this.d=this.y,this.length++)}}function j(){for(p in e)if(0.9999<Math.random()){var d=new m;d.f();l.push(d)}if(0<l.length)for(d in l)l[d].e()};
- Description
- Drawing grass with tendrils algo...
- Base64 encoded
Yy53aWR0aD0xMDI0O2MuaGVpZ2h0PTc2ODthLmZvbnQ9ImJvbGQgMjAwcHQgQXJpYWwiO2EuZmlsbFN0eWxlPSJyZ2IoMjU1LDI1NSwyNTUpIjthLmZpbGxUZXh0KCJzcHJpbmciLDUwLDMwMCk7dmFyIGU9W10sZj1hLmdldEltYWdlRGF0YSgwLDAsYy53aWR0aCxjLmhlaWdodCk7Zm9yKHg9MDt4PGYud2lkdGg7eCsrKWZvcih5PTA7eTxmLmhlaWdodDt5Kyspe3ZhciBoPWY7MDxoLmRhdGFbNCooeCt5Kmgud2lkdGgpKzNdJiZlLnB1c2goW3gseV0pfXNldEludGVydmFsKGosMTApO3ZhciBrPTQwLGw9W107IGZ1bmN0aW9uIG0oKXt0aGlzLmY9ZnVuY3Rpb24oKXt2YXIgZD1lW3BdWzFdO3RoaXMueD1lW3BdWzBdO3RoaXMueT1kO3RoaXMud2lkdGg9MTU7dGhpcy5iPTIqTWF0aC5yYW5kb20oKSpNYXRoLlBJLU1hdGguUEk7dGhpcy5sZW5ndGg9dGhpcy5hPTB9O3RoaXMuZT1mdW5jdGlvbigpe3RoaXMubGVuZ3RoPGsmJih0aGlzLngrPTEqTWF0aC5jb3ModGhpcy5iKSx0aGlzLnkrPTEqTWF0aC5zaW4odGhpcy5iKSx0aGlzLmErPTAuMDIqTWF0aC5yYW5kb20oKS0wLjAxLHRoaXMuYSo9MSx0aGlzLmIrPXRoaXMuYSx2b2lkIDAhPXRoaXMuYyYmKGFhPXRoaXMubGVuZ3RoL2sscj04LGc9cGFyc2VJbnQoMjU1KmFhKSxiPTMyLGEuYmVnaW5QYXRoKCksYS5zdHJva2VTdHlsZT0icmdiYSgiK3IrIiwiK2crIiwiK2IrIiwiKygxLWFhKSsiKSIsYS5tb3ZlVG8odGhpcy5jLHRoaXMuZCksYS5saW5lVG8odGhpcy54LHRoaXMueSksYS5jbG9zZVBhdGgoKSxhLnN0cm9rZSgpKSx0aGlzLmM9dGhpcy54LCB0aGlzLmQ9dGhpcy55LHRoaXMubGVuZ3RoKyspfX1mdW5jdGlvbiBqKCl7Zm9yKHAgaW4gZSlpZigwLjk5OTk8TWF0aC5yYW5kb20oKSl7dmFyIGQ9bmV3IG07ZC5mKCk7bC5wdXNoKGQpfWlmKDA8bC5sZW5ndGgpZm9yKGQgaW4gbClsW2RdLmUoKX07
- Original source
c.width = 1024;
c.height = 768;
a.font = "bold 200pt Arial";
a.fillStyle = "rgb(255,255,255)";
a.fillText("spring", 50, 300);
var px = [];
var imgData=a.getImageData(0,0,c.width,c.height);
for(x=0; x<imgData.width; x++)
{
for(y=0 ; y<imgData.height; y++)
{
if(getPixel(imgData,x,y)[3] > 0)
{
px.push( [x,y] );
}
}
}
setInterval(draw, 10);
var max = 40;
var tt = new Array();
//thanks to Tom De Smedt, based on the "Tendrils" algorithm by ART+COM
//http://nodebox.net/code/index.php/Tendrils
function tendril()
{
this.init = function(x, y, width)
{
this.x = x;
this.y = y;
this.width = width;
this.angle = Math.random()*2*Math.PI - Math.PI;
this.v = 0;
this.length = 0;
};
this.grow = function(distance, curl, step) //distance=3.0, curl=1.0, step=0.02
{
if(this.length < max)
{
this.x += Math.cos(this.angle) * distance;
this.y += Math.sin(this.angle) * distance;
this.v += Math.random() * step - step/2;
this.v *= 0.9 + curl*0.1;
this.angle += this.v;
if(this._x != undefined)
{
aa = this.length/max;
r = 8;
g = parseInt(aa * 255);
b = 32;
a.beginPath();
a.strokeStyle="rgba("+r+","+g+","+b+","+(1-aa)+")";
a.moveTo(this._x,this._y);
a.lineTo(this.x,this.y);
a.closePath();
a.stroke();
}
this._x = this.x;
this._y = this.y;
this.length++;
}
};
};
function draw()
{
// add new tendrils
for(p in px)
{
if(Math.random() > 0.9999)
{
var t = new tendril();
t.init(px[p][0],px[p][1],15);
tt.push ( t );
}
}
// grow actuals tendrils
if(tt.length > 0)
{
for(t in tt)
{
tt[t].grow(1.0, 1.0, 0.02);
}
}
}
function getPixel(imgData, x, y) {
var offset = (x + y * imgData.width) * 4;
var r = imgData.data[offset+0];
var g = imgData.data[offset+1];
var b = imgData.data[offset+2];
var a = imgData.data[offset+3];
return [r,g,b,a];
}