Extension:processingjs : Différence entre versions
(→donne :) |
(→exemple) |
||
| (13 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 97 : | Ligne 105 : | ||
void setup() { | void setup() { | ||
| − | size( | + | size(800, 200); |
//center shape in window | //center shape in window | ||
| Ligne 239 : | Ligne 247 : | ||
</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>
