Extension:processingjs : Différence entre versions
(→donne :) |
(→exemple) |
||
(23 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> | ||
+ | <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> | ||
− | + | // All Examples Written by Casey Reas and Ben Fry | |
− | + | ||
− | void setup() | + | // unless otherwise stated. |
− | + | ||
− | size(200, | + | // 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 | + | |
− | + | ||
− | + | 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> | </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>