p5.scribble.js 使用教程

p5.scribble.js 使用教程

p5.scribble.jsDraw 2D primitives in a sketchy look in p5.js项目地址:https://gitcode.com/gh_mirrors/p5/p5.scribble.js

项目介绍

p5.scribble.js 是一个用于在 p5.js 中绘制具有手绘风格的2D图形的库。这个库是基于 Processing 的 handy 库移植过来的，允许用户在网页上创建具有草图外观的图形和插图。p5.scribble.js 提供了多种绘图功能，包括线条、曲线、矩形、圆角矩形、椭圆和阴影线等。

项目快速启动

安装

首先，你需要在你的项目中引入 p5.js 和 p5.scribble.js。你可以通过以下方式引入：

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
<script src="https://cdn.jsdelivr.net/npm/p5.scribble@0.1.0/p5.scribble.min.js"></script>

基本使用

以下是一个简单的示例，展示如何使用 p5.scribble.js 绘制一个手绘风格的矩形：

function setup() {
  createCanvas(400, 400);
  let scribble = new Scribble();
  scribble.scribbleRect(200, 200, 150, 150);
}

function draw() {
  background(255);
}

应用案例和最佳实践

绘制复杂图形

你可以结合 p5.js 的其他功能和 p5.scribble.js 来创建更复杂的图形。例如，绘制一个带有阴影线的多边形：

function setup() {
  createCanvas(400, 400);
  let scribble = new Scribble();
  let xCoords = [100, 200, 300, 200];
  let yCoords = [100, 50, 100, 150];
  scribble.scribbleFilling(xCoords, yCoords, 10, 45);
}

function draw() {
  background(255);
}

调整外观

你可以通过修改 scribble 对象的属性来调整图形的外观，例如线条的弯曲度和粗糙度：

scribble.bowing = 0.1;
scribble.roughness = 1.5;

典型生态项目

p5.scribble.js 可以与许多其他 p5.js 库和工具结合使用，以增强其功能。例如：

• p5.sound.js: 结合声音处理库，可以创建交互式音乐可视化。
• p5.dom.js: 用于处理DOM元素，可以创建更复杂的用户界面。
• ml5.js: 结合机器学习库，可以创建基于机器学习的艺术项目。

通过这些组合，你可以扩展 p5.scribble.js 的应用范围，创造出更多样化和创新的项目。

p5.scribble.jsDraw 2D primitives in a sketchy look in p5.js项目地址:https://gitcode.com/gh_mirrors/p5/p5.scribble.js