How to use mathematical functions into processing

beepboopbop

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: https://www.desmos.com/calculator/a6kkjwoi7h . 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 :)

Chrisir

example by koogs

int max;

void setup() {
  size(400, 400);
  max = 300;
}

void draw() {

  if (max <301) { 
    max++;
  }

  background(0);

  translate(200, 200);
  stroke(255);
  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) );
}

TfGuy44

example by koogs

Um... no? That's mine.

koogs

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

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

jeremydouglass

jeremydouglass

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

https://processing.org/reference/libraries/#math

koogs

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!)

Chrisir

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?

y=.....x.....x.......;

but still the valid range and increment for x remains important

koogs

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

Chrisir

Is that what you called implicit functions?

You need

x=.......

and

y=......

for each point/ angle, right?

quark

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).

Lines
would then be specified by the end points and

Ellipses
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.

beepboopbop

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.