Question

Is it possible to move an image (or image object) without clearing the whole background?

I wish to create an app that allows the user to “paint”, using a device that is not the mouse. I would like to have a cursor to follow the users movement with the input device, without having to clear the already painted picture.

Is this possible? And how?

Answer 1

It depends how you handle drawing.
I would suggest using PImage as a canvas to draw into and another PImage to store the pixels of your brush. The ‘brush’ can be a loaded image, or at the start of your sketch you could make the brush using drawing commands, then store those as a PImage using get().

You will need to clear everything because you want to draw your cursor, but you will also draw your canvas, and you’ll store ‘brush strokes’ only when the mouse is pressed (or some device specific method) by using the copy() or the blend() function (depending on your brush PNG – with or without transparency, etc.)

Here’s a quick sketch to illustrate this:

PImage canvas;
PImage brush;

void setup(){
  size(800,800);
  stroke(128);
  smooth();
  canvas = createImage(width,height,ARGB);
  brush = loadImage("brush.png");
}

void draw(){
  background(255);
  image(canvas,0,0);
  //draw cursor
  line(mouseX-5,mouseY-5,mouseX+5,mouseY+5);
  line(mouseX+5,mouseY-5,mouseX-5,mouseY+5);
  //blend brush pixels into canvas if mouse is pressed
  if(mousePressed) canvas.blend(brush, 0, 0, brush.width, brush.width, (int)(mouseX-brush.width*.5), (int)(mouseY-brush.height*.5), brush.width, brush.width,MULTIPLY);
}

Note that you need an image into your sketch’s data folder.

You can try it here:

You can run a javascript version bellow:

var canvas;
var brush;

function setup(){
  createCanvas(800,800);
  stroke(128);strokeWeight(3);
  smooth();
  canvas = createImage(width,height);
  brush = getGradientImg(64,64,random(360),random(100),85);
}

function draw(){
  background(255);
  image(canvas,0,0);
  //draw cursor
  line(mouseX-5,mouseY-5,mouseX+5,mouseY+5);
  line(mouseX+5,mouseY-5,mouseX-5,mouseY+5);
  //blend brush pixels into canvas if mouse is pressed
  if(isMousePressed) canvas.blend(brush, 0, 0, brush.width, brush.width, (int)(mouseX-brush.width*.5), (int)(mouseY-brush.height*.5), brush.width, brush.width,MULTIPLY);
  //image(brush,mouseX,mouseY);
}
//*
function getGradientImg(w,h,hue,satMax,brightness){
  push();//isolate drawing styles such as color Mode
    colorMode(HSB,360,100,100);
    var gradient = createImage(w,h);//create an image with an alpha channel
    var np = w * h;//total number of pixels
    var np4 = np*4;
    var cx = floor(gradient.width * 0.5);//center on x
    var cy = floor(gradient.height * 0.5);//center on y
    gradient.loadPixels();
    for(var i = 0 ; i < np4; i+=4){//for each pixel
      var id4 = floor(i * .25);
      var x = id4%gradient.width;//compute x from pixel index
      var y = floor(id4/gradient.width);//compute y from pixel index
      var d = dist(x,y,cx,cy);//compute distance from centre to current pixel
      //map the saturation and transparency based on the distance to centre
      gradient.pixels[i]   = hue;
      gradient.pixels[i+1] = map(d,0,cx,satMax,0);
      gradient.pixels[i+2] = brightness;
      gradient.pixels[i+3] = map(d,0,cx,255,0);
    }
    gradient.updatePixels();//finally update all the pixels
  pop();
  console.log(gradient);
  return gradient;
}
//*/

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.4/p5.min.js"></script>