Draw a curve that touches 3 points (1 starting point, 2 medium, 3 final)
coordinates: 1 (10,10) 2 (100,200) (200,10)
I must implement the curve function () without using libraries and manipulating pixels with pixel []
I can only use pixel []
Alright. So what code do you have already? What do you already have working?
Even if you have no code, try to write some for us! Start with something simple. Can you write a function that just draws straight lines between three points? If you can’t even do this, then curves are going to be a problem!
Or is even that too complicated? If so, then just try starting with a function that just draws the three points first. Again, try to do it yourself and post the code of your attempt if you need help.
Post your code. You are the one asking for help. Every single post you make should have your current code in it. You should also format it properly so we can read it. Use the FORMAT THIS LIKE CODE button, which looks like this: </>
2 Likes
hint: this shows you why you might need 5 point for a curve between 3 points.
https://processing.org/reference/curveVertex_.html
https://editor.p5js.org/kll/full/rJLAmDnK7
use mouse to move point 4 ( of 0 … 4 )
3 Points are enough if you just want a simple “straight” curve (like part of a circle, not how a street can go), just remember to set endShape(CLOSE), to close the shape off.
If this is a question from a math class, the triangle circumcircle is a special curve that will pass through 3 points. Any three points that are not on a straight line define a circumcircle. There are processing sketches out there that make use of this property (pays if you can do a bit of matrix math).
1 Like
no idea how that should look ( in p5.js )
but i try to include that too
using geometry ( one error i could not find is when y3 < y1 )
If you mean how it should Look like with 3 points, then just like how in the link you first posted, just commenting out the first 2 .vector() and adding CLOSE in the endShape().
sorry, i did want to reply to
@monkstone
and his idea of matrix operation to do a
circum circle on the 3 points. ( what actually you also mentioned as
like part of a circle
)
but i never play matrix and not sure can do in p5.js.
but for JAVA there is a good
example to find.
nevertheless i was able to skip all the matrix calc
( see the above link )
with some easy triangle calc.
-a- the 3 points can not be in a line
-b- then they define a plane and a triangle
( so should work in 3D also )
-c- there are 2 rules to find how to find the centerpoint of a circum circle
from Circumscribed circle - Wikipedia
-c1- from the middle point(s) of the 3 triangle sides you can draw 90deg lines
what meet at that center
Straightedge and compass construction
Construction of the circumcircle (red) and the circumcenter Q (red dot)
The circumcenter of a triangle can be constructed by drawing any two of the three perpendicular bisectors. For three non-collinear points, these two lines cannot be parallel, and the circumcenter is the point where they cross. Any point on the bisector is equidistant from the two points that it bisects, from which it follows that this point, on both bisectors, is equidistant from all three triangle vertices. The circumradius is the distance from it to any of the three vertices.
-c2- from each corner you can draw a line what angles by (90deg - opposit angle )
Alternate construction
Alternate construction of the circumcenter (intersection of broken lines)
An alternate method to determine the circumcenter is to draw any two lines each one departing from one of the vertices at an angle with the common side, the common angle of departure being 90° minus the angle of the opposite vertex. (In the case of the opposite angle being obtuse, drawing a line at a negative angle means going outside the triangle.)
In coastal navigation, a triangle’s circumcircle is sometimes used as a way of obtaining a position line using a sextant when no compass is available. The horizontal angle between two landmarks defines the circumcircle upon which the observer lies.
these 2 methodes define a triangle ( actually 3 time 2 mirror triangles with a 90 deg at the midpoints ( the one i used i indicated by the red lines )
each one of it leads to
The diameter of the circumcircle, called the circumdiameter and equal to twice the circumradius , can be computed as the length of any side of the triangle divided by the sine of the opposite angle:
diameter = a sin A = b sin B = c sin C . {\displaystyle {\text{diameter}}={\frac {a}{\sin A}}={\frac {b}{\sin B}}={\frac {c}{\sin C}}.}
As a consequence of the law of sines, it does not matter which side and opposite angle are taken: the result will be the same.
if i would have read that first it would have been much easier for me.
also tricky for me how to calc the ceterpoint position.
if the triangle has one point in the {0,0} and one side “L13” like on x axis its easy
Cx = L13 / 2
Cy = CR*sin(90deg -alpa_opposit))
also
CY = sqrt(sq(CR) - sq(L13/2))
in free x y space positioned i had to fight with the line angles too.
anyhow as you see it works ( most of the time ).
but @Lexyth i follow your idea too pls find revisioned
use mouse to move point 3
use key [c] for switch curveVertex ( and move point 4 )
use key [l] for switch to Lexyth curveVertex
1 Like
@kll Wow, you really named it after me. Thanks 
@molo32 never replied but I understood that he wants to be able to draw a curve without using any of the “drawing” functions like line(), ellipse(), curveVertex(), bezierVertex()…
I think he needs to manually set the color of the pixels depending on the 3 points, a bit like you would do in pixel art.
If this is the case, it can be quite fun, I might give it a try if I have time 
Hmm. This is interesting and creative, but seems like it could be extremely intimidating for beginners. Yes, drawing a curve that touches three arbitrary points could be hard, and might call for advanced maths.
However, it can be quite simple to reason out a curve of pixels that connects three regular axis-aligned points, like an isosceles triangle – as in the example data in the original question. No advanced geometric constructions required, no fancy maths.
For example, can you find three points of an isosceles triangle in the points of a sine wave?
https://processing.org/reference/sin_.html
