V4 https://editor.p5js.org/Anne-Laure/sketches/TmFQ0ZJ8q

modifier la valeur de la variable option au début du sketch pour changer le type de production

Maintenant reste à faire ce qui m'a inspiré initialement

​

​

En changeant la valeur de option (lignes 30 à 32) on change le type d'action

​

A faire 

-- Ajouter le lien réel de l'image (cf https://unsplash.com/documentation)

-- Ajouter possibilité créer vidéo

​

V4 https://editor.p5js.org/Anne-Laure/sketches/TmFQ0ZJ8q

OK Obtenir le résultat de https://codepen.io/hristovv/pen/XWboryO !!

OK utiliser fonction pixPolygon mais mettre positions pour 4 images (index jusqu'à index +3

OK manifestement la façon de coder le masque des fonctions pixpolygon et pixEllipse sont mieux que pixGrandCercle car permettent positionnement comme on veut, angle aussi. A corriger

La création de formes s'inspire de "Solution OKAZZ pour faire un emporte pièce en cercle étude 1" - https://editor.p5js.org/Anne-Laure/sketches/2LgxkbiPE

​

Version précédente API unsplash VV3 https://editor.p5js.org/Anne-Laure/sketches/RthVNTgmM

ajout forme quadrilatère

Possibilité enregistrer image

OK Ajouter un redimensionnement compatible avec hauteur aussi

​

Inspiré du résultat vu sur https://codepen.io/hristovv/pen/XWboryO

​

A partir d'un travail que j'avais démarré sur les masques

simple mais à comprendre....V4

https://editor.p5js.org/Anne-Laure/sketches/KM7Uh6ET

****************************************************************/

​

/*****

​

e ou E  enregistrer l'écran et l'image originale

r ou R  changer d'image

On peut changer la valeur de option dans le code et ça change le type de résultat

*****/

​

var option = 3;

  // 0 --> pixGrandCercle 

  // 1 --> pixEllipse 

  // 2 --> pixGrandPolygon 

  // 3 --> pixPolygon

​

var image = [];

var masks = [];

var img = [];

var texte1, texte2;

var index = 0;

var nbImg = 8;

var drawLoop = true;

var g;

​

​

function preload() {

  // preload() runs once

  // noter que les dimensions sont un tout petit peu différentes pour avoir des url différentes

  // cf https://github.com/unsplash/unsplash-source-js/issues/9

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

    image[i] = loadImage('https://source.unsplash.com/random/1280x64' + i);

  }

}

​

function setup() {

​

  createCanvas(windowWidth, windowHeight);

​

  frameRate(8);

  colorMode(HSB, 360, 100, 100, 100);

​

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

    // renderer pour sauvegarder

    img[i] = createGraphics(image[i].width, image[i].height);

  }

​

  if (option === 0) {

    // 

  } else if (option === 1 || option === 2 || option === 3) {

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

​

      let coefftImg = ajustImage(i);

      image[i].resize(coefftImg * image[i].width, 0);

      masks[i] = createGraphics(image[i].width * 0.8, image[i].height * 0.8);

      // renderer pour sauvegarder

    }

  }

​

​

  /*

  fill(240, 100, 100, 100 ) ;

  stroke( 220, 100, 100, 100 ) ;

  strokeWeight( 10 ) ;

  */

​

  // texte à afficher

  texte1 = "Touches e ou E --- enregistrer l'écran et l'image originale";

  texte2 = "Touches r ou R -- changer d'image";

​

  print("image 0 w/h : ", image[0].width, image[0].height);

}

​

function draw() {

​

  if (drawLoop) {

    background(120);

​

    if (option === 0) {

      pixGrandCercle(index);

      drawLoop = false;

    } else if (option === 1) {

      pixEllipse(index);

    } else if (option === 2) {

      pixGrandPolygon(index);

      drawLoop = false;

    } else if (option === 3) {

      pixPolygon(index);

      drawLoop = false;

    }

​

​

    text(texte1, 10, 20 + image[index].height);

    text(texte2, 10, 40 + image[index].height);

  }

​

}

