box2dweb free ball on the curve licart Follow 2018-03-29 21:49:13 License: MIT License Fork1 Fav0 View431 Play Stop Reload Fullscreen Smart Phone Fork tree Readme JavaScript 0 lines HTML 239 lines CSS 0 lines FULLSCREEN WILL BE BETTER THE POINTS ON THE CURVES CAN BE MOVED box2dweb free ball on the curve <html><head> <meta charset="utf-8"/> <style type="text/css"> #canvas{position:absolute} #canvas3{position:absolute} #world{position:absolute}</style> <script type="text/javascript" src="http://jsrun.it/assets/Y/t/C/l/YtClR"></script> </head><body> <video id="awesome" style="display:none" src="http://jsrun.it/assets/w/F/d/9/wFd9C" width=250 autoplay loop></video> <canvas id="world" ></canvas> <canvas id="canvas3" ></canvas> <canvas id="canvas" ></canvas> <script> var b2Vec2=Box2D.Common.Math.b2Vec2,b2AABB=Box2D.Collision.b2AABB,b2BodyDef=Box2D.Dynamics.b2BodyDef,b2Body=Box2D.Dynamics.b2Body,b2FixtureDef=Box2D.Dynamics.b2FixtureDef,b2Fixture=Box2D.Dynamics.b2Fixture,b2World=Box2D.Dynamics.b2World,b2MassData=Box2D.Collision.Shapes.b2MassData, b2PolygonShape=Box2D.Collision.Shapes.b2PolygonShape,b2CircleShape=Box2D.Collision.Shapes.b2CircleShape,b2Shape=Box2D.Collision.Shapes.b2Shape,b2Settings=Box2D.Common.b2Settings,b2DebugDraw=Box2D.Dynamics.b2DebugDraw, b2DistanceJointDef = Box2D.Dynamics.Joints.b2DistanceJointDef,b2RevoluteJointDef = Box2D.Dynamics.Joints.b2RevoluteJointDef ; var canvas = document.getElementById('canvas'), ctx = canvas.getContext('2d'); var canvas3 = document.getElementById('canvas3'), ctx3 = canvas3.getContext('2d'); var canvas2 = document.getElementById('world'), ctx2 = canvas2.getContext('2d'); var width = canvas.width= canvas2.width = canvas3.width =window.innerWidth, height = canvas.height = canvas2.height =canvas3.height = window.innerHeight; world = new b2World(new b2Vec2(0, 9.8), true); var scale = 30; var bodies = []; drawing = new Image(); drawing.src = "http://jsrun.it/assets/M/d/u/Q/MduQX.png"; var isDown=false,isDown2=false,isDown3=false,isDown4=false,cpIndex=-1, pIndex3=-1, pIndex4=-1,pIndex2=-1; var trup; var vid=document.getElementById('awesome'); var run=true; var pause=false; //scale= window.innerWidth/50; b = {}; bb = {}; var COEUR = [[300,330],[250,300],[230,350],[270,400],[295,440],[300,470],[305,440],[330,400],[370,350],[350,300],[300,330]] var ptsB3 = [[300,330],[250,300],[230,350],[270,400],[295,440],[300,470],[305,440],[330,400],[370,350],[350,300],[300,330]] var POINTS22= [[4.4,11.33],[ 3.83,10.4],[ 4.36,5.97],[ 0.67,6.43],[ 0.7,4.43],[ 5.57,2.87],[ 10.03,4.33],[ 10.4,6.83],[ 6.83,6.37],[ 6.8,10.87],[ 5.06,11.5 ]]; var ptsB2= [[4.4,11.33],[ 3.83,10.4],[ 4.36,5.97],[ 0.67,6.43],[ 0.7,4.43],[ 5.57,2.87],[ 10.03,4.33],[ 10.4,6.83],[ 6.83,6.37],[ 6.8,10.87],[ 5.06,11.5 ]]; var POINTS2 = [[16.67,13.33], [16.67,9.33], [18.33,9.67], [20,10.33], [21.67,9.67], [23.33,10], [25,10.67], [25,13.33]]; var ptsB= [[16.67,13.33], [16.67,9.33], [18.33,9.67], [20,10.33], [21.67,9.67], [23.33,10], [25,10.67], [25,13.33]]; var CPRADIUS = 4; scale = window.innerHeight / 25; function redraw(ctx) { eraseline(); ctx.clearRect(0, 0, width, height); ctx.lineWidth=5; if (POINTS2.length > 1) { var curve = POINTS2;//ctx.strokeStyle = 'blue'; for (var precision = 3; precision--;) curve = fourPoint(curve); drawPolyline(ctx, curve); ctx.strokeStyle = 'rgba(0,220,0,1)'; ctx.shadowColor='rgba(220,0,220,1)'; ctx.shadowBlur=80; ctx.lineWidth=50; ctx.stroke(); ctx.globalCompositeOperation='destination-in'; ctx.fill(); ctx.globalCompositeOperation='destination-over'; ctx.fillStyle = 'rgba(200,0,0,0.1'; ctx.fill(); ctx.globalCompositeOperation='source-over'; ctx.lineWidth=50;ctx.strokeStyle = 'rgba(10,250,0,0.1)'; ctx.shadowOffsetY = -30; ctx.shadowColor = 'white';ctx.shadowBlur = 50;ctx.stroke(); ctx.shadowColor='rgba(0,0,0,0)';ctx.shadowBlur=0;ctx.shadowOffsetY = 0; ctx.lineWidth=3;ctx.strokeStyle = 'rgba(0,0,255,1)';ctx.stroke(); } ctx.fillStyle = 'rgba(255,0,0,1'; drawPoints(ctx, POINTS2); if (POINTS22.length > 1) { var curve2 = POINTS22; ctx.strokeStyle = 'red'; ctx.lineWidth=5; for (var precision = 3; precision--;) curve2 = fourPoint(curve2); drawPolyline(ctx, curve2) ; ctx.fillStyle = 'rgba(0,155,250,0.1)'; ctx.fill(); ctx.stroke();}; ctx.fillStyle = 'pink'; } function affineCombination(e){for(var n=0,t=[0,0],a=0;a<e.length;a++)n+=e[a][1];for(var a=0;a<e.length;a++){var i=e[a],o=i[1]/n;t[0]+=i[0][0]*o,t[1]+=i[0][1]*o}return t} function fourPoint(e){var n=e.length;if(4>n)return e;var a=[e[0]];a.push(affineCombination([[e[0],5],[e[1],15],[e[2],-5],[e[3],1]])); for(var r=n-2,t=1;r>t;++t){var o=t-1;a.push(e[t]),a.push(affineCombination([[e[t-1],-1],[e[t+0],9],[e[t+1],9],[e[t+2],-1]]))}a.push(e[r]); var o=n-4;return a.push(affineCombination([[e[o+0],1],[e[o+1],-5],[e[o+2],15],[e[o+3],5]])),a.push(e[n-1]),a} function drawPolyline(e,n){ e.beginPath(),e.moveTo(n[0][0]*scale,n[0][1]*scale);var t=new b2BodyDef;t.type=b2Body.b2_staticBody; for(var a=n[0][0],i=n[0][1],o=world.CreateBody(t),r=1;r<n.length;r++){var f=new b2FixtureDef;f.density=15,f.friction=.8,f.restitution=.4;var l=n[r][0],s=n[r][1];f.shape=new b2PolygonShape,f.shape.SetAsEdge(new b2Vec2(a,i),new b2Vec2(l,s)),o.CreateFixture(f),a=l,i=s,bodies.push(o),o.SetUserData("line"), e.lineTo(n[r][0]*scale,n[r][1]*scale)};e.stroke(); } function drawPoints(e,n){for(var t=1;t<n.length-1;t++)e.beginPath(),e.arc(n[t][0]*scale,n[t][1]*scale,CPRADIUS,0,2*Math.PI,!0),e.fill()} var debugDraw=new b2DebugDraw;debugDraw.SetSprite(document.getElementById("world").getContext("2d")),debugDraw.SetDrawScale(scale),debugDraw.SetFillAlpha(.5),debugDraw.SetLineThickness(.1),debugDraw.SetFlags(b2DebugDraw.e_shapeBit|b2DebugDraw.e_jointBit),world.SetDebugDraw(debugDraw); var bodyDef2 = new b2BodyDef; bodyDef2.type = b2Body.b2_dynamicBody; bodyDef2.position.Set(7,-5); var fixDef2 = new b2FixtureDef; fixDef2.density = 2; fixDef2.friction = .5; fixDef2.restitution = .7; fixDef2.shape = new b2CircleShape(0.98); wheel = world.CreateBody(bodyDef2); wheel.CreateFixture(fixDef2); wheel.SetUserData('circle2'); wheel.ApplyImpulse(new b2Vec2(0, 0.2), wheel.GetWorldCenter()); for (c = 0; 9 > c; c++) { fixDef = new b2FixtureDef; var bodyDef = new b2BodyDef;fixDef.shape = new b2CircleShape(0.33); fixDef.friction = 1;fixDef.restitution = 0.2; fixDef.density = 1.5; bodyDef.type = b2Body.b2_dynamicBody; bodyDef.position.x = 10.7+ 0.67 * c + 0.2, bodyDef.position.y = 7, b["link" + c] = world.CreateBody(bodyDef), b["link" + c].CreateFixture(fixDef);} a = new b2RevoluteJointDef(); a.localAnchorA=new b2Vec2(0,0); a.localAnchorB=new b2Vec2( ptsB2[7][0]+0.2, ptsB2[7][1]+0.1); a.bodyA=b.link0; a.bodyB=world.GetGroundBody(); world.CreateJoint(a); for (c = 1; 9 > c; c++) {a.Initialize(b["link" + (c - 1)], b["link" + c], b["link" + (c - 1)].GetWorldCenter()), world.CreateJoint(a);} a.localAnchorB=new b2Vec2(0.5,0); a.localAnchorA=new b2Vec2( ptsB[1][0]-0.2, ptsB[1][1]); a.bodyB=b.link8; a.bodyA=world.GetGroundBody(); world.CreateJoint(a); /* var bodyDef = new b2BodyDef; bodyDef.type = b2Body.b2_dynamicBody;bodyDef.fixedRotation = true; fixDef = new b2FixtureDef;fixDef.density = 20;fixDef.friction = 1;fixDef.restitution = 1; for (c = 0; 12 > c; c++) { fixDef.shape = new b2CircleShape(0.07); bodyDef.position.x = 280/scale+ 0.5 * c; bodyDef.position.y = 250/scale -0.15 * c-0.15; b["link" + c] = world.CreateBody(bodyDef); b["link" + c].CreateFixture(fixDef); } a = new b2RevoluteJointDef(); a.localAnchorA=new b2Vec2(-0.5,0); a.localAnchorB=new b2Vec2( 280/scale, 270/scale); a.bodyA=b.link0; a.bodyB=world.GetGroundBody(); world.CreateJoint(a); for (c = 1; 12 > c; c++) {a.Initialize(b["link" + (c - 1)], b["link" + c], b["link" + (c - 1)].GetWorldCenter()), world.CreateJoint(a);} a.localAnchorB=new b2Vec2(0.5,0); a.localAnchorA=new b2Vec2( 500/scale, 290/scale); a.bodyB=b.link11; a.bodyA=world.GetGroundBody(); world.CreateJoint(a); for (c = 0; 12 > c; c++) { fixDef.shape = new b2CircleShape(0.35); fixDef.density = 1; fixDef.friction = 1; fixDef.restitution = 0.8;bodyDef.type = b2Body.b2_dynamicBody; bodyDef.position.x = 270 / scale+ 0.7 * c + 0.7, bodyDef.position.y = 230 / scale- 0.1 * c +0.1, bb["link2" + c] = world.CreateBody(bodyDef), bb["link2" + c].CreateFixture(fixDef); } a = new b2RevoluteJointDef(); a.Initialize( bb.link20,world.GetGroundBody(), bb.link20.GetWorldCenter()); world.CreateJoint(a); for (c = 1; 12 > c; c++) { a.Initialize(bb["link2" + (c - 1)], bb["link2" + c], bb["link2" + (c - 1)].GetWorldCenter()), world.CreateJoint(a); } a.Initialize(bb.link211, world.GetGroundBody(), bb.link211.GetWorldCenter()); world.CreateJoint(a); */ /* setTimeout(function(){ fixDef.density=5; fixDef.friction=1; fixDef.restitution=0.3; bodyDef.type=b2Body.b2_dynamicBody; bodyDef.fixedRotation=true; bodyDef.angularDamping = 2; bodyDef.linearDamping = 0.1; var bodyTmp=null; var bodies=[]; var num=36; for(var i = 0; i < num; ++i) { fixDef.shape = new b2CircleShape(0.1); bodyDef.position.x = 1.5+i/4; bodyDef.position.y = 4; bodyTmp = world.CreateBody(bodyDef); bodyTmp.CreateFixture(fixDef);bodyTmp.SetUserData("circ"); bodies.push(bodyTmp); } var jointDef = new b2DistanceJointDef(); jointDef.bodyA = bodies[bodies.length-1]; jointDef.bodyB = bodies[0]; jointDef.collideConnected = false; jointDef.length=1.7*3.14/num; jointDef.frequencyHz = 0; jointDef.dampingRatio = 0; jointDef.anchorPoint1 = bodies[bodies.length-1].GetLocalCenter(); jointDef.anchorPoint2 = bodies[0].GetLocalCenter(); lol= world.CreateJoint(jointDef);lol.SetUserData("line"); for(var j=0;j<bodies.length-1;j++){ jointDef.bodyA = bodies[j]; jointDef.bodyB = bodies[j+1]; jointDef.anchorPoint1 = bodies[j].GetLocalCenter(); jointDef.anchorPoint2 = bodies[j+1].GetLocalCenter(); lol=world.CreateJoint(jointDef); lol.SetUserData("line"); } for(var k=0;k<bodies.length/2;k++){ jointDef.frequencyHz = 1.8; jointDef.dampingRatio =.2; jointDef.bodyA = bodies[k]; jointDef.bodyB = bodies[k+bodies.length/2]; jointDef.length=1.7; jointDef.anchorPoint1 = bodies[k].GetLocalCenter(); jointDef.anchorPoint2 = bodies[k*2].GetLocalCenter(); world.CreateJoint(jointDef);eraseline(); }},8000);*/ function tick(){ world.Step(1 / 20, 4, 2); ctx2.clearRect(0, 0, width, height); ctx2.fillStyle = '#1d1f20'; ctx2.fillRect(0, 0, width, height); //world.DrawDebugData(); var body = world.GetBodyList(); while (body) { if (body.GetUserData() == "circle2") { var radius = body.GetFixtureList().GetShape().GetRadius(), rotation = body.GetAngle() ; var x = body.GetPosition().x, y = body.GetPosition().y ; ctx2.save(); ctx2.translate(x*scale,y*scale); ctx2.rotate(rotation); ctx2.drawImage(drawing, -radius*scale,-radius*scale,radius*2*scale,radius*2*scale); ctx2.restore(); } if (body.GetUserData() == "circ") { var radius = body.GetFixtureList().GetShape().GetRadius() ; rotation = body.GetAngle() ; var x=body.GetPosition().x, y=body.GetPosition().y ; ctx2.save(); ctx2.beginPath();ctx2.fillStyle='rgba(255,0,0,0.7)'; ctx2.arc(x*scale, y*scale, radius*scale, Math.PI * 2, false); ctx2.fill(); ctx2.restore(); } body = body.GetNext(); } ctx2.beginPath(); ctx2.moveTo(b.link0.GetPosition().x * scale, b.link0.GetPosition().y * scale); for (a = 1; 8 >= a; a++) { var fix = b["link" + (a )].GetPosition(), g = b["link" + a].GetPosition(); ctx2.quadraticCurveTo(fix.x*scale, fix.y*scale, (fix.x*scale+g.x*scale)/2, (fix.y*scale+g.y*scale)/2)} ctx2.lineWidth=5; ctx2.strokeStyle='blue'; ctx2.stroke();ctx2.shadowColor='white' ctx2.shadowBlur=30; ctx2.stroke(); ctx2.shadowBlur=0;ctx2.shadowColor='rgba(0,0,0,0)'; if(wheel.GetAngularVelocity() == 0 && wheel.GetLinearVelocity().y ==0 && !isDown ){run=false; pause=true } //if( wheel.GetAngularVelocity() !== 0 && wheel.GetLinearVelocity().y !==0 ){pause=false; run=true;} //world.ClearForces(); }; var trip, trop; function draw2(){ctx3.clearRect(0, 0, width, height);ctx3.drawImage(vid, ptsB[0][0]*scale+0.67*scale, ptsB[2][1]*scale+1.33*scale,6.6*scale,2.67*scale);} setTimeout(function(){trip=setInterval(draw2, 200)}, 5500) setTimeout(function(){clearInterval(trip); ctx3.clearRect(0, 0, width, height);}, 14500); redraw(ctx); var lx, ly, dist; canvas.onmousedown = function(e) {var p = getPos(e); cpIndex = -1;isDown = false; pIndex3 = -1; pIndex2 = -1; for (var i = 1; i < POINTS2.length-1; i++) { dist = Math.sqrt((POINTS2[i][1]-p[1])*(POINTS2[i][1]-p[1]) + (POINTS2[i][0]-p[0])*(POINTS2[i][0]-p[0])); if (dist < 0.83) {eraseline(); isDown = true; cpIndex = i; lx = p[0]-POINTS2[i][0] ; ly = p[1]-POINTS2[i][1]; eraseline();if(pause){pause=false; run=true;animate()}; }; } for (var j = 1; j < POINTS22.length-1; j++) { dist = Math.sqrt((POINTS22[j][1]-p[1])*(POINTS22[j][1]-p[1]) + (POINTS22[j][0]-p[0])*(POINTS22[j][0]-p[0])); if (dist < 0.83){ isDown2 = true; pIndex2 = j; lx = p[0]-POINTS22[j][0] ; ly = p[1]-POINTS22[j][1]; } }; } window.onmousemove = function(e) { if (isDown) {eraseline();var p = getPos(e); POINTS2[cpIndex][0]=p[0]-lx; POINTS2[cpIndex][1] = p[1]-ly;eraseline(); for(var i = 1; i < POINTS2.length-1; i++) { if(POINTS2[i][0]>ptsB[i][0]+0.83){POINTS2[i][0]=ptsB[i][0]+0.83}; if(POINTS2[i][0]<ptsB[i][0]-0.83){POINTS2[i][0]=ptsB[i][0]-0.83}; if(POINTS2[i][1]>ptsB[i][1]+0.83){POINTS2[i][1]=ptsB[i][1]+0.83}; if(POINTS2[i][1]<ptsB[i][1]-0.83){POINTS2[i][1]=ptsB[i][1]-0.83}; } eraseline(); redraw(ctx);eraseline();} if (isDown2) { var p = getPos(e); POINTS22[pIndex2][0] = p[0]-lx; POINTS22[pIndex2][1] = p[1]-ly; for (var j = 1; j < POINTS22.length-1; j++) { if(POINTS22[j][0]>ptsB2[j][0]+0.83/scale){POINTS22[j][0]=ptsB2[j][0]+0.83}; if(POINTS22[j][0]<ptsB2[j][0]-0.83){POINTS22[j][0]=ptsB2[j][0]-0.83}; if(POINTS22[j][1]>ptsB2[j][1]+0.83/scale){POINTS22[j][1]=ptsB2[j][1]+0.83}; if(POINTS22[j][1]<ptsB2[j][1]-0.83){POINTS22[j][1]=ptsB2[j][1]-0.83}; } eraseline(); redraw(ctx);}; }; window.onmouseup = function() { cpIndex=-1; isDown2=false;isDown3=false; isDown4=false;isDown = false;pIndex4=-1;pIndex3=-1; pIndex2=-1; }; function getPos(e) { var r=canvas.getBoundingClientRect(); return [x= (e.clientX-r.left)/scale, y= (e.clientY-r.top)/scale] } function eraseline() { var bodies = world.GetBodyList(); if(bodies.GetUserData() == "line"){world.DestroyBody(bodies)}} var trap, trup; function animate(){if(run && !pause) { trap = window.setTimeout(animate, 40 ); tick();}} function pause(){run = !run;if(run){animate()}}; window['onload'] = function doOnload() {animate(); } </script> </body></html> box2dweb free ball on the curve FULLSCREEN WILL BE BETTER THE POINTS ON THE CURVES CAN BE MOVED <html><head> <meta charset="utf-8"/> <style type="text/css"> #canvas{position:absolute} #canvas3{position:absolute} #world{position:absolute}</style> <script type="text/javascript" src="http://jsrun.it/assets/Y/t/C/l/YtClR"></script> </head><body> <video id="awesome" style="display:none" src="http://jsrun.it/assets/w/F/d/9/wFd9C" width=250 autoplay loop></video> <canvas id="world" ></canvas> <canvas id="canvas3" ></canvas> <canvas id="canvas" ></canvas> <script> var b2Vec2=Box2D.Common.Math.b2Vec2,b2AABB=Box2D.Collision.b2AABB,b2BodyDef=Box2D.Dynamics.b2BodyDef,b2Body=Box2D.Dynamics.b2Body,b2FixtureDef=Box2D.Dynamics.b2FixtureDef,b2Fixture=Box2D.Dynamics.b2Fixture,b2World=Box2D.Dynamics.b2World,b2MassData=Box2D.Collision.Shapes.b2MassData, b2PolygonShape=Box2D.Collision.Shapes.b2PolygonShape,b2CircleShape=Box2D.Collision.Shapes.b2CircleShape,b2Shape=Box2D.Collision.Shapes.b2Shape,b2Settings=Box2D.Common.b2Settings,b2DebugDraw=Box2D.Dynamics.b2DebugDraw, b2DistanceJointDef = Box2D.Dynamics.Joints.b2DistanceJointDef,b2RevoluteJointDef = Box2D.Dynamics.Joints.b2RevoluteJointDef ; var canvas = document.getElementById('canvas'), ctx = canvas.getContext('2d'); var canvas3 = document.getElementById('canvas3'), ctx3 = canvas3.getContext('2d'); var canvas2 = document.getElementById('world'), ctx2 = canvas2.getContext('2d'); var width = canvas.width= canvas2.width = canvas3.width =window.innerWidth, height = canvas.height = canvas2.height =canvas3.height = window.innerHeight; world = new b2World(new b2Vec2(0, 9.8), true); var scale = 30; var bodies = []; drawing = new Image(); drawing.src = "http://jsrun.it/assets/M/d/u/Q/MduQX.png"; var isDown=false,isDown2=false,isDown3=false,isDown4=false,cpIndex=-1, pIndex3=-1, pIndex4=-1,pIndex2=-1; var trup; var vid=document.getElementById('awesome'); var run=true; var pause=false; //scale= window.innerWidth/50; b = {}; bb = {}; var COEUR = [[300,330],[250,300],[230,350],[270,400],[295,440],[300,470],[305,440],[330,400],[370,350],[350,300],[300,330]] var ptsB3 = [[300,330],[250,300],[230,350],[270,400],[295,440],[300,470],[305,440],[330,400],[370,350],[350,300],[300,330]] var POINTS22= [[4.4,11.33],[ 3.83,10.4],[ 4.36,5.97],[ 0.67,6.43],[ 0.7,4.43],[ 5.57,2.87],[ 10.03,4.33],[ 10.4,6.83],[ 6.83,6.37],[ 6.8,10.87],[ 5.06,11.5 ]]; var ptsB2= [[4.4,11.33],[ 3.83,10.4],[ 4.36,5.97],[ 0.67,6.43],[ 0.7,4.43],[ 5.57,2.87],[ 10.03,4.33],[ 10.4,6.83],[ 6.83,6.37],[ 6.8,10.87],[ 5.06,11.5 ]]; var POINTS2 = [[16.67,13.33], [16.67,9.33], [18.33,9.67], [20,10.33], [21.67,9.67], [23.33,10], [25,10.67], [25,13.33]]; var ptsB= [[16.67,13.33], [16.67,9.33], [18.33,9.67], [20,10.33], [21.67,9.67], [23.33,10], [25,10.67], [25,13.33]]; var CPRADIUS = 4; scale = window.innerHeight / 25; function redraw(ctx) { eraseline(); ctx.clearRect(0, 0, width, height); ctx.lineWidth=5; if (POINTS2.length > 1) { var curve = POINTS2;//ctx.strokeStyle = 'blue'; for (var precision = 3; precision--;) curve = fourPoint(curve); drawPolyline(ctx, curve); ctx.strokeStyle = 'rgba(0,220,0,1)'; ctx.shadowColor='rgba(220,0,220,1)'; ctx.shadowBlur=80; ctx.lineWidth=50; ctx.stroke(); ctx.globalCompositeOperation='destination-in'; ctx.fill(); ctx.globalCompositeOperation='destination-over'; ctx.fillStyle = 'rgba(200,0,0,0.1'; ctx.fill(); ctx.globalCompositeOperation='source-over'; ctx.lineWidth=50;ctx.strokeStyle = 'rgba(10,250,0,0.1)'; ctx.shadowOffsetY = -30; ctx.shadowColor = 'white';ctx.shadowBlur = 50;ctx.stroke(); ctx.shadowColor='rgba(0,0,0,0)';ctx.shadowBlur=0;ctx.shadowOffsetY = 0; ctx.lineWidth=3;ctx.strokeStyle = 'rgba(0,0,255,1)';ctx.stroke(); } ctx.fillStyle = 'rgba(255,0,0,1'; drawPoints(ctx, POINTS2); if (POINTS22.length > 1) { var curve2 = POINTS22; ctx.strokeStyle = 'red'; ctx.lineWidth=5; for (var precision = 3; precision--;) curve2 = fourPoint(curve2); drawPolyline(ctx, curve2) ; ctx.fillStyle = 'rgba(0,155,250,0.1)'; ctx.fill(); ctx.stroke();}; ctx.fillStyle = 'pink'; } function affineCombination(e){for(var n=0,t=[0,0],a=0;a<e.length;a++)n+=e[a][1];for(var a=0;a<e.length;a++){var i=e[a],o=i[1]/n;t[0]+=i[0][0]*o,t[1]+=i[0][1]*o}return t} function fourPoint(e){var n=e.length;if(4>n)return e;var a=[e[0]];a.push(affineCombination([[e[0],5],[e[1],15],[e[2],-5],[e[3],1]])); for(var r=n-2,t=1;r>t;++t){var o=t-1;a.push(e[t]),a.push(affineCombination([[e[t-1],-1],[e[t+0],9],[e[t+1],9],[e[t+2],-1]]))}a.push(e[r]); var o=n-4;return a.push(affineCombination([[e[o+0],1],[e[o+1],-5],[e[o+2],15],[e[o+3],5]])),a.push(e[n-1]),a} function drawPolyline(e,n){ e.beginPath(),e.moveTo(n[0][0]*scale,n[0][1]*scale);var t=new b2BodyDef;t.type=b2Body.b2_staticBody; for(var a=n[0][0],i=n[0][1],o=world.CreateBody(t),r=1;r<n.length;r++){var f=new b2FixtureDef;f.density=15,f.friction=.8,f.restitution=.4;var l=n[r][0],s=n[r][1];f.shape=new b2PolygonShape,f.shape.SetAsEdge(new b2Vec2(a,i),new b2Vec2(l,s)),o.CreateFixture(f),a=l,i=s,bodies.push(o),o.SetUserData("line"), e.lineTo(n[r][0]*scale,n[r][1]*scale)};e.stroke(); } function drawPoints(e,n){for(var t=1;t<n.length-1;t++)e.beginPath(),e.arc(n[t][0]*scale,n[t][1]*scale,CPRADIUS,0,2*Math.PI,!0),e.fill()} var debugDraw=new b2DebugDraw;debugDraw.SetSprite(document.getElementById("world").getContext("2d")),debugDraw.SetDrawScale(scale),debugDraw.SetFillAlpha(.5),debugDraw.SetLineThickness(.1),debugDraw.SetFlags(b2DebugDraw.e_shapeBit|b2DebugDraw.e_jointBit),world.SetDebugDraw(debugDraw); var bodyDef2 = new b2BodyDef; bodyDef2.type = b2Body.b2_dynamicBody; bodyDef2.position.Set(7,-5); var fixDef2 = new b2FixtureDef; fixDef2.density = 2; fixDef2.friction = .5; fixDef2.restitution = .7; fixDef2.shape = new b2CircleShape(0.98); wheel = world.CreateBody(bodyDef2); wheel.CreateFixture(fixDef2); wheel.SetUserData('circle2'); wheel.ApplyImpulse(new b2Vec2(0, 0.2), wheel.GetWorldCenter()); for (c = 0; 9 > c; c++) { fixDef = new b2FixtureDef; var bodyDef = new b2BodyDef;fixDef.shape = new b2CircleShape(0.33); fixDef.friction = 1;fixDef.restitution = 0.2; fixDef.density = 1.5; bodyDef.type = b2Body.b2_dynamicBody; bodyDef.position.x = 10.7+ 0.67 * c + 0.2, bodyDef.position.y = 7, b["link" + c] = world.CreateBody(bodyDef), b["link" + c].CreateFixture(fixDef);} a = new b2RevoluteJointDef(); a.localAnchorA=new b2Vec2(0,0); a.localAnchorB=new b2Vec2( ptsB2[7][0]+0.2, ptsB2[7][1]+0.1); a.bodyA=b.link0; a.bodyB=world.GetGroundBody(); world.CreateJoint(a); for (c = 1; 9 > c; c++) {a.Initialize(b["link" + (c - 1)], b["link" + c], b["link" + (c - 1)].GetWorldCenter()), world.CreateJoint(a);} a.localAnchorB=new b2Vec2(0.5,0); a.localAnchorA=new b2Vec2( ptsB[1][0]-0.2, ptsB[1][1]); a.bodyB=b.link8; a.bodyA=world.GetGroundBody(); world.CreateJoint(a); /* var bodyDef = new b2BodyDef; bodyDef.type = b2Body.b2_dynamicBody;bodyDef.fixedRotation = true; fixDef = new b2FixtureDef;fixDef.density = 20;fixDef.friction = 1;fixDef.restitution = 1; for (c = 0; 12 > c; c++) { fixDef.shape = new b2CircleShape(0.07); bodyDef.position.x = 280/scale+ 0.5 * c; bodyDef.position.y = 250/scale -0.15 * c-0.15; b["link" + c] = world.CreateBody(bodyDef); b["link" + c].CreateFixture(fixDef); } a = new b2RevoluteJointDef(); a.localAnchorA=new b2Vec2(-0.5,0); a.localAnchorB=new b2Vec2( 280/scale, 270/scale); a.bodyA=b.link0; a.bodyB=world.GetGroundBody(); world.CreateJoint(a); for (c = 1; 12 > c; c++) {a.Initialize(b["link" + (c - 1)], b["link" + c], b["link" + (c - 1)].GetWorldCenter()), world.CreateJoint(a);} a.localAnchorB=new b2Vec2(0.5,0); a.localAnchorA=new b2Vec2( 500/scale, 290/scale); a.bodyB=b.link11; a.bodyA=world.GetGroundBody(); world.CreateJoint(a); for (c = 0; 12 > c; c++) { fixDef.shape = new b2CircleShape(0.35); fixDef.density = 1; fixDef.friction = 1; fixDef.restitution = 0.8;bodyDef.type = b2Body.b2_dynamicBody; bodyDef.position.x = 270 / scale+ 0.7 * c + 0.7, bodyDef.position.y = 230 / scale- 0.1 * c +0.1, bb["link2" + c] = world.CreateBody(bodyDef), bb["link2" + c].CreateFixture(fixDef); } a = new b2RevoluteJointDef(); a.Initialize( bb.link20,world.GetGroundBody(), bb.link20.GetWorldCenter()); world.CreateJoint(a); for (c = 1; 12 > c; c++) { a.Initialize(bb["link2" + (c - 1)], bb["link2" + c], bb["link2" + (c - 1)].GetWorldCenter()), world.CreateJoint(a); } a.Initialize(bb.link211, world.GetGroundBody(), bb.link211.GetWorldCenter()); world.CreateJoint(a); */ /* setTimeout(function(){ fixDef.density=5; fixDef.friction=1; fixDef.restitution=0.3; bodyDef.type=b2Body.b2_dynamicBody; bodyDef.fixedRotation=true; bodyDef.angularDamping = 2; bodyDef.linearDamping = 0.1; var bodyTmp=null; var bodies=[]; var num=36; for(var i = 0; i < num; ++i) { fixDef.shape = new b2CircleShape(0.1); bodyDef.position.x = 1.5+i/4; bodyDef.position.y = 4; bodyTmp = world.CreateBody(bodyDef); bodyTmp.CreateFixture(fixDef);bodyTmp.SetUserData("circ"); bodies.push(bodyTmp); } var jointDef = new b2DistanceJointDef(); jointDef.bodyA = bodies[bodies.length-1]; jointDef.bodyB = bodies[0]; jointDef.collideConnected = false; jointDef.length=1.7*3.14/num; jointDef.frequencyHz = 0; jointDef.dampingRatio = 0; jointDef.anchorPoint1 = bodies[bodies.length-1].GetLocalCenter(); jointDef.anchorPoint2 = bodies[0].GetLocalCenter(); lol= world.CreateJoint(jointDef);lol.SetUserData("line"); for(var j=0;j<bodies.length-1;j++){ jointDef.bodyA = bodies[j]; jointDef.bodyB = bodies[j+1]; jointDef.anchorPoint1 = bodies[j].GetLocalCenter(); jointDef.anchorPoint2 = bodies[j+1].GetLocalCenter(); lol=world.CreateJoint(jointDef); lol.SetUserData("line"); } for(var k=0;k<bodies.length/2;k++){ jointDef.frequencyHz = 1.8; jointDef.dampingRatio =.2; jointDef.bodyA = bodies[k]; jointDef.bodyB = bodies[k+bodies.length/2]; jointDef.length=1.7; jointDef.anchorPoint1 = bodies[k].GetLocalCenter(); jointDef.anchorPoint2 = bodies[k*2].GetLocalCenter(); world.CreateJoint(jointDef);eraseline(); }},8000);*/ function tick(){ world.Step(1 / 20, 4, 2); ctx2.clearRect(0, 0, width, height); ctx2.fillStyle = '#1d1f20'; ctx2.fillRect(0, 0, width, height); //world.DrawDebugData(); var body = world.GetBodyList(); while (body) { if (body.GetUserData() == "circle2") { var radius = body.GetFixtureList().GetShape().GetRadius(), rotation = body.GetAngle() ; var x = body.GetPosition().x, y = body.GetPosition().y ; ctx2.save(); ctx2.translate(x*scale,y*scale); ctx2.rotate(rotation); ctx2.drawImage(drawing, -radius*scale,-radius*scale,radius*2*scale,radius*2*scale); ctx2.restore(); } if (body.GetUserData() == "circ") { var radius = body.GetFixtureList().GetShape().GetRadius() ; rotation = body.GetAngle() ; var x=body.GetPosition().x, y=body.GetPosition().y ; ctx2.save(); ctx2.beginPath();ctx2.fillStyle='rgba(255,0,0,0.7)'; ctx2.arc(x*scale, y*scale, radius*scale, Math.PI * 2, false); ctx2.fill(); ctx2.restore(); } body = body.GetNext(); } ctx2.beginPath(); ctx2.moveTo(b.link0.GetPosition().x * scale, b.link0.GetPosition().y * scale); for (a = 1; 8 >= a; a++) { var fix = b["link" + (a )].GetPosition(), g = b["link" + a].GetPosition(); ctx2.quadraticCurveTo(fix.x*scale, fix.y*scale, (fix.x*scale+g.x*scale)/2, (fix.y*scale+g.y*scale)/2)} ctx2.lineWidth=5; ctx2.strokeStyle='blue'; ctx2.stroke();ctx2.shadowColor='white' ctx2.shadowBlur=30; ctx2.stroke(); ctx2.shadowBlur=0;ctx2.shadowColor='rgba(0,0,0,0)'; if(wheel.GetAngularVelocity() == 0 && wheel.GetLinearVelocity().y ==0 && !isDown ){run=false; pause=true } //if( wheel.GetAngularVelocity() !== 0 && wheel.GetLinearVelocity().y !==0 ){pause=false; run=true;} //world.ClearForces(); }; var trip, trop; function draw2(){ctx3.clearRect(0, 0, width, height);ctx3.drawImage(vid, ptsB[0][0]*scale+0.67*scale, ptsB[2][1]*scale+1.33*scale,6.6*scale,2.67*scale);} setTimeout(function(){trip=setInterval(draw2, 200)}, 5500) setTimeout(function(){clearInterval(trip); ctx3.clearRect(0, 0, width, height);}, 14500); redraw(ctx); var lx, ly, dist; canvas.onmousedown = function(e) {var p = getPos(e); cpIndex = -1;isDown = false; pIndex3 = -1; pIndex2 = -1; for (var i = 1; i < POINTS2.length-1; i++) { dist = Math.sqrt((POINTS2[i][1]-p[1])*(POINTS2[i][1]-p[1]) + (POINTS2[i][0]-p[0])*(POINTS2[i][0]-p[0])); if (dist < 0.83) {eraseline(); isDown = true; cpIndex = i; lx = p[0]-POINTS2[i][0] ; ly = p[1]-POINTS2[i][1]; eraseline();if(pause){pause=false; run=true;animate()}; }; } for (var j = 1; j < POINTS22.length-1; j++) { dist = Math.sqrt((POINTS22[j][1]-p[1])*(POINTS22[j][1]-p[1]) + (POINTS22[j][0]-p[0])*(POINTS22[j][0]-p[0])); if (dist < 0.83){ isDown2 = true; pIndex2 = j; lx = p[0]-POINTS22[j][0] ; ly = p[1]-POINTS22[j][1]; } }; } window.onmousemove = function(e) { if (isDown) {eraseline();var p = getPos(e); POINTS2[cpIndex][0]=p[0]-lx; POINTS2[cpIndex][1] = p[1]-ly;eraseline(); for(var i = 1; i < POINTS2.length-1; i++) { if(POINTS2[i][0]>ptsB[i][0]+0.83){POINTS2[i][0]=ptsB[i][0]+0.83}; if(POINTS2[i][0]<ptsB[i][0]-0.83){POINTS2[i][0]=ptsB[i][0]-0.83}; if(POINTS2[i][1]>ptsB[i][1]+0.83){POINTS2[i][1]=ptsB[i][1]+0.83}; if(POINTS2[i][1]<ptsB[i][1]-0.83){POINTS2[i][1]=ptsB[i][1]-0.83}; } eraseline(); redraw(ctx);eraseline();} if (isDown2) { var p = getPos(e); POINTS22[pIndex2][0] = p[0]-lx; POINTS22[pIndex2][1] = p[1]-ly; for (var j = 1; j < POINTS22.length-1; j++) { if(POINTS22[j][0]>ptsB2[j][0]+0.83/scale){POINTS22[j][0]=ptsB2[j][0]+0.83}; if(POINTS22[j][0]<ptsB2[j][0]-0.83){POINTS22[j][0]=ptsB2[j][0]-0.83}; if(POINTS22[j][1]>ptsB2[j][1]+0.83/scale){POINTS22[j][1]=ptsB2[j][1]+0.83}; if(POINTS22[j][1]<ptsB2[j][1]-0.83){POINTS22[j][1]=ptsB2[j][1]-0.83}; } eraseline(); redraw(ctx);}; }; window.onmouseup = function() { cpIndex=-1; isDown2=false;isDown3=false; isDown4=false;isDown = false;pIndex4=-1;pIndex3=-1; pIndex2=-1; }; function getPos(e) { var r=canvas.getBoundingClientRect(); return [x= (e.clientX-r.left)/scale, y= (e.clientY-r.top)/scale] } function eraseline() { var bodies = world.GetBodyList(); if(bodies.GetUserData() == "line"){world.DestroyBody(bodies)}} var trap, trup; function animate(){if(run && !pause) { trap = window.setTimeout(animate, 40 ); tick();}} function pause(){run = !run;if(run){animate()}}; window['onload'] = function doOnload() {animate(); } </script> </body></html> use an iframe compat browser, deer Play on jsdo.it games Author Share ブログに埋め込む QR Tag Download Complete! Description What kind of game? FULLSCREEN WILL BE BETTER THE POINTS ON THE CURVES CAN BE MOVED Control Device Smartphone Controllerjsdo.it WebSocket Controller» Mouse Keyboard Touch Device Fullscreen Activated Inactivated jsdo.it games から削除する Submit Author licart where is my box2d? Tweet Default Panel Auto play Screenshot Readme JavaScript HTML CSS Size Width: px Height: px code <script type="text/javascript" src="http://jsdo.it/blogparts/2ymY/js"></script> animation art&design box2d box2dweb canvas css game html5_elements&api javascript other physics Discussion Questions on this code? Tags animation art&design box2d box2dweb canvas css game html5_elements&api javascript other physics Forked sort by latest page views favorite forked forked: box2dweb free ball on ohisama1 00 378 364/13/17 animation art&design box2d box2dweb canvas css game html5_elements&api javascript other physics