Extension:processingjs : Différence entre versions

De fablabo
Aller à : navigation, rechercher
(→‎donne :)
(→‎exemple)
 
(25 révisions intermédiaires par le même utilisateur non affichées)
Ligne 1 : Ligne 1 :
  
 
l'extension Processingjs permet d'entrer du code processing qui sera directement interprété dans le wiki à l'aide de http://processingjs.org
 
l'extension Processingjs permet d'entrer du code processing qui sera directement interprété dans le wiki à l'aide de http://processingjs.org
 +
 +
http://www.mediawiki.org/wiki/Extension:ProcessingJs
  
  
  
 
==exemple==
 
==exemple==
−
<nowiki>
 
−
<processingjs>
 
  
 +
 +
<nowiki><processingjs></nowiki>
 +
<code lang="java"><processingjs>
  
 
void setup(){
 
void setup(){
Ligne 18 : Ligne 21 :
 
}
 
}
  
−
</processingjs>
+
</code><nowiki></processingjs></nowiki>
−
</nowiki>
+
 
 +
 
 +
==problèmes connus==
 +
 
 +
erreur en cas d'url simplifiée
  
 
==donne :==
 
==donne :==
Ligne 27 : Ligne 34 :
 
   size( 200, 200 );
 
   size( 200, 200 );
 
   strokeWeight( 10 );
 
   strokeWeight( 10 );
 +
println("hop");
 
}
 
}
  
Ligne 53 : Ligne 61 :
  
 
<processingjs>
 
<processingjs>
−
/* @pjs font="Arial.ttf"; */
+
// All Examples Written by Casey Reas and Ben Fry
−
       
+
 
−
void setup()
+
// unless otherwise stated.
−
{
+
 
−
   size(200,200);
+
// center point
−
   noLoop();
+
 
−
   textFont(createFont("Arial",32));
+
float centerX = 0, centerY = 0;
 +
 
 +
 
 +
 
 +
float radius = 45, rotAngle = -90;
 +
 
 +
float accelX, accelY;
 +
 
 +
float springing = .0085, damping = .98;
 +
 
 +
 
 +
 
 +
//corner nodes
 +
 
 +
int nodes = 5;
 +
 
 +
float nodeStartX[] = new float[nodes];
 +
 
 +
float nodeStartY[] = new float[nodes];
 +
 
 +
float[]nodeX = new float[nodes];
 +
 
 +
float[]nodeY = new float[nodes];
 +
 
 +
float[]angle = new float[nodes];
 +
 
 +
float[]frequency = new float[nodes];
 +
 
 +
 
 +
 
 +
// soft-body dynamics
 +
 
 +
float organicConstant = 1;
 +
 
 +
 
 +
 
 +
void setup() {
 +
 
 +
   size(800, 200);
 +
 
 +
  //center shape in window
 +
 
 +
  centerX = width/2;
 +
 
 +
  centerY = height/2;
 +
 
 +
  // iniitalize frequencies for corner nodes
 +
 
 +
  for (int i=0; i<nodes; i++){
 +
 
 +
    frequency[i] = random(5, 12);
 +
 
 +
  }
 +
 
 +
  noStroke();
 +
 
 +
  smooth();
 +
 
 +
  frameRate(30);
 +
 
 +
}
 +
 
 +
 
 +
 
 +
void draw() {
 +
 
 +
  //fade background
 +
 
 +
  fill(0, 100);
 +
 
 +
  rect(0,0,width, height);
 +
 
 +
  drawShape();
 +
 
 +
  moveShape();
 +
 
 +
}
 +
 
 +
 
 +
 
 +
void drawShape() {
 +
 
 +
  //  calculate node  starting locations
 +
 
 +
  for (int i=0; i<nodes; i++){
 +
 
 +
    nodeStartX[i] = centerX+cos(radians(rotAngle))*radius;
 +
 
 +
    nodeStartY[i] = centerY+sin(radians(rotAngle))*radius;
 +
 
 +
    rotAngle += 360.0/nodes;
 +
 
 +
  }
 +
 
 +
 
 +
 
 +
  // draw polygon
 +
 
 +
  curveTightness(organicConstant);
 +
 
 +
  fill(255);
 +
 
 +
  beginShape();
 +
 
 +
   for (int i=0; i<nodes; i++){
 +
 
 +
    curveVertex(nodeX[i], nodeY[i]);
 +
 
 +
  }
 +
 
 +
   for (int i=0; i<nodes-1; i++){
 +
 
 +
    curveVertex(nodeX[i], nodeY[i]);
 +
 
 +
  }
 +
 
 +
  endShape(CLOSE);
 +
 
 
}
 
}
  
−
void draw()
+
 
−
{
+
 
−
   background(255);
+
void moveShape() {
−
   String t = "P.js";
+
 
−
   float tw = textWidth(t);
+
  //move center point
−
   fill(0);
+
 
−
  text(t, (width-tw)/2, (height+32)/2);
+
  float deltaX = mouseX-centerX;
 +
 
 +
  float deltaY = mouseY-centerY;
 +
 
 +
 
 +
 
 +
  // create springing effect
 +
 
 +
  deltaX *= springing;
 +
 
 +
  deltaY *= springing;
 +
 
 +
  accelX += deltaX;
 +
 
 +
  accelY += deltaY;
 +
 
 +
 
 +
 
 +
  // move predator's center
 +
 
 +
  centerX += accelX;
 +
 
 +
  centerY += accelY;
 +
 
 +
 
 +
 
 +
  // slow down springing
 +
 
 +
   accelX *= damping;
 +
 
 +
   accelY *= damping;
 +
 
 +
 
 +
 
 +
  // change curve tightness
 +
 
 +
   organicConstant = 1-((abs(accelX)+abs(accelY))*.1);
 +
 
 +
 
 +
 
 +
   //move nodes
 +
 
 +
  for (int i=0; i<nodes; i++){
 +
 
 +
    nodeX[i] = nodeStartX[i]+sin(radians(angle[i]))*(accelX*2);
 +
 
 +
    nodeY[i] = nodeStartY[i]+sin(radians(angle[i]))*(accelY*2);
 +
 
 +
    angle[i]+=frequency[i];
 +
 
 +
  }
 
}
 
}
 +
 
</processingjs>
 
</processingjs>
 +
 +
[[testPjs]]

Version actuelle en date du 27 avril 2012 à 12:52

l'extension Processingjs permet d'entrer du code processing qui sera directement interprété dans le wiki à l'aide de http://processingjs.org

http://www.mediawiki.org/wiki/Extension:ProcessingJs


exemple

<processingjs> <processingjs>

void setup(){ 

 size( 200, 200 );
 strokeWeight( 10 );

} void draw(){ 

 background(0);
 ellipse( mouseX, mouseY, 100, 100 );

}

</processingjs>


problèmes connus

erreur en cas d'url simplifiée

donne :

<processingjs> void setup(){ 

 size( 200, 200 );
 strokeWeight( 10 );

println("hop"); }


void draw(){ 

 background(0);  
 ellipse( mouseX, mouseY, 100, 100 );

}

</processingjs>


<processingjs> void setup(){ 

 size( 600, 100 );
 strokeWeight( 10 );

}


void draw(){ 

 background(200,20,10);  
 ellipse( mouseX, mouseY, 100, 100 );

}

</processingjs>

<processingjs> // All Examples Written by Casey Reas and Ben Fry

// unless otherwise stated.

// center point

float centerX = 0, centerY = 0;


float radius = 45, rotAngle = -90;

float accelX, accelY;

float springing = .0085, damping = .98;


//corner nodes

int nodes = 5;

float nodeStartX[] = new float[nodes];

float nodeStartY[] = new float[nodes];

float[]nodeX = new float[nodes];

float[]nodeY = new float[nodes];

float[]angle = new float[nodes];

float[]frequency = new float[nodes];


// soft-body dynamics

float organicConstant = 1;


void setup() { 

 size(800, 200);

 //center shape in window

 centerX = width/2;

 centerY = height/2;

 // iniitalize frequencies for corner nodes

 for (int i=0; i<nodes; i++){

   frequency[i] = random(5, 12);

 }

 noStroke();

 smooth();

 frameRate(30);

}


void draw() { 

 //fade background

 fill(0, 100);

 rect(0,0,width, height);

 drawShape();

 moveShape();

}


void drawShape() { 

 //  calculate node  starting locations

 for (int i=0; i<nodes; i++){

   nodeStartX[i] = centerX+cos(radians(rotAngle))*radius;

   nodeStartY[i] = centerY+sin(radians(rotAngle))*radius;

   rotAngle += 360.0/nodes;

 }



 // draw polygon

 curveTightness(organicConstant);

 fill(255);

 beginShape();

 for (int i=0; i<nodes; i++){

   curveVertex(nodeX[i], nodeY[i]);

 }

 for (int i=0; i<nodes-1; i++){

   curveVertex(nodeX[i], nodeY[i]);

 }

 endShape(CLOSE);

}


void moveShape() { 

 //move center point

 float deltaX = mouseX-centerX;

 float deltaY = mouseY-centerY;



 // create springing effect

 deltaX *= springing;

 deltaY *= springing;

 accelX += deltaX;

 accelY += deltaY;



 // move predator's center

 centerX += accelX;

 centerY += accelY;



 // slow down springing

 accelX *= damping;

 accelY *= damping;



 // change curve tightness

 organicConstant = 1-((abs(accelX)+abs(accelY))*.1);



 //move nodes

 for (int i=0; i<nodes; i++){

   nodeX[i] = nodeStartX[i]+sin(radians(angle[i]))*(accelX*2);

   nodeY[i] = nodeStartY[i]+sin(radians(angle[i]))*(accelY*2);

   angle[i]+=frequency[i];

 }

}

</processingjs>

testPjs

Récupérée de « https://archive.fablabo.net/mediawiki/index.php?title=Extension:processingjs&oldid=840 »