avantcontra

Category: Interactive × OSC

  • BugOSC, an OSC controller based on WeChat Mini Program

    —

    by

    Contra
    in

    OSC is a commonly used data protocol when transferring data between software and devices. The most common usage scenario is to install an OSC sending software on the mobile phone, install a receiving module on the computer, and then start your performance with hands: In the past, when using OSC on a mobile phone, you…

  • CROSSING – Creative Web App for the film[2019]

    —

    by

    Contra
    in

    “过春天 The Crossing” is an awards-winning movie, directed by Bai Xue.The film has a poster created by an artist Lu Zhengyuan.We built a creative Web App for the poster and film. “The Crossing” (painting) hopes to express the resonance of the film by creating a sense of time and space overlap and an imminent shift…

  • Transmitting OSC data via WebSocket

    —

    by

    Contra
    in

    Sometimes I meet situations where I need OSC but cannot use UDP.  Such as sending OSC message from browser-based p5js to Processing / MaxMSP / Unity.And I’m developing a OSC controller called BugOSC. It is a WeChat Mini Program, which also does not support UDP. However, although the web guys usually don’t support UDP, they support WebSocket…

  • p5.we – develop WeChat Mini Game using p5.js

    —

    by

    Contra
    in

    p5.js is a wonderful JavaScript library that starts with the original goal of the also wonderful Processing. p5.we is a boilerplate to develop Wechat Mini Game (微信小游戏) using p5.js. What is WeChat: WeChat is more than a messaging and social media app – it is a lifestyle for one billion users across the world. What…

  • Max QRCode Generator

    —

    by

    Contra
    in

    “Node for Max” is a new future of Max8. Official introduction and tutorial：“With support for the vast NPM library, Node for Max connects your patches to thousands of possibilities.”https://www.youtube.com/watch?v=PmyPdmujYQQhttps://www.youtube.com/watch?v=qSZH6fjOcXE Easy to use:In Max: use [node script] object.In js: I made a QRCode generator using Node for Max: Max patch and NodeJS source code download:https://www.patreon.com/posts/24123843

  • BSQ – interactive wall [2018]

    —

    by

    Contra
    in

    “BSQ” is an interactive LED wall in a clubhouse near “West Lake” of Hangzhou, China.  In the video, “Qiantang River” was crossing the city. The modern building will transform to ancient architecture when touched by people. If someone walks along the wall, some wave will follow him. The background sound also reacts to people’s interaction. The project…

  • SOS – interactive wall [2018]

    —

    by

    Contra
    in

    “SOS” is an interactive LED wall in a night club in Shanghai, China. If someone walks along the wall, some halo will follow him. The background stripe color will reacts to the live music tempo. The project used one HOKUYO URG-10LX Scanning Laser Rangefinders for tracking people’s position. About software, the visual content created in…

  • DD – data visualization [2017]

    —

    by

    Contra
    in

    “DD” is a smart taxi distribution system like Uber.  Its data has complicated multiple dimensions, such as TPH, Deal Rate, Distance, Guided or Unguided Rate, Requests/Drivers Rate, Coordinate, Time, etc.We designed and developed the data visualization. The map area is setup at Shanghai China. Yidan:Data analysis, data visualization design, UI.Sketch, Cinema 4D. Contra:Raw data parser, data visualization development.React,…

  • 物美价廉的家用互动触摸墙

    —

    by

    Contra
    in

    本次周末DEMO，是一个互动触摸墙原型。 器材： 导电墨水笔 Makey Makey 画纸 投影仪 程序：Adobe Animate 视觉：PS 手绘 + AE —- 导电墨水 —- 关于墙体的互动方案，雷达，家里玩太贵；摄像头CV识别，缺少触摸感；最终选用了导电墨水： Bare Conductive这一款导电墨水笔，淘宝一支百元左右： 为保护家里墙面，拿白板+画纸代替。 第一层纸，画好导电线路： 再铺一层纸，触摸位置挖个简单粗暴的洞： —- Makey Makey —- 图自http://makeymakey.com 图自http://makeymakey.com Makey Makey直接映射的就是键盘，所以接好线路即可： —- 程序 —- 控制及呈现的程序，平台选用 Adobe Animate，看着眼生？它以前叫 Flash 。 在 Animate 里所见即所得的做 Layout，以及导入动画序列帧。 代码部分，用 Javascript API，而非as3，这样可将项目发布成 HTML5+Canvas 的 Web 形式，而非传统的 swf Flash。 发布成 Web，就非常灵活了。Web 页面托管在开发机上，而连接 Makey…

  • 末日技能：新媒体艺术家如何在末世AI来临时用MaxMSP收听广播

    —

    by

    Contra
    in

    从《终结者1》中的“天网”开始，“人工智能”若隐若现了三十多年，终于在今年占领了头条位置。据说霍爷（不是元甲，是霍金）也预言了 “人类未来的敌人就是 AI ”。 在不远的未来的某一天，当你摆脱智能扫地机器人的阻拦跳出窗外，才发现街上不断涌来的僵尸，空气中弥漫着能使人变异的病毒，无人驾驶的汽车拦在十字路口。微信是不能发了，谁知道另一头接收微信的是人还是狗。急迫想刷微博朋友圈获取最新消息，但互联网已经被天网完全控制。 是时候学一门末日技能了，在断网的时候能跟外界保持联络。 可以选择通过 3KHz～300GHz 之间的电磁波来通信，用国语说就是收听广播。 严格地讲，不是指普通家用或车里收听的那种广播（接收范围有点窄），而是“无线电”。能收到世界某个角落发出的微弱信息，指引着末日仅存的人类。 当然，作为一名新媒体艺术家，身上背个无线电台坐在星巴克喝茶，目标有点大，功能也不太灵活。能否直接用星巴克店机 Mac 笔记本来接收无线电呢？ 用电脑接收无线电（而非通过互联网），背景原理是“软件定义无线电”，简单说是用电脑软件来实现一部分传统电台的硬件电路功能，详情可以搜索“Software Defined Radio”、“RTL-SDR”等关键词。 本文直接上实例，需要以下三样： Macbook Pro； 基于 MaxMSP 的 SDR patch（也有 Pure Data 版）； Realtek RTL2832U+R820T 电视棒。 说好的听广播，怎么又变成看电视了？Realtek RTL2832U + R820T，是 Realtek 产的一款芯片的型号，原本是做电视棒的。但这个芯片具有非常广的频率接收范围，又物美价廉，就被广泛用来做 SDR 应用了。因为即便是软件无线电也不能完全纯软，这根棒棒就包含了必要的射频调谐器、ADC 等硬件，还有根天线。 RTL2832U+R820T 电视棒我买的是这一款，四五十块钱，看上去是个“U盘”加根天线，小巧。 其实还带个遥控器，毕竟人家是电视棒…… 厂家批高灵敏度RTL2832U+R820T2 USB DVB-T FM SDRHelloCQ无线电 插好电视棒，接下来就是准备 SDR 软件。 SDR 软件有很多种，本文专为新媒体艺术家量身推荐基于 Max/Pd 的 SDR…