0

我想知道这是如何制作的：http ://workshop.chromeexperiments.com/examples/gui/#1--Basic-Usage

这些点形成一个文本，当点击时，它们会爆炸。

形状如何形成文本？我可以用 processing.js 实现这一点吗？

谢谢。

4

2 回答 2

0

我不确定您是要在处理中还是在 javascript 中编写它。这是一个 javascript 库，因此您可以在 javascript 上下文中使用它。要使其处理并使用 processingjs 在 Web 上显示它，您必须使用处理资源来实现相同的结果或设法将数据从/传递到 javascript 和处理。有一个来自 processingjs 站点的示例，用于将您的页面与处理草图连接起来。请注意 processingjs 不支持使用处理库，因此您不能在此工作流程中使用任何Precessing 排版库。我认为它们可能非常方便......

至于如何在处理中执行此操作，我想我会在未显示的 PGraphics 中绘制字母，并在此表面上使用像素颜色测试来驱动圆圈的绘制。这将允许在运行时更改文本。就像，在伪代码中

PGraphics matteImage = new PGraphics(size, size, render);//
matteImage.background(black);
matteImage.fill(255);
matteImage.text("A", x,y);
matteImage.loadPixels();

for(i; i < matteImage.length;i++)
{
 color c = matteImage.pixels[i];
  if ( c == white)
{
   doDrawEllipses();
}  
}

在画圈方法/类中，我会添加一些噪音/随机性，爆炸句柄......

于 2012-10-26T15:55:26.630 回答
0

我想一种方法是为每个角色建立一个模型。例如，通过形状手动创建字母“A”。然后对于消息中的每个字母，您将显示字母的字符模型

于 2012-10-25T15:10:55.670 回答