# Some variable overflow?

**URL:** <https://discourse.processing.org/t/some-variable-overflow/10449>\
**Category:** Coding Questions\
**Created:** [April 19, 2019, 5:41am UTC](https://discourse.processing.org/t/some-variable-overflow/10449 "2019-04-19T05:41:08Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Alexstrinda](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/alexstrinda/32/1739_2.png) [@Alexstrinda](https://discourse.processing.org/u/Alexstrinda)\
**Post date:** [April 19, 2019, 5:41am UTC](https://discourse.processing.org/t/some-variable-overflow/10449/1 "2019-04-19T05:41:08Z")

</div>

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)

```auto
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](http://openProcessing.org)  
[\>\> HERE \<\<](https://www.openprocessing.org/sketch/694937)

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [April 19, 2019, 1:01pm UTC](https://discourse.processing.org/t/some-variable-overflow/10449/2 "2019-04-19T13:01:22Z")

</div>

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](https://www.openprocessing.org/sketch/701245) / my mod

---

<div class="post-metadata">

**Author:** ![jb4x](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jb4x/32/789_2.png) [@jb4x](https://discourse.processing.org/u/jb4x)\
**Post date:** [April 19, 2019, 3:46pm UTC](https://discourse.processing.org/t/some-variable-overflow/10449/3 "2019-04-19T15:46:45Z")

</div>

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

```auto
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);
}

```