Kunshan University - Interactive Web Design - Taïwan 2024

Nine hours multimedia class with 10-15 design students  from the Visual Communication and Design department.


 This Workshop focus on creative interactive artworks using cables.gl framework

 

Cables?


- Cables.gl is developed by Undev studio

- Undev is a studio based in berlin (Germany), that create interactive experiences using modern web technologies (WebGl, WebGPU, Web Audio, WebXR, classic html...)

Workshop Program


day 10/06 11/06 12/06
Class exercices

- Introduction

- Display contents

- Multi scenes

- Materials

- Camera texture

- Displacement

- Image Compose

- MeshInstancer

- RenderToTexture

Vocabulary


- Patch :  A program made with cables.gl

- Node Editor :  Graph where user connect boxes with cable

- Op / Operator :  A box that have a FUNCTION (written in javascript)

- Input Port : Store data, and can receive from any other output port

- Output Port : return data, and can send it to any other Input port

- Parameters :  Different values of the data for Op's (ex: color RGB = "255,0,0" Translate XYZ = "0,0,20")

- Canvas :  The screen where we Render / Display the visual

- Number :  Data type based on a value (Integer / float)

- Boolean :  Data type based on 2 state : TRUE or FALSE

- String :  Data type based on a character : "a" , "abc" ... etc

- Array :  Data type based on a list of values : "1 , 2 , 3"

- Object :  Data type based on a javascript object (Json/ Texture /  Audio ...)

 

 

Class exercises


Online Tutorials


Random Cool and Useful Ops to try:


RenderToTexture

TextureProjection

RandomCluster

meshInstancier

surfaceScatter

ArrayGetTexture

vertexWobble

 

ScaleByNormals

pointSphereRandom

AreaoDiscardPixel

Texture coordinate grid

heightmap

displacement

areaScaler

InstancedDisplacementMap

 

SortArray3ByDistance

characterRotate

twistmesh

ScreenPosTo3d

SimpleSpline

SplineMesh

SplineDeform

 

ArrayPathFollowParticles

ExplodeDividedMesh


Made with cables.gl


Nike - The Art Of Touch - AKQA Studios

See MFX Azura Real time animation demo: https://mfx.drastic.net/view/asura/


Free Online Ressources and links

 

3d models:

https://3dviewer.net/   online .glb 3dModel file viewer

https://sketchfab.com/     3d models online ressource (incorporated into Zapworks studio)

https://labs.sketchfab.com/sculptfab/      App to sketch 3d sculpture online

 

https://www.mixamo.com/   Lots of character animation free to download

 

Images:

https://www.pngwing.com/  free transparent png files

https://www.freepik.com/   free vector and .psd files

 

Video:

https://www.pexels.com/  Download royalty free animations .mp4

https://www.onlinevideoconverter.com/     Download and convert many video online from youtube etc

https://video.online-convert.com/    Convert all files online

 

Sound:

https://freesound.org/     Download many free sounds

 

Fonts:

https://www.dafont.com/