Live coding @ hypermedia | 16-19 déc. 08

Téléchargements

Client Processing

Télécharger le client Processing

Scripts

Configuration serveur / client(s)

Serveur

Vision Factory tourne sur la machine serveur, qui accepte en entrées les connexions de clients (4 au maximum). Le software "écoute" les clients qui lui envoient toutes le secondes un nouveau script (temps paramètrable depuis Processing, variable tSendScript).

Les scripts sont recompilés / ré-interprétés à la volée, avec une synchronisation avec le programme principal.

Client Processing

Télécharger le programme

Les données, cad le script à compiler et à éxécuter sur un calque du serveur, sont envoyées via le protocole OSC par l'intérmédiaire d'un programme écrit avec Processing.

Chaque client se voit automatiquement assigné un calque par le serveur.

Script .js

FonctionDescription
init()fonction appelé uniquement lorsque le client demande un rechargement depuis le client (touche 'R')
update(dt)dt est un nombre à virgules (float), qui contient le temps écoulé depuis le dernier dessin sur un calque. Exprimé en seconde (typiquement vaut 0.02)
render()les commandes de dessin openGL sont à placer dans cette fonction.
mouseMoved(x,y)appelée lorsque la souris est déplacée sur l'écran virtuel du client.
x et y varient entre 0 et 1
(x=0,y=0) est le coin haut gauche du calque.
mousePressed(x,y,btn)appelée lorsque un des boutons de la souris est appuyé sur l'écran virtuel du client.
btn peut prendre la valeur LEFT ou RIGHT

if (btn==LEFT){ ... }

Javascript / Quelques fonctions

+ Maths
Math.PI-
Math.cos(angle)angle en radians
Math.sin(angle)angle en radians
Math.random()nombre aléatoire entre 0 et 1
Plus de fonctions sur ce lien

OpenGL / Javascript pour le live coding

Vision Factory / JavascriptCProcessing
+ Transformations
gl.Scale(x,y,z)glScalef(x,y,z)scale(x,y,z)
gl.Rotate(angle,x,y,z)glRotatef(angle,x,y,z)rotate(angle,x,y,z)
gl.Translate(x,y,z)glTranslatef(x,y,z)translate(x,y,z)
gl.PushMatrix()glPushMatrix()pushMatrix()
gl.PopMatrix()glPopMatrix()popMatrix()
gl.LoadIdentity()glLoadIdentity()resetMatrix()
+ Dessin
gl.Axis()--
gl.CubeRGB()--
gl.Cube()-box()
gl.CubeSimple()-box()
gl.Line(x1,y1,x2,y2)-line(x1,y1,x2,y2)
gl.Rectangle(x1,y1,x2,y2)-rect(x,y,w,h)
gl.Triangle(x1,y1,x2,y2,x3,y3)-triangle(x1,y1,x2,y2,x3,y3)
gl.Ellipse(x,y,w,h)-ellipse(x,y,w,h)
gl.BeginLines()glBegin(GL_LINES)beginShape(LINES)
gl.BeginTriangles()glBegin(GL_TRIANGLES)beginShape(TRIANGLES)
gl.BeginQuads()glBegin(GL_QUADS)beginShape(QUADS)
gl.End()glEnd()endShape()
gl.Vertex3f(x,y,z)glVertex3f(x,y,z)vertex(x,y,z)
+ Couleur
gl.Color4(r,g,b,a)glColor4f(r,g,b,a)fill(r,g,b,a)
gl.Color(r,g,b)glColor3f(r,g,b)fill(r,g,b)
+ Blending
gl.EnableBlend()glEnableBlend()-
gl.DisableBlend()glDisableBlend()-
gl.BlendFunc_SrcMinusAlpha()glBlendFunc(GL_SRC_ALPHA,GL_ONE_MINUS_SRC_ALHA)-
gl.BlendFunc_Add()glBlendFunc(GL_SRC_ALPHA, GL_ONE)-
+ Buffers
gl.EnableDepthBuffer()glEnable(GL_DEPTH_BUFFER)-
gl.DisableDepthBuffer()glDisable(GL_DEPTH_BUFFER)-

Quelques images

Les layers sont "aplaties".