查看原文
其他

设计的尽头是编程?这个网站的百万款创意代码让你一键生成炫酷视觉

Design360 Design360 2023-02-25


当下,动态视觉设计越来越频繁地出现,创意编程、人工智能开始被纳入设计工具的范畴,不仅让设计师有了更开放的工具选择,还改变了他们的创作思维。


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期

「动态思维与数字技术」

✨了解更多内容请点击下方小程序购买杂志✨


↓↓↓

您可能也对以下帖子感兴趣

文章有问题?点此查看未经处理的缓存