‘S’ pour sauvegarder / 1, 2, 3, 4, 5, 6, 7, 8, 9 pour modifier la trame + déplacement de la souris
var img;
var drawMode = 1;
function preload() {
img = loadImage("perec.jpg");
}
function setup() {
createCanvas(img.width*7, img.height*7);
}
function draw() {
background(255);
var mouseXFactor = map(mouseX, 0, width, 0.05, 1);
var mouseYFactor = map(mouseY, 0, height, 0.05, 1);
for (var gridX = 0; gridX < img.width; gridX++) {
for (var gridY = 0; gridY < img.height; gridY++) {
var tileWidth = width / img.width;
var tileHeight = height / img.height;
var posX = tileWidth*gridX;
var posY = tileHeight*gridY;
var c = img.get(gridX, gridY);
var greyscale = round(red(c)*0.222+green(c)*0.707+blue(c)*0.071);
switch(drawMode) {
case 1:
var w1 = map(greyscale, 0,255, 15,0.1);
stroke(0);
strokeWeight(w1 * mouseXFactor);
line(posX, posY, posX+5, posY+5);
break;
case 2:
fill(0);
noStroke();
var r2 = 1.1284 * sqrt(tileWidth*tileWidth*(1-greyscale/255.0));
r2 = r2 * mouseXFactor * 3;
ellipse(posX, posY, r2, r2);
break;
case 3:
var l3 = map(greyscale, 0,255, 30,0.1);
l3 = l3 * mouseXFactor;
stroke(0);
strokeWeight(10 * mouseYFactor);
line(posX, posY, posX+l3, posY+l3);
break;
case 4:
stroke(0);
var w4 = map(greyscale, 0,255, 10,0);
strokeWeight(w4 * mouseXFactor + 0.1);
var l4 = map(greyscale, 0,255, 35,0);
l4 = l4 * mouseYFactor;
push();
translate(posX, posY);
rotate(greyscale/255.0 * PI);
line(0, 0, 0+l4, 0+l4);
pop();
break;
case 5:
var w5 = map(greyscale,0,255,5,0.2);
strokeWeight(w5 * mouseYFactor + 0.1);
var c2 = img.get(min(gridX+1,img.width-1), gridY);
stroke(c2);
var greyscale2 = int(red(c2)*0.222 + green(c2)*0.707 + blue(c2)*0.071);
var h5 = 50 * mouseXFactor;
var d1 = map(greyscale, 0,255, h5,0);
var d2 = map(greyscale2, 0,255, h5,0);
line(posX-d1, posY+d1, posX+tileWidth-d2, posY+d2);
break;
case 6:
var w6 = map(greyscale, 0,255, 25,0);
noStroke();
fill(c);
ellipse(posX, posY, w6 * mouseXFactor, w6 * mouseXFactor);
break;
case 7:
stroke(c);
var w7 = map(greyscale, 0,255, 5,0.1);
strokeWeight(w7);
fill(255,255* mouseXFactor);
push();
translate(posX, posY);
rotate(greyscale/255.0 * PI* mouseYFactor);
rect(0,0,15,15);
pop();
break;
case 8:
noStroke();
fill(greyscale,greyscale * mouseXFactor,255* mouseYFactor);
rect(posX,posY,3.5,3.5);
rect(posX+4,posY,3.5,3.5);
rect(posX,posY+4,3.5,3.5);
rect(posX+4,posY+4,3.5,3.5);
break;
case 9:
stroke(255,greyscale,0);
noFill();
push();
translate(posX, posY);
rotate(greyscale/255.0 * PI);
strokeWeight(1);
rect(0,0,15* mouseXFactor,15* mouseYFactor);
var w9 = map(greyscale, 0,255, 15,0.1);
strokeWeight(w9);
stroke(0,70);
ellipse(0,0,10,5);
pop();
break;
}
}
}
}
function keyPressed(){
if (key == 's' || key == 'S') save(timestamp()+".png");
}
function keyTyped() {
if (key == '1') drawMode = 1;
if (key == '2') drawMode = 2;
if (key == '3') drawMode = 3;
if (key == '4') drawMode = 4;
if (key == '5') drawMode = 5;
if (key == '6') drawMode = 6;
if (key == '7') drawMode = 7;
if (key == '8') drawMode = 8;
if (key == '9') drawMode = 9;
}
function timestamp() {
var now = new Date();
return now.toISOString();
}
