How to Detect if Inside Ellipse?

Christoph Hart

@ericchesek that's a fun task involving trigonometry functions but it's doable.

ericchesek

How about with general paths? Is it the same with those where the area needs to be defined mathematically instead of just detecting when the mouse is interacting the filled pixels of an object, for example?

Christoph Hart

@ericchesek You might get luck with the getIntersection method of the path object, but this might be a little bit more difficult than just checking a square area.

ulrik

@ericchesek I usually declare all painted areas in a panels paint routine like areas.ellipse = [2, 4, 24, 56]; and store them in the Panel.data.

this.data.areas = {};

Which means it's easy to search all "areas" inside the panel and find the right id of "ellipse" in this example.
However it has alway been rectangles so ellipses is something new to me.
But I searched for a solution online and found it.
I implemented the calculation in my "Find Area Formula" here:

HiseSnippet 1109.3ocsV0uSiaDDeMfuVm1SsH0G.q7WN5.eI.8Z0QOUf.Tg5AWTy0SsBgNsXuNdKa10Z20PrP7N22f1YWaG6.H5cQpVBhmY9MyNyryGdjTDQTJgD4389hLBx4qcGWv0oCSwTN5jCQNq6dLkGeDiQyTj8kDL5fhLrRQhQNNq9KFXNdqgrO+8Oe.lg4QjFVHzGDzHxaoSo5Fti16WoL1w3Xx6oSagdm8NIRvGJXhbvkV0sOJCGcEdB4LrA1JtHmmcTLUKji0XMQAXNPDWLNUbCuD+GnJ5kLhgX.ZLXnR1ngoTV7n5vUgPNqMpI3WsL3+N2Sowz47aRBeqUfeiFsyANq7TtzfOCWxokKsVoKst63HIMS2Hw3Oek6IbMQlfgTcaWoDKZkWul6PAffqCmhuhbrDHlqQvq52eCe3e81sCjsUZ+qwR+Qbl+a7q0ZBQOTLMSvAhftfrt.3NvugJhdDjVz+lHWS4jfjbdjlJ3AS5041NdFSgACoSoJiUdqHByNPjyiUAlCzqimUTLViCwP4jB.e6c6VoYEi6Awp1jvDnlYeFKna+Yauch8oaoIsnBIkEof9mO.hvsf+vmu0EaV811Wr4N8uXWikTlvyTjET9iJLJEK0RRthza25yppnOXAqChuqUt3TAnxPLicITn1jLHWCINaBgl3WRElJtlH60wCXZCVIQkyzf2dSJMJs9vtWnug+scm0809klX1F9cKlSUXbDOH7sGBUcHIAtQhCJMbO3n77fKTkfQByjvcVsDPq6JihNTNCzwu1wWzWp7folXzFLIBoe.1mxKuopBFl4N1Wb4eAwhk+4XHMOWfbFvGjBWEubqcaXWTwd6EXGUit+EuPNqE+Z3C.9EUwconXpRal5..NEqSCyD2DX84vY9aBFDJE54+xFYxRNu39nKLnK13dfMLZklmeX+za7GXSwRhNWBYDCHBSQdXZuKzqnnwjtUYdH4LOgK3mIzj2wCrI3N20w+9hRRdTYlVUofwHxGUrYvp7oTLfmO8RhbCn6mkSlCDl7r33rm8oMNKpbxQKfB9Ibp9cYjJ5iErXyXJy6Ob3GpZzC71uexgP8uYdXEO.WFQpoF2w4Px0vBkxoidtGRTWoEYVrUyqPNeg1J840yNwbBCQgi10EZaQyZV3P2qng3O26FZrNsszTBcRptMGnUWbScCO3OeiKLRxugA5gyvgsGh3bFVu3JEytyJAvEyBywMyp4Jptn8t0Oi8L8ex8Lept35tin5nzG2GW4Q7Q3J6+CerZ67ycOJIgDoabv0bO9OV1Uw+GGe45sIvX.IEpWbOKe5XXQQDANcNTNAF20YESYaIceCsICLlvisD+C7TIbfg1oR3fZgno3Ho3iQksil8+eokC3Sb6m634dpg1e.x1hZJe6G1GME9TjOFEYB+MgNoGWmsVBc1dIzYmkPmueIz4UKgN+vRnyO9j5X9Jv8y0hoksC.iQGYmU43bDGCUV1pPz+5V5njJ

