// Simple way to attach js code to the canvas is by using a function
function sketchProc(processing) {
// Set number of flowers
var count = 100;
var w = 20; //wind
var v = 2; //velocidad
// Set maximum and minimum circle size
var maxSize = 40;
var minSize = 20;
//The mouse is outside?
var outside = false;
// Build float array to store circle properties
//5 for circle and 8 for the curve
var e = new Array(count)
//Posicion inicial
var eo = new Array(count)
// Set size of dot in circle center
//float ds=2;
//Create the flowers
//ellipse(x, y, width, height)
//curve(x1, y1, x2, y2, x3, y3, x4, y4);
//fill(value1, value2, value3)
for (var j = 0; j < count; j++) {
e[j] = new Array(15);
eo[j] = new Array(15);
var xAux = processing.random(processing.width);
var yAux = processing.random(processing.height);
e[j][0] = xAux; // X circle
e[j][1] = yAux; // Y circle
e[j][2] = processing.random(minSize, maxSize); // Radius
//eo
eo[j][0] = xAux;
eo[j][1] = yAux;
eo[j][2]=e[j][2];
//----
e[j][3] = xAux; // X2
e[j][4] = (0 + (yAux / 3)); // Y2
//Inicio
e[j][5] = xAux; // X1
e[j][6] = 0; // Y1
//fin
e[j][7] = xAux; // X4
e[j][8] = yAux; // Y4
e[j][9] = xAux; // X3
e[j][10] = (yAux - (yAux / 3)); // Y3
//eo No tiene mucho sentido ---
eo[j][7] = xAux; // X4
eo[j][8] = yAux; // Y4
eo[j][9] = xAux; // X3
eo[j][10] = (yAux - (yAux / 3)); // Y3
//---------
e[j][11] = processing.random(255); // Color
e[j][12] = processing.random(255); //
e[j][13] = processing.random(255); //
//Alpha
e[j][14] = 60;
eo[j][14] = 60;
}
// Override draw function, by default it will be called 60 times per second
processing.draw = function() {
// var maxHeight = processing.height;
//Draw the flowers
//ellipse(x, y, width, height)
//curve(x1, y1, x2, y2, x3, y3, x4, y4);
//fill(value1, value2, value3)
function drawFlower(j, position, lengthScale, weight) {
processing.fill(e[j][11], e[j][12], e[j][13], e[j][14]-20);
processing.ellipse(e[j][0], e[j][1], e[j][2]+5, e[j][2]+5);
processing.fill(e[j][11], e[j][12], e[j][13], e[j][14]);
processing.noStroke();
processing.curve(e[j][3], e[j][4], e[j][5], e[j][6], e[j][7], e[j][8], e[j][9], e[j][10]);
processing.ellipse(e[j][0], e[j][1], e[j][2], e[j][2]);
//Por ahora , parche ---------------
var i = j;
if (processing.mouseX >= processing.width - 10 || processing.mouseX <= 10) outside = true;
else //outside = false;
if (processing.mouseY >= processing.height - 10 || processing.mouseY <= 10) outside = true;
else outside = false;
//-----------------------------------
//Movimiento del raton
// for (var i = 0; i < count; i++) {
//El raton esta cerca de la bola?
if (processing.mouseX >= e[i][0] - (eo[i][2] + w) && processing.mouseX < e[i][0] + (w + eo[i][2]) && processing.mouseY >= e[i][1] - (eo[i][2] + w) && processing.mouseY < e[i][1] + (eo[i][2] + w) && !outside) {
//X--------------------
if(Math.abs(e[i][0]-eo[i][0])<40){
//Por que lado esta?
if (processing.mouseX >= e[i][0]) {
//Esta por la derecha
e[i][0] = e[i][0] - v * 2;
e[i][7] = e[i][7] - v * 2;
e[i][9] = e[i][9] - v *2;//exp
e[i][14] = e[i][14] + v * 5;
} else {
//Esta pro la izq
e[i][0] = e[i][0] + v * 2;
e[i][7] = e[i][7] + v * 2;
e[i][9] = e[i][9] + v *2;//exp
e[i][14] = e[i][14] + v * 5;
}
}
//Y------------------
if(Math.abs(e[i][2]-eo[i][2])<40){
if (processing.mouseY >= e[i][1]) {
//Esta por debajo
e[i][2] = e[i][2] - v * 2;
} else {
//Esta por arriba
e[i][2] = e[i][2] + v * 2;
}
}
}else{
// } //fin for
//------------------------
if (eo[j][0] > e[j][0]) {
//Esta por la derecha
e[j][0] = e[j][0] + v;
e[j][7] = e[j][7] + v;
e[i][9] = e[i][9] + v;//exp
} else {
if (eo[j][0] < e[j][0]) {
//Esta pro la izq
e[j][0] = e[j][0] - v;
e[j][7] = e[j][7] - v;
e[i][9] = e[i][9] - v;//exp
}
}
//Restaurar Color
if (eo[j][14] < e[j][14]) e[j][14] = e[j][14] - v;
//Restaurar tamaño
if (eo[j][2] < e[j][2]) e[j][2] = e[j][2] - v;
else
if(eo[j][2] > e[j][2])
e[j][2] = e[j][2] +v;
}
}//Else
// erase background
processing.background(0);
for (var i = 0; i < count; i++)
drawFlower(i, 3, 3, 3);
//processing.curve(5, 26, 5, 26, 73, 24, 73, 61);
//processing.bezier(85, 20, 10, 10, 90, 90, 15, 80);
};
}
var canvas = document.getElementById("canvas1");
// attaching the sketchProc function to the canvas
var p = new Processing(canvas, sketchProc);
// p.exit(); to detach it
<html>
<head>
<script src="processing.js"></script>
</head>
<p><canvas id="canvas1" width="600" height="200"></canvas></p>
<div style="height:0px;width:0px;overflow:hidden;"></div>