Urpflanze 开源项目教程

1. 项目介绍

Urpflanze 是一个面向开发者、艺术家以及喜欢用数学进行创作的用户的创意编程库。它基于 Urpflanze 包来生成场景，专注于创建二维形状、重复这些形状、逐点操作它们并将结果封装成新的形状。该库提供了一个简单的 API，用于管理基本形状的重复以及应用变换，避免了使用画布变换。

2. 项目快速启动

首先，可以通过以下方式将 Urpflanze 包集成到您的项目中：

使用 CDN

<!-- 完整版本 -->
<script src="https://cdn.jsdelivr.net/npm/@urpflanze/js"></script>

<!-- 可定制版本，[version] 可以替换为具体版本号，[-light] 为可选的轻量级版本，[.min] 为可选的压缩版本 -->
<script src="https://cdn.jsdelivr.net/npm/@urpflanze/js[@version]/build/urpflanze[-light][.min].js"></script>

使用 NPM

npm i --save @urpflanze/js

然后在您的代码中引入 Urpflanze：

// 完整引入
import * as Urpflanze from '@urpflanze/js';
const scene = new Urpflanze.Scene();

// 或者仅引入 Scene
import { Scene } from '@urpflanze/js';
const scene = new Scene();

下面是一个简单的示例：

// 创建场景
const scene = new Urpflanze.Scene();

// 创建矩形并设置参数
const rect = new Urpflanze.Rect({
  repetitions: 8,
  distance: 100,
  sideLength: 20
});

// 将矩形添加到场景中
scene.add(rect);

// 在画布上绘制场景
const drawer = new Urpflanze.DrawerCanvas(scene, document.body);
drawer.draw();

3. 应用案例和最佳实践

示例：创建一个简单的动画

// 创建场景
const scene = new Urpflanze.Scene();

// 创建一个圆形
const circle = new Urpflanze.Circle({
  radius: 50,
  sides: 100
});

// 将圆形添加到场景中
scene.add(circle);

// 创建动画
const drawer = new Urpflanze.DrawerCanvas(scene, document.body);
function animate() {
  requestAnimationFrame(animate);
  circle.rotation += 0.01; // 每帧旋转一点
  drawer.draw();
}
animate();

最佳实践：使用 Urpflanze 进行数学艺术创作

在 Urpflanze 中，您可以通过数学函数和算法来创作独特的艺术作品。例如，使用正弦函数来控制形状的大小变化，或是利用分形算法生成复杂的图案。

4. 典型生态项目

Urpflanze 作为创意编程库，可以与其他开源项目结合，例如用于创建交互式网页的 Three.js 或用于物理模拟的 p5.js。结合这些项目，您可以构建更加丰富和动态的创意编程应用。例如，您可以创建一个结合 Urpflanze 和 Three.js 的项目，用于在虚拟三维空间中展示和操作由 Urpflanze 生成的二维形状。