# Draw a curve that touches 3 points
**URL:** https://discourse.processing.org/t/draw-a-curve-that-touches-3-points/5104
**Category:** Coding Questions
**Created:** [November 2, 2018, 4:59am UTC](https://discourse.processing.org/t/draw-a-curve-that-touches-3-points/5104 "2018-11-02T04:59:35Z")
**Posts on this page:** 11
**Page:** 1
### Author:  [@molo32](https://discourse.processing.org/u/molo32)
#### Post date: [November 2, 2018, 4:59am UTC](https://discourse.processing.org/t/draw-a-curve-that-touches-3-points/5104/1 "2018-11-02T04:59:36Z")
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 []
---
### Author:  [@TfGuy44](https://discourse.processing.org/u/TfGuy44)
#### Post date: [November 2, 2018, 5:15am UTC](https://discourse.processing.org/t/draw-a-curve-that-touches-3-points/5104/2 "2018-11-02T05:15:18Z")
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: \
---
### Author:  [@kll](https://discourse.processing.org/u/kll)
#### Post date: [November 2, 2018, 5:37am UTC](https://discourse.processing.org/t/draw-a-curve-that-touches-3-points/5104/3 "2018-11-02T05:37:39Z")
hint: this shows you why you might need 5 point for a curve between 3 points.
[https://processing.org/reference/curveVertex\_.html](https://processing.org/reference/curveVertex_.html)
[https://editor.p5js.org/kll/full/rJLAmDnK7](https://editor.p5js.org/kll/full/rJLAmDnK7)
use mouse to move point 4 ( of 0 … 4 )
---
### Author:  [@Lexyth](https://discourse.processing.org/u/Lexyth)
#### Post date: [November 2, 2018, 6:06am UTC](https://discourse.processing.org/t/draw-a-curve-that-touches-3-points/5104/4 "2018-11-02T06:06:31Z")
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.
---
### Author:  [@monkstone](https://discourse.processing.org/u/monkstone)
#### Post date: [November 2, 2018, 6:44am UTC](https://discourse.processing.org/t/draw-a-curve-that-touches-3-points/5104/5 "2018-11-02T06:44:15Z")
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](http://mathworld.wolfram.com/Circumcircle.html)).
---
### Author:  [@kll](https://discourse.processing.org/u/kll)
#### Post date: [November 2, 2018, 12:35pm UTC](https://discourse.processing.org/t/draw-a-curve-that-touches-3-points/5104/6 "2018-11-02T12:35:15Z")
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 )
[https://editor.p5js.org/kll/sketches/rkRiXYYh7](https://editor.p5js.org/kll/sketches/rkRiXYYh7)
---
### Author:  [@Lexyth](https://discourse.processing.org/u/Lexyth)
#### Post date: [November 2, 2018, 7:57pm UTC](https://discourse.processing.org/t/draw-a-curve-that-touches-3-points/5104/7 "2018-11-02T19:57:27Z")
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().
---
### Author:  [@kll](https://discourse.processing.org/u/kll)
#### Post date: [November 3, 2018, 12:02am UTC](https://discourse.processing.org/t/draw-a-curve-that-touches-3-points/5104/8 "2018-11-03T00:02:57Z")
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
> **[Triangle Circumcircle - Jakob Thomsen - OpenProcessing](https://openprocessing.org/sketch/187085)**
>
> Draws the circum-circle around a triangle
> (click to modify the triangle-shape).
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](https://en.wikipedia.org/wiki/Circumscribed_circle)
-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
>
> [](https://en.wikipedia.org/wiki/File:Circumcenter_Construction.svg)
>
> [Construction](https://en.wikipedia.org/wiki/Compass-and-straightedge_construction) of the circumcircle (red) and the circumcenter Q (red dot)
>
> The circumcenter of a triangle can be [constructed](https://en.wikipedia.org/wiki/Compass-and-straightedge_construction) by drawing any two of the three [perpendicular bisectors](https://en.wikipedia.org/wiki/Bisection#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
>
> [](https://en.wikipedia.org/wiki/File:Triangle_circumcenter_alternate_construction.png)
>
> 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](https://en.wikipedia.org/wiki/Pilotage), a triangle’s circumcircle is sometimes used as a way of obtaining a [position line](https://en.wikipedia.org/wiki/Position_line) using a [sextant](https://en.wikipedia.org/wiki/Sextant) when no [compass](https://en.wikipedia.org/wiki/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](https://en.wikipedia.org/wiki/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](https://en.wikipedia.org/wiki/Sine) of the opposite [angle](https://en.wikipedia.org/wiki/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](https://en.wikipedia.org/wiki/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
---
### Author:  [@Lexyth](https://discourse.processing.org/u/Lexyth)
#### Post date: [November 3, 2018, 12:45am UTC](https://discourse.processing.org/t/draw-a-curve-that-touches-3-points/5104/9 "2018-11-03T00:45:15Z")
@kll Wow, you really named it after me. Thanks 😅
---
### Author:  [@jb4x](https://discourse.processing.org/u/jb4x)
#### Post date: [November 3, 2018, 8:12am UTC](https://discourse.processing.org/t/draw-a-curve-that-touches-3-points/5104/10 "2018-11-03T08:12:31Z")
@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()`…
> [@molo32](#):
>
> I must implement the curve function () without using libraries and manipulating pixels with pixel
> I can only use pixel
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 🙂
---
### Author:  [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)
#### Post date: [November 11, 2018, 3:36pm UTC](https://discourse.processing.org/t/draw-a-curve-that-touches-3-points/5104/11 "2018-11-11T15:36:57Z")
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](https://processing.org/reference/sin_.html)
