How to use mathematical functions into processing

edited October 2017 in How To...

Hi, I am new to using processing but I am looking to use functions in math to create artwork for my school project. I'd first use desmos to figure out what functions to use to create said artwork, but I don't know how I would then translate that work into processing. An example of artwork I want to create is this: . I want to learn how to be able to translate these functions to processing and then visualize the same art from running the processing code. Thank you :)



  • example by koogs

    int max;
    void setup() {
      size(400, 400);
      max = 300;
    void draw() {
      if (max <301) { 
      translate(200, 200);
      line(0, -200, 0, 200);
      line(-300, 0, 300, 0);
      stroke(255, 0, 0);
      for ( int x = -300; x < max; x++) {
        line( x, f(x), x-1, f(x-1) );
    float f(float x) {
      return( (x/30) * (x/30) * (x/30) );
  • example by koogs

    Um... no? That's mine.

  • for ( int x = -300; x < max; x++) {

    mine? with that whitespace!?! god no. 8)

  • Have you looked under the Math libraries for examples -- e.g. qscript?

  • the problem with that bb8 page is that they are using implicit equations, and that's hard to translate into code

    for instance, the equation for the outer circle there

    (y + 1)^2 + (x -. 5)^2 = 5{y <= .9}

    you could iterate over x and y and plot the pixels where the equation is true. but what range of values do you use for x and y? (the {y <= .9} is perhaps a hint there) and what increment?

    (and i chose the easiest example above!)

  • Such equations need to be transformed so that y is alone on one side as it were and we can use x as a parameter, right?


    but still the valid range and increment for x remains important

  • b-but, circles have two solutions for each x...

  • Is that what you called implicit functions?

    You need




    for each point/ angle, right?

  • Do you have to use desmos?

    The desmos equations in your example can be split into 3 basic types

    1) A straight line where y = f(x) with range limits on x

    2) A straight line x=f(y) with range limits on y

    3) Part or all of the circumference of an ellipse with or without range limits on x and/or y

    The trick would be to create a function for each of these types. The function parameters would define the equation coefficients and the range limits.

    This is not a trivial task and needs some good algebraic and programming skills to create them. Even so you might want to simplify the task, for instance in the linked example the first equation has sophisticated limits so that if defines the area to be shaded rather than just a line. It would be difficult to create a generic function to do this using the equations provided by desmos.

    You would probably find it easier to draw your artwork (lines and part/whole ellipses on graph paper).

    would then be specified by the end points and

    by the its center coordinates, the size of the minor and major radii, and the start and end angle to be drawn.

    Then you need two generic functions to draw these.

  • I don't need to use desmos necessarily. This is for my Maths SL class, creating my own functions to create an art piece; I just wanted to do something that I can use math and coding to create some piece of art. I have to be able to demonstrate my process in math primarily, while using code to supplement.

Sign In or Register to comment.