Do działania prezentowanego kodu potrzebny jest skrypt ‘swarm.js’, który możesz zaleźć tutaj.
Zawartość możesz zobaczyć w
przeglądarce obsługującej element <canvas>
z kontekstem "2d"


Listing

var cv = document.getElementById('canvas');
		var ctx = cv.getContext('2d');
		cv.addEventListener("mousemove", function(evt) {
			mousePos = getMousePos(cv, evt);
		}, false);
		for(var i=0; i< 25; i++){
			addInsect();
		}
		setTimeout("drawFrame()", 20);  
            

Skrypt swarm.js

//var cv = document.getElementById('canvas');
//var ctx = cv.getContext('2d');
//var width = cv.width;
//var height = cv.height;
var a = 20.0;
var b = 50;
var c = 2 * b;
var d = 4 * b;
var e = 8 * b;
var f = 12 * b;
var p1 = 0.8;
var p2 = 0.9;
var mousePos = {
	x : -1,
	y : -1
};
var insects = [];
function Insect(x, y, w, h, color) {
	this.x = x;
	this.y = y;
	this.w = w;
	this.h = h;
	this.color = color;
	this.dx = 0.0;
	this.dy = 0.0;
	this.tX = 0.0;
	this.tY = 0.0;
	this.oTX = 0.0;
	this.oTY = 0.0;
	this.rX = (Math.random() * d) - c;
	this.rY = (Math.random() * d) - c
};
function drawInsect(insect) {
	ctx.save();
	ctx.beginPath();
	ctx.strokeStyle = insect.color;
	ctx.moveTo(insect.x, insect.y);
	ctx.lineTo(insect.x + insect.w / 2.0, insect.y + 2.0 * insect.h / 3.0);
	ctx.lineTo(insect.x + insect.w, insect.y);
	ctx.moveTo(insect.x + insect.w / 4.0, insect.y + insect.h);
	ctx.lineTo(insect.x + insect.w / 2.0, insect.y + 2.0 * insect.h / 3.0);
	ctx.lineTo(insect.x + 3.0 / 4.0 * insect.w, insect.y + insect.h);
	ctx.stroke();
	ctx.restore();
};
function getMousePos(cv, evt) {
	var rect = cv.getBoundingClientRect();
	return {
		x : evt.clientX - Math.round(rect.left),
		y : evt.clientY - Math.round(rect.top)
	}
}
function moveInsect(insect) {
	var cursor = mousePos;
	if (cursor != null) {
		insect.tX = cursor.x;
		insect.tY = cursor.y;
		if ((insect.tX == insect.oTX) && (Math.random() > p2)) {
			insect.rX = (Math.random() * c) - b;
			insect.rY = (Math.random() * c) - b;
		} else if ((insect.tX != insect.oTX) && (Math.random() > p1)) {
			insect.rX = (Math.random() * e) - c;
			insect.rY = (Math.random() * e) - c;
		}
		insect.dx = insect.tX - insect.x + insect.rX;
		insect.dy = insect.tY - insect.y + insect.rY;
		insect.x = Math.round(insect.x + insect.dx / a);
		insect.y = Math.round(insect.y + insect.dy / a);
		insect.oTX = insect.tX;
		insect.oTY = insect.tY;
	} else {
		insect.tX = insect.oTX;
		insect.tY = insect.oTY;
		if ((insect.tX == insect.oTX) && (Math.random() > p2)) {
			insect.rX = (Math.random() * c) - b;
			insect.rY = (Math.random() * c) - b;
		} else if ((insect.tX != insect.oTX) && (Math.random() > p1)) {
			insect.rX = (Math.random() * e) - d;
			insect.rY = (Math.random() * e) - d;
		}
		insect.dx = insect.tX - insect.x + insect.rX;
		insect.dy = insect.tY - insect.y + insect.rY;
		insect.x = Math.round(insect.x + insect.dx / a);
		insect.y = Math.round(insect.y + insect.dy / a);
		insect.oTX = insect.tX;
		insect.oTY = insect.tY;
	}
	return insect;
};
function addInsect() {
	var a = randomInRange(10, cv.width-10);
	var a = randomInRange(10, cv.height-10);
	var insect = new Insect(a, b, 4, 3, "black");
	insects.push(insect);
}
function drawFrame() {
	ctx.clearRect(0,0,cv.width,cv.height);
	for (var j = 0; j < insects.length; j++) {
		var insect = insects[j];
		insect = moveInsect(insect);
		drawInsect(insect);
	}	
	setTimeout("drawFrame()", 20);
};
var randomInRange = function(min, max) {
	var random = -1;
	if (min > max) {
		return new Error('Pierwsza liczba musi być mniejsza od drugiej');
	} else {
		random = cutDecimal(Math.floor(Math.random() * (max - min + 1)) + min);
	}
	return random;
};
var cutDecimal = function(nr) {
	var temp = nr.toString();
	var temp1 = temp.indexOf(".");
	var temp2 = "";
	if (temp1 > -1) {
		temp2 = temp.substr(0, temp1);
	} else {
		temp2 = temp;
	}
	return parseInt(temp2);
};
            

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *