6种方式进入创意编码

很难准确定义“创意编码”的含义。从广义上讲,它指的是生产具有表现力的东西而不是纯粹的实际用途。这是一个学习和探索各种不同技术如何结合在一起创造令人印象深刻的艺术作品的机会。

采取什么形式完全取决于创作者。从数据可视化到图像处理的任何事物都可以被视为“创造性编码”。网络足够灵活,可以在不同的艺术和设计领域开拓机会。

+$Here we look at the different ways you can experiment with code and create stimulating visual results. Want to give it a try? Take a look around the+$best Code Editors+$the web has to offer and get stuck in!

01.直奔框架

如果您对代码感到满意并且对要创建的内容有所了解,那么为什么要等待?以下是创意编码员的四个最佳框架;随便挑选!

P5.js

p5.js download screen

P5.js为您提供了处理的强大功能和易用性,但在网上

处理是创意编码员的圣杯。它提供了一种语言和一个IDE,使设计人员和非技术人员能够创建令人惊叹的可视化而不会陷入技术层面。

p5.js库采用Processing原理并将其应用于Web。它提供相同类型的抽象,为初学者提供简单性,并为专家提供强大的控制。

大部分工作发生在两个函数中 - 一个控制项目设置,另一个在一个循环中绘制到页面,用于该项目的生命周期。该库提供了大量全局方法和变量来更新这些函数中的页面。例如,调用frameRate(60)可以让p5.js完成维持常量60fps的艰苦工作。

Sketch.js

sketch.js thumbnail screen

Sketch.js是一种轻量级但功能强大的JavaScript方法

Sketch.js的重量不到5kb,是一个很小的框架,可以帮助开发人员使用创造性的JavaScript来启动和运行。它足够轻巧,可以嵌入任何网站,但提供了很多功能。

可以挂钩对项目中的事件做出反应的方法。虽然这包括通常的回调,例如动画循环,但sketch.js也会打开诸如键盘输入和窗口大小调整等事件。

触摸和鼠标输入的处理方式相同,默认情况下所有项目都是触摸友好的。虽然可以专门针对任何一种输入类型,但它可以避免处理两种事件类型之间的微小差异。它还可以自动计算这些点之间的增量,使物理计算更容易。

D3

D3 homepage

D3比图表和图表更多

虽然D3长期以来一直是创建图形和图表的首选库,但这并不是它的全部能力。它的数据驱动方法使其非常适合创建有吸引力的可视化 - 无论是信息还是抽象。与丰富的数据源(如Twitter API)结合使用时,可以轻松创建信息图表。

通过操纵DOM元素(如SVG),D3可以处理已经属于应用程序一部分的任何资产。它提供了一个结构,围绕它可以转换,以提供重点或屏幕上的动画。

有很多方法可以通过其他库和框架访问D3。例如,为React特别创建的组件,Angular的指令和大多数其他前端框架的插件都很容易获得。

Three.js所

three.js homepage

使用three.js,您可以使用WebGL轻松创建流畅的3D交互

使用WebGL在3D中工作在最好的时候可能会很复杂。弄清楚着色器和摄像机视角如何在这样一个广泛的API中工作,可以从项目的创造性方面带走,并减慢一切。

使用three.js可以浏览这些棘手的方面并专注于视觉效果。它是一个3D JavaScript库,可与WebGL协同工作,轻松创建非常流畅的交互。

该库提供了许多用于在场景中创建对象的内置方法。一切都可以像任何其他JavaScript对象一样进行更改,并相应地更新。复杂的技术,例如纹理映射,是开箱即用的,通常只是在对象上设置适当的选项。

02.熟悉数据源和API

有很多公开可访问的数据供您玩,让您的项目保持新鲜;看看你能用这些来源做些什么。

推特

Twitter developer homepage

Twitter的开发者平台是创意编码员的宝库

+$Twitter is a wealth of information. People are talking about every conceivable topic by posting pictures and video alongside their unfiltered reactions in real time. This makes it a goldmine for a creative coding project. The official API can bring back the tweets in the format needed along with other metadata that is open for analysis. This data can then be visualised in new and exciting ways.

Twitter API提供了四个可以检索的定义“对象” - 推文,用户,位置和实体。实体包括链接到这些对象的额外信息,包括主题标签和媒体。这些对象上的值是固定的,只会被扩展,这意味着您永远不会失去访问权限。

可以通过查询单个端点来搜索推文本身。这些搜索可以是字符串,也可以是更具描述性的搜索,例如图像或具有正面情绪的推文。

可视化Twitter数据可以成为一个伟大的连接设计作品。结合位置和情感等多个数据点可以创建一个信息丰富的项目,例如绘制关于来自世界各地的主题的实时推文。

虽然有很多机会使用Twitter的输出,但API也允许应用程序向Twitter发布消息。这些可以来自任何来源,只要它连接到API。

