Hi,
I’m making a sketch that load an image, rotate it a bit and display it. The program works well on my code editor, but it is not working on my browser.
I first though there were some infinite loop, but after few research I noticed the problem is caused by my med() function, which is incredibly expensive in terms of memory. The role of the function is to return the average brightness value of a square in a specific area of an image.
How can I fix this ? Do you have any idea ? Thanks for your help !
You can try it on the p5 web editor:
http://alpha.editor.p5js.org/colin.thil@gmail.com/sketches/HkVLsbaeQ
function setup() {
createCanvas(windowWidth, windowHeight);
atelier_setup();
}
function draw() {
background(0);
image(scan, 0, 0, width, height);
}
var scan;
function preload() {
scan = loadImage('assets/scan.jpg');
}
function atelier_setup() {
scan = rotateScan(scan);
}
function rotateScan(img) {
var v1 = 0;
var v2 = 0;
var w = img.width / 4;
var h = img.height / 8;
for (var i = 0; i < h; i++) {
if (med(img, w, i, 1, 1) < 220) {
v1 = i;
break;
}
}
for (var i = 0; i < h; i++) {
if (med(img, img.width - w, i, 1, 1) < 220) {
v2 = i;
break;
}
}
var p = createGraphics(img.width, img.height);
p.translate(img.width / 2, img.height / 2);
p.rotate(-(abs(v1 - v2) / (width / 2) * PI / 32));
p.background(255);
p.image(img, -img.width / 2, -img.height / 2);
img = p;
return img;
}
function med(img, cx, cy, w, h) {
var t = 0;
for (var x = 0; x < w; x++) {
for (var y = 0; y < h; y++) {
var c = img.get(int(cx + x - w / 2), int(cy + y - h / 2));
t += (red(c) + green(c) + blue(c)) / 3;
}
}
return t / (w * h);
}