Some variable overflow?

p5.js Coding Questions
1

Hello!
To make my first steps in creating a photo filter I decided to write a script that will take every pixel of some photo and redraw it to the left of the original. This way I planned to see two identical photos.

Strangely enough, only some percent of the picture is drawn. It seems as if the compiler can only do a certain number of operations and then just quits.

Could you please explain where the problem lies.
(in the example below I draw ellipses instead of pixels, and the “cellSize” variable is the aproximation number. Thus if cellsize is 1 then EVERY pixel is taken. If cellSize is 10 every 10th pixel is taken. If I choose cellSize 20 - the whole picture gets drawn, but with cellSize 2 onle a segment is reproduced)

var pic ;
var y_offset = 100;
var x_offset = 100;
var pixel_colour;
var counter = 0;
var cellSize = 2;
var image_h = 200;
var image_w = 300;


function preload() {
pic = loadImage('pic1.jpg');
   
}

function setup() {
   createCanvas(windowWidth, windowHeight);

   background(255);

   image (pic, x_offset ,y_offset, image_w,image_h);
   

for (pic_y = y_offset; pic_y < y_offset + image_h; pic_y += cellSize) { 
   	counter ++;
     
   	for (pic_x = x_offset; pic_x < x_offset + image_w; pic_x += cellSize) {

   	pixel_colour = get (pic_x,pic_y);

   	fill(pixel_colour[0],pixel_colour[1],pixel_colour[2]);
   	ellipse (pic_x+image_w + 50 ,pic_y,cellSize,cellSize);
   	}
   	
   
   }
   	println ("counter  "  + counter);	
     
}

function draw() {
//	ellipse(mouseX, mouseY, 20, 20);
}

Also the link to openProcessing.org
>> HERE <<

1 Like
2

not sure what you see, as the picture i see is bit different on 2 computers,
but possibly your version is distorted by the stroke of the circles you draw.
https://www.openprocessing.org/sketch/701245 / my mod

3

It seems that the get() function is the trouble. Too slow ?? I don’t know but the following works just fine:

var pic;
var y_offset = 10;
var x_offset = 100;
var pixel_colour;
var counter = 0;
var cellSize = 2;
var image_h = 200;
var image_w = 300;


function preload() {
	pic = loadImage('pic1.jpg');
}

function setup() {
	createCanvas(windowWidth, windowHeight);
	background(255);
	image(pic, x_offset, y_offset, image_w, image_h);

	noStroke();
	for (pic_y = y_offset; pic_y < y_offset + image_h; pic_y += cellSize) {
		for (pic_x = x_offset; pic_x < x_offset + image_w; pic_x += cellSize) {
			loadPixels();
			var idx = 4 * (pic_y * windowWidth + pic_x);
			fill(pixels[idx], pixels[idx + 1], pixels[idx + 2]);
			ellipse(pic_x + image_w + 50, pic_y, cellSize, cellSize);
		}
	}

}

function draw() {
	//	ellipse(mouseX, mouseY, 20, 20);
}
1 Like