Recently I’ve been developing with P5.js. Despite not having all functions that Processing has and some issues with WEBGL especially using 3D. It’s an excellent tool for developing interactive and generative applications.

This is an example my recent work with this experimental tool:

 https://armytest2.000webhostapp.com/

 

///////////////////CODE///////////////////////////////

 

 

//Se declara _num el número de líneas totales, tamaño de cada línea y su respectivo largo

var _num = 196 ,i,value;
var pArr = [];
var tamano= 100, largo=1;
var x = 10;
//ajustan la velocidad de reaccion
var easing = 0.01;
var easing2 = 0.04;
//check box
var checkbox;
var alfa = 150

//VIDEO
var naturalweb;

 

function setup() {
//Se crea ahora una ventana de navegador

createCanvas(windowWidth, windowHeight);
//background(255);

//VIDEO SETUP
naturalweb = createVideo([‘assets/naturalweb.webm’,’assets/naturalweb.mp4′]);
naturalweb.loop();
naturalweb.hide();

checkbox = floor(random(0,4.99));

x=tamano;
y=tamano;
sub=0;

// Se realiza una operación para determinar el número de líneas, crear los objetos y
//distanciar el punto de origen de cada línea de acuerdo a las proporciones de la ventana

for(t=1; t<=((round(windowWidth/tamano))*(round(windowHeight/tamano))); t++) pArr.push(t.toString());
for (i=0;i<pArr.length;i++){
y=(i*tamano)+(tamano / 2);
pArr[i] = new linea(i);
pArr[i].init(y-sub,x – (tamano /2));
if(((i+1)%(floor(windowWidth/tamano)))===0 && i!==0){
x+=tamano;
sub+=floor(windowWidth/tamano)*tamano;
}
}
}

function draw() {
//noStroke();

//Se crea un rectángulo para añadir transparencia y efecto barrido

//fill(255,alfa);
//quad(0,0,width,0,width,height,0,height);
image(naturalweb, 0,0,windowWidth,windowHeight);

for (var i=0;i<pArr.length;i++) {
pArr[i].calculalinea();
}

/*Si mientras el mouse se encuaentra presionado el largo de la línea es menor a 10 veces el tamaño
original, entonces siguien aumentando. Si no está presionado, entonces el largo disminuye hasta
una unidad*/

if (mouseIsPressed){
value = 0.7;

if(largo<=(tamano*10)){
var targetX = tamano * 10;
var dx = targetX – largo;
largo += dx * easing;
}
}

else{
if(largo<=20) {
largo = 20;
value=0.7;
}
if(largo>20) {
var targetX = 10;
var dx = targetX – largo;
largo += dx * easing2;
value=0.7;
}
}
//CheckBoxes
noFill();
stroke(0);
// ellipse(windowWidth/2 – 100, windowHeight -100,20,20);
// ellipse(windowWidth/2 – 50, windowHeight -100,20,20);
// ellipse(windowWidth/2, windowHeight -100,20,20);
// ellipse(windowWidth/2 + 50, windowHeight -100,20,20);
// ellipse(windowWidth/2 + 100, windowHeight -100,20,20);

if(mouseX >= windowWidth/2 – 110 && mouseX <= windowWidth/2 – 90 && mouseY <= windowHeight – 90 && mouseY >= windowHeight – 110 && mouseIsPressed){
checkbox = 0;
}

if(mouseX >= windowWidth/2 – 60 && mouseX <= windowWidth/2 – 40 && mouseY <= windowHeight – 90 && mouseY >= windowHeight – 110 && mouseIsPressed){
checkbox = 1;
}

if(mouseX >= windowWidth/2 – 10 && mouseX <= windowWidth/2 + 10 && mouseY <= windowHeight – 90 && mouseY >= windowHeight – 110 && mouseIsPressed){
checkbox = 2;
}

if(mouseX >= windowWidth/2 + 40 && mouseX <= windowWidth/2 + 60 && mouseY <= windowHeight – 90 && mouseY >= windowHeight – 110 && mouseIsPressed){
checkbox = 3;
}

if(mouseX >= windowWidth/2 + 90 && mouseX <= windowWidth/2 + 110 && mouseY <= windowHeight – 90 && mouseY >= windowHeight – 110 && mouseIsPressed){
checkbox = 4;
}

 

switch(checkbox) {
case 0:
fill(0);
// ellipse(windowWidth/2 – 100, windowHeight -100,18,18);
break;
case 1:
fill(0);
// ellipse(windowWidth/2 – 50, windowHeight -100,18,18);
break;
case 2:
fill(0);
// ellipse(windowWidth/2, windowHeight -100,18,18);
break;
case 3:
fill(0);
// ellipse(windowWidth/2 + 50, windowHeight -100,18,18);
break;
case 4:
fill(0);
// ellipse(windowWidth/2 + 100, windowHeight -100,18,18);
break;
}
}

function linea(){
this.center=new createVector(this.x,this.y);
this.mouse=new createVector(mouseX,mouseY);
this.zero = new createVector(10,0);
this.x;
this.y;
this.id;

this.linea = function(numero){
this.id = numero;
// init();
};

this.init = function(x_,y_) {
this.x = x_;
this.y = y_;

// Se crea un vector con las coordenadas indicadas

this.center = new createVector(this.x,this.y);
};

this.calculalinea = function() {

//Se calcula la dirección de cada vector (cada línea) con respecto a su origen y la posición del mouse

this.mouse= new createVector(mouseX,mouseY);
this.center = new createVector(this.x,this.y);
this.mouse.sub(this.center);
this.mouse.normalize();
this.mouse.mult(largo);
translate(this.x,this.y);
stroke(0,120);
strokeWeight(value);

//OPCIONES DE DIBUJO

switch(checkbox) {
case 0:
alfa = 250;
noFill();
stroke(255,150);
strokeWeight(map(mouseX, 0,width, 1, 10));
ellipse(this.mouse.x,this.mouse.y,40,40);
strokeWeight(1);
break;
case 1:
alfa = 250;
strokeWeight(3);
stroke(255,150);
strokeCap(round);
line(0,0,this.mouse.x,this.mouse.y);
strokeWeight(1);
break;
case 2:
alfa = 250;
rotate(radians(largo/10));
noStroke();
fill(0,0,200,80);
ellipse(this.mouse.x + 6,this.mouse.y + 6,20 * map(mouseY, 0,height, 0, 2) ,20* map(mouseY, 0,height, 0, 2));
noStroke();
fill(255,120);
ellipse(this.mouse.x,this.mouse.y,20* map(mouseY, 0,height, 2, 0),20* map(mouseY, 0,height, 2, 0));
break;
case 3:
alfa = 250;
noStroke()
fill(0,125);
rotate(PI/4);
rect(this.mouse.x,this.mouse.y,20,20,map(this.mouse.x,0,width,1,4));
fill(255,150);
rotate(PI/4);
rotate(radians(largo/20));
rect(this.mouse.x,this.mouse.y,20,20,map(this.mouse.x,0,width,1,4));
break;
case 4:
alfa = 100;
strokeWeight(3);
rotate(radians(largo/3));
stroke(255,150);
line(this.mouse.x – largo,this.mouse.y -largo,this.mouse.x,this.mouse.y);
strokeWeight(1);
break;
}
resetMatrix();
}
}

//Si la página es redimensionada, entonces la aplicacción se reinicia con los nuevos cálculos.

function windowResized() {
setTimeout(function () {
location.reload()
}, 100);
}