API中的所有端点都需要某种身份验证。对于大多数只是应用程序密钥的项目,但手动完成时进行身份验证可能会非常棘手。值得庆幸的是,有一些软件包使得使用Twitter API变得更容易一些。

npm模块'twitter'是通过Node工作时的catch-all客户端库。它支持常规端点和流,这可能对实时项目很有用。

Instagram和Flickr

Laptop in a cafe displaying a map route

社交媒体API可以为数据可视化和mashup提供良好的来源

创意编码项目通常是可视化的,这使得图像和视频共享API成为吸引人的灵感前景。值得庆幸的是,Instagram和Flickr等网站会打开他们的数据,并允许开发人员访问该内容以及周围的元数据。

+$Instagram has become one of the web's most popular image-sharing platforms. As a result, it is a rich source of images to use in creative projects. The API is no different. It provides access to images, videos, comments and tags, as well as ways of searching through this information to find what is needed for the project.

API中的访问最初将仅限于一小组帐户和图像。为了消除这些限制,Instagram将需要自己审查项目,这对于创意编码项目来说可能既耗时又毫无结果。根据项目,初始沙箱模式可能就足够了。

+$Flickr has a more readily accessible API. It is a resource of high-quality images available at multiple resolutions. Many of the photo endpoints only require an application key to work, which makes set up and fetching much easier.

'flickr.photos.search'端点是最常用的端点,可以访问大部分Flickr的内容。它可以根据需要按日期,位置甚至许可进行过滤和排序。其他端点可以在照片上获得更多细节,例如评论或EXIF数据

让API完全按照项目的需要工作可能很困难,特别是如果将信息写回Flickr。幸运的是,有很多软件包可以帮助它与JavaScript一起使用,包括公司在npm上自己的'flickr-sdk'。

+$It's important to note that all images remain the property of their owners. For personal projects this will not be an issue, but if it's being shared be sure to either seek permission or credit the owner, depending on the terms set out by the photographer.

相机和麦克风

Portrait made out of emojis

Kitasenju Design的Emoji Wall从相机中获取图像,并使用3D空间中的表情符号重绘它

Web通常仅限于使用鼠标指向和单击,但这不是提供输入的唯一方法。今天的浏览器配备了新的API,可以从不同的外部源(包括摄像头和麦克风)获取数据。

制作具有视觉意识的项目是吸引用户参与的好方法。通过将视觉作为传统键盘和鼠标的输入,用户能够以不同的方式进行交互,例如面部跟踪或图像识别。由于大多数设备现在配备了内置摄像头,因此它不再是以前的屏障,而且非常适合网络。

倾听用户也是手动输入的绝佳选择。语音识别可以控制导航,或者用户可以提供他们自己的音频样本以在他们的体验中使用。它也可以作为纽扣印刷机的替代品。通过提取音高和音量,这些可以被映射到通常按钮按下,这可以用于控制从颜色到运动的任何事物。

可以通过导航器对象访问摄像头和麦克风。

