Skip to content

Instantly share code, notes, and snippets.

@espinielli

espinielli/P_4_3_1_01.js

Last active January 31, 2019 10:53
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save espinielli/f0366ad2c356b8ac3cfd to your computer and use it in GitHub Desktop.
Save espinielli/f0366ad2c356b8ac3cfd to your computer and use it in GitHub Desktop.
Download ZIP
Pixel Mapping in p5.js (Generative Design P_4_3_1_01)
Raw
Readme.md
Raw
index.html
<head>
<script src="//cdnjs.cloudflare.com/ajax/libs/p5.js/0.3.13/p5.min.js"></script>
<!-- uncomment lines below to include extra p5 libraries -->
<!--<script language="javascript" src="../addons/p5.dom.js"></script>-->
<!--<script language="javascript" src="../addons/p5.sound.js"></script>-->
<script language="javascript" src="P_4_3_1_01.js"></script>
<!-- this line removes any default padding and style. you might only need one of these values set. -->
<style> body {padding: 0; margin: 0;} </style>
</head>
<body>
</body>
Raw
P_4_3_1_01.js
// import processing.pdf.*;
// import java.util.Calendar;
// boolean savePDF = false;
var img;
var drawMode = 1;
function preload() {
img = loadImage("pic.png");
}
function setup() {
createCanvas(img.width*7, img.height*7); //size should be multiple of img width and height
// smooth(); // active by default in p5.js
// img = loadImage("pic.png"); // see preload()
println(img.width+" x "+img.height);
}
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++) {
// grid position + tile size
var tileWidth = width / img.width;
var tileHeight = height / img.height;
var posX = tileWidth*gridX;
var posY = tileHeight*gridY;
// get current color
var c = img.get(gridX, gridY);
// greyscale conversion
var greyscale = round(red(c)*0.222+green(c)*0.707+blue(c)*0.071);
switch(drawMode) {
case 1:
// greyscale to stroke weight
var w1 = map(greyscale, 0,255, 15,0.1);
stroke(0);
strokeWeight(w1 * mouseXFactor);
line(posX, posY, posX+5, posY+5);
break;
case 2:
// greyscale to ellipse area
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:
// greyscale to line length
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:
// greyscale to rotation, line length and stroke weight
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:
// greyscale to line relief
var w5 = map(greyscale,0,255,5,0.2);
strokeWeight(w5 * mouseYFactor + 0.1);
// get neighbour pixel, limit it to image width
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:
// pixel color to fill, greyscale to ellipse size
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;
}
}
}
// if (savePDF) {
// savePDF = false;
// endRecord();
// }
}
function keyReleased() {
if (key == 's' || key == 'S') img.save(timestamp()+"_##.png");
// if (key == 'p' || key == 'P') savePDF = true;
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;
}
// timestamp
function timestamp() {
var now = new Date();
return now.toISOString();
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment