« Extension:processingjs » : différence entre les versions

De fablabo
Aller à :navigation, rechercher
Cedric (discussion | contributions)
Cedric (discussion | contributions)
 
(21 versions 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="images/Fabada-regular.ttf"; */
// All Examples Written by Casey Reas and Ben Fry
       
 
void setup()
// unless otherwise stated.
{
 
   size(200,200);
// center point
   noLoop();
 
font = loadFont("images/Fabada-regular.ttf");  
float centerX = 0, centerY = 0;
textFont(font, 32);  
 
  // textFont(createFont("Fabada-regular",32));
 
 
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]]

Dernière version du 27 avril 2012 à 13: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