navigator.mediaDevices.getUserMedia({audio:true,video:{width:640,height:480}})。then(function(stream){// Access input})。catch(function(error){//提供后备选项 });

代码必须准确指定输入设备所需的内容。对getUserMedia()的调用将触发用户在继续之前必须接受的权限对话框。一旦被接受,这些功能就可以作为流使用,从而提高内存效率。

所有主流浏览器都支持此API,包括移动版。如果浏览器不能满足确切的要求,则承诺将拒绝并且不起作用。提供替代体验非常重要,例如图像上传表单,无法访问。

03.移动设备传感器

Streetview of Whitehall made out of LEGO bricks

Brick Street View将显示当前环境如果是乐高制造的样子

在创意编码方面,移动世界呈现出完全不同的机会。在浏览器中开放使用的各种形状因子和传感器可以产生一些独特的体验。

移动设备几乎都是触摸界面。浏览器能够一次检测和跟踪多个触摸。这意味着项目不必由单个点引导,并且可以以更直观的方式进行操作。

window.addEventListener(“touchstart”,e => {e.preventDefault(); const touches = e.changedTouches;});

所有触摸事件都在事件中使用“changedTouches”属性。这包含对依赖于事件类型而改变的所有触摸点的引用,而不是针对每个触摸点的单独事件。通过跟踪这些,可以通过触摸来绘制手势或绘画。

加速度计和陀螺仪主要用于从纵向模式转换为横向模式,但这些也可用于解释。通过使用设备本身作为控制机制可以创建不同的交互方法 - 无论是在特定的坐标运动中还是在更多基于手势的情况下,例如摇动。

window.addEventListener(“deviceorientation”,e => {console.log(egamma);}); window.addEventListener(“devicemotion”,e => {console.log(e.acceleration);});

API提供对此信息的访问,但返回的值因浏览器而异,因为它们并非都使用相同的坐标系。诸如p5.js之类的库提供特殊值和钩子,如'rotationX'或'deviceShaken()',以帮助抽象出差异。

移动设备还能够使用地理定位确定其确切位置。能够获得设备的确切位置可以开辟新的可能性并提供更加简化的体验。

navigator.geolocation。 getCurrentPosition(pos => {console.log(pos.coords);});

通过导航器对象提供访问。返回的值是设备的lat-long坐标,以及设备支持的其他数据,如高度或速度。浏览器将使用最快的方法来检测位置,例如IP地址。但是,这可能并不总是最准确的。

以创造性的方式结合这些输入是制作特别的关键。例如,使用设备的位置和方向来创建虚拟观星体验。

04.多屏体验

Hand holding a phone displaying Bubbles

Bubbles - 为Google I / O 2017制作的项目 - 使用户能够在世界各地之间传递气泡

+$Desktop browsers provide reassuring familiarity when it comes to creative projects. But by experimenting with different displays, users can get a more personalised experience that works for them.

响应式设计的原则同样适用于创意编码项目。无论是桌面设备,移动设备还是投影在巨型屏幕上,用户都应该能够享受它们。

这些差异也可用于进一步加强项目。通过在CSS中使用媒体查询,移动用户可以获得针对较小的手持式外形量身定制的体验。由于移动用户往往只是一个人,因此可以为这些访问者提供更加个性化的更大平台视图。

纸飞机,由Active Theory公司,鼓励用户在手机上创建虚拟飞机。这些可能会被“抛出”并显示在网站的桌面版本上。在那里,游客可以看到飞机飞到世界各地,看看它们来自哪里。

使用WebSockets可以更轻松地实现这些交互。浏览器和服务器之间的通信是基于事件的,避免了轮询服务器的需要,这通常是浪费的并且易于延迟。诸如Socket.io之类的项目可以使WebSocket协议的设置更容易。

当用户在同一房间内时,设备之间的直接通信也会产生强大的影响。 Seb Lee-Delisle的PixelPhones例如,项目将一大堆屏幕变成了一个临时搭建的屏幕。一旦所有人都联系起来,每个人都成为了体验的一部分。

的WebRTC+$is a set of JavaScript APIs that makes real-time communication between browsers easier. It needs a server to set up a connection, media is sent directly between browsers, which makes interactions quick and simple to create. It's now supported by all major browsers both on desktop and mobile.

05.自我生成艺术

Computer generated city centre

Little Workshop的Infinitown创建了一个程序化的城市,每次访问时都是独一无二的

即使是最有创意的编码项目也会在一段时间后变得陈旧。随机性的一个元素可以在每次运行一段代码时保持新鲜。虽然这可以来自用户输入,但是当它脱离皮带时,看看哪些代码能够关闭可能会很有趣。

不是定义代码块的输出,而是定义一组规则供它遵循。当定义随机起始位置时,最终结果将完全变化。

康威的生命游戏是一个很好的起点。在定义的网格中,每个方块可以是“开”或“关”,具体取决于它周围的方块。通过根据状态对方块着色,它会生成图像。多次重复该过程显示了正方形组随时间变化的方式。调整他们改变的规则可以大大改变结果。

使用JavaScript与 element使这个视觉过程相当简单。通过使用requestAnimationFrame(),JavaScript可以在每个帧重新评估其环境。从那里开始使用最后一帧的输出作为下一帧的输入并让程序自己处理。

06. WebVR和蓝牙

A Frame screenshot

使用A-Frame等框架创建VR体验远不如努力工作

虽然浏览器每天都变得越来越强大和强大,但只有一个视口可以提供。值得庆幸的是,浏览器也在扩展浏览器。

虚拟现实能够以前所未有的方式让观众沉浸其中。 WebVR是一种开放式规范,允许通过浏览器访问这些沉浸式世界。它还有助于弥合不同设备类型之间的差距,例如Google Cardboard和HTC Vive。

框架,如一个框架,通过为VR体验提供随时可用的构建模块,可以帮助避免任何复杂情况。由于这些是为了性能和可靠性而构建的,因此它们可以让创建者自由地提供出色的用户体验。

蓝牙是另一种选择,也是完全放弃屏幕的机会。芯片随时可用,可与不同的输出设备组合以发出声音和光线 - 所有这些都由浏览器通过Web蓝牙API控制。该接口是基于承诺的,这使得异步通信更容易一些。

浏览器支持随着这些技术的发展而变化。目前,Edge,Firefox和Chrome的开发版本支持WebVR。 Web蓝牙目前仅支持Chrome,但其他人正在考虑使用它。

本文最初发表于创意网页设计杂志Web Designer。在此订阅Web Designer

相关文章:



翻译字数超限