设计的尽头是编程?这个网站的百万款创意代码让你一键生成炫酷视觉
当下,动态视觉设计越来越频繁地出现,创意编程、人工智能开始被纳入设计工具的范畴,不仅让设计师有了更开放的工具选择,还改变了他们的创作思维。
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期
「动态思维与数字技术」
✨了解更多内容请点击下方小程序购买杂志✨
↓↓↓