wslでelixir その163

概要

wsl(wsl2じゃない)で、elixirやってみた。
練習問題やってみた。

練習問題

Livebookの、kino.jsで、box2dを動作させよ。

写真

サンプルコード

defmodule KinoHTML.Box2d do
  use Kino.JS
	def new(toolbox) do
		Kino.JS.new(__MODULE__, toolbox)
	end
	asset "main.js" do
		"""
		export async function init(ctx, toolbox) {
      await ctx.importJS("https://cdn.jsdelivr.net/npm/box2dweb-commonjs@2.1.0/Box2dWeb-2.1.a.3.js");
      var b2Common = Box2D.Common,
        b2Math = Box2D.Common.Math,
        b2Collision = Box2D.Collision,
        b2Shapes = Box2D.Collision.Shapes,
        b2Dynamics = Box2D.Dynamics,
        b2Contacts = Box2D.Dynamics.Contacts,
        b2Controllers = Box2D.Dynamics.Controllers,
        b2Joints = Box2D.Dynamics.Joints;
      var w = 300,
        h = 300,
        SCALE = 150,
        world,
        boxCount = 20,
        debugOn = false;
      world = new b2Dynamics.b2World(new b2Math.b2Vec2(0, 10), true);
      var fixDef = new b2Dynamics.b2FixtureDef();
      fixDef.restitution = 1;
      var bodyDef = new b2Dynamics.b2BodyDef();
      bodyDef.type = b2Dynamics.b2Body.b2_staticBody;
      var floorShape = new b2Shapes.b2PolygonShape();
      floorShape.SetAsBox(w / 2 / SCALE, 10 / SCALE);
      fixDef.shape = floorShape;
      bodyDef.position.x = w / 2 / SCALE;
      bodyDef.position.y = (h + 10) / SCALE;
      var floor = world.CreateBody(bodyDef);
      floor.CreateFixture(fixDef);
      bodyDef.position.y = 2 / SCALE;
      var loof = world.CreateBody(bodyDef);
      loof.CreateFixture(fixDef);
      var wallShape = new b2Shapes.b2PolygonShape();
      wallShape.SetAsBox(10 / SCALE, h / 2 / SCALE);
      fixDef.shape = wallShape;
      bodyDef.position.x = 2 / SCALE;
      bodyDef.position.y = h / 2 / SCALE;
      var leftWall = world.CreateBody(bodyDef);
      leftWall.CreateFixture(fixDef);
      bodyDef.position.x = (w + 10) / SCALE;
      var rightWall = world.CreateBody(bodyDef);
      rightWall.CreateFixture(fixDef);
      var bodyDef2 = new b2Dynamics.b2BodyDef;
      bodyDef2.linearDamping = 0.1;
      var fixDef2 = new b2Dynamics.b2FixtureDef;
      fixDef2.shape = new b2Shapes.b2CircleShape(0.2);  
      fixDef2.density = 0.4;
      fixDef2.friction = 0.9;
      fixDef2.restitution = 0.9;
      bodyDef2.type = b2Dynamics.b2Body.b2_dynamicBody;
      bodyDef2.position = new b2Math.b2Vec2(1.5, 1.0);
      bodyDef2.linearVelocity = new b2Math.b2Vec2(-5.0, 5.0);
      world.CreateBody(bodyDef2).CreateFixture(fixDef2);
      var debugCanvas = document.createElement('canvas');
      debugCanvas.className = 'debug-canvas';
      debugCanvas.width = 400;
      debugCanvas.height = 400;
      ctx.root.appendChild(debugCanvas);
      var debugDraw = new b2Dynamics.b2DebugDraw();
      debugDraw.SetSprite(debugCanvas.getContext('2d'));
      debugDraw.SetDrawScale(SCALE);
      debugDraw.SetFlags(b2Dynamics.b2DebugDraw.e_shapeBit | b2Dynamics.b2DebugDraw.e_jointBit);
      debugDraw.SetFillAlpha(0.7);
      debugDraw.SetLineThickness(1.0);
      world.SetDebugDraw(debugDraw);
      var i = 0;
      function loop() {
        i++;
        if (i > 200)
        {
          alert("stop");
          return;
        }
        world.Step(1 / 60, 10, 10);
      	world.DrawDebugData();
      	world.ClearForces();
      	setTimeout(loop, 100);
      }
      loop();
    }
		"""
	end
end

KinoHTML.Box2d.new(0)

以上。