ustk

@ericchesek As @Christoph-Hart said, just a wee bit of trigo will do the job.
But the getIntersection method won't work with a closed shape. It needs to be fed with a line, not a point, meaning it necessarily crosses a shape at minimum two places, leading to weird results.

HiseSnippet 1027.3ocsV0uaiSDDecRMPLbBpDO.V2e4HxYbZu6.oCDsMMAEAsWD43DRmpNs0dR7ptdWy50MMB0GDdi3wg2.XV+Qsy0zSnHNqDmLet+1wy7a8LkLDxxjJhUuWsNEHVel870Bc7nXJSPldJwZe6ILQzXNmklAGq.J4j0ozrLHhXY08GMtY0aORw0e+CmP4TQHznhPdsjEB+LKgoazN6nehw4SnQvqXIs79oGMMTJFI4xbDRcsCHozvqnKgyoF25XSr9nwQLsTMWS0PFwZuSjQqmGKWIJ8+0rL1kbvHLjLGSTo5IRdjAwFsjQwLdzr5sdFAyxrlBQ2xBwWZeFKhcm9lBxWTXvsIh10CqNaButa.ugsgWPK3sEHY0BR6UBo8smGpXo5FKF77o1SEZPsfhk81PozWRm+rq8HI5gP6mPuBlnPg6hv64AACbwa8egC5UljC9gbfp7PENN3CiLs60Tk6LA286cqSzRPORljJEnf2iQaO13di2PY6xLYFFzadVv.7yvfhuWXxKFgeFnmg0T8uHy0LA3sHWDpYRg2x9N+gSOSZRasjgXqmFlQ0wFn0K0mFU2U50rbFSN8VZRdYWjW4OY9qhYZvXdoejhtpHQoCbSM6kSj4hnLug9A8G3ZtWjE1BWOcLKyOhpo9rrohLVDz2oGhtMVhfaN7vEEWl.QSKvl6GZALtbqys8aUFNSlmAinb9kXydSc.tF22E0BCRJj7ikWCpJHXpPJZDK2TjaJAu4fK95CL3nxkPLNEXdNzxmfKb+ppfGf9gWtsSwvFyW7hZ6U4iChk5XrMJYTclOC2q9Y+tR6U+uJ3di6SpVebE6i47crutw9vKJJMFTe+hNtF2aY+tJ.1NHEjZZo7ZWjcpKntRw4RM7RgWQQ04VG220zhEa0loGTI4bPsUyFNL06KPOQdxkfZ.Navyg6bDGr2jsv9gYKZSlEVNRzxQoXpfoeYJHdHJNR0bD9uec5oXs0PwToC8KETZlABVmBWi70kDN8rOExtRKSK7sZdmX8w5BqOplNhJ.NggjN11XGM4lF9b1QqaKrhEoiQ2r9KTLFXKi00RX2ubU8L.hiO29XN2sQA49zgHQrLJmS0axNaNRpx.9PXCJQCsG1OoW29Hq+2nr+uBw8smwzgwaGic1BFwGUeHvX0AcOxd7hEPntAf6YO429vbpFojreIRCnXXeh844IyQJzP.WcA1FYFBr5XZWKkCLxlJvbPDUH7O3UkwgFYqJiCqMRRngJ4aCKG8LGk9IEZPLIJdKhd1mYjcGRJFGMssA9AjD7T82FFZ19OAmf1dLGrCwb3NDyS2gXd1NDyy2gX9lcHlu88Fi4EpNNWKSJGGPEyFWvQYYMVPwNqhtPx+B4GF9wB

