Added quadratic bezier curve demo

[gnikoloff]

Description

Added a new demo that renders continuous quadratic curve through multiple points.

[google-cla[bot]]

Thanks for your pull request. It looks like this may be your first contribution to a Google open source project (if not, look below for help). Before we can look at your pull request, you'll need to sign a Contributor License Agreement (CLA).

:memo: Please visit https://cla.developers.google.com/ to sign.

Once you've signed (or fixed any issues), please reply here with @googlebot I signed it! and we'll verify it.

---

What to do if you already signed the CLA

Individual signers

• It's possible we don't have your GitHub username or you're using a different email address on your commit. Check your existing CLA data and verify that your email is set on your git commits.

Corporate signers

• Your company has a Point of Contact who decides which employees are authorized to participate. Ask your POC to be added to the group of authorized contributors. If you don't know who your Point of Contact is, direct the Google project maintainer to go/cla#troubleshoot (Public version).
• The email used to register you as an authorized contributor must be the email used for the Git commit. Check your existing CLA data and verify that your email is set on your git commits.
• The email used to register you as an authorized contributor must also be attached to your GitHub account.

ℹ️ Googlers: Go here for more info.

[gnikoloff]

@googlebot I signed it!

[una]

Wow this is so cool! Is there any way to set the points instead of them being randomized? That feels super helpful for charting

[gnikoloff]

Hi @una , thanks so much!

It is my understanding that CSS Houdini supports custom parameters in the paint() method like this, which would be perfect for describing the points positions. However, I did not see any examples on houdini.how that utilise inputArguments, so I decided to use CSS variable to control the number and spacing of points and randomly generate X, Y myself.

How should it be done in your opinion? I was thinking that I can make the random positions once and cache them in the paintlet on the first render and then keep reusing them? That would be one way to make it not regenerate the positions on each CSS variable change/

[gnikoloff]

Update: I saw one of the examples actually supports inputArguments, but with a hint that says it is hidden behind a flag.

I would be happy to implement it on my own demo page and include the same hint text under the demo. For the purposes of it not constantly rerendering with different points when changing CSS variables, how about I just cache their positions on the first render and keep reusing them?

Please let me know

[una]

Yes yes inputArguments would be perfect for this. Unfortunately, they are not yet supported by the Paint Polyfill, and thus can't be used for houdini.how demos. We could have the demo as-is with the randomized segments, and add a similar note stating that the points are customizable via input arguments with a link to the full demo.

[gnikoloff]

Hey @una, that's cool then :) Is anything else needed on my part WRT to the merge request?

Btw I also have other demos, are you guys cool with multiple contributions from the same person?

Thanks!

[una]

@gnikoloff yes, other demos are welcomed with open arms! Sorry about the delay on this one. Do you have a demo with using the argument list to set the points? I'd really like to add a note on this one and link to that!