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
- Create an account in https://cables.gl/
- Log-in, and join Team Kunshan VCD (-> "request acces")
- standalone version for Windows PC / MacOS / Linux here : https://cables.gl/downloads
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
- Check some projects made with cables here
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: