Extension:processingjs : Différence entre versions

Version du 2 avril 2012 à 11:06 (voir la source) Cedric (discussion | contributions) (→‎donne :) ← Modification précédente		Version du 2 avril 2012 à 11:08 (voir la source) Cedric (discussion | contributions) (→‎donne :) Modification suivante →
Ligne 53 :		Ligne 53 :
	<processingjs>		<processingjs>
−	String[] fontList = PFont.list();	+	// All Examples Written by Casey Reas and Ben Fry
−	println(fontList);	+
−		+	// unless otherwise stated.
−	void setup()	+
−	{	+	// center point
−	size(200,200);	+
−	noLoop();	+	float centerX = 0, centerY = 0;
−	font = createFont("@font-face" , 32);	+
−	textFont(font, 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(200, 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 draw()	+
−	{	+
−	background(255);	+	void drawShape() {
−	String t = "P.js";	+
−	float tw = textWidth(t);	+	//  calculate node  starting locations
−	fill(0);	+
−	text(t, (width-tw)/2, (height+32)/2);	+	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>		</processingjs>

---

Version du 2 avril 2012 à 11:08

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

exemple

<processingjs> void setup(){ size( 200, 200 ); strokeWeight( 10 ); } void draw(){ background(0); ellipse( mouseX, mouseY, 100, 100 ); } </processingjs>

donne :

<processingjs> void setup(){

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

}

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(200, 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>