Draw and not draw

Programming Questions

dsfire

in Programming Questions • 7 months ago

Hello!

In my code, when you click, a line is drawn with the first point being the center point.

There's an ellipse that is draggable. I want that processing doesn't draw the track of the ellipse, only the lines from the center.

Here's the code.

Thank you!

//code with help of Casey Reas and Ben Fry
//declare variables for draggables
int er = 10;
boolean hover = false;
boolean locked = false;
float newy, newx, ex, ey;
void setup() {
size (500, 500);
smooth();
rectMode(CENTER);
ex = 50;
ey = 420;
background(255);
}
void draw () {
//draw ellipse
ellipse (ex, ey, er, er);
//check if mouse is on the ellipse
if (mouseX > ex-er && mouseX < ex+er && mouseY > ey-er && mouseY < ey+er) {
hover = true;
}
else {
hover=false;
}
//draw center line
if (mousePressed==true) {
line(250,250, mouseX, mouseY);
}
}
//if mouse is clicked inside the ellipse
void mousePressed() {
if (hover) {
locked = true;
fill (255);
}
else {
locked = false;
}
newx = mouseX-ex;
newy = mouseY-ey;
}
//if mouse is dragged while clicking on the object, make it move
void mouseDragged () {
if (locked) {
ex = mouseX - newx;
ey = mouseY - newy;
}
}
//if mouse released, return to no motion state
void mouseReleased () {
locked = false;
}

Replies(4)

GoToLoop

You need another canvas layer to separate the drawn lines from the draggable circle.
Just create new PGraphics instance, and use that to draw your lines there,
and also to clear the main canvas with.
Afterwards, draw the circle in the main canvas, so they don't mix each other up!

/**
 * Draggable Line-Drawing Circle (v2.2)
 * by Casey Reas & Ben Fry
 * mod GoToLoop (2013/Mar)
 * 
 * http://forum.processing.org/topic/draw-and-not-draw
 */

final static color bg = -1, fg = 0, colour = #FF0000;
final static short ed = 10, er = ed >> 1;

int ex, ey, newy, newx, ww, hh;
boolean isHovering;

PGraphics pg;

void setup() {
  size (600, 600);
  noLoop();
  ellipseMode(CENTER);
  fill(colour);

  ex = ww = width  >> 1;
  ey = hh = height >> 1;

  pg = createGraphics(width, height, P2D);

  pg.beginDraw();
  pg.smooth();
  pg.background(bg);
  pg.stroke(fg);
  pg.endDraw();
}

void draw() {
  background(pg);
  if (isHovering)  pg.line(ww, hh, mouseX, mouseY);
  ellipse(ex, ey, ed, ed);
}

void mousePressed() {
  isHovering = mouseX > ex-er & mouseX < ex+er & 
    mouseY > ey-er & mouseY < ey+er;

  newx = mouseX - ex;
  newy = mouseY - ey;
}

void mouseDragged() {
  if (isHovering) {
    ex = mouseX - newx;
    ey = mouseY - newy;
  }

  redraw();
}

void mouseReleased() {
  isHovering = false;
}

dsfire

Re: Draw and not draw

7 months ago

Thank you! I'll have a look on your code!

Actually, I wanted to be able to draw the line even without clicking on the circle, but I guess that looking at your code will solve my problem!

Thank you very much!!

GoToLoop

Re: Draw and not draw

7 months ago

Oops! For that, another boolean variable is needed! And I've removed that from your original code!
Let's call it -> isDragging

P.S.: New version v3.5 -> change toAlwaysDraw = true or false;
Version 3.6 -> code cleanup, got rid of useless variables newx & newy!

/**
 * Draggable Line-Drawing Circle (v3.6)
 * by Casey Reas & Ben Fry
 * mod GoToLoop (2013/Mar)
 * 
 * http://forum.processing.org/topic/draw-and-not-draw
 */

final static color bg = -1, fg = 0, colour = #FF0000;
final static short ed = 10, er = ed >> 1;
int ex, ey, ww, hh;

boolean isHovering, isDragging;
final static boolean toAlwaysDraw = true;

PGraphics pg;

void setup() {
  size (600, 600);
  noLoop();
  ellipseMode(CENTER);
  fill(colour);

  ex = ww = width  >> 1;
  ey = hh = height >> 1;

  pg = createGraphics(width, height, P2D);

  pg.beginDraw();
  pg.smooth();
  pg.background(bg);
  pg.stroke(fg);
  pg.endDraw();
}

void draw() {
  background(pg);

  if (toAlwaysDraw & isDragging | isHovering)
    pg.line(ww, hh, mouseX, mouseY);

  ellipse(ex, ey, ed, ed);
}

void mousePressed() {
  isHovering = mouseX > ex-er & mouseX < ex+er & 
    mouseY > ey-er & mouseY < ey+er;

  isDragging = true;
}

void mouseDragged() {
  if (isHovering) {
    ex = mouseX;
    ey = mouseY;
  }

  redraw();
}

void mouseReleased() {
  isDragging = isHovering = false;
}

dsfire

Re: Draw and not draw

7 months ago

Thank you very so much!! =]]

Top Reply

Draw and not draw

Replies(4)

Re: Draw and not draw

Re: Draw and not draw

Re: Draw and not draw

Re: Draw and not draw

Statistics

Tags

Actions

Related Posts