Agent Chaos

Developer
Sladix
Size
4,709 Kb
Views
8,096
  1. Agent Chaos Previews
  2. Agent Chaos HTML Codes
  3. Agent Chaos CSS Codes
  4. Agent Chaos JS Codes

How do I make an agent chaos?

What is a agent chaos? How do you make a agent chaos? This script and codes were developed by Sladix on 09 December 2022, Friday.

Agent Chaos Previews
IQ Test

Agent Chaos - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Agent Chaos</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <link href='https://fonts.googleapis.com/css?family=Lato:300,400' rel='stylesheet' type='text/css'>
<canvas id="c"></canvas>
<p id="title">Click anywhere to start the Chaos</p> <script src='http://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.5/dat.gui.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Agent Chaos - Script Codes CSS Codes

body { font-family: Helvetica sans-serif; padding: 0; margin: 0; background-color: #222; overflow: hidden; -webkit-user-select: none; -moz-user-select: none; -o-user-select: none; -ms-user-select: none; usear-select: none;	}	canvas { position: absolute; top: 0; left: 0;	}
#title{ position:absolute; z-index:9; color:white; left:10px; font-family:"Lato",sans-serif; font-weight:300;
}

Agent Chaos - Script Codes JS Codes

/** * Vector */
function Vector(x, y) { this.x = x || 0; this.y = y || 0;
}
Vector.add = function(a, b) { return new Vector(a.x + b.x, a.y + b.y);
};
Vector.sub = function(a, b) { return new Vector(a.x - b.x, a.y - b.y);
};
Vector.scale = function(v, s) { return v.clone().scale(s);
};
Vector.random = function() { return new Vector( Math.random() * 2 - 1, Math.random() * 2 - 1 );
};
Vector.prototype = { set: function(x, y) { if (typeof x === 'object') { y = x.y; x = x.x; } this.x = x || 0; this.y = y || 0; return this; }, add: function(v) { this.x += v.x; this.y += v.y; return this; }, rotate: function(degres){ var radians = degres * Math.PI/ 180; this.x += Math.cos(radians); this.y += Math.sin(radians); return this; }, sub: function(v) { this.x -= v.x; this.y -= v.y; return this; }, scale: function(s) { this.x *= s; this.y *= s; return this; }, length: function() { return Math.sqrt(this.x * this.x + this.y * this.y); }, lengthSq: function() { return this.x * this.x + this.y * this.y; }, normalize: function() { var m = Math.sqrt(this.x * this.x + this.y * this.y); if (m) { this.x /= m; this.y /= m; } return this; }, angle: function() { return Math.atan2(this.y, this.x); }, angleTo: function(v) { var dx = v.x - this.x, dy = v.y - this.y; return Math.atan2(dy, dx); }, distanceTo: function(v) { var dx = v.x - this.x, dy = v.y - this.y; return Math.sqrt(dx * dx + dy * dy); }, distanceToSq: function(v) { var dx = v.x - this.x, dy = v.y - this.y; return dx * dx + dy * dy; }, lerp: function(v, t) { this.x += (v.x - this.x) * t; this.y += (v.y - this.y) * t; return this; }, clone: function() { return new Vector(this.x, this.y); }, toString: function() { return '(x:' + this.x + ', y:' + this.y + ')'; }
};
/** * requestAnimationFrame */
window.requestAnimationFrame = (function(){ return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (callback) { window.setTimeout(callback, 1000 / 60); };
})();
/** * Agent */
function Agent(x, y, radius) { Vector.call(this, x, y); this.radius = radius; this.angle = 0; this.target = new Vector(-1,-1); this._speedModifiers = []; this._speed = Math.floor(Math.random() * (10 - 5 +1)) + 5; this._latest = new Vector(); this._velocity = new Vector(); this._direction = new Vector(); this._maxSpeedLength = 12; this._maxRotation = Math.floor(Math.random() * (20 - 5 +1)) + 5;
}
function getOppositeAngle (angle) { return angle - (Math.abs(angle) / angle) * 360;
}
Agent.prototype = (function(o){ var s = new Vector(0,0), p; for(p in o) s[p] = o[p]; return s;
})({ //Agent properties color:"#f00", //Agent methods addSpeed : function(v){ this._velocity.add(v); }, update: function(){ // Limit the speed @ 12px/update if(this.hasArrived()){ this._latest._velocity = new Vector(0,0); this.target = new Vector(-1,-1); } this.move(); }, // hasArrived Method hasArrived : function(){ return this.distanceTo(this.target) < this.radius; }, //Rendering Method render: function(ctx){ ctx.save(); ctx.fillStyle = ctx.strokeStyle = this.color; ctx.lineCap = ctx.lineJoin = 'round'; ctx.lineWidth = this.radius * 2; ctx.beginPath(); ctx.moveTo(this.x, this.y); ctx.lineTo(this._latest.x, this._latest.y); ctx.stroke(); ctx.beginPath(); ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false); ctx.fill(); //// Start SPEED debug //ctx.beginPath(); //ctx.fillStyle = ctx.strokeStyle = "yellow"; //ctx.arc(this.x+this._velocity.x, this.y+this._velocity.y, this.radius/2, 0, Math.PI * 2, false); //ctx.fill(); //// End SPEED debug // Start TARGET debug ctx.beginPath(); ctx.fillStyle = ctx.strokeStyle = "blue"; ctx.arc(this.target.x, this.target.y, this.radius/2.5, 0, Math.PI * 2, false); ctx.fill(); //// End TARGET debug // Start DIRECTION debug ctx.beginPath(); ctx.fillStyle = ctx.strokeStyle = "green"; ctx.arc(this.x+this._direction.x, this.y+this._direction.y, this.radius/2, 0, Math.PI * 2, false); ctx.fill(); // End DIRECTION debug ctx.restore(); }, applySpeedModifiers : function(){ var i = this._speedModifiers.length; for(i; i > 0;i--) { this._velocity.add(this._speedModifiers[i]); } }, setTarget : function(v){ this.target = v; }, move : function(){ // On limite la vitesse if (this._velocity.length() > this._speed) this._velocity.normalize().scale(this._speed); this._direction = new Vector().normalize().rotate(this.angle).scale(20); // Direction du target actuel if(this.target.x != -1 && this.target.y != -1) { var angleTarget = this.angleTo(this.target) * 180/Math.PI; // soit l'angle entre l'agent et le target var distanceToTarget = this.distanceTo(this.target); var angleTo = angleTarget - this.angle; // On limite la rotation à this._maxRotation ou - this._maxRotation if (angleTo < 0 && this.angle <= 0) { this.angle += (Math.abs(angleTo) > this._maxRotation) ? -this._maxRotation : angleTo; } else if (angleTo < 0 && this.angle >= 0) { if (angleTo < -180) { var oppAngleTo = getOppositeAngle(angleTo); this.angle += (Math.abs(oppAngleTo) > this._maxRotation) ? this._maxRotation : angleTo; } else { this.angle += (Math.abs(angleTo) > this._maxRotation) ? -this._maxRotation : angleTo; } } else if (angleTo > 0 && this.angle <= 0) { if (angleTo > 180) { var oppAngleTo = getOppositeAngle(angleTo); this.angle += (Math.abs(oppAngleTo) > this._maxRotation) ? -this._maxRotation : angleTo; } else { this.angle += (Math.abs(angleTo) > this._maxRotation) ? this._maxRotation : angleTo; } } else if (angleTo > 0 && this.angle >= 0 ) { this.angle += (Math.abs(angleTo) > this._maxRotation) ? this._maxRotation : angleTo; } // >> var acceleration = 1-(this._speed/distanceToTarget); // if (Math.abs(angleTo) > this._maxRotation * 2) { // factor = 0.5; // } // << //console.log(this.angle); this._velocity.rotate(this.angle).normalize().scale(this._speed * acceleration); } if (this.angle <= -360 || this.angle >= 360) { this.angle = 0; } // Check collisions -> ajouter des speed modifiers // if(this._latest.x) // { // // Friction / mass simulation // this._velocity.add(this._latest._velocity.scale(0.85)); // } this.applySpeedModifiers(); this._latest = this; this.add(this._velocity); }
});
(function(){ // Configuration variables var BACKGROUND_COLOR = 'rgba(50, 50, 50, 1)'; // Script variables var canvas,context, bufferCvs, bufferCtx, screenWidth, screenHeight, grad, control,gui; var agents = []; function resize(e) { screenWidth = canvas.width = window.innerWidth; screenHeight = canvas.height = window.innerHeight; bufferCvs.width = screenWidth; bufferCvs.height = screenHeight; context = canvas.getContext('2d'); bufferCtx = bufferCvs.getContext('2d'); var cx = canvas.width * 0.5, cy = canvas.height * 0.5; grad = context.createRadialGradient(cx, cy, 0, cx, cy, Math.sqrt(cx * cx + cy * cy)); grad.addColorStop(0, 'rgba(0, 0, 0, 0)'); grad.addColorStop(1, 'rgba(0, 0, 0, 0.50)'); } function changeAgentTargets(e){ var newTarget = new Vector(e.clientX, e.clientY); // Un target pour tous // for(var i = 0;i<agents.length;i++) { // agents[i].setTarget(newTarget); // } // Target en forme de cercle var agentsCount = agents.length; var dist = agentsCount*4; for(var i = 0;i<agents.length;i++) { var shift = new Vector(1,0); var aNewtTarget = newTarget.clone(); shift.normalize().rotate(i/agentsCount*360).scale(dist); agents[i].setTarget(aNewtTarget.add(new Vector(-dist,0)).add(shift)); } } // GUI Controls var Config = function(){ this.agentsNumber = 20; this.restart = function(){ agents = []; agentsInit(); } }; control = new Config(); // Initialisation canvas = document.getElementById('c'); bufferCvs = document.createElement('canvas'); window.addEventListener('resize', resize, false); window.addEventListener('click',changeAgentTargets,false); resize(null); //GUI init var gui = new dat.GUI(); gui.add(control,'agentsNumber'); gui.add(control,'restart'); function agentsInit(){ //Agent init for(var i = 0;i<control.agentsNumber;i++){ var a = new Agent(canvas.width/2,canvas.height/2,5); agents.push(a); } } agentsInit(); var loop = function(){ context.save(); context.fillStyle = BACKGROUND_COLOR; context.fillRect(0, 0, screenWidth, screenHeight); context.fillStyle = grad; context.fillRect(0, 0, screenWidth, screenHeight); context.restore(); bufferCtx.save(); bufferCtx.globalCompositeOperation = 'destination-out'; bufferCtx.globalAlpha = 0.35; bufferCtx.fillRect(0, 0, screenWidth, screenHeight); bufferCtx.restore(); var len = agents.length; for(var i = 0;i<len;i++){ var a = agents[i]; a.update(); // On boucle sur l'écran a.x = a.x > screenWidth ? 0 : a.x < 0 ? screenWidth : a.x; a.y = a.y > screenHeight ? 0 : a.y < 0 ? screenHeight : a.y; a.render(bufferCtx); } // on dessine le tampon context.drawImage(bufferCvs, 0, 0); requestAnimationFrame(loop); }; loop();
})();
Agent Chaos - Script Codes
Agent Chaos - Script Codes
Home Page Home
Developer Sladix
Username Sladix
Uploaded December 09, 2022
Rating 3
Size 4,709 Kb
Views 8,096
Do you need developer help for Agent Chaos?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Sladix (Sladix) Script Codes
Name
HMD
CSS Letter animations
Fibonacci color test
Responsive Stack slider
Canvas snake animation random bezier curve looped
Text reveal test
Visualizer tests
A Pen by Sladix
Create amazing video scripts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!