I have a line between two circles and I want to go them to go across the whole screen, but I only have the circle center position
This is what I have:
I want it to look like this:
.
PS: sorry for my paint skills.
I want it to look like this:
.
1 Like
Pseudo-code:
x1 //first circle's x
y1 //first circle's y
x2 //second circle's x
y2 //second circle's y
//draw a line from top to bottom if the line is vertical, prevents division by 0
if x1 == x2
line(x1, 0, x1, height)
return
m = (y2 - y1) / (x2 - x1) // rise / run, gives us the line slope
b = y1 - m * x1 // solves offset by assuming it's 0 and accounting for the error at X=x1
line(0, b, width, m * width + b) //draw a line starting at (0, f(0)) and ending at (width, f(width)) for the line equation
Desmos graph demonstrating the math: https://www.desmos.com/calculator/sskgv8ousv
4 Likes
sorry, just to show other option,
https://processing.org/reference/PVector.html
PVector c1 = new PVector(80, 200, 25); // fake z used for circle radius later
PVector c2 = new PVector(180, 50, 50);
void setup() {
size(500, 500);
noFill();
}
void draw() {
background(200, 200, 0);
// translate(width/2, height/2);
// axis();
circle(c1.x, c1.y, c1.z); // c1_draw();
circle(c2.x, c2.y, c2.z); // c2_draw();
// c1_c2_line();
translate(c1.x, c1.y); // set c1 as center
rotate(c2.copy().sub(c1).heading()); // rotate so c2 is on x axis
line(-width,0,width,0); // line on the new x axis
}
//_____________________________________________________ unused options
void axis() {
push();
stroke(200, 0, 0);
line(-width/2, 0, width/2, 0);
stroke(0, 0, 200);
line(0, -height/2, 0, height/2);
stroke(255);
strokeWeight(0.5);
rect(-100, -100, 200, 200);
text("100*100", 100-25, 100+6);
pop();
}
void c1_draw() {
push();
stroke(0, 200, 200);
translate(c1.x, c1.y);
point(0, 0);
circle(0, 0, c1.z);
text("c1", 3, 4);
pop();
}
void c2_draw() {
push();
stroke(0, 200, 200);
translate(c2.x, c2.y);
point(0, 0);
circle(0, 0, c2.z);
text("c2", 3, 4);
pop();
}
void c1_c2_line() {
push();
translate(c1.x, c1.y);
// PVector c2new = new PVector();
// c2new = c2.copy();
// c2new = c2new.sub(c1);
// line(0,0,c2new.x,c2new.y); // line c1 c2
// circle(c2new.x,c2new.y,5); // check c2 same place
// rotate(c2new.heading()); // allign c2 on new x axis
rotate(c2.copy().sub(c1).heading());
line(-width,0,width,0);
pop();
}
SAME SAME / BUT DIFFERENT
https://editor.p5js.org/kll/sketches/Leeb2NSBv
3 Likes
@kll
question: why can you use push and circle and I cannot?
I am on p3.4, did they change these commands?
!!!_________________ processing 3.5.3 JAVA mode
https://processing.org/reference/circle_.html
https://processing.org/reference/push_.html
!!!_________________ p5.js
https://p5js.org/reference/#/p5/circle
https://p5js.org/reference/#/p5/push
but not ask me, i always complain about the spooky behavior of my p5js.org account
looks like you could not add that commands to a old sketch but you could make a new one with it??
and a sketch remembers in what revision its made??
download that sketch and open the library as text?
p5.min.js
/*! p5.js v0.7.3 January 20, 2019 */
and download a sketch from dec 2018
/*! p5.js v0.7.2 September 02, 2018 */
now for the
processing IDE / p5.js mode
that depends on the moment you install that mode,
but you can update the lib file manually later
1 Like
I only use java mode
You can see the version of the processing ide : menu help | about
In the black window left upper corner
If you have two points, you can use them with the equation for a line
…to solve another point. In this case you line is:
(x1, y1) → (x2, y2)
and you want it to be:
(0, y3) → (width, y4)
This guarantees that the line fills the entire screen (and perhaps much if it exits from the top or bottom).
So, with the equation of the line, you need to solve for x=0, and for x=width.
Processing also has some tools built-in to do this. One is to rotate, then draw a straight line, as @kll demonstrates. Another is to change the magnitude of the line vector between the two points – a simple way would be to increase it so that the line draws one way off the screen, then draw a second line in the opposite direction.
These geometric tools are built into the PVector class for points.
Hi, thankyou for this code. It was much helpful for me to connect a line between 2 points. I have a problem however because I want the line to start and stop at a particular x position instead of extending along the whole screen. What do I need to change to do this? Many thanks!
Try this p5.js example:
function setup() {
createCanvas(200, 200);
rectMode(CENTER);
noLoop();
}
function draw() {
background(255, 255, 0);
strokeWeight(4);
// draw the lines
let li = line_intersection(0, 0, width, height, 0, height, width, 0);;
line(0, 0, width, height);
line(0, height, li[0], li[1]);
}
function line_intersection(x1, y1, x2, y2, x3, y3, x4, y4) {
let t = ((x1 - x3) * (y3 - y4) - (y1 - y3) * (x3 - x4)) / ((x1 - x2) * (y3 - y4) - (y1 - y2) * (x3 - x4));
return [x1 + t * (x2 - x1), y1 + t * (y2 - x1)];
}
Image:
The line_intersection function is based on information from this reference: