# Interactive Image Rasterization with Mouse
**URL:** https://discourse.processing.org/t/interactive-image-rasterization-with-mouse/19953
**Category:** Coding Questions
**Tags:** homework
**Created:** [April 20, 2020, 8:23am UTC](https://discourse.processing.org/t/interactive-image-rasterization-with-mouse/19953 "2020-04-20T08:23:11Z")
**Posts on this page:** 9
**Page:** 1
### Author:  [@anhng2611](https://discourse.processing.org/u/anhng2611)
#### Post date: [April 20, 2020, 8:23am UTC](https://discourse.processing.org/t/interactive-image-rasterization-with-mouse/19953/1 "2020-04-20T08:23:11Z")
Hi everyone,
I’m pretty new to Processing and I’m trying to create a fun pixelate tool for image. I’ve archived the effect for the image by using [this tutorial](https://timrodenbroeker.de/how-to-rasterize-an-image-with-processing/), which include drawing grids of rectangles using loop and get the color from the image to create the pixelated effect.
Now I want to make it to the next level where I can input the area where the effect should apply. Basically, draw a rectangle using mouse on the canvas, and the effect applies only to that area. Similar to this awesome studio work [https://www.instagram.com/p/B885QDjicYE/](https://www.instagram.com/p/B885QDjicYE/). I tried to use the void mousePressed and mouseReleased but the result is very weird.
```auto
PImage test_image;
int startX, startY, endX, endY, tileSize;
void setup() {
startX = 0;
startY = 0;
endX = 0;
endY = 0;
tileSize = 12;
smooth();
size(704, 288);
test_image = loadImage("bite-1.png");
background(test_image);
}
void mousePressed() {
startX = mouseX;
startY = mouseY;
}
void mouseDragged() {
endX = mouseX - startX;
endY = mouseY - startY;
noFill();
rect(startX, startY, endX, endY);
}
void draw() {
background(test_image);
stroke(155);
rect(startX, startY, endX, endY);
noFill();
for (int y = startY; y < endY; y += tileSize) {
for (int x = startX; x < endX; x += tileSize) {
color c = test_image.get(x, y);
pushMatrix();
translate(x, y);
fill(c);
//rectMode(CENTER);
noStroke();
rect(0, 0, tileSize, tileSize);
resetMatrix();
popMatrix();
}
}
}
void mouseReleased() {
loadPixels();
test_image.loadPixels();
test_image.pixels = pixels;
test_image.updatePixels();
}
```
I really appreciate any helps! Thank you in advance.
---
### Author:  [@jeffthompson](https://discourse.processing.org/u/jeffthompson)
#### Post date: [April 20, 2020, 7:03pm UTC](https://discourse.processing.org/t/interactive-image-rasterization-with-mouse/19953/2 "2020-04-20T19:03:27Z")
The Instagram example you linked to is going to be a lot more complex, since it’s animated and there are multiple regions. One option would be a custom class that stores the various regions (with values for x, y, width, and height, etc). You could then store those regions in an ArrayList, adding a new one each time the mouse is released. I think you have the basics there already!
---
### Author:  [@tony](https://discourse.processing.org/u/tony)
#### Post date: [April 21, 2020, 2:17am UTC](https://discourse.processing.org/t/interactive-image-rasterization-with-mouse/19953/3 "2020-04-21T02:17:37Z")
> [@anhng2611](#):
>
> but the result is very weird.
I ported it to p5.js. Is this the bug you’re talking about? (Where the pixelization effect only partially fills the selection?):
This might have to do with a `translate()` error, because when I start dragging from `(0,0)`, it looks better:
Or perhaps these are specific to p5.js! One big difference between p5.js and Java Processing is `push()` vs `pushMatrix()`, but I don’t use them often enough to say anything worthwhile haha. But it’s a place to start!
---
### Author:  [@anhng2611](https://discourse.processing.org/u/anhng2611)
#### Post date: [April 21, 2020, 3:30am UTC](https://discourse.processing.org/t/interactive-image-rasterization-with-mouse/19953/4 "2020-04-21T03:30:05Z")
Definitely gonna look Array thingy! I’m relatively new to the program as a graphic designer, still have to learn a lot of new phrases! thank you!
---
### Author:  [@anhng2611](https://discourse.processing.org/u/anhng2611)
#### Post date: [April 21, 2020, 3:35am UTC](https://discourse.processing.org/t/interactive-image-rasterization-with-mouse/19953/5 "2020-04-21T03:35:43Z")
I’m using P3 on Mac and that’s the exact weird result I got! There must be something wrong with startX and startY variables that do not work with translate(). I’m gonna need a work-around, thank you!
---
### Author:  [@tony](https://discourse.processing.org/u/tony)
#### Post date: [April 21, 2020, 4:49am UTC](https://discourse.processing.org/t/interactive-image-rasterization-with-mouse/19953/6 "2020-04-21T04:49:59Z")
I spent more time than I’d like to admit tracking down the bug. The problem stemmed from the fact that I thought `endX` and `endY` were world-coordinates (You should have named them `height` and `width` 😁).
Anyways, you’re comparing y and x to the width of the box. So imagine the selection got moved back to `(0,0)`. Your for-loops think "Oh, we reached the “edge”, we’re done!
To fix this, you’re gonna want to add the start coordinates to the end-variables like so:
```auto
for (int y = startY; y < startY + endY; y += tileSize) {
for (int x = startX; x < startX + endX; x += tileSize) {
```
All that being said, good luck with this!
https://www.openprocessing.org/sketch/877921/embed/?plusEmbedHash=MTQ4NmJiYWQzZDlhNzYxOGE5MTNmZWU0ZjJiYzQzMjJiMjdiNGU4NDg1Y2JiOWU2YzM3ZDA2NjJhYjI3NTI3ODllMzZkNzA3NTkyZmMyOGViM2FlOWZkZTJiNmEwYmI0NzNhYjRhZWE3YmI4MmVkMzk5NjlhMjc1NjlhMzdmNDl1NlBOMGtEQkxrVHNhR3MreWhtTStEelFab1ZiRGZwTHpDOEErQk5reEg4Nzg5VEYvek5TNFJLd2dVSHNEMWpQRlE1ZldqeXJ0MjhIemhFWkFFdUEzQT09&plusEmbedTitle=true
---
### Author:  [@anhng2611](https://discourse.processing.org/u/anhng2611)
#### Post date: [May 8, 2020, 7:37am UTC](https://discourse.processing.org/t/interactive-image-rasterization-with-mouse/19953/7 "2020-05-08T07:37:53Z")
Hi! Sorry for this so late late reply! i got caught up into my regular design-related jobs (resumed from weeks of working from home) and didn’t have time to update my progress. Now I did! Your codes work beautifully as in my vision! And bravo to the adjustment of startX startY so the “pixelated patch” stay in a defined grid form across the image! My non-logical-brain would never able to think of that. Also I did some minor extra code lines so the drawing could be done in any kind direction, not just from-left-to-right/top-to-bottom. Here’s the link for online editor! [https://www.openprocessing.org/sketch/890933](https://www.openprocessing.org/sketch/890933) (yes, I am also getting used to browser processing for easier sharing!).
Oddly, the original code I did in P3 sketch, I could draw over and over the image, while the OpenProcessing sketch keep clearing the image every time I try to draw over it. I guess the loadPixels updatePixels doesn’t work on browser?
here’s the original code in P3
```auto
PImage test_image;
int a = 1,startX, startY, endX, endY, tileSize, pixelSize;
void setup() {
startX = 0;
startY = 0;
endX = 0;
endY = 0;
pixelSize = 50;
smooth();
size(1000, 1000);
test_image = loadImage("atest.jpg");
background(test_image);
}
void mousePressed() {
tileSize = pixelSize * a;
a = a*1;
startX = mouseX - mouseX % tileSize;
startY = mouseY - mouseY % tileSize;
}
void mouseDragged() {
endX = pmouseX + pmouseX % tileSize;
endY = pmouseY + pmouseY % tileSize;
if ((startX < endX) && (startY > endY)){
drawRastered2();
} else if ((startX < endX) && (startY < endY)){
drawRastered3();
} else if ((startX > endX) && (startY < endY)){
drawRastered4();
} else {
drawRastered1();
}
}
void draw() {
if ((startX < endX) && (startY > endY)){
drawRastered2();
} else if ((startX < endX) && (startY < endY)){
drawRastered3();
} else if ((startX > endX) && (startY < endY)){
drawRastered4();
} else {
drawRastered1();
}
}
void drawRastered1() {
background(test_image);
// Draw the pixelation
for (int y = startY; y > endY; y -= tileSize) {
for (int x = startX; x > endX; x -= tileSize) {
int c = test_image.get(x + tileSize/2, y + tileSize/2);
fill(c);
noStroke();
rect(x, y, tileSize, tileSize);
}
}
}
void drawRastered2() {
background(test_image);
// Draw the pixelation
for (int y = startY; y > endY; y -= tileSize) {
for (int x = startX; x < endX; x += tileSize) {
int c = test_image.get(x + tileSize/2, y + tileSize/2);
fill(c);
noStroke();
rect(x, y, tileSize, tileSize);
}
}
}
void drawRastered3() {
background(test_image);
// Draw the pixelation
for (int y = startY; y < endY; y += tileSize) {
for (int x = startX; x < endX; x += tileSize) {
int c = test_image.get(x + tileSize/2, y + tileSize/2);
fill(c);
noStroke();
rect(x, y, tileSize, tileSize);
}
}
}
void drawRastered4() {
//background(test_image);
// Draw the pixelation
for (int y = startY; y < endY; y += tileSize) {
for (int x = startX; x > endX; x -= tileSize) {
int c = test_image.get(x + tileSize/2, y + tileSize/2);
fill(c);
noStroke();
rect(x, y, tileSize, tileSize);
}
}
}
// Draw the bounding box
//stroke(255,0,0);
//rect(startX, startY, endX - startX, endY - startY);
//noFill();
// noStroke();
void mouseReleased() {
endX = pmouseX + pmouseX % tileSize;
endY = pmouseY + pmouseY % tileSize;
println(a);
loadPixels();
test_image.loadPixels();
test_image.pixels = pixels;
test_image.updatePixels();
}
```
---
### Author:  [@GoToLoop](https://discourse.processing.org/u/GoToLoop)
#### Post date: [May 8, 2020, 3:20pm UTC](https://discourse.processing.org/t/interactive-image-rasterization-with-mouse/19953/8 "2020-05-08T15:20:03Z")
> **[r/processing - Need some explanation on loadPixels() updatePixels(), P3 and...](https://www.reddit.com/r/processing/comments/gfrdyt/need_some_explanation_on_loadpixels_updatepixels/)**
>
> 2 votes and 2 comments so far on Reddit
---
### Author:  [@tony](https://discourse.processing.org/u/tony)
#### Post date: [May 10, 2020, 1:38am UTC](https://discourse.processing.org/t/interactive-image-rasterization-with-mouse/19953/9 "2020-05-10T01:38:55Z")
> [@anhng2611](#):
>
> My non-logical-brain would never able to think of that.
Haha, no worries. I can’t count the number of times I’ve made similar mistakes. Practice makes perfect.