Processing – Draggable Box

Finally had time to start experimenting with things for my KKB210: Computational Arts 1 Assignment 3. For this assignment, we have to write 3 computational artworks.

My first experiment is using Java and the Processing development environment. It is based on one of the week 4 exercises we did to create moving boxes that leave a motion trail.

Using this, I have added the mouseX and mouseY inputs to position and resize the box depending on whether the left or right mouse button is clicked.

At this stage I haven’t gotten it to save the position and size of the box.

If neither mouse button is clicked, the box will be small and move around the canvas. As soon as either of the mouse buttons are released, the box will fade back to being small and moving around the canvas.

It is available online here.

int x1, x2, y1, y2;

int boxWidth=250;
int boxHeight=250;
int boxX=100;
int boxY=100;

int r=150;
int g=140;
int b=180;

void setup(){

void draw() {
// Setup the background.

// Setup the motion.
x1 = int(random(6)-3);
x2 = int(random(6)-3);
y1 = int(random(6)-3);
y2 = int(random(6)-3);

// Check if the left mouse button is pressed and do the following.
if (mousePressed && (mouseButton == LEFT)) {
boxX = mouseX;
boxY = mouseY;
boxWidth += x2;
boxHeight += y2;
// Check if the right mouse button is pressed and do the following.
else if (mousePressed && (mouseButton == RIGHT)) {
boxX += x1;
boxY += y1;
boxWidth = mouseX;
boxHeight = mouseY;
// If nothing is pressed do the following.
else {
boxX += x1;
boxY += y1;
boxWidth = x2;
boxHeight = y2;

// Changing colour assignment.
r += int(random(4)-2);
g += int(random(4)-2);
b += int(random(4)-2);

// Draw the box.

Tags: , , ,

One Response to “Processing – Draggable Box”

  1. […] I mentioned on my previous version of the Draggable Box, I had not gotten it to retain the size or position of the box when the mouse buttons were […]

Leave a Reply