​

​

// Export when key is pressed

function keyReleased() {

  if (key == 'e' || key == 'E') {

    // https://github.com/processing/p5.js/issues/2841

    var img = createImage(g.width, g.height);

    img.copy(g, 0, 0, g.width, g.height, 0, 0, g.width, g.height);

    // img = get();

    img.save("reconst" + frameCount, '.png');

    // sauver l'image originelle

    image[index].save("Original" + frameCount, '.png');

  }

  if (key == 'r' || key == 'R') {

    clear();

    index = (index + 1) % nbImg;

    drawLoop = true;

  }

}

​

function ajustImage( index ) {

​

    // conçu dans mon essai https://editor.p5js.org/Anne-Laure/sketches/jaYSzePh

    // ajuster l'image du fond  à la taille de l'écran

    if (

      (image[index].width > image[index].height && width > height) ||

      (image[index].width < image[index].height && width < height)

    ) {

      // la forme de l'écran et de l'image sont semblables

      coefftImg = 0.95 * min(width, height);

      // print("cas 1", coefftImg / image[index].width, "ou", coefftImg / image[index].height);

      coefftImg = min(

        coefftImg / image[index].width,

        coefftImg / image[index].height

      );

      // print("cas 1", coefftImg);

    } else {

​

      coefftImg = 0.95 * min(

        height / image[index].height,

        width / image[index].width

      );

      // print("cas 2", coefftImg);

    }

​

    return coefftImg ;

}

​

/*********

faire apparaître l'image sous forme de pixel "ellipse"

fonctionne bien si draw() est en loop

**********/

function pixEllipse(index) {

​

  // g = createGraphics(width, height);

  g = createGraphics(image[index].width, image[index].height);

  masks[index].x = round(random(1.1 * image[index].width), 2);

  masks[index].y = round(random(1.2 * image[index].height), 2)

​

  let maskH = width / 40;

  let maskV = height / 16;

  masks[index].ellipse(masks[index].x, masks[index].y, maskH, maskV);

​

  let imgclone2;

  (imgClone2 = image[index].get()).mask(masks[index].get());

​

  image(imgClone2, 0, 0);

​

  g.image(imgClone2, 0, 0);

}

​

​

function pixGrandCercle(index) {

​

  g = createGraphics(image[index].width, image[index].height);

  let posHautG = createVector(0, 0);

  let posBasG = createVector(0, 0);

  let posHautD = createVector(0, 0);

  let posBasD = createVector(0, 0);

​

  let s = min(image[index].width, image[index].height);

  let dia = s * 0.8;

  let rad = dia / 2;

  let ang = random(-1, 1) * 0.5;

  let x = random(s / 6);

  let y = random(s / 6);

​

  g.image(image[index], 0, 0);

  // g.erase();

  g.beginShape();

  g.vertex(-1, -1);

  g.vertex(0, height);

  g.vertex(width, height);

  g.vertex(width, 0);

  g.beginContour();

  // pour dessiner un cercle (équation paramétrique du cercle)

  // pour ellipse, multiplier soit le sinus soit le cosinus

  for (let a = 0; a < TAU; a += TAU / 90) {

    g.vertex(s / 2 + rad * cos(a), s / 2 + rad * sin(a));

  }

  g.endContour();

  g.endShape(CLOSE);

  img[index].image(g, 0, 0);

  push();

  translate(x, y);

  rotate(ang);

  image(g, 0, 0);

  pop();

​

}

​

