How to Detect if Inside Ellipse?
-
Hello! Is there a way to detect if the mouse inside the bounds of an ellipse in a paint routine? My attempts seem to include the imaginary square surrounding the ellipse.
-
@ericchesek that's a fun task involving trigonometry functions but it's doable.
-
@Christoph-Hart Oh lovely
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?
-
@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. -
@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
-
@ericchesek As @Christoph-Hart said, just a wee bit of trigo will do the job.
But thegetIntersection
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(); } });
-
@ustk Yeah this isn't too bad! Nice solution and thanks for the help. :)
-
@ulrik This is really helpful too! Thanks!
-
@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
-
@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 ) -
@ulrik Stupid me... I already added it along with
getIntersection
It'sPath.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
-
@ustk Nice one
-
@ustk nice job!
-
@ustk Would it also be possible to add text to follow a path you think?
-
@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
-
@ustk Hahaha....beautiful!!! cheers
-
Hahaha this is incredible. Excellent work!
-
@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);
-
@ericchesek in the API you'll find this
-
@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!