Quadratic bezier curves for Processing.js

7th
January, 2010
by Michael

Since Processing and respectively Processing.js don’t support quadratic curves, you are forced to construct them with a conventional cubic bezier curve. I’ve never used bezier curves before, so I took this as a lesson.

I came up at least with an implementation for quadraticBezierVertex(cpx, cpy, x, y), which you can use to create shapes.

You can put this code into a .lib file and import() it into your sketch to add support for quadratic curves to Processing.js.

The actual reason I created this was the need for flexible rounded rectangles, which don’t look smart unless you use quadratic curves for the corners. Because it’s a shape based on a path you can modify fill and stroke as usual.

Finally here’s the result. I’m using a stroke weight of 2 pixels and a 10 pixel radius for the rounded corners.

This entry was posted on Thursday, January 7th, 2010 at 3:56 am and is filed under Code. You can follow any responses to this entry through the RSS 2.0 feed. Responses are currently closed, but you can trackback from your own site.

6 Responses to “Quadratic bezier curves for Processing.js”

  1. Patrick says:
    January 25, 2010 at 10:13 pm

    Trying to do this in regular processing, but I can’t figure out what prevX and prevY are supposed to be.

  2. Michael says:
    January 25, 2010 at 10:19 pm

    Such internals as prevX/prevY might be hidden in native Processing as they’re just relevant to vertex based shapes. You might want to set them manually in the meanwhile.

  3. BILL says:
    July 15, 2010 at 10:24 pm


    PillSpot.org. Canadian Health&Care.Special Internet Prices.No prescription online pharmacy.Best quality drugs. High quality pills. Order drugs online…

    Buy:Advair.Benicar.Zetia.Aricept.Nymphomax.Lipothin.Lipitor.Seroquel.SleepWell.Lasix.Amoxicillin.Female Pink Viagra.Prozac.Female Cialis.Ventolin.Wellbutrin SR.Buspar.Acomplia.Cozaar.Zocor….

  4. ALFREDO says:
    July 21, 2010 at 11:03 pm


    MedicamentSpot.com. Canadian Health&Care.No prescription online pharmacy.Best quality drugs.Special Internet Prices. Low price drugs. Buy pills online…

    Buy:Propecia.Levitra.VPXL.Soma.Zithromax.Super Active ED Pack.Cialis Professional.Viagra Super Force.Viagra Soft Tabs.Tramadol.Cialis.Viagra Super Active+.Viagra.Cialis Super Active+.Viagra Professional.Cialis Soft Tabs.Maxaman….

  6. ALFRED says:
    September 8, 2010 at 2:43 am


    CheapTabletsOnline.com. Canadian Health&Care.No prescription online pharmacy.Best quality drugs.Special Internet Prices. Low price drugs. Order pills online…

    Buy:Nexium.Human Growth Hormone.Prednisolone.Retin-A.Petcam (Metacam) Oral Suspension.100% Pure Okinawan Coral Calcium.Mega Hoodia.Lumigan.Actos.Valtrex.Zovirax.Zyban.Prevacid.Accutane.Synthroid.Arimidex….


Dudes

Projects