function pixGrandPolygon(index) {

​

  /* 

  je veux créer un masque de forme polygone à 4 points

  Je définis le x,y le point en haut à gauche de démarrage du polygone

  (80% max de width ou height)

  */

​

  g = createGraphics(image[index].width, image[index].height);

​

  let ang = random(-1, 1) * 0.5;

  // dimensions du polygone

  let polW = random(0.6, 1.4) * image[index].width / 4;

  let polH = random(0.6, 1.4) * image[index].height / 4;

  let x = random(image[index].width * 0.8);

  let y = random(image[index].height * 0.8);

​

  let pos1 = createVector(x, y);

  let pos2 = createVector(pos1.x + polW, pos1.y * random(0.8, 1.2));

  let pos3 = createVector(pos2.x * random(0.8, 1.2), pos2.y + polH);

  let pos4 = createVector(pos1.x * random(0.8, 1.2), pos3.y * random(0.8, 1.2));

​

​

  g.image(image[index], 0, 0);

​

  g.beginShape();

  g.vertex(-1, -1);

  g.vertex(0, height);

  g.vertex(width, height);

  g.vertex(width, 0);

  g.beginContour();

  vertex(pos1.x, pos1.y);

  vertex(pos2.x, pos2.y);

  vertex(pos3.x, pos3.y);

  vertex(pos4.x, pos4.y);

  g.endContour(CLOSE);

  g.endShape(CLOSE);

  img[index].image(g, 0, 0);

​

  image(g, 0, 0);

​

}

​

function pixPolygon(index) {

  let num = index ;

  let pos = [];

  let imgclone2 ;

​

​

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

    pos[i] = []; // create nested array

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

      pos[i][j] = createVector(0, 0);

    }

  }

​

  let imgW = min( width, height) ;

  imgW =  imgW / 50;        // =  imgW / 100

  let imgH = imgW / 2  ;  // = imgW * 3 / 4

​

​

​

      // haut gauche 

      pos[0][0].set(         10,         10 ); 

      pos[0][1].set(  54 * imgW,         10 );

      pos[0][2].set(  46 * imgW,  62 * imgH );

      pos[0][3].set(         10,  62 * imgH );

​

      // haut droite 

      pos[1][0].set( pos[0][1].x + 10,        10 ); 

      pos[1][1].set(  100 * imgW - 10,         10);

      pos[1][2].set(  100 * imgW - 10,  62 * imgH);

      pos[1][3].set( pos[0][2].x + 10,  62 * imgH);

​

      // bas gauche 

      pos[2][0].set( pos[0][3].x,  pos[0][3].y + 10); 

      pos[2][1].set( pos[0][2].x,  pos[0][2].y + 10);

      pos[2][2].set( pos[0][1].x,  100 * imgH - 10 );

      pos[2][3].set(          10,  100 * imgH - 10 );

​

      //bas droite clip-path : 0% 70,   60% 70, 40% 100%,   0% 100%

      pos[3][0].set(  pos[0][2].x + 10,     pos[2][0].y); 

      pos[3][1].set(   100 * imgW - 10,     pos[2][0].y);

      pos[3][2].set(   100 * imgW - 10, 100 * imgH - 10);

      pos[3][3].set(  pos[2][2].x + 10, 100 * imgH - 10);

​

  g = createGraphics(width, height);

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

​

    let ind = (index + i) % 4;

    print( "ind index i num ", ind, index, i, num ) ;

    // g = createGraphics(width, height);

​

    masque = createGraphics(width, height);

      masque.beginShape();

      masque.vertex(pos[ind][0].x, pos[ind][0].y);

      masque.vertex(pos[ind][1].x, pos[ind][1].y);

      masque.vertex(pos[ind][2].x, pos[ind][2].y);

      masque.vertex(pos[ind][3].x, pos[ind][3].y);

      masque.endShape(CLOSE);

    (imgClone2 = image[num].get()).mask(masque.get());

​

    image(imgClone2, 0, 0);

​

    // g.image( image[index], 0, 0 ) ;

    g.image(imgClone2, 0, 0);

​

    num++ ;

    num = num % nbImg ;

​

  }

}

​

function windowResized(){

  resizeCanvas(windowWidth, windowHeight);

}