wslでelixir その164

概要

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

練習問題

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

写真

サンプルコード

defmodule KinoHTML.Live2d 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://cubism.live2d.com/sdk-web/cubismcore/live2dcubismcore.min.js")
      await ctx.importJS("https://cdn.jsdelivr.net/gh/dylanNew/live2d/webgl/Live2D/lib/live2d.min.js")
      await ctx.importJS("https://cdn.jsdelivr.net/npm/pixi.js@6.5.2/dist/browser/pixi.min.js")
      await ctx.importJS("https://cdn.jsdelivr.net/npm/pixi-live2d-display/dist/index.min.js")
      ctx.root.innerHTML = `
            <canvas id="canvas" style="height: 480px; width: 600px;"></canvas>
			`;
      const cubism2Model = "https://cdn.jsdelivr.net/gh/guansss/pixi-live2d-display/test/assets/shizuku/shizuku.model.json";
      (async function main2() {
        const app = new PIXI.Application({
          view: document.getElementById("canvas"),
          autoStart: true,
          resizeTo: window
        });
        const model2 = await PIXI.live2d.Live2DModel.from(cubism2Model);
        app.stage.addChild(model2);
        model2.scale.set(0.3);
      })();
    }
    """
  end
end

KinoHTML.Live2d.new(0)

以上。