BUBLLEVERSE

关于

该项目采用了“涌现现象”这一借用自系统科学的概念，在设计和艺术领域精心编排引人入胜的视觉叙事。通过打造一个动态且不断变化的气泡宇宙，我们力求概括轻盈、活力和透明的本质。我们设计中的每个气泡都遵循独特的行为规则，决定运动、交互和集体协同作用。这种方法反映了不可预测的涌现之美，没有任何单一元素可以控制结果，但它们共同创造了一场复杂而整体的视觉盛宴。

我们为自己设定的挑战是将“涌现现象”应用到由无数相互作用的气泡组成的艺术设计系统中。我们的目标是展示简单的元素（每个元素都受单独的属性和行为控制）如何合并成复杂的运动和变换展示。关键在于详细的规则，这些规则决定了每个气泡的速度、方向和相互作用，从而产生远远大于其各个部分之和的协同效应。这一设计举措旨在为观众提供一种身临其境的涌现美学体验，其中气泡的集体舞蹈产生了丰富多样的视觉挂毯。

设计简介

项目类型

工具

应急设计

p5.js, html

背景研究

对于这个编码项目，我们使用了动画、音频效果和用户交互的概念。通过了解这些技术的背景和演变，有助于我们将这些概念融入到涌现设计中，并将这些技术应用到编码中。

动画效果：最初，网络内容仅限于静态文本和图像，只能通过计算机访问。（霍伊，2011）。然而，HTML5 和 <canvas> 元素的引入提供了更强大的工具，使开发人员能够创建复杂的动画效果（Fulton & Fulton，2013）。 JavaScript 和 CSS 后来被用来添加动态效果和交互。
2D图形绘制：2D图形绘制的概念可以追溯到计算机图形学和API（例如Windows GDI和PostScript）的早期发展。 HTML5 Canvas 2D 上下文成为用于在位图区域上渲染图形的重要显示 API（Fulton & Fulton，2013）。
音频效果：早期的网页音频播放仅限于<bgsound>、Flash以及HTML中的<audio>标签。但随着 Web Audio API 的出现，网页获得了处理复杂音频、生成和分析音频以及创建音频效果的能力。 (Smus, 2013) TheTone.js 库通过构建在 Web Audio API 之上进一步增强了此功能 (Mann, 2014)
用户交互：网络上的用户交互最初依赖于超链接文本和 HTML 表单。如今，网页通过监听鼠标、键盘和触摸事件等各种事件来实现更复杂的用户交互。 JavaScript 代码操作 HTML DOM 以使网页具有交互性（Oney & Myers，2009）。例如，我们的项目利用浏览器 API 创建气泡效果，响应用户点击事件并播放伴随的音频。

这些技术代表了网络从静态显示到包含音频和视频集成的动态交互式体验的演变。

灵感

我们的设计灵感来自阳光下的气泡，其令人惊叹的美丽和短暂的性质激励我们以数字格式永远保存这些美丽的时刻。气泡的微妙色调和反射光是我们的灵感来源。同样的设计灵感部分来自于秩序和混乱。点击一个气泡会破裂成更小的气泡，带来秩序与和谐的感觉。我们还尝试创建响应式用户输入体验，允许他们根据自己的操作创建动画。这种响应能力可以显着提高用户参与度，创造一种愉悦感和参与感。总的来说，我们希望利用该设计帮助用户捕捉转瞬即逝的瞬间，并在数字领域中发现发现意外之美的简单乐趣。

迭代 1

此代码创建一个粒子系统，在其中创建粒子并对其进行动画处理，例如在画布内对粒子运动、尺寸减小和重力效果进行动画处理，同时允许在用户单击气泡元素时生成新粒子。在代码的初始版本中，仅支持不同大小和位置的随机气泡，重点是使用 HTML 画布进行粒子的视觉设计，其中粒子呈现为彩色圆圈。此代码中仅使用 HTML5 canvas 和 Javascript。

机会

使用CSS设置气泡爆炸的样式，添加更具艺术感的视觉效果。重点关注气泡的视觉设计，不同大小的气泡，不同的爆炸效果，以及点击时的外观变化。
在tone.js中添加气泡与系统的交互，例如允许用户点击气泡触发爆炸并播放音效。
他们增强了动画效果。气泡可以同时移动、爆炸和碰撞组合——粒子动画与平移动画。

迭代 2

实现一个气泡系统，其中会生成气泡并为其设置动画。该代码使用 HTML、CSS 和 javascript 来直观地设计气泡，将样式应用于元素，并设置宽度、高度、背景颜色和不透明度。爆炸过程中形成的子气泡的效果也是由随机颜色和大小的颗粒组成。
关于交互规则，代码允许用户点击气泡触发爆炸和音效，并与整个气泡系统进行交互。在默认界面中设置一个气泡作为“开始”按钮，点击后会在一个循环中产生更多的气泡。动画循环根据气泡的速度不断更新气泡的位置，气泡之间会相互碰撞，碰撞后合并形成新的气泡。
该代码使用“animate”函数来渲染和更新动画。它使用“requestAnimationFrame”函数来安排动画的连续性，以创建高效且无缝的循环动画。
这段代码创建了一个更具交互性的用户界面。