const var Pnl = Content.getComponent("Pnl");

const var ellipsePos = [50,50,100,100];

Pnl.setPaintRoutine(function(g)
{
	var p = Content.createPath();
	p.addEllipse(ellipsePos);
	
	g.setColour(Colours.white);
	g.drawPath(p, p.getBounds(1.0), 1.0);
	
	if (this.data.isInside)
	{
		g.setColour(0x33ffffff);
		g.fillPath(p, p.getBounds(1.0));
	}
});

Pnl.setMouseCallback(function(event)
{
	if (event.hover)
	{
		var radius = ellipsePos[2]/2;
		
		var centre = [ellipsePos[0] + radius,
					  ellipsePos[1] + radius];
					  
		var lengthFromCentre = Math.sqrt(Math.sqr(event.x - centre[0]) + Math.sqr(event.y - centre[1]));
		
		this.data.isInside = lengthFromCentre < radius;
		
		this.repaint();
	}
});

ericchesek

@ustk Yeah this isn't too bad! Nice solution and thanks for the help. :)

ericchesek

@ulrik This is really helpful too! Thanks!

ulrik

@ulrik I couldn't help my self to explore this area a bit more so, in this snippet I have a function to find which area/areas is hovered (they can be on top of each other as well), so I have the rectangle and the ellipse but I couldn't find a way to get the precise area of the triangle
So if anybody with a magical knowledge of trigonometry (ustk?) could point me in the right direction I would be grateful!

The difficulties with the triangles (for me at least), how to find out if hovered inside or outside the triangle because of the radian.

