# Equation-defined shapes - created from sampling lines or SVG import... or....?

**URL:** <https://discourse.processing.org/t/equation-defined-shapes-created-from-sampling-lines-or-svg-import-or/12617>\
**Category:** Project Guidance\
**Created:** [July 9, 2019, 9:26am UTC](https://discourse.processing.org/t/equation-defined-shapes-created-from-sampling-lines-or-svg-import-or/12617 "2019-07-09T09:26:45Z")\
**Posts on this page:** 18\
**Page:** 1

<div class="post-metadata">

**Author:** ![MuddyGardener](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/muddygardener/32/1719_2.png) [@MuddyGardener](https://discourse.processing.org/u/MuddyGardener)\
**Post date:** [July 9, 2019, 9:26am UTC](https://discourse.processing.org/t/equation-defined-shapes-created-from-sampling-lines-or-svg-import-or/12617/1 "2019-07-09T09:26:45Z")

</div>

I am thinking about how I can best create equation defined shapes that can be manipulated _as shapes_, and am looking for advice about good ways forward for doing this.

I would like to replicate these shapes in my design and scale them and fill them and give them other custom dynamic behaviours. FYI in this instance I am looking at creating a shape based on touching mirrored ogive curves, forming a closed shape. (Though I’m not sure whether that matters - the key point is that the shape I want to create isn’t a primitive, and can’t be super-obviously assembled from primitives.) I could DRAW the shape I want on the canvas point by point by stepping through an equation at pixel resolution. But that just leaves me with a bunch of pixels.

Instead I think PShape seems the right construct to use. But I’m uncertain about the best way forward for creating a PShape. It seems to me like there are two possibilities:

- One would be to mock the shape up by creating a whole huge bunch of vertices, stepping through the equation just as I would when I plot it out iteratively. This seems not super efficient…

- Another approach would be to create an SVG in an external program, and import it into a Pshape. Then I guess I would be at the mercy of whatever vertex approximation happens under the hood? Which is probably better than my brute force attempt.

Am I missing some other approach that would be better? Anyone have any advice about good ways forward? (Including ‘Don’t do this’… 😉 )

thanks!

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [July 9, 2019, 10:47am UTC](https://discourse.processing.org/t/equation-defined-shapes-created-from-sampling-lines-or-svg-import-or/12617/2 "2019-07-09T10:47:54Z")

</div>

Can you give an example of an equation?

Because `y = 3 * x + 8;` doesn’t make much sense to make a shape from.

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [July 9, 2019, 10:50am UTC](https://discourse.processing.org/t/equation-defined-shapes-created-from-sampling-lines-or-svg-import-or/12617/3 "2019-07-09T10:50:50Z")

</div>

> **[Kango/MathProjects](https://github.com/Kango/MathProjects/wiki/Math-Projects)**
>
> Math Projects in Processing. Contribute to Kango/MathProjects development by creating an account on GitHub.

---

<div class="post-metadata">

**Author:** ![MuddyGardener](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/muddygardener/32/1719_2.png) [@MuddyGardener](https://discourse.processing.org/u/MuddyGardener)\
**Post date:** [July 9, 2019, 11:05am UTC](https://discourse.processing.org/t/equation-defined-shapes-created-from-sampling-lines-or-svg-import-or/12617/4 "2019-07-09T11:05:26Z")

</div>

Hm. You could make a path from that… which might make sense. Depending what you want.

But what I had in mind was a mirrored ogive arch, reflected on X, that could be filled. I am on my mobile for rest of day so can’t give you the formula atm. I’ll get back on this tomorrow though.

Meanwhile if you can make any sense of the question curious to hear your thoughts.

Thanks

---

<div class="post-metadata">

**Author:** ![MuddyGardener](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/muddygardener/32/1719_2.png) [@MuddyGardener](https://discourse.processing.org/u/MuddyGardener)\
**Post date:** [July 11, 2019, 10:45am UTC](https://discourse.processing.org/t/equation-defined-shapes-created-from-sampling-lines-or-svg-import-or/12617/5 "2019-07-11T10:45:36Z")

</div>

The actual equation I want to use is something like this, reflected over x and y and plotted over a domain and range which would create a closed figure, which I brute forced here to be -2 to 2, to show you. I think the actual equation isn’t so important maybe - it’s just something I can piece together by brute force that doesn’t use primitives. I am thinking maybe this is just going to be too expensive and pita-ish to do ‘by hand’ i.e. by modelling it with a plethora of vertices and I would be better off re-thinking what I want to do, so that I could use primitives. What do you think?

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/1/133f64b92d78c3e04a7f09ffefe2fce860ee7401.png)

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [July 11, 2019, 11:20am UTC](https://discourse.processing.org/t/equation-defined-shapes-created-from-sampling-lines-or-svg-import-or/12617/6 "2019-07-11T11:20:47Z")

</div>

looks nice, what did you try with processing so far  
some old tests:  
 ![](http://kll.engineering-news.org/kllfusion01/downloads/RPI_processing3371_415.jpg))  
see [here](http://kll.engineering-news.org/kllfusion01/articles.php?article_id=154)  
or  
[Math and processing](https://discourse.processing.org/t/math-and-processing/9292/11) ,

---

<div class="post-metadata">

**Author:** ![Tiemen](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tiemen/32/5477_2.png) [@Tiemen](https://discourse.processing.org/u/Tiemen)\
**Post date:** [July 11, 2019, 11:32am UTC](https://discourse.processing.org/t/equation-defined-shapes-created-from-sampling-lines-or-svg-import-or/12617/7 "2019-07-11T11:32:47Z")

</div>

Did you consider writing a function that converts the formula you use to [tangent points](https://processing.org/reference/bezierTangent_.html), save these points in an array, and thereafter plot it on the graph? You could manipulate the values within this array to adjust your plotted line. Or won’t this work?

---

<div class="post-metadata">

**Author:** ![MuddyGardener](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/muddygardener/32/1719_2.png) [@MuddyGardener](https://discourse.processing.org/u/MuddyGardener)\
**Post date:** [July 11, 2019, 12:02pm UTC](https://discourse.processing.org/t/equation-defined-shapes-created-from-sampling-lines-or-svg-import-or/12617/8 "2019-07-11T12:02:13Z")

</div>

Thanks for the Kango link. Lots of stuff to check out.

I think my current problem is that I am not sure how best to bridge the gap between a functionally defined line or shape, vs what I understand to be available construction/definition methods for PShape.

---

<div class="post-metadata">

**Author:** ![MuddyGardener](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/muddygardener/32/1719_2.png) [@MuddyGardener](https://discourse.processing.org/u/MuddyGardener)\
**Post date:** [July 11, 2019, 12:05pm UTC](https://discourse.processing.org/t/equation-defined-shapes-created-from-sampling-lines-or-svg-import-or/12617/9 "2019-07-11T12:05:05Z")

</div>

Fun! My focus at the moment is really on trying to bridge the gap between a functional specification for a shape, as per the geogrebra example, and the available construction methods for PShape. The more I play with this the more I think I need to back out of the rabbit hole .🧐

---

<div class="post-metadata">

**Author:** ![MuddyGardener](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/muddygardener/32/1719_2.png) [@MuddyGardener](https://discourse.processing.org/u/MuddyGardener)\
**Post date:** [July 11, 2019, 12:13pm UTC](https://discourse.processing.org/t/equation-defined-shapes-created-from-sampling-lines-or-svg-import-or/12617/10 "2019-07-11T12:13:38Z")

</div>

Aha!!! This seems like it could be the missing link for what I’m trying to do. If I can model this as a set of tangent points, that would be a good way forward, as I can let the bezier built-ins take the load. Totally happy to back off the initial specification to do something more tractable.

I’ll have a scoot round about how this could be done - but if you have quick references you can sling me that would be useful. tx!

Addendum: looks like I need to find the formula for the first derivative and calculate it… which I assume I can figure out how to do… but not sure how best to determine which points to select?

Addendum2: a sensible place to put joints between the different contributing models could be the inflection points maybe…? not sure I’m up to finding that analytically just this moment (without relearning my calculus) -

Addendum 3: I might be best off, pragmatically, fussing around in Inkscape or similar til I find the right bezier approximation/mockup/model, then re-using the params in Processing. A toolchain is worth avoiding in general but as a one off it could be the best way forward…

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [July 11, 2019, 12:46pm UTC](https://discourse.processing.org/t/equation-defined-shapes-created-from-sampling-lines-or-svg-import-or/12617/11 "2019-07-11T12:46:13Z")

</div>

Yeah, ArrayList of PVectors, use .add() to hammer the values of x and y in (all in `setup()`)

then in `draw()`

- say `beginShape()`
- for loop over the ArrayList and
- `vertex()` or something and
- after the for loops `}` say `endShape();`

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [July 11, 2019, 1:12pm UTC](https://discourse.processing.org/t/equation-defined-shapes-created-from-sampling-lines-or-svg-import-or/12617/12 "2019-07-11T13:12:57Z")

</div>

```auto
ArrayList<PVector> list = new ArrayList(); 

void setup() {
  size(880, 880);
  for (int i =-250; i < 250; i++) {
    float y=(i*0.1)*(i*0.1)+0; 
    list.add(new PVector (i+width/2, height-y-30));
  }
}

void draw() {
  beginShape();
  for (PVector pv : list) {
    vertex(pv.x, pv.y);
  }
  endShape(CLOSE);
}

```

---

<div class="post-metadata">

**Author:** ![MuddyGardener](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/muddygardener/32/1719_2.png) [@MuddyGardener](https://discourse.processing.org/u/MuddyGardener)\
**Post date:** [July 19, 2019, 3:44pm UTC](https://discourse.processing.org/t/equation-defined-shapes-created-from-sampling-lines-or-svg-import-or/12617/13 "2019-07-19T15:44:24Z")

</div>

I’ve been trying to work with built-ins rather than approximating the function iteratively, on the theory that Processing can do that better than I can, and after messing around with a demo program in desmos to get the right specification for the Bezier control point coordinates, I can create the shape I want with a Bezier and a reflection of its control points in Processing. So - that’s nice.

But in taking the next step and adapting that definition to PShape I’ve run into the ‘bezier is flaky inside PShape’ problem - [bezierVertex() draws straight lines, not a curved line?](https://discourse.processing.org/t/beziervertex-draws-straight-lines-not-a-curved-line/3139/5)😉 - but that’s ok as I can either add an argument to createShape that fixes it for the default renderer, or change the renderer. It’s an open bug so there isn’t a solution that works for both situations.

---

<div class="post-metadata">

**Author:** ![tony](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tony/32/949_2.png) [@tony](https://discourse.processing.org/u/tony)\
**Post date:** [July 19, 2019, 8:13pm UTC](https://discourse.processing.org/t/equation-defined-shapes-created-from-sampling-lines-or-svg-import-or/12617/14 "2019-07-19T20:13:50Z")

</div>

Cool beans. Are you trying to make a general method for converting any old function into a Pshape, or did you want that one shape in particular?

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [July 19, 2019, 9:38pm UTC](https://discourse.processing.org/t/equation-defined-shapes-created-from-sampling-lines-or-svg-import-or/12617/15 "2019-07-19T21:38:09Z")

</div>

> [@MuddyGardener](#):
>
> It’s an open bug so there isn’t a solution that works for both situations.

Great – glad that you have workarounds. It sounds like you are tackling the problem in detail. Any chance you are interested in investigating what specifically changed between 3.2.3 and 3.2.4 that introduced the bug in the first place? A third option, of course, is to use v3.2.3.

---

<div class="post-metadata">

**Author:** ![MuddyGardener](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/muddygardener/32/1719_2.png) [@MuddyGardener](https://discourse.processing.org/u/MuddyGardener)\
**Post date:** [July 20, 2019, 7:36am UTC](https://discourse.processing.org/t/equation-defined-shapes-created-from-sampling-lines-or-svg-import-or/12617/16 "2019-07-20T07:36:28Z")

</div>

I could try! I’m new to Java so it might not come to anything. But if it does I’ll let you know - would an annotation on GitHub be the right way to do this?

---

<div class="post-metadata">

**Author:** ![MuddyGardener](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/muddygardener/32/1719_2.png) [@MuddyGardener](https://discourse.processing.org/u/MuddyGardener)\
**Post date:** [July 20, 2019, 7:44am UTC](https://discourse.processing.org/t/equation-defined-shapes-created-from-sampling-lines-or-svg-import-or/12617/17 "2019-07-20T07:44:17Z")

</div>

I just want the shape for a project - and I want to base it on a built-in as I want to be able to do the standard transforms on it and also add some custom ones of my own. So it’s empirical. It’s not super obvious to me how to go from the defining equation to the Bezier way of defining it. It’ll be something about finding the control points based on differentiating the function… maybe… but tbh I’m not sure how to do that analytically.

Easier graphically for me. It would be useful to have a visual interactive control point drag and drop Bezier-based shape definer in the Processing environment, though. Might make one 😉 [Update: even better, there’s one already made! [http://drifkin.net/processing/beziereditor/](http://drifkin.net/processing/beziereditor/)]

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [July 20, 2019, 4:58pm UTC](https://discourse.processing.org/t/equation-defined-shapes-created-from-sampling-lines-or-svg-import-or/12617/18 "2019-07-20T16:58:25Z")

</div>

> [@MuddyGardener](#):
>
> would an annotation on GitHub be the right way to do this?

Depending on what you find, it could be a comment on an existing issue if that makes sense, or a new issue, an annotation, or a full pull request that references lines / issues. Really however you like if you find something that could push a solution forward.