xxxxxxxxxx
359
/****************************************************************
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);
}