HiseSnippet 1683.3ocwXstaaaCEVJIZaxqEaEXO.D9GcxsoN1NosCIsq49VvZRMZxJFPQPKiDsEWnIMjnhsQQdb1O2Swdg1av14PIYI63Dj51gYfbgmKjeeGdHO731QJeVbrJxx18jQ8YV12w43QRc3NgTtz5fcsrq3rOWFrUDiZs8n9z3XVfks8h+Dp21cIKym+9EaSEToOqPjk0aTbe1K4835Bos27W3Bw9z.1I7dkrdsMOvWI2QITI.VVzogUep+4ztrinnYK3XY+E6Ev0pni0TMK1xdosUAiNNTMPlZ+a3w7yDLbPSqigIJU79JQ.hXTp0NgbQP6bNGaAyR6hHvhoQfuy4Pd.er7hHw2ZTPJ7nb7vdgIg2hS.ulkgWiRvaFPxtDjVJER2y4X+HdecgFDOesyARMKpCEB6kgRpsVK7m2wYGEXgTWuG8b19Qvfwd38jFMVl.+p1FUfHerlbAMhzVJHOmj6UWldGUu9JILvqJnqJXbE3u0iY51PXQ+ZUhlKYdcRj9ZtR50sVkOTwEmJJLQ5PdLNKuT4SEaqRjAwd3B5Vw0nJfpo0oPpULX7GtbiLOyDLkIF25VuCj+rkP3UswvUWsi4S0zoD8MTcAKhE.dyi2k0AvVfWw7josF4EjqHjrN4smZlGypUmID79wrlHxphhpBFzDhYOF9o4Z3uZz3zkIU0vVDnqZlCUQZzEiPoYydo+It9.tNbKQ+P5XI9gzHcDKIlsbNvqC6EZHxF6kOeMqhvsY8F..aT+w0psQdTXuTC7lDulfUsqRjVSPjVo3O6WO4SjH.vuAFz5iiAstBChX95o2G.TuJtazpgYKoL9QyoxthOpsB3FI8YhjYtSXV+qkDuFyqYAuNeU8JAZCU.PNMalby.ynVE94ooYVepbQEAdbsDo07PjVyhH5HtwtI2ZLjXb50SmfM4dTEjEQCfAfzCo5v5sOf7fV2dJ1Mhwjyhgiwz0xxSxrvaJRjwvoklByYQ6I2CaNu79AMpu1sm3ifCIpA2Dya8wx7Vyj4slf4FvsuBKCDv5PSD5pXpJpLyM1P8UupbULTPeaqSeTKynIhIfGe1tqzr7yj3AQzAaI3cgBAm.F4U87+5ODAJQOnXgxOjbNUDy62mEQ5A0.NhhUwnBMCphGIqNNpfyeVbppOTNDVdrpykkJHdnB.2NTg3L3kKEUDYW.lapJx6PRGkVxoVEWPnopUDKFBoP3aPH2ODeqk2TE+VFhrCgvVp+CATLZ7nQHJbgcIyJTT2KcVqQt+8yVf5BlrqNDVXW2qV+64YVgyESDytNqLUIS0Dw5iuBvCW+KSCFU3RAr5jb9WhRYDoGFmLADA9rfBxmU9siJBXAgKSi8YgoTawGUXj9V9ol.CrhttwP5BrU5MVCligrDcz0mFyJJpsNJJekGhSGjdtRqMJKdjQ7pSI1O05Fm9vngSHO07lf7QoxKoLfGqw2EClXNu2WMvyD.pOj7HXJwqTIqTnKJUxCm15Qn0iVdJiQAkVRb6e7B9rmSZZ1occy186mDG5wyb3LHVct4eKhQEEaVe77kC1eLk6XxTtnmkENvHXg7Qol1bBQOKKBgQ0aEnVYE2eFx2HGPhCUIh.RH8BFr8a.JlgT9N0yRzfg9ncxuWS5v6l.tBOMMelTCHZEIPQ3Zx50xjdLLDd2KiF.OFjQxmuXx.3tRRWTKI6xNyxtL42SfmIK3myPGxlkwwrXTPl8+eG9tDONBarQLcRjb74Z311JiOWpjGozrWI8LGEqbYExzp5zYl5vtChTBAKZlpw95htIG8jI8NiEsLzvA7dqwFBM6LYGTNWeGTkavyOsYkRFpjGH45W0mIut19rx5vA9ue8fcgq2v1txjA1AUCzbDB16xt.5gMsILWmcYwmqU8M1l0Vjk8WpMZuadKZTISXwgFwbbfBCVCK5w8nMGUdv.dfNbrf2GuYHi2MrnW42ObSJVrOujBfmuwA57gTHv5psJBMopBRDT8jcthsqmo.1LlncQrkPYLWOpb67e1Zm81Bw64zFuDe1XbgYfQXK6+BLl8k.bWm85zANZW.vkb1+29uoieqztn6B2qGwg7EmiR5cL7nGeFr5RHcBOLXu.l1lNtANFi.GyjAlA+C7ISYSbrclxl4Js5Q8iTuyO8HH90L7UFI.ljlugEWmCwwjlVlikX5ai5Mr5wC3uy2Go+ifSRy1mVygOqNG9r1b3yimCedxb3ySmCe9gazG7KaZqDspW5wAPP68L2UYaumjBYVlrPq+EqprKZ

ustk

