设计的尽头是编程?这个网站的百万款创意代码让你一键生成炫酷视觉
- 2026-04-08 02:33:35
当下，动态视觉设计越来越频繁地出现，创意编程、人工智能开始被纳入设计工具的范畴，不仅让设计师有了更开放的工具选择，还改变了他们的创作思维。
Openprocessing中作品“Sandy Fractal Patterns”所创作的视觉
Openprocessing就是这样一款供设计师与艺术家学习交流的开源编程论坛，同时也是编程语言Processing的分享平台。
Processing专门为数字艺术和视觉交互设计而创建，提供一个对图片、动画、音乐进行编程的平台，重在创作等实操工作，在之前的文章中Design360°也进行了详细的介绍。相较于设计实操工具，Openprocessing则是更轻松、灵活的在线交流社区，汇集了数十万用户的作品与开源代码。在这个论坛里，你不仅可以探索到设计师们的趣味创意，还可以改写或自行撰写代码，在线生成自己的个性化表达。
Processing, Openprocessing
Design360° 第98期以“动态思维与数字技术”为题，通过对话动态设计师和设计软件开发者，对技术与设计师创作思维之间的关系进行探讨。Book A则来自设计师们常用的工具Openprocessing。本篇，Design360°收集了25件来自Openprocessing的趣味作品，包含动态排版、图形创意和游戏互动三大类别以及项目网址，打开设计师们创造力的边界！
←向左滑动查看更多
{ 动态排版 }
Dynamic typography
开源代码 (0, 1)
互动型流体排版
由艺术家Ra2y创建的编程作品中，通过applyForce函数来控制粒子（字母）的运动。用户在使用鼠标点击画面时，字母会根据编程和操作而产生流体型的排版。
作品名： History2Us
艺术家ID： Ra2y
网址：openprocessing.org/sketch/886968
开源代码 (0, 2)
气泡字体生成器
这是一个气泡造型的字体生成器，用户可以通过修改编程来进行文本编辑，以及字体、字重、颜色、变化速率等。
作品名： BubbleText
艺术家ID： takayuki ono
网址：openprocessing.org/sketch/828357
开源代码 (0,3)
动态推拉式排版
该作品默认编程字体为“helvetica”，背景色为“0（RGB）”。用户通过修改代码来进行随机个性化创作。例如下图将字体修改为“Adobe 宋体 Std L“，背景色为“120, 81, 169”。
作品名：210523_composition 6
艺术家ID：Takashi Tanaka
网址：openprocessing.org/sketch/1202233
开源代码 (0, 4)
点触式自由落体
作品通过点击鼠标右键来随机释放字符色块，以自由落体、膨胀形式进行下落和堆叠。字符、颜色等内容均可供用户修改与创作，动画边框尺寸也被设置为自定义——createCanvas(windowWidth, windowHeight, WEBGL)。
作品名： TypeBlocks
艺术家ID： Isaco Type
网址：openprocessing.org/sketch/951388
开源代码 (0, 5)
3D沉浸式动态排版
在已有的开源代码下修改文字、颜色、运动速率等参数，用户通过移动鼠标控制观看视角。动画边框尺寸也被设置为窗口自适应——createCanvas(windowWidth, windowHeight, WEBGL)。
作品名： 3D Kinetic Type
艺术家ID： riyanberlian
网址：openprocessing.org/sketch/807115
开源代码 (0, 6)
自定义经典网格排版
以瑞士平面设计先驱Josef Müller Brockmann的著作《平面设计中的网格系统》为灵感，艺术家munusshih为此搭建了一个自定义网格排版。
作品名： Grid System
艺术家ID： munusshih
网址：openprocessing.org/sketch/1328427
开源代码 (0, 7)
字体混排生成器
作品名： cd-sticker
艺术家ID：munusshih
网址：openprocessing.org/sketch/1552735
开源代码 (0, 8)
可变字体与排版
作品名：Challenge - 2
艺术家ID：munusshih
网址：openprocessing.org/sketch/1498123
开源代码 (0, 9)
电子语言生成器
作品名： Info Pollution
艺术家ID： FAL
网址：openprocessing.org/sketch/844086
开源代码 (0, 10)
3D互动排版
作品名： Metaverse Taipei 2022 KV
艺术家ID： Che-Yu Wu
网址：openprocessing.org/sketch/1532769
开源代码 (0, 11)
弹窗式动态表达
作品名：Text
艺术家ID：江启纶
网址：openprocessing.org/sketch/1314541
开源代码 (0, 12)
无限动态循环
作品名： ttt210312_Dream & Reality
艺术家ID： Gaetano
网址：openprocessing.org/sketch/1364343
{ 图形创意 }
Creative Graphics
GenerativeP：openprocessing.org/sketch/848203
开源代码 (0, 1)
粒子路径可视化
由编程随机建立中心点，圆点为光标移动路径，并以射线形式向外迸发。点击鼠标更换圆点颜色，移动速率则决定了圆点的大小。
作品名：マウス色々
艺术家ID：TSUKA
网址：openprocessing.org/sketch/1567879
开源代码 (0, 2)
粒子的显影
Sandy Fractal Patterns是一件生成艺术作品，以时间为变量，每一个图形中的粒子数量随着时间增长。用户通过左键单击切换图形模式，右键单击更改颜色。
作品名：Sandy Fractal Patterns
艺术家ID：genj maltes
网址：openprocessing.org/sketch/738514
开源代码 (0, 3)
3D图形绘制
根据用户绘制的闭合图形自动生成3D动态，编程设置为向上漂浮的无限循环式动画。
作品名：3D Drawing
艺术家ID：Richard Bourne
论坛网址：openprocessing.org/sketch/1466192
开源代码 (0, 4)
动态影音生成
作品Mount Fuji以图片为素材，用户可根据喜好自行更改。在移动鼠标的过程中，画面颜色、元素会根据光标位置转化形态，点击画面则随机生成点状装饰。
作品名： Mount Fuji
艺术家ID： Fino
论坛网址：openprocessing.org/sketch/790027
开源代码 (0, 5)
“AI”人像生成
通过上传照片，对滑动键进行修改，修改动图的聚焦点、大小、位置以及像素尺寸，从而创建个性化头像。
作品名：Challenge-4
艺术家ID：munusshih
网址：openprocessing.org/sketch/1497698
开源代码 (0, 6)
像素块形变
与“Challenge-4”艺术形式相似，以形变的图片为创意。不同之处在于，“Wiggle Shader Auto”在操作上仅通过光标的移动来改变。以左上角为轴心位置（图片原始状态），光标沿x轴或y轴方向移动，图片则向轴心压缩形变。
作品名：Wiggle Shader Auto
艺术家ID：Cyan
网址：openprocessing.org/sketch/1143168
开源代码 (0, 7)
组合几何图形生成
作品名： 220419a
艺术家ID：Okazz
网址：openprocessing.org/sketch/1547862
开源代码 (0, 8)
6行代码生成动画
作品名：Language Forest
艺术家ID：Naoki Tsutae
网址：openprocessing.org/sketch/747223
开源代码 (0, 9)
粒子画笔
作品名：Noise Turbulence Doodles
艺术家ID：Raven Kwok（郭锐文）
网址：openprocessing.org/sketch/143842
{ 游戏互动 }
Game
chess：openprocessing.org/sketch/1552187
开源代码 (0, 1)
3D网页闯关小游戏
作品名：3D Platformer but weirder
艺术家ID：Rue/Bled
论坛网址：openprocessing.org/sketch/1378381
开源代码 (0, 2)
点触式互动游戏
作品名：Dude Royale
艺术家ID：hazzza
论坛网址：openprocessing.org/sketch/1352584
开源代码 (0, 3)
3D桌面乒乓小游戏
作品名：3D Drawing
艺术家ID：Richard Bourne
论坛网址：openprocessing.org/sketch/1385531
开源代码 (0, 4)
设计师的emoji扫雷
作品名：Emojisweeper
艺术家ID：Sinan Ascioglu
网址：openprocessing.org/sketch/1142958
🌐
完整作品及代码请登陆项目网址
文末留言聊一聊
你认为#设计师应该学习编程吗？#
编辑&排版 | Astra
校对 | Naomi
🙌
本篇部分内容摘自《Design360°》杂志第98期
「动态思维与数字技术」
✨了解更多内容请点击下方小程序购买杂志✨
↓↓↓
