Processing software

How to embed Processing onto a web site
[processing]
/***************************************************************
* Kims tree also known as Jack and the beanstalk
* Fish appear instead of fruit
* Make bunches of fruit
* Flower before fruit?
* last change 11 April 2016
* See http://drifkin.net/processing/beziereditor/
***************************************************************/
float loopCount;
float oldxStemStart=0;
float oldyStemStart=0;
int standStill=0;
void setup()
{
fullScreen();
background(0);
}
/***************************************************************
* The loop
***************************************************************/
void draw()
{
color leafColour;
float xStemStart, yStemStart, xStemEnd, yStemEnd;
int growthSpeed=150; // bigger = slower

// Draw stems
xStemStart= mouseX;
yStemStart= mouseY;
xStemEnd= random(xStemStart-100, xStemStart+100);
yStemEnd= random(yStemStart-100, yStemStart+100);
stroke(#745106); // Brown
strokeWeight (7);
line (xStemStart, yStemStart, xStemEnd, yStemEnd); // Draw stem for 1 leaf
line (oldxStemStart, oldyStemStart, xStemStart, yStemStart); // Draw main stem

// Draw berries
if (oldxStemStart == xStemStart) // Check whether mouse is moving
{
standStill++; // If not moving increment standstill counter
if (standStill>4) // If long pause, grow berries
{
noStroke();
fill(#CE063C,150); // red, slightly transparent berries
ellipse (xStemStart, yStemStart + (standStill-4)*40, 40, 40);
fill(255); // with a white highlight
ellipse (xStemStart+5 , yStemStart-10 + (standStill-4)*40, 10, 10);
if (standStill==14) standStill=0; // stop after 10 berries
}
} else
{
standStill=0; // reset counter
}
oldxStemStart = xStemStart; // remember where last mouse position was
oldyStemStart = yStemStart;

// Draw leaves
leafColour = color(random(0, 100), random(150, 255), random(0, 190)); // Greenish colours
drawLeaf(xStemEnd, yStemEnd, random(100, 200), random(360), leafColour);

// Fade old content
if (loopCount++ %4==0) // make old stuff fade. Bigger number fades more slowly
{
noStroke();
fill(0, 12);
rect(0, 0, width, height);
}
delay(growthSpeed); // Control fertilizer
}

/***************************************************************
* Draw one leaf
***************************************************************/
void drawLeaf(float x, float y, float leafLength, float theta, color leafColour)
{
pushMatrix();
translate(x, y); // Reset 0,0 to wherever the leaf is to start
rotate(radians(theta));
fill(leafColour); // fill colour
stroke(#045A1E); // stroke colour
beginShape();
vertex(0, 0); // Leaf root is always at origin
bezierVertex(
0.15*leafLength, 0.3*leafLength, 0.4*leafLength, 0.45*leafLength,
leafLength,
-leafLength*0.05
);
bezierVertex(
0.6*leafLength, 0, 0.45*leafLength, -0.45*leafLength, 0, 0);
endShape();
popMatrix();
}
[/processing]