@ulrik Well, getting the area of a triangle is possible with trigo but not an easy thing (I don't know how from the top of my head though I tested a while ago two mathematics way of doing it)
From here, seeing the particular shape you're using and that you are going further than simple ellipse or rectangle, the solution would be the implementation of a Juce function to detect if inside the path. (a different one than getIntersection). Then it'll be very easy and less mind torturing (even if I like that )

ustk

@ulrik Stupid me... I already added it along with getIntersection
It's Path.contains(point)

HiseSnippet 931.3ocsV8uaaaCDlxIbsVaEaAnO.B8uT.7Dr6OGPQQahi8fQaREp6JJPQQAizYKhPQJPREWig7LrW08FrcTxNRd0oXvn0v1w2ceG4GO9cmRrVk.FiRS7591kE.w6mnSWJsYCyXbIYxIDuCni4xzQBAuv.GoAF43kELiARIdd686NXdc2mT85ue9wLASl.MtHj2o3Ivq34bai23W7RtPLlkBukm2B8CewjDkbnRnJQJsGsOofkbAaNbFyAqCk38CiR4VkdpkYACwa+iUoKmloVHqw+Ntget.bFCHSwEp18XkH0wXmWxvLtHMd8Q2PvUItoPrWcg3tzS4o7q82TP9kp.AMYztd30YS5s2FzaPa50uE81Bk7ZQo8qozAzoIZdgsIhiO+HchzB5YLrr2lJ0XIc9qNzgJDgzFkyt.FqQiqyH7w862K.+5vm5inLJADkH.lNDc36iWFFavkLcPrTD7rf0KzbvNTkWnjnQ38vX2yAuAcQKrInlwBwLalaMKhXooX0QG9gGfaM94i8BdD9Fow8cbwwDebEiLfMFq412nJsbIDNqTlX4JY37C8+S+tyc.pUJg0+wDsHiaALeLXplsnZOK5ET336wpRYpIbPT+C6E39Fg42kOKHzlwMQoLKKhalHM7T3P+t3Nr0sXIHDpEtjwvyPQ7MsINHW4eUqSyopRCLjIDmiZ5liCbIVkpNReIQvxXQDVVsXgvD9gJnQetWP8OV9Q2lTkkFJb0JWEtZK88Wu9AJ4YJK7ZYX0d3ekev+MzrYaMl6BTqDBPu0vtNW8WKwPYY94ftGpHDkv0.Q47l8HzatGocKbRsdpEPkbhjaecAHuoFaxJQH9q+XxIXk00XsxGhq.zVtiBdm.WhSopay5ROALWXUEUXWoxId2xVE8NqaBYRPP3XqFkhWvjO2dl2x1FK3o1LDl266PHY.edlcsEyIlVKIPd7yziDhfFGjubH.N9QkVJX1MmI4FDuJ.dIrwf.WyNplrKaOn9a1fp+uT7.ZL2ljscN1YKbDup9dvwUi2uCczrYPhsgf6SG+9uOyxI0ivleJyp4nNgdVY9TbZRBf6tDkQtl.uNN4ZscemsqBLEjoUF+C9ZUvANauUAGrNHImknUeJot0y8.jaW4A4jr5Ymcom5rCFPpZGcx19Q8I43yx9TRh63+qXGz1y496PNOXGx4g6PNOZGx4w6PNOYGx429p4392HNpzpxqaGPGwiplQ44MRxPkUkJj7u.xPkoEC

ulrik

@ustk Nice one

Dan Korneff

@ustk nice job!

ulrik

@ustk Would it also be possible to add text to follow a path you think?

ustk

@ulrik Alright... It's official... I'm drinking to much...

HiseSnippet 1266.3ocsV8uSaaDG+Lf2VxV0FR6A3HRSxoDL1.kUozpADfonU.qFV6lPnpC6K12v4NqyWJMah+YuE6sYOR6MX66c1l3.oUSQsVJN999i66m66Ou.oHjlmKjHqFmOIihr9J6AS3pjdIDFG0+Pj0p1Gy3QGklxxxo6KoDzASxH44zHjk0x+nVLqFqfLO+yOb.IkvCoSIgPuRvBoufMholRMXuehkldLIhdNaTMo2Yu9gBdOQpXL.oks8PYjvqIwzSIZwVxFY8YGEwTB4.EQQyQVqbfHZxfDwM7B4eEKmcUJUuvGM.1nBxGKRizHVSE0KgkFETczyQvtDL0Qrbgi3asOgEwti9TGx2XXfmpQc+g0RyBukmAd90gmWM3MGHYUCRqT.oUsGDJYYpobz34Ks6yUT4PB31qCkBYQK8W118DfDbk6Hx0zikvh6zvYWOuNX3U6tMAoxEoT2vTJQ5.DZBwhbE9sDINfmheNtZehopdhQYBNrvoEvqEHM7maDQQbI73TJHs2L6PVM8CgzHEMfnRtmYTz2o.4Z8qTRRRxZqsF90RlhwiwBNlfy.MvrbblH23FwpDB+5brRfgDF7PIixivAS.xwBIAXjPwwFiAFXDnMEdwBYDNVLDSRSwJH+asVcqggvDhb.620m.+sd.CHeTy4o0YjmQoQZwgyh1KjSUAP1h5khw.1oNCGyCULA2Itcy+nYirodX3aRTUwkyE9PvXKc.YG8K3qKuSFHgR5bw1.c32kcvOoC1uTnN3SfSlqR7RRDbxxcTIr7Zgh13Gi2vWuSMaDqAWQ8kSwe4t2jvTTM6X2HI4FSXIqCNSGlOPLlGk63650tC1ycqhcYnPhcXO2qK6Y5HlaJkGqR5xVe81Ma.mvFl.t.bAfWwrOA5EmwM6sCC.zTm45XGiHuvrINs2b6c8d78OBsweGdFoz.oQok3EYMOzPNr08a+Q1XjneCrk1jW3c4FlCI7Q2RthrrJt9Ub8urt5.aS3BLG2ADeSXCq1e1Prid+eF1qMH45khFzujerqTnar3P5T3dMJVD11OkEyoQmCl1wDTzG58UNLHvcQEL2nJ4dysJ2AMLqH1A+vufTsVgPMqjF0pzZkXXi5f31l2pqjqR+0c0k8f5qqf12Sy+Mo+2yaC9i6mvBQISIkNN.wmtk5HoY5pJccysk8axgphBi4rsmA.y4ox7POjSEJ5Yk3n4sMw2m0vgykmtukTjlBlYdrK.vGPQG93QWQkcftEoio2IHzXe1oE1u+oE0GlEVzFslfBdeNScVFk+9FwgJ68Be8y8ODb05QLkz.4xnRESCAqCouElWWLvog8gz7qUhLirkM7QVetxv8QUiiHbZJhACcrsgfB5c0m9Oo9haXQpj6H72+4dITVbhpNEHmQbSUlCfmu1denK8TBnGNVDFHKhFmRTyNkVe0jRFPvXlQi5we7blZR8qt7Qaz8+WHtpc.SElLeLtzbvHDx9TfwxK77H6iFNjFplBvUrO9W9zb6FTwnwXn8ljA4K1mNdz.XXTHErNGRmzECVKoSaKV6oWq8.CfI7lE+K7TxzWu1pjoeESzHRnT7lvhRP8Up9BCE.SbysIaXehdM1GYJK0oudtdnQvs6dSXn93uATIMec1ZAzY6EPmcV.cdxBnytKfNe+BnyS+f5nuX89iUhQEkC.gfiL8prrNhSfLKSVH5+.KzJo4

ulrik

@ustk Hahaha....beautiful!!! cheers

ericchesek

Hahaha this is incredible. Excellent work!

ericchesek

@ustk Just to be clear, this only works with paths and not fillEllipse or drawEllipse, for example? If so, is there an API reference for what shapes can be made with paths? Similar to what you did with

const var p = Content.createPath();
p.addStar([300,300], 5, 50, 200, 0);

ulrik

@ericchesek in the API you'll find this

Skärmavbild 2023-08-08 kl. 21.39.04.png

ericchesek

@ulrik Hmm, maybe I'm on an older build. 3.0.0, build 650, 2023 April 3.
I only have a fraction of these options in the "Path" API list. I'll look into it. Thanks!

Dan Korneff

@ustk said in How to Detect if Inside Ellipse?:

Alright... It's official... I'm drinking to much...

Maybe I'm not drinking enough

How to Detect if Inside Ellipse?

59

1.7k

11.7k

101.8k