Processing Lyon

Processing Lyon #05 ATELIER INITIATION // Samedi 24/01/2015 // 10H00 - 17H30 // À l'Atelier des Médias, // 9 Quai André Lassagne, 69001 // Tarif: 30€ Renseignement et inscription: // http://p5lyon.tumblr.com/p5lyon05 // [email protected]

[p5lyon]

Particle p[]; PImage img; PGraphics pg; int X, Y; void setup() { size(500, 660); smooth(); img = loadImage("http://i.imgur.com/Z7HQk5O.png"); smooth(); pg = createGraphics(width, height, P2D); pg.beginDraw(); pg.background(#111111); pg.endDraw(); X = int(random(50, width-50)); Y = int(random(50, height-50)); p = new Particle[2000]; for (int i=0; i<p.length; i++) p[i] = new Particle(i/5000.0, random(width), random(height)); } void draw() { if (frameCount % 200 == 0) { X = int(random(50, width-50)); Y = int(random(50, height-50)); } pg.beginDraw(); pg.fill(0, 15); pg.noStroke(); pg.rect(0, 0, width, height);//fade background pg.stroke(#f012be); for (int i=0; i<p.length; i++) p[i].update(); pg.endDraw(); if(pg.width>0) image(pg, 0, 0,width,height); if(img.width>0) image(img, 0, 0); } void mouseMoved() { X = mouseX; Y = mouseY; frameCount = 1; } void keyPressed() { saveFrame("####.png"); } class Particle { float id, x, y, px, py, speed, n; Particle(float _id, float _x, float _y) { id = _id; x = px = _x; y = py = _y; speed = random(2, 7); } void update() { id += 0.01; n = (noise(id, x / Y, y / Y) - 0.5) * X; x += cos(radians(n)) * speed; y += sin(radians(n)) * speed; if (x < -1) x = px = width + 1; else if (x > width + 1) x = px = -1; if (y < -1) y = py = height + 1; else if (y > height + 1) y = py = -1; pg.line(px, py, x, y); px = x; py = y; } }

PROCESSING LYON #05 NIVEAU INITIATION QUOI? Processing est un langage de programmation simple permettant de faire du graphisme génératif, du motion design, de la visualisation de données, de la conception 3D, du prototypage d’objet, de l’architecture, des simulations physiques, du HTML5, des applications mobiles, des installations interactives et bien plus encore. POUR QUI? Graphistes, designers, architectes, artistes numérique, bidouilleurs en informatique… Pour cet atelier, aucune base en programmation n’est nécessaire. AU PROGRAMME: - Géométries de base - Variables - Boucles et conditions - Méthodes - Tableaux - Interaction - Graphisme génératif - Visualisation de données QUAND? Samedi 24 Janvier 2015 De 10H00 à 17H30 OÙ? Atelier des Médias 9 Quai André Lassagne, Lyon 1er TARIF: 30€ (règlement sur place par chèque ou espèces) REQUIS: Votre ordinateur. Merci de télécharger Processing pour ne pas perdre trop de temps en début de journée. RENSEIGNEMENT: [email protected] INSCRIPTIONS: http://p5lyon.tumblr.com/p5lyon05

[p5lyon]

Processing2: Creative Coding Hotshot by Nikolaus Gradwohl #GiveAway

Hey Tumblr, I have 3 ebooks of "Processing2: Creative Coding Hotshot" for you!

The book is oriented toward advanced users covering topics like hardware (Arduino, Kinect), programming concepts (threading, OpenGL, GLSL), Maths (Quaternions) and more.

Have a look here: bit.ly/12tendP

If you want to win one copy, just reblog this!

EDIT: Thanks everybody for participating! Winners have been chosen, they will receive a message soon!

[p5lyon]

ArrayList lignes; int step = 50; color c = color(#46da25); float x = -30; PImage img; void setup() { size(500, 650); img=requestImage("http://i.imgur.com/vGre8Iq.png"); noStroke(); background(255); lignes = new ArrayList(); lignes.add(new Ligne(x)); } void draw() { for (int i=0; i<lignes.size()-1; i++) { Ligne li = (Ligne) lignes.get(i); if (li.taille<step) { li.draw(); } else { lignes.remove(i); } } x+=step; lignes.add(new Ligne(x)); if (x>width*10) { x=-30; if (c==color(#46da25)) { c=color(255); } else { c=color(#46da25); } } if(img.width>1) image(img,0,0,width,height); } class Ligne { float bx, taille; Ligne(float _x) { bx=_x; taille=0; } void draw() { stroke(c); strokeWeight(taille); line(bx, -30, bx-width, height+30); taille++; } }

PROCESSING LYON #04 NIVEAU INITIATION QUOI? Processing est un langage de programmation simple permettant de faire du graphisme génératif, du motion design, de la visualisation de données, de la conception 3D, du prototypage d’objet, de l’architecture, des simulations physiques, du HTML5, des applications mobiles, des installations interactives et bien plus encore. POUR QUI? Graphistes, designers, architectes, artistes numérique, bidouilleurs en informatique… Pour cet atelier, aucune base en programmation n'est nécessaire. AU PROGRAMME: - Géométries de base - Variables - Boucles et conditions - Méthodes - Tableaux - Interaction - Graphisme génératif - Visualisation de données QUAND? Samedi 25 Mai 2013 De 10H00 à 17H30 OÙ? Atelier des Médias 9 Quai André Lassagne, Lyon 1er TARIF: 40€ (règlement sur place par chèque ou espèces) REQUIS: Votre ordinateur. Merci de télécharger Processing pour ne pas perdre trop de temps en début de journée. RENSEIGNEMENT: [email protected] INSCRIPTION: http://p5lyon.tumblr.com/ProcessingLyon04

[p5lyon]

DropShadows in ProcessingJs

Please upgrade your browser to something new like Google Chrome.

//Made with ProcessingLyon Tumblrify: //http://p5lyon.tumblr.com/ProcessingJSTumblr //English Version: //http://p5lyon.tumblr.com/ProcessingJSTumblrEn void setup(){ size(500,500); smooth(); noStroke(); frameRate(10); } void draw(){ background(255); for(int i=50; i>0; i--){ pushMatrix(); translate(width/2,height/2); rotate(radians((frameCount-1)*i)); externals.context.shadowOffsetX = cos(radians(5*i))*3; externals.context.shadowOffsetY = sin(radians(5*i))*3; externals.context.shadowBlur = min(i,20); externals.context.shadowColor = "black"; fill((i%2)*255); ellipse(0, 0, 10+(i*10), 30+(i*20)); popMatrix(); } }

void setup(){ size(500,500); smooth(); noStroke(); frameRate(10); } void draw(){ background(255); for(int i=50; i>0; i--){ pushMatrix(); translate(width/2,height/2); rotate(radians((frameCount-1)*i)); externals.context.shadowOffsetX = cos(radians(5*i))*3; externals.context.shadowOffsetY = sin(radians(5*i))*3; externals.context.shadowBlur = min(i,20); externals.context.shadowColor = "black"; fill((i%2)*255); ellipse(0, 0, 10+(i*10), 30+(i*20)); popMatrix(); } }

You can easily add custom drop shadows in processingJS via the HTML5 canvas API, you'll need to access it via externals.context from your P5JS script:

externals.context.shadowOffsetX = 3; externals.context.shadowOffsetY = 3; externals.context.shadowBlur = 4; externals.context.shadowColor = "black";

You can also access to gradient, radial gradient, clipping region and more this way. Inspiration credits: http://henduck.tumblr.com/ To repost this processingJS sketch, have a look at: http://p5lyon.tumblr.com/ProcessingJSTumblrEn

[p5lyon]

GetUserMedia & ProcessingJS

How to use the new HTML5 getUserMedia API with ProcessingJS (works only with compatible browsers of course) http://p5lyon.tumblr.com/ProcessingJSGetUserMedia EDIT: i corrected my script since WebRTC getUserMedia API changed a few days ago https://bugs.webkit.org/show_bug.cgi?id=84850

[p5lyon]

Processing Lyon # 03

PImage img; int nbreLargeur=20, nbreHauteur=26, taille=25; boolean play=true; void setup(){ size(500,650); img=requestImage("http://i.imgur.com/89iy35p.png"); frameRate(2); background(255); } void draw(){ if(play){ noStroke(); fill(255,120); rect(0,0,width,height); fill(0, 127, 255); stroke(0, 127, 255); for (int y=0; y<nbreHauteur; y++) { for (int x=0; x<nbreLargeur; x++) { if (random(1)>.5) { triangle(x*taille, y*taille, x*taille+taille, y*taille, x*taille+taille/2, y*taille+taille/2); } if (random(1)>.5) { triangle(x*taille, y*taille, x*taille, y*taille+taille, x*taille+taille/2, y*taille+taille/2); } if (random(1)>.5) { triangle(x*taille, y*taille+taille, x*taille+taille, y*taille+taille, x*taille+taille/2, y*taille+taille/2); } if (random(1)>.5) { triangle(x*taille+taille, y*taille, x*taille+taille, y*taille+taille, x*taille+taille/2, y*taille+taille/2); } } } if(img.width>1){ image(img,0,0,width,height); } } } void mousePressed(){ play=!play; }

PROCESSING LYON #03 NIVEAU INITIATION QUOI? Processing est un langage de programmation simple permettant de faire du graphisme génératif, du motion design, de la visualisation de données, de la conception 3D, du prototypage d’objet, de l’architecture, des simulations physiques, du HTML5, des applications mobiles, des installations interactives et bien plus encore. POUR QUI? Graphistes, designers, architectes, artistes numérique, bidouilleurs en informatique… Pour cet atelier, aucune base en programmation n'est nécessaire. AU PROGRAMME: - Géométries de base - Variables - Boucles et conditions - Méthodes - Tableaux - Interaction - Graphisme génératif - Visualisation de données QUAND? Samedi 26 Mai 2012 De 10H00 à 17H30 OÙ? Le Club Théâtre au Lavoir Public 4 impasse Flesselles, Lyon 1er TARIF: 35€ (règlement sur place par chèque ou espèces) REQUIS: Votre ordinateur. Merci de télécharger Processing pour ne pas perdre trop de temps en début de journée. Bases en Processing. RENSEIGNEMENT: [email protected] INSCRIPTION: http://p5lyon.tumblr.com/ProcessingLyon03

[p5lyon]

ProcessingJS & Tumblr: Tumblrify!

Please upgrade your browser to something new like Google Chrome.

int x; void setup(){ size(500,100); background(0); smooth(); noStroke(); } void draw(){ fill(random(155),0,0); x=random(50); ellipse(random(width), random(height), x, x); }

Un petit guide pour intégrer facilement des sketches Processing dans Tumblr, plus l'accès à des outils pour tester ou écrire du code Processing et le formater pour l'insérer encore plus rapidement: http://p5lyon.tumblr.com/ProcessingJSTumblr EDIT: English version now A little HOW TO to easily include Processing sketches in Tumblr, with tools to test/write Processing Code and fast format it for Tumblr: http://p5lyon.tumblr.com/ProcessingJSTumblrEn

[p5lyon]

Processing Lyon #02

Pt[] pts; PImage img; void setup() { size(500,660,P2D); img=requestImage("http://i.imgur.com/nrYh4yN.png"); background(0); smooth(); pts = new Pt[300]; for(int i=0; i<pts.length; i++) { pts[i] = new Pt(); } } void draw() { background(0); stroke(255,255,0,150); for(int i=0; i<pts.length-1; i++) { for(int j=i+1; j<pts.length; j++) { if(0<dist(pts[i].x,pts[i].y,pts[j].x,pts[j].y) && dist(pts[i].x,pts[i].y,pts[j].x,pts[j].y)<70) { line(pts[i].x,pts[i].y,pts[j].x,pts[j].y); } } } for(int i=0; i<pts.length; i++) { pts[i].draw(); } if(img.width>0) image(img,0,0,width,height);} class Pt { float x,y,vitX,vitY; Pt() { this.x=int(random(width)); this.y=int(random(height)); this.vitX=random(-4,4); this.vitY=random(-4,4); } void draw() { point(x,y); x+=vitX; y+=vitY; if(x<=0 || x>=width) { vitX=-vitX; } if(y<=0 || y>=height) { vitY=-vitY; } } }

PROCESSING LYON #02 NIVEAU INTERMÉDIAIRE QUOI? Processing est un langage de programmation simple permettant de faire du graphisme génératif, du motion design, de la visualisation de données, de la conception 3D, du prototypage d’objet, de l’architecture, des simulations physiques, du HTML5, des applications mobiles, des installations interactives et bien plus encore. POUR QUI? Graphistes, designers, architectes, artistes numérique, bidouilleurs en informatique… Pour cet atelier, les bases en Processing sont nécessaires. AU PROGRAMME: - Géométrie avancée (Vertex, Courbe de Bézier) - 3D (Volumes de Base, Transformation Matrice 3D) - Initiation à la Programmation Orientée Objet (Classe) - Tableau 2D (Array[][]) - Tableaux dynamiques (ArrayList) - Initiation à l'utilisation de librairies (Extensions Processing sur des domaines spécifiques, en fonction des demandes) QUAND? Samedi 24 Mars 2012 De 10H00 à 17H30 OÙ? Le Club Théâtre au Lavoir Public 4 impasse Flesselles, Lyon 1er TARIF: 35€ REQUIS: Votre ordinateur. Processing. Bases en Processing. RENSEIGNEMENT: [email protected] INSCRIPTION: http://p5lyon.tumblr.com/ProcessingLyon02

[p5lyon]

Hello ProcessingJS

Please upgrade your browser to something new like Google Chrome.

float x, y, vitX, vitY, taille; int timer=0; void setup(){ size(500, 500); frameRate(100); x=random(30,width-30); y=random(30,height-30); vit(); background(255); rectMode(CENTER); } void draw(){ if(frameCount%2000==0){ background(255); x=random(30,width-30); y=random(30,height-30); vit(); } timer++; if (timer>50){ vit(); timer=0; } if (x+vitX>30 && x+vitX<width-30){ x=x+vitX; } else{ vit(); timer=0; } if(y+vitY>30 && y+vitY<height-30){ y=y+vitY; } else{ vit(); timer=0; } rect(x, y, taille, taille); rect(width-x, y, taille, taille); rect(x, height-y, taille, taille); rect(width-x, height-y, taille, taille); } void vit(){ vitX=floor(random(-6, 7)); vitY=floor(random(-6, 7)); taille=random(5, 30); } void mousePressed(){ background(255); x=random(30,width-30); y=random(30,height-30); vit(); } void keyPressed(){ if(key==' ') saveFrame("helloPJS.png"); }

Click for a new graphism. Press 'Space' to save image.

[p5lyon]

Processing Lyon #01

QUOI? Processing est un langage de programmation simple permettant de faire du graphisme génératif, du motion design, de la visualisation de données, de la conception 3D, du prototypage d'objet, de l'architecture, des simulations physiques, du HTML5, des applications mobiles, des installations interactives et bien plus encore. 

POUR QUI? Graphistes, designers, architectes, artistes numérique, bidouilleurs en informatique... Aucune base en programmation n'est nécessaire.

AU PROGRAMME: - Géométries de base - Variables - Boucles et conditions - Méthodes - Tableaux - Interaction - Graphisme génératif - Visualisation de données 

QUAND? Samedi 14 Janvier 2012 De 10H00 à 17H30

OÙ? À l'Open Studio 28 rue Lamartine, Lyon 3ème, Métro Grange Blanche.

TARIF: 30€ (règlement sur place par chèque ou espèces)

REQUIS: Votre ordinateur. Merci de télécharger Processing pour ne pas perdre trop de temps en début de journée.

RENSEIGNEMENT ET INSCRIPTION: [email protected] http://metalabartsnumeriques.wordpress.com/os_net/inscription-aux-ateliers/

EDIT: PROCESSING LYON #01 EST COMPLET Mais n'hésitez pas à contacter [email protected] pour de nouvelles dates d'initiation; des classes avancées seront annoncées prochainement.