Mirror-drawing and following mouse

Processing Coding Questions
1

Hello Processing forum,
I’m trying to create a programme where I can draw mirrored lines. My code looks like this:

void setup() {
  fullScreen();
  background(255);
  noStroke();
  translate (width/2, 0);
  
}

void draw() {
  //if (mousePressed) {
translate (width/2, 0);
rotate(0.75);
  stroke(0, 0, 255);
  strokeWeight(20);
  line(mouseX, mouseY, pmouseX, pmouseY);
  stroke(0, 0, 255);
  line(mouseY, mouseX, pmouseY, pmouseX);
 
}

It goes quite well, but i’m struggling with making the line follow the mouse cursor and not just random

I would also like for the line to be drawn somewhat from the center - right now it’s only able to draw in the triangle-shaped area showed on the image below.
44

I hope that you’re able to help, Kind regards.

1 Like
2

with using mouse position,
translate and rotate makes it very difficult.

possibly better start without,
and try only to draw ( let’s say left side of canvas )

when that is working, think how can do a “mirror” copy of that left half,
see https://processing.org/reference/loadPixels_.html

3

Hey There!

What I would propose as your solution is to build a nodes linking system and whenever u you join nodes a mirror of those appears on the screen. It is not fully what you want as it doesn’t utilize the drawing you have it but you can make it work.

4

If i understood correctly your problem, I can propose this :
just draw your first line and then draw the mirror line by calculate the coordinates of the ends of the mirror line (a simple subtraction is enough for this calculation)

I just tried try it with p5js and it works

1 Like
5

I think you are trying to do mirror-drawing like this:

line(mouseX, mouseY, pmouseX, pmouseY);
line(width-mouseX, mouseY, width-pmouseX, pmouseY);

You might want to think about this in the simpler case with shapes to see why / how it works.

void draw(){
  rectMode(CENTER);
  rect(mouseX, mouseY, 10, 10);
  rect(width-mouseX, mouseY, 10, 10);
}

Notice that you could do this for different kinds of mirroring. Here is another:

void draw(){
  rectMode(CENTER);
  rect(mouseX, mouseY, 10, 10);
  rect(mouseX, height-mouseY, 10, 10);
}

…and another. Notice the pattern?

void draw(){
  rectMode(CENTER);
  rect(mouseX, mouseY, 10, 10);
  rect(width-mouseX, height-mouseY, 10, 10);
}

If we know the mouse position measured from the left / top edges, then we know enough to describe a symmetrical position “from the opposite edge.” Subtracting from width, height, or both is how you find that opposite location from the right, bottom, or both – just as you would if you were plotting on paper.

1 Like