我们可以很容易的将编写好的蓝紫程序集成到自己的网站上，比如将程序集成到 jsFiddle 或 Codepen 平台上。蓝紫的内核引擎（Lands/core）包含了蓝紫基础设施以及六个渲染引擎，但体积却非常小，只有 20kB 左右的传输量，无论是桌面版还是移动端 H5 页面都可以轻松加载。

<canvas id="canvas"></canvas>
<script>
const source = `
$js
const canvas = await Lan.canvasfs(750, 500, {
  preludes : 'base'
});
Lan.loop(canvas.render);

$fs
@run {
  FLUSH(vec3(abs(UVx2 * rot2(uTime * .5)), 0).xzy);
}
`;

import('//ddzeb.com/lands/core').then((ddzeb) => {
  ddzeb.Lands(source, canvas));
});
</script>

其中，source 为我们编写的蓝紫程序源代码，我们可以直接写在页面里，也可以通过 Ajax 获取。以下是另外一种方式：

<canvas id="canvas"></canvas>
<script id="source" type="ddzeb-lands">
  // Lands program source code ...
</script>

<script>
import('//ddzeb.com/lands/core').then((ddzeb) => {
  ddzeb.Lands(source, canvas));
});
</script>

或者也可以通过给 script 标签指定 src 来加载代码。这几种方式都可以，具体采用什么方法取决于个人偏好。

如果需要显示日志或对程序运行进行控制等，我们可以使用集成接口进行深度集成。首先，生成一个蓝紫对象，设置好需要使用的回调函数，然后运行程序：

import('//ddzeb.com/lands/core').then((ddzeb) => {
  const lands = ddzeb.Lands();
  lands.onlog = (msg) => {
    ......
  };
  lands.run(code, document.getElementById('display'));
});

运行程序，其中 source 为程序源代码，也可以是包含程序源代码的某个 HtmlElement。

暂停程序运行

恢复运行

结束运行，结束之后调用 callback。

写程序运行日志回调

帧率回调