let colors = ["#f657c5","#8645e4","#03c3fa", "#fffff"]

let loopFlag = true;

let px = 5;

let s = 1;

let border = 10;

let img;

​

function preload(){

  img = loadImage("\sandink.webp")

}

​

function setup() {

  createCanvas(350, 450); 

  sliderPx = createSlider(px, px*10, px*10, 1);

  sliderPx.position(150, height);

  let labelPixeles = createSpan('Pixeles por mosaico:');

  labelPixeles.position(0, height);

}

​

function draw() {

  /*Dibuja una serie de baldosas de colores*/

  background("#000000");

  px = sliderPx.value();

  baldosas();

  imageMode(CENTER);

  image(img, width/2, height/2);

}

​

function baldosas(){

  randomSeed(s);

  let numX = int((width-2*border)/px);

  let numY = int((height-2*border)/px);

  let xOff = (width - (numX*px))/2;

  let yOff = (height - (numY*px))/2;

  for (let i = 0; i < numX; ++i){

    for (let j = 0; j < numY; ++j){

      mosaico(px, px, px*i+xOff, px*j+yOff);

    }

  }

}

​

function mosaico(w, h, xOff, yOff){

  bezierCurve(w, h, xOff, yOff);

}

​

function bezierCurve(w, h, xOff, yOff){  

    noStroke();

    fill(random(colors))

    push();

    rectMode(CENTER)

    translate(xOff+w/2, yOff+h/2);

    rotate(PI/2  * random([0,1,2,3]));

    beginShape();

    vertex(-w/2, -h/2);

    bezierVertex(

      random(-w/2, w/2) ,random(-h/2, h/2),

      random(-w/2, w/2) ,random(-h/2, h/2),

      w/2, h/2

    );

    vertex(-w/2, h/2);

    endShape();  

    pop()

}

​

function mouseClicked() {

  if (mouseX > width)return null;

  if (mouseY > height)return null;

  if (mouseX < 0)return null;

  if (mouseY < 0)return null;

  s += 1;

}

​

function touchStarted() {

  /*Toma una captura del frame actual y lo guarda en el archivo myCanvas.png

  cuando se toca el canva con 3 dedos al mismo tiempo

  */

  if (touches.length > 1) {

    saveCanvas('myCanvas.png');

  }

}