Collision Detection JS Demo
How do I make an collision detection js demo?
Draw two shapes using the programmer-art form, and witness as the magic of the Separating Axis Theorem projects the two shapes onto each possible collision axis! If the two shapes are colliding, it will draw an arrow showing the minimum distance and direction that Polygon B needs to move to separate them. Non-minified JS code available at http://www.github.com/antishow/collision-demo. What is a collision detection js demo? How do you make a collision detection js demo? This script and codes were developed by Matthew Chase on 25 July 2022, Monday.
Collision Detection JS Demo Previews
Collision Detection JS Demo - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Collision Detection JS Demo</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <canvas id="canvas"></canvas> <div class="polygon-input" id="PolygonA"> <header>Polygon A</header> <fieldset class="color"> <legend>Color</legend> <input name="r" placeholder="Red (0-255)" value="255"> <input name="g" placeholder="Green (0-255)" value="0"> <input name="b" placeholder="Blue (0-255)" value="0"> </fieldset> <fieldset class="vertices"> <legend>Vertices</legend> <button class="add-vertex">Add</button> <div class="vertex"> <input name="x" placeholder="X" value="100"> <input name="y" placeholder="Y" value="100"> <button class="remove-vertex">Remove</button> </div> <div class="vertex"> <input name="x" placeholder="X" value="150"> <input name="y" placeholder="Y" value="100"> <button class="remove-vertex">Remove</button> </div> <div class="vertex"> <input name="x" placeholder="X" value="150"> <input name="y" placeholder="Y" value="150"> <button class="remove-vertex">Remove</button> </div> <div class="vertex"> <input name="x" placeholder="X" value="100"> <input name="y" placeholder="Y" value="150"> <button class="remove-vertex">Remove</button> </div> </fieldset> </div> <div class="polygon-input" id="PolygonB"> <header>Polygon B</header> <fieldset class="color"> <legend>Color</legend> <input name="r" placeholder="Red (0-255)" value="0"> <input name="g" placeholder="Green (0-255)" value="0"> <input name="b" placeholder="Blue (0-255)" value="255"> </fieldset> <fieldset class="vertices"> <legend>Vertices</legend> <button class="add-vertex">Add</button> <div class="vertex"> <input name="x" placeholder="X" value="110"> <input name="y" placeholder="Y" value="100"> <button class="remove-vertex">Remove</button> </div> <div class="vertex"> <input name="x" placeholder="X" value="160"> <input name="y" placeholder="Y" value="100"> <button class="remove-vertex">Remove</button> </div> <div class="vertex"> <input name="x" placeholder="X" value="110"> <input name="y" placeholder="Y" value="150"> <button class="remove-vertex">Remove</button> </div> </fieldset> </div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Collision Detection JS Demo - Script Codes CSS Codes
BODY{ margin: 0; padding: 0;
}
CANVAS{ position: absolute; top: 0; left: 0; z-index: 1;
}
*{ box-sizing: border-box;
}
.polygon-input{ width: 300px; font-size: 0px; position: relative; z-index: 2;
}
.polygon-input HEADER{ font-weight: bold; font-size: 20px;
}
FIELDSET.color INPUT{ width: 33%;
}
FIELDSET.vertices INPUT{ width: 35%;
}
FIELDSET.vertices BUTTON{ width: 30%;
}
LEGEND, INPUT, BUTTON{ font-size: 16px;
}Collision Detection JS Demo - Script Codes JS Codes
CanvasController=function(a){function b(){f=a(window),g=a("CANVAS"),h=g.get(0),i=h.getContext("2d"),f.on("resize",c).trigger("resize")}function c(){var b=f.width(),c=f.height();g.attr("width",b),g.attr("height",c),a(e).trigger("resize")}function d(){h.width=h.width}var e,f,g,h,i;return e={get ctx(){return i}},e.clear=d,a(b),e}(jQuery),Circle=function(){function a(a,b){this.center=new Vector(a),this.radius=b}function b(a,b){console.log(" Checking for collision between %s and %s",this.toString(),a.toString());var c=!1,d=a.center.subtract(this.center),e=d.length,f=this.radius+a.radius;return console.log(" Distance between centers: %s",e),console.log(" Sum of radii: %s",f),0===e&&(d=b||Vector.xAxis),f>e&&(d.length=f-e,console.log(" COLLISION! %s",d.toString()),c=d.clone()),c}function c(){return"c: "+this.center.toString()+", r: "+this.radius}return a.prototype={get diameter(){return 2*this.radius},get circumference(){return Math.PI*this.radius*2},collisionWithCircle:b,toString:c},a}(),DrawController=function(a){function b(){return new Vector(h.canvas.width/2,h.canvas.height/2)}function c(a,c){var d=b();h.fillStyle=c,h.beginPath(),h.arc(d.x+a.center.x,d.y+a.center.y,a.radius,0,2*Math.PI),h.closePath(),h.fill()}function d(a,c){var d=b();h.fillStyle=c,h.beginPath(),h.moveTo(d.x+a.vertices[0].x,d.y+a.vertices[0].y);for(var e=1;e<=a.vertices.length;e++){var f=a.vertices[e%a.vertices.length];h.lineTo(d.x+f.x,d.y+f.y)}h.closePath(),h.fill()}function e(a){var c,d,e,f,g=a.clone();d=b(),c=d.length,g.length=c,e=g.clone(),f=g.clone().multiplyByScalar(-1),h.strokeStyle="#ccc",h.beginPath(),h.moveTo(d.x,d.y),h.lineTo(d.x+e.x,d.y+e.y),h.moveTo(d.x,d.y),h.lineTo(d.x+f.x,d.y+f.y),h.stroke(),h.closePath()}function f(a,c,d){d||(d=new Vector(0,0)),c||(c="#000");var e,f,g,i,j,k=b(),l=5;e=new Vector(k.x+d.x,k.y+d.y),f=e.clone().add(a),i=a.leftNormal().normalize().multiplyByScalar(l),j=a.rightNormal().normalize().multiplyByScalar(l),g=a.clone().normalize().multiplyByScalar(-1*l),i=Vector.midpoint([i,g]).add(f),j=Vector.midpoint([j,g]).add(f),h.strokeStyle=c,h.beginPath(),h.moveTo(e.x,e.y),h.lineTo(f.x,f.y),h.lineTo(i.x,i.y),h.moveTo(f.x,f.y),h.lineTo(j.x,j.y),h.stroke(),h.closePath()}function g(){h=CanvasController.ctx}var h;return DrawController={},DrawController.drawAxis=e,DrawController.drawCircle=c,DrawController.drawPolygon=d,DrawController.drawVector=f,a(g),DrawController}(jQuery),MainController=function(a){function b(){CanvasController.clear();var b,c,d,e,f,g,h,i,j,k,l,m,n=[];a(".polygon-input").each(function(){n.push(PolygonInputController.getPolygon(this))}),b=n[0].collisionAxesWithPolygon(n[1]);for(d in b)c=b[d],DrawController.drawAxis(c);for(d in n){f=n[d],g=a(".polygon-input").get(d),h=PolygonInputController.getPolygonColor(g),i=PolygonInputController.getProjectionColor(g),DrawController.drawPolygon(f,h);for(e in b)c=b[e],m=f.projectedOntoAxis(c),DrawController.drawCircle(m,i)}j=n[0].collisionWithPolygon(n[1]),j&&(k=j.clone().normalize(),m=n[0].projectedOntoAxis(k),l=m.center,l.length=l.length+m.radius,l.subtract(j),DrawController.drawVector(j,"#000",l))}function c(){b(),a(CanvasController).on("resize",b),a(PolygonInputController).on("change",b)}a(c)}(jQuery),PolygonInputController=function(a){function b(b){var c=a(b.currentTarget),d=c.closest(".vertex");return d.remove(),a(PolygonInputController).trigger("change"),!1}function c(b){var c=a(b.currentTarget),d=c.closest(".vertices"),e=a(m);return d.append(e),a(PolygonInputController).trigger("change"),!1}function d(){a(PolygonInputController).trigger("change")}function e(b){var c,d,e=a(b),f=[];return a(".vertex",e).each(function(){c=parseFloat(a("[name=x]",this).val()),d=parseFloat(a("[name=y]",this).val()),f.push(new Vector(c,d))}),new Polygon(f)}function f(b){var c,d,e,f=a(b),g=["r","g","b"],h={};for(c in g)d=g[c],e=parseInt(a("[name="+d+"]",f).val(),10),h[d]=e;return h}function g(a){var b=f(a);return"rgba("+b.r+", "+b.g+", "+b.b+", "+k+")"}function h(a){var b=f(a);return"rgba("+b.r+", "+b.g+", "+b.b+", "+l+")"}function i(){a(document).on("click",".remove-vertex",b),a(document).on("click",".add-vertex",c),a(document).on("change, keyup",".polygon-input INPUT",d)}var j={},k=.5,l=.33,m='<div class="vertex"><input name="x" placeholder="X"><input name="y" placeholder="Y"><button class="remove-vertex">Remove</button></div>';return j.getPolygon=e,j.getPolygonColor=g,j.getProjectionColor=h,a(i),j}(jQuery),Polygon=function(){function a(a){var b;this.vertices=[];for(b in a)this.vertices.push(new Vector(a[b]))}function b(){var a,b,c,d,e,f,g=[];for(d=this.sides,a=0;a<d.length;a++){for(f=d[a].rightNormal().normalize(),e=!0,b=0;b<g.length;b++)if(c=g[b],c.isParallelTo(f)){e=!1;break}e&&g.push(f)}return g}function c(a){var b,c,d,e,f=[],g=this.collisionTestAxes(),h=a.collisionTestAxes();for(b=0;b<g.length;b++)f.push(g[b]);for(c=0;c<h.length;c++){for(e=h[c],include=!0,b=0;b<g.length;b++)if(d=g[b],d.isParallelTo(e)){include=!1;break}include&&f.push(e)}return f}function d(a){var b,c,d,e,f,g=this.vertices.length,h=null,i=null;for(c=this.vertices[0].projectedOnto(a),h=i=c.dotProduct(a),e=f=c,b=1;g>b;b++)c=this.vertices[b].projectedOnto(a),d=c.dotProduct(a),h>=d&&(h=d,e=c),d>=i&&(i=d,f=c);return new Circle(Vector.midpoint([e,f]),(i-h)/2)}function e(a){var b,d,e,g=!1,h=c.call(this,a),i=null,j=null;for(d in h){if(b=h[d],e=f.call(this,a,b),!e){g=!1;break}null===i?(i=e,j=e.length):e.length<j&&(i=e,j=e.length),g=i}return g}function f(a,b){var c,d=this.projectedOntoAxis(b),e=a.projectedOntoAxis(b);return console.log("Checking %s for a collision",b.toString()),c=d.collisionWithCircle(e,b),console.log(c),c}return a.prototype={get center(){return Vector.midpoint(this.vertices)},get sides(){var a,b,c,d,e=[];for(a=0;a<this.vertices.length;a++)b=this.vertices[a],c=this.vertices[(a+1)%this.vertices.length],d=c.clone().subtract(b),e.push(d);return e},projectedOntoAxis:d,collisionTestAxes:b,collisionAxesWithPolygon:c,collisionWithPolygon:e,collisionWithPolygonOnAxis:f},a}(),Vector=function(){function a(b,c){b instanceof a?(this.x=b.x,this.y=b.y):"[object Array]"===Object.prototype.toString.call(b)?(this.x=b[0],this.y=b[1]):(this.x=b,this.y=c)}function b(){var a;return this.isZero()||(a=this.length,this.x/=a,this.y/=a),this}function c(a){return this.x+=a.x,this.y+=a.y,this}function d(a){return this.x-=a.x,this.y-=a.y,this}function e(a){return this.x*=a,this.y*=a,this}function f(){return new a(this.y,-1*this.x)}function g(){return new a(-1*this.y,this.x)}function h(a){return this.x*a.x+this.y*a.y}function i(a){return this.x*a.y-this.y*a.x}function j(a){return 0===this.crossProduct(a)}function k(a){return 0===this.dotProduct(a)}function l(){return 0===this.x&&0===this.y}function m(){return new a(this.x,this.y)}function n(a){var b=a.clone().normalize(),c=this.dotProduct(a);return b.multiplyByScalar(c)}function o(){return[this.x,this.y]}function p(){return this.x+","+this.y}return a.prototype={get length(){return Math.sqrt(this.x*this.x+this.y*this.y)},set length(a){this.normalize().multiplyByScalar(a)},x:0,y:0,isZero:l,normalize:b,add:c,subtract:d,multiplyByScalar:e,leftNormal:f,rightNormal:g,dotProduct:h,crossProduct:i,clone:m,isParallelTo:j,isPerpendicularTo:k,projectedOnto:n,toArray:o,toString:p},a.xAxis=new a(1,0),a.yAxis=new a(0,1),a.midpoint=function(b){var c,d=new a(0,0);for(c in b)d.add(b[c]);return d.multiplyByScalar(1/b.length)},a}();
| Developer | Matthew Chase |
| Username | antishow |
| Uploaded | July 25, 2022 |
| Rating | 3 |
| Size | 4,802 Kb |
| Views | 62,744 |
Do you need developer help for Collision Detection JS Demo?
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!
Matthew Chase (antishow) Script Codes
| Name | Size |
| Lodash is the shit | 2,841 Kb |
| Fixed Aspect Ratio | 2,511 Kb |
| Flex-Grow Proportions | 3,276 Kb |
| Slow Click Button | 3,035 Kb |
| Sort Floated UL into columns | 1,950 Kb |
| Simple Snowflakes | 2,650 Kb |
| The Same Three Callouts You Always Do | 2,008 Kb |
| THREE.js PointCloud | 3,960 Kb |
| THREE.js Starter Kit - Basic Sta--Fireflies | 2,376 Kb |
| Quick Picross | 5,339 Kb |
Create amazing Facebook ads 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!
Similar Scripts & Codes
| Name | Username | Size |
| Pericles mi loro... | Judag | 4,125 Kb |
| Portfolio Page | HuffmanJ25 | 5,240 Kb |
| ABVI Menu Discarded | Overdrivemachines | 3,607 Kb |
| A Pen by Dalton Liu | Liudalton | 12,437 Kb |
| 03 - CSS Variables | Run-time | 2,682 Kb |
| Fading gradient button | Insprd | 1,713 Kb |
| A Pen by Jason Kinney | Jason-kinney | 1,980 Kb |
| Testimonial Fancy tabs responsive | Amit-webdesigner | 3,056 Kb |
| A Pen by Manoz | Manoz | 2,424 Kb |
| Table border-collapse property | Maxds | 1,672 Kb |
Do you want hide your ip address?
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!