Balls

Developer
Darby Rathbone
Size
3,920 Kb
Views
30,360
  1. Balls Previews
  2. Balls HTML Codes
  3. Balls JS Codes

How do I make an balls?

You know the drill. What is a balls? How do you make a balls? This script and codes were developed by Darby Rathbone on 03 October 2022, Monday.

Balls Previews
IQ Test

Balls - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>balls </title>
</head>
<body> <script src="js/index.js"></script>
</body>
</html>

Balls - Script Codes JS Codes

var Position = (function () { function Position(x, y) { this.collisions = []; this.x = x; this.y = y; this.velocity = new Vector(0, 0); this.xMax = 100; this.yMax = 100; this.radius = 10; this.accel = new Vector(0, 0); } return Position;
})();
Position.prototype = { impact: function (point2) { var point1 = this; var normal = point1.toPoint(point2); var normal2 = point2.toPoint(point1); var tangent = new Vector(-normal.y, normal.x); var tangent2 = new Vector(-normal2.y, normal2.x); normal.norm(); normal2.norm(); tangent.norm(); tangent2.norm(); //var midpoint = new Vector(((point1.x + point2.x) / 2.0), (point1.y + point2.y) / 2.0); // point1.x = midpoint.x - normal.x * (this.radius+1); // point1.y = midpoint.y - normal.y * (this.radius+1); // point2.x = midpoint.x - normal2.x * (point2.radius); // point2.y = midpoint.y - normal2.y * (point2.radius); var v1n = normal.dot(point1.velocity), v1t = tangent.dot(point1.velocity), v2n = normal2.dot(point2.velocity), v2t = tangent2.dot(point2.velocity); normal.mult(v2n); //normal.mult(point1.velocity.mag); normal2.mult(v1n); //normal2.mult(point2.velocity.mag); tangent.mult(v1t); //tangent.mult(point1.velocity.mag); tangent2.mult(v2t); //tangent2.mult(point2.velocity.mag); var newv1 = new Vector(-(normal.x) + (tangent.x), -(normal.y) + (tangent.y)); var newv2 = new Vector(-(normal2.x) + (tangent2.x), -(normal2.y) + (tangent2.y)); point1.setvelocity(newv1.mult(.99)); point2.setvelocity(newv2.mult(.99)); }, checkBounds: function () { var maxx = this.xMax; var maxy = this.yMax; if(this.x < this.radius) { this.x =this.radius; this.velocity.x = Math.abs(this.velocity.x); this.velocity.mult(0.99); } if(this.x > maxx) { this.x = maxx; this.velocity.x = -Math.abs(this.velocity.x); this.velocity.mult(0.99); } if(this.y > maxy) { this.y =maxy; this.velocity.y = -Math.abs(this.velocity.y); this.velocity.mult(0.99); } if(this.y < this.radius) { this.y =this.radius; this.velocity.y = Math.abs(this.velocity.y); this.velocity.mult(0.99); } }, display: function (c) { var ctx = c; var p = this; ctx.beginPath(); //var vec3 = p1.toPoint(p2); var x = p.x; var y = p.y; var rx = this.radius; var start = 0; var end = 2 * Math.PI; var anticlockwise = true; ctx.arc(x, y, rx, start, end, anticlockwise); //ctx.fill(); ctx.stroke(); //vec3.norm(); //var d = Math.cos(p.velocity.direction()-vec3.direction()); // p.velocity.mult(10);vec3.mult(d);vec3.mult(10); //ctx.moveTo(x, y); //p.velocity.mult(p.velocity.prevmag); //ctx.lineTo(p.x + (p.velocity.x * 10.0), p.y + (p.velocity.y * 10.0)); //p.velocity.norm(); //ctx.lineTo(p.x+p.velocity.x+(vec3.x),p.y+p.velocity.y+(vec3.y)); ctx.stroke(); }, dist: function (p) { return((this.x - p.x) * (this.x - p.x) + (this.y - p.y) * (this.y - p.y)); }, step: function (i) { if (!i) i = 1; this.velocity.x += this.accel.x*i ; this.velocity.y += this.accel.y*i ; this.x += this.velocity.x*i; this.y += this.velocity.y*i; }, sub: function (v) { this.x -= v.x; this.y -= v.y; return this; }, add: function (v) { this.x += v.x; this.y += v.y; return this; }, toString: function () { return "[" + this.x + "," + this.y + "@" + this.velocity.toString + "]"; }, toPoint: function (v) { return new Vector(-(this.x - v.x), -(this.y - v.y)); }, setvelocity: function (v) { this.velocity.x = v.x; this.velocity.y = v.y; }
};
var Vector = (function () { function Vector(x, y) { this.x = x; this.y = y; this.prevmag = 1; } return Vector;
})();
Vector.prototype = { dist: function (p) { return((this.x - p.x) * (this.x - p.x) + (this.y - p.y) * (this.y - p.y)); }, toString: function () { return "[" + this.x + "," + this.y + "]"; }, mag: function () { return Math.sqrt((this.x * this.x) + (this.y * this.y)); }, mult: function (k) { this.x = this.x * k; this.y = this.y * k; return this; }, div: function (k) { this.x = (this.x) / (k); this.y = (this.y) / (k); return this; }, norm: function () { this.prevmag = this.mag(); this.div((this.mag())); return this; }, add: function (vk) { this.x = this.x + vk.x; this.y = this.y + vk.y; return this; }, sub: function (vk) { this.x = this.x - vk.x; this.y = this.y - vk.y; return this; }, direction: function () { return Math.atan2(this.y, this.x); }, dot: function (v1) { return(v1.x * this.x) + (v1.y * this.y); }
};
function displayp(p, q) { var ctx = can.getContext('2d'); ctx.beginPath(); //var vec3 = p1.toPoint(p2); var x = p.x; var y = p.y; var rx = 10; var start = 0; var end = 2 * Math.PI; var anticlockwise = true; ctx.arc(x, y, rx, start, end, anticlockwise); //ctx.fill(); ctx.stroke(); //vec3.norm(); //var d = Math.cos(p.velocity.direction()-vec3.direction()); // p.velocity.mult(10);vec3.mult(d);vec3.mult(10); ctx.moveTo(x, y); //p.velocity.mult(p.velocity.prevmag); ctx.lineTo(p.x + (p.velocity.x * 10.0), p.y + (p.velocity.y * 10.0)); //p.velocity.norm(); //ctx.lineTo(p.x+p.velocity.x+(vec3.x),p.y+p.velocity.y+(vec3.y)); ctx.stroke();
}
function cloneObject(obj) { if(obj === null || typeof obj !== 'object') { return obj; } var temp = obj.constructor(); // give temp the original obj's constructor for(var key in obj) { temp[key] = cloneObject(obj[key]); } return temp;
}
var ballcount = 200;
var can = document.createElement("canvas");
can.setAttribute("width", 400);
can.setAttribute("height", 400);
can.setAttribute("style", "zoom:0.85;transform: scale(0.85);border-style:groove;border-width:4px;");
document.body.appendChild(can);
var balls = [];
var calculatedcolls = [];
var clonedballs = [];
for(var i = 0; i < ballcount; i++) { balls.push(new Position(can.width * Math.random(), can.height * Math.random())); balls[balls.length - 1].velocity = new Vector(2 * Math.random() - 1, 2 * Math.random() - 1); balls[balls.length - 1].velocity.mult(10.0); balls[balls.length - 1].radius = (Math.random() + 1) * 5; balls[balls.length - 1].xMax = can.width - balls[balls.length - 1].radius; balls[balls.length - 1].yMax = can.height - balls[balls.length - 1].radius; balls[balls.length - 1].collisions = []; balls[balls.length - 1].accel = new Vector(0, 0.02);
}
function repeater() { var c = can.getContext('2d'), skipper, calculatedcols = []; c.clearRect(0, 0, can.width, can.height); //for (var m = 0; m<26; m++){ /*for(var k = 0; k < ballcount; k++) { balls[k].collisions = balls.map(checkagainst, balls[k]).filter(returntrue); balls[k].collisions = balls[k].collisions.map(movecollisionsapart, balls[k]); }*/ //} var max = 1/2; if (max) for (var j = 0;j<1;j+=max) { for(var i = 0; i < ballcount; i++) { balls[i].collisions = balls.map(checkagainst, balls[i]).filter(returntrue); if(balls[i].collisions.length !== 0) { balls[i].collisions = balls.map(checkagainst, balls[i]); balls[i].collisions = balls[i].collisions.map(movecollisionsapart, balls[i]).filter(returntrue); } balls[i].checkBounds(); //balls[i].display(c); balls[i].step(max); //nsole.log(balls[i].collisions); } } balls.forEach(function(e){e.display(c)});
}
function movecollisionsapart(e) { if(this !== e && e) { this.checkBounds(); e.checkBounds(); //console.log(e); //console.log("balls["+i+"] second"); var o = new Vector(this.x, this.y), n = new Vector(e.x, e.y); o.add(this.velocity); n.add(e.velocity); if(o.dist(n) < ((this.radius + e.radius) * (this.radius + e.radius))) { //console.log("this iswhere i want to stop); var distance = Math.sqrt(o.dist(n)), old = Math.sqrt(this.dist(e)); var vec = new Vector((this.x - e.x), (this.y - e.y)); var howfarover = ((this.radius + e.radius) - vec.mag()); vec.norm(); vec.mult(howfarover); var ev = new Vector(vec.x, vec.y); //ev.norm(); ev.mult(e.radius / (this.radius + e.radius)); var thisv = new Vector(vec.x, vec.y); thisv.norm(); thisv.mult(this.radius / (this.radius + e.radius)); //console.log(old-distance); //vec.norm(); vec.mult(((o.radius + n.radius) - distance)/2); //console.log(vec); e.sub(thisv.mult(2)); this.add(ev.mult(2)); this.velocity.add(ev); e.velocity.sub(thisv); //this.velocity.add(ev); //e.velocity.sub(thisv); //e.collisions = balls.map(checkagainst, e); //this.collisions = balls.map(checkagainst, this); //return e; //console.log(this.x+","+this.y+" || "+e.x+","+e.y); return this; } }
}
function returntrue() { return true;
}
function checkagainst(a) { if(this.dist(a) < ((this.radius + a.radius) * (this.radius + a.radius))) { //e.impact(el); return a; }
}
function findlargestvelocity(ab){ var ba=ab[0]; ab.forEach(function(e,i,a){ if(e.velocity.mag()>ba.velocity.mag()) ba = e; }); return ba;
}
function repeatuntilempty(e) { while(e.collisions.length !== 0) { e.collisions = e.collisions.map(movecollisionsapart, e).filter(returntrue); }
}
window.requestAnimFrame = (function(){ return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function( callback ){ window.setTimeout(callback, 1000 / 30); };
})();
// usage:
// instead of setInterval(render, 16) ....
(function animloop(){ requestAnimFrame(animloop); repeater();
})();
Balls - Script Codes
Balls - Script Codes
Home Page Home
Developer Darby Rathbone
Username blackkbot
Uploaded October 03, 2022
Rating 3
Size 3,920 Kb
Views 30,360
Do you need developer help for Balls?

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!

Darby Rathbone (blackkbot) Script Codes
Name
3d pure javascript 2d canvas
Jigsaw puzzle
Sudoku grid
3d hand
Webworker with an editable textbox
Perlin noise on worker
3d pure javascript 2d canvas
Slow Delaunay triangulation
Drag, drop and snap
A linearly interpolated spline
Create amazing blog posts 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!