Hey Rapide:
Had hacked up some of the code from Jose Luis Garcia del Castillo 2017
https://github.com/garciadelcastillo/-dashed-lines-for-processing-
as a utility for being able to put drag-drop line segments or 4 point bezier curves on some sketches.
The attached code includes the mouse interactivity, so should get you started.
I also have it so that after you click on one of the dots, that dot is remembered as “active” and thereafter if you hit one of the 104 keyboard isolated arrow keys (not the ones in the numeric block, the 4 off by themselves) the attached point will be shifted by one pixel. Did not activate the auto-key-repeat, but only the arrow-key keyPressed.
The points you will be able to use directly are to have a class for the moles (Node for the del Castilo code), and the mouse behavior (mousePressed and mouseReleased). The feedkeys() function is where I put in the more custom behavior.
sketch_mouse_interactive.pde
/* the dashedlines library is credited with the source concepts/code */
/* have hacked it up enough that the mouse interactivity does not require it's presence */
//import garciadelcastillo.dashedlines.*;
//int bezier0Line1=10; /* I normally have these "turned off" by having this trigger variable set to 10 */
int bezier0Line1=0;
/* I normally flip the Y to have +Y go from bottom to top, so salted in this variable into the appropriate
lines to work either way */
boolean yInverted=false;
//boolean yInverted=true;
void setup() {
size(718,996); /* dash lines works in default renderer, will not work in P2D or P3D */
colorMode(RGB, 1);
if(0==bezier0Line1)initializeBezierNodes();
else if(1==bezier0Line1)initializeLineNodes();
//background(1.);
frameRate(4);
//noLoop();
}
void draw() {
//frame.setTitle(round(frameRate) + " fps");
if(yInverted){
translate(0,height);
scale(1,-1);
}
background(1.);
//background(.95);
feedKeys();
if(0==bezier0Line1)drawBezierDraggable();
if(1==bezier0Line1)drawLineDraggable();
}
bezier_Edit.pde
/*
* based on Dashed Lines for Processing, by Jose Luis Garcia del Castillo 2017
* https://github.com/garciadelcastillo/-dashed-lines-for-processing-
*/
Node[] n;
float dist = 0;
float[] offsetXs;
float[] offsetYs;
int tagged=-1;
boolean didMove=false;
void initializeBezierNodes() {
/* wanted the control points to be some distance away from their mouse-draggable indicator dots */
offsetXs = new float[4];
offsetYs = new float[4];
offsetYs[0]= yInverted? 35:-35;
// offsetYs[0]= yInverted?0:0;
offsetYs[3]= yInverted?-35: 35;
// offsetYs[3]= yInverted? 0:0;
offsetXs[1]= 35;
offsetXs[2]=-35;
n = new Node[4];
n[0] = new Node(0.25 * width, 0.75 * height, 5);
n[1] = new Node(0.75 * width, 0.75 * height, 5);
n[2] = new Node(0.25 * width, 0.25 * height, 5);
n[3] = new Node(0.75 * width, 0.25 * height, 5);
//println("n[0].r="+n[0].r);
}
void initializeLineNodes() {
/* wanted the control points to be some distance away from their mouse-draggable indicator dots */
offsetXs = new float[2];
offsetYs = new float[2];
offsetYs[0]= 35;
offsetYs[1]=-35;
n = new Node[2];
n[0] = new Node(0.25 * width, 0.75 * height, 5);
n[1] = new Node(0.75 * width, 0.75 * height, 5);
//println("n[0].r="+n[0].r);
}
void renderNodes() {
for (int ii = 0; ii < n.length; ii++) {
n[ii].render(offsetXs[ii],offsetYs[ii],ii);
}
}
// A quick class for a draggable node
class Node {
float x, y;
float r;
boolean dragged;
Node(float x_, float y_, float r_) {
x = x_;
y = y_;
r = r_;
}
void render(float offsetX,float offsetY,int n) {
pushStyle();
ellipseMode(CENTER);
noStroke();
//fill(127, 100);
if(0==n)fill(1,0,0); else if(1==n)fill(0,1,0); else if(2==n)fill(0,0,1); else fill(1,1,0);
ellipse(x-offsetX, y+(yInverted?1:-1)*offsetY, 2 * r, 2 * r);
popStyle();
if (dragged) {
x = mouseX+offsetX;
y = yInverted?height-mouseY-offsetY:mouseY+offsetY;
}
}
boolean inside(float xpos, float ypos) {
//println(String.format("xy=(%4.4f,%4.0f) mouseXY=(%4d,%4d) xypos=(%4.0f,%4.0f) dist=%8.3f r=%8.3f",x,y,mouseX,mouseY,xpos,ypos,dist(x,y,xpos,ypos),r));
return dist(x, y, xpos, ypos) < r;
}
}
void mousePressed() {
for (int ii = 0; ii < n.length; ii++) {
if (n[ii].inside(mouseX+offsetXs[ii],yInverted?height-mouseY-offsetYs[ii]:mouseY+offsetYs[ii])) {
n[ii].dragged = true;
tagged=ii;
}
}
}
void mouseReleased() {
for (int ii = 0; ii < n.length; ii++) {
n[ii].dragged = false;
}
}
void keyReleased() {
didMove=false;
}
void feedKeys(){
if( (true==keyPressed)
&&(-1 != tagged)
&&(false==didMove)
){
if (key == CODED) {
if (UP == keyCode) {
n[tagged].y+=yInverted?1:-1;
} else
if (DOWN == keyCode) {
n[tagged].y-=yInverted?1:-1;
} else
if (LEFT == keyCode) {
n[tagged].x-=1;
} else
if (RIGHT == keyCode) {
n[tagged].x+=1;
}
didMove=true;
}
}
}
void drawBezierDraggable(){
noFill();
pushStyle();
strokeWeight(2);
//stroke(127, 100);
stroke(1,0,0);
//line(n[0].x, n[0].y, n[1].x, n[1].y);
//line(n[3].x, n[3].y, n[2].x, n[2].y);
popStyle();
renderNodes();
// Draw nice smooth Bézier curves!
/* You will need to retrofudge any transforms... this is from the POV of no transformation */
stroke(0);
//stroke(0,1,1);
strokeWeight(2);
bezier(n[0].x, n[0].y, n[1].x, n[1].y, n[2].x, n[2].y, n[3].x, n[3].y);
//println(String.format("(%9.3f,%9.3f),(%9.3f,%9.3f),(%9.3f,%9.3f),(%9.3f,%9.3f)",n[0].x, n[0].y, n[1].x, n[1].y, n[2].x, n[2].y, n[3].x, n[3].y));
println(String.format("bezier(%4.0f,%4.0f, %4.0f,%4.0f, %4.0f,%4.0f, %4.0f,%4.0f);",
n[0].x, n[0].y,
n[1].x, n[1].y,
n[2].x, n[2].y,
n[3].x, n[3].y
));
}
void drawLineDraggable(){
renderNodes();
stroke(0);
strokeWeight(1);
line(n[0].x, n[0].y, n[1].x, n[1].y);
//println(String.format("(%9.3f,%9.3f),(%9.3f,%9.3f),(%9.3f,%9.3f),(%9.3f,%9.3f)",n[0].x, n[0].y, n[1].x, n[1].y, n[2].x, n[2].y, n[3].x, n[3].y));
println(String.format("line(%4.0f,%4.0f, %4.0f,%4.0f);",
n[0].x, n[0].y,
n[1].x, n[1].y
));
}