mureakuha 3.0 koodikirjasto Muut/Javascript Metaballs

Javascript Metaballs

Tuhmahepo 14.03.07 21:39

Metaballs animaatio selaimessa

Tekstiversio Arvo: 40 (42 ääntä) Äänestä: + -

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
	<title>Javascript Metaballs</title>
</head>
<body>
<script type="text/javascript">
//<![CDATA[

window.onload = function()
{
	initMetaballs(3, "canvas", 40, 40);
}

//metaball object or data container or whatever
Metaball = function(x, y, radius, mod1, mod2)
{
	this.x = x;
	this.y = y;
	this.mod1 = mod1;
	this.mod2 = mod2;
	this.radius = radius;
}

Context = function(id, width, height, ballCount)
{
	var i;
	
	this.elem = document.getElementById(id);
	this.width = width;
	this.height = height;
	
	//create an array containing metaballs
	this.balls = new Array();
	for(i=0;i<ballCount;i++)
		this.balls.push(new Metaball(Math.random() * this.width, Math.random() * this.height, 
			10 + (Math.random() * 15), 1.5 - Math.random(), 1.5 - Math.random()));
	
	//set of ascii characters used for rendering
	this.graphics = new Array("§", "X", "s", "o", ";", ",", ".", "&nbsp;");
	
	//calculate new positions for metaballs
	this.animate = function()
	{
		var i;
		var time = new Date();
		var tick = time.getTime();
		
		for(i=0;i<this.balls.length;i++)
		{
			this.balls[i].x = (this.width >> 1) + (Math.sin(this.balls[i].mod1 * (tick / 1000)) * ((this.width - 10) >> 1));
			this.balls[i].y = (this.height >> 1) + (Math.cos(this.balls[i].mod2 * (tick / 1000)) * ((this.height - 10) >> 1));
		}
	}
	
	//render metaballs to browser
	this.render = function()
	{
		var i, x, y;
		var tmpx, tmpy;
		var tmp;
		var len;
		
		len = this.graphics.length - 1;
		ret = "";
		
		//for each tile in canvas, calculate intensity and concatenate according character to innerHTML
		for(y=0;y<this.height;y++)
		{
			for(x=0;x<this.width;x++)
			{
				tmp = 0;
				for(i=0;i<this.balls.length;i++)
				{
					tmpx = x - this.balls[i].x;
					tmpy = y - this.balls[i].y;
					tmp += this.balls[i].radius / ((tmpx * tmpx) + (tmpy * tmpy));
				}
				//unable to represent larger intensities than 1.0
				if(tmp > 1) tmp = 1;
				//threshold for lower values
				if(tmp < 0.25) tmp = 0;
				tmp = Math.floor(tmp * len);
				//add 2 same characters to make tiles look somewhat squares
				ret += this.graphics[tmp] + this.graphics[tmp];
			}
			ret += "<br/>";
		}
		
		this.elem.innerHTML = ret;
	}
}

var g_context;

function initMetaballs(ballCount, elemid, contextWidth, contextHeight)
{
	g_context = new Context(elemid, contextWidth, contextHeight, ballCount);
	
	setTimeout("animCallback();", 50);
}

function animCallback()
{
	g_context.animate();
	g_context.render();
	setTimeout("animCallback();", 50);
}

//]]>
</script>
<div style="text-align: center;">
	<pre id="canvas" style="font-size: 10px;"></pre>
	<span style="font-family: Courier New; font-size: 12px;">Javascript Metaballs<br/>Joni Eskelinen &copy; 2007</span>
</div>
</body>
</html>

Ezku 21:41 14.3.07

Tekninen laatu vaikuttaa erinomaiselta, mutta pieni pilkku kokonaisuudessa ovat inline-CSS-attribuutit. Pistätkö ne nätisti style-tagien sisään?

Plussaa kuitenkin. Onko tätä näkyvillä jossain?

editoitu: 22:01 14.3.07

Tuhmahepo 21:41 14.3.07

Jonathan 21:42 14.3.07

Kiva effekti, tekstikooduksen ilmoittminen olisi kiva.

Tuhmahepo 21:44 14.3.07

Retrohuumassa pilke silmäkulmassa tehty pätkä ;)
Alkuperäinen ei tosin inlineä. Nähtävissä täällä jos ei viitsi copypasteta.

eis 21:45 14.3.07

Hiano!

coaster 21:56 14.3.07

Vois sanoa että komee.

FuzzyByte 08:58 15.3.07

Erittäin hieno.

editoitu: 19:55 15.3.07

tsuriga 19:52 15.3.07

Pitää olla melkonen tosikko, että antaa miinusta, ja vieläpä ilman kommentointia.

ajv 20:11 15.3.07

Joo, kyl tää ehdottomasti paras koodinpätkä tääl on :)

Ezku 20:30 15.3.07

Triga kirjoitti:
Pitää olla melkonen tosikko, että antaa miinusta, ja vieläpä ilman kommentointia.

Aika törkeänä pidän tuollaista käyttäytymistä.

Paras koodinpätkä? Eikä! ;)

Tuhmahepo 21:27 15.3.07

Ymmärrettävä miinus, luultavasti jäi kaipailemaan unicode tukea.
Mielessä kävi vielä että josko olisi pallot olleet eri värisiä ja sitten kivasti blendautuneet yhteen, mutta alkaa tulla javascriptin suorityskyky vastaan ;)

No, tämä nyt olikin aika intuitiolla tehty rojekti, ja jääneekin sellaiseksi.

tsuriga 00:44 16.3.07

Pitikö laittaa, ettei nouse MVC:n ohi?:D Näytti ensin kömpelöltä kun selaimessa on merkistökoodauksen oletusarvo UTF-8, vaan alko lyyti kirjottaa ko vaihto ISO-8859-1:een.

Ceez 17:28 20.3.07

Miksei meatballs?

tratok 18:01 25.3.07

Aika loistava :)

Php Ownz 15:53 7.4.07

Muuntelun tulos:
http://joonasnet.com/php_testit/javascript/hieno.html

k00dari 15:23 9.4.07

Php Ownz kirjoitti:
Muuntelun tulos:
http://joonasnet.com/php_testit/javascript/hieno.html

eipä voi hienoksi sanoo

Tuhmahepo 20:27 13.4.07

Pienoinen revisitti, "optimoin" render metodin, tai sanotaan javascriptin kohdalla ennemmin että yksinkertaistin sitä. Tuosta mainitsemastani värillisestä systeemistä on turha unelmoidakkaan sillä heti kun mukaan pistää html tageja puhumattakaan tyyleistä, menee selain aivan jäähän :S Ainakin vastikään tehdyn testini mukaan...

Haku

skeletonkuha