# How to nicely generate a graph of a function of two variables with a restriction on the domain?

**URL:** <https://discourse.processing.org/t/how-to-nicely-generate-a-graph-of-a-function-of-two-variables-with-a-restriction-on-the-domain/20760>\
**Category:** Coding Questions\
**Created:** [May 11, 2020, 11:04pm UTC](https://discourse.processing.org/t/how-to-nicely-generate-a-graph-of-a-function-of-two-variables-with-a-restriction-on-the-domain/20760 "2020-05-11T23:04:28Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![jancnahn](https://avatars.discourse-cdn.com/v4/letter/j/df788c/32.png) [@jancnahn](https://discourse.processing.org/u/jancnahn)\
**Post date:** [May 11, 2020, 11:04pm UTC](https://discourse.processing.org/t/how-to-nicely-generate-a-graph-of-a-function-of-two-variables-with-a-restriction-on-the-domain/20760/1 "2020-05-11T23:04:28Z")

</div>

Hello,  
I recently got into p5 from watching The Coding Train, and I wish to generate two-dimensional surfaces in 3D (like using WEBGL) given by a function of two variables.  
If there is a function in Processing that does the job and I’m not just seeing it, then this is a Processing question. Otherwise, this could be a general question on graphing algorithms. I have no background in CS or algorithms.  
My first goal is to render a surface z = x^2 + y^2 only for 0 \<= z \<= 20.

Here is my initial attempt:

```auto
var angleSliderX;
var rows = 30;
var cols = 30;
var s = 10;
var fcnTable = [];

//define a function to plot
function f(x, y) {
  return x **2 + y** 2;
}

//create an array containing (x, y, f(x, y) ) info
for (i = -cols; i < cols; i++) {
  fcnTable.push([]);
  for (j = -rows; j < rows; j++) {
    fcnTable[i + cols].push(f(i, j));
  }
}

function mouseWheel(event) {
  s -= event.delta / 2500;
}

function setup() {
  createCanvas(400, 400, WEBGL);

  angleSliderX = createSlider(-PI / 2, PI / 2, PI / 3, 0.01);
  frameRate(30);
}

function draw() {
  background(0);
  scale(s);

  translate(0, 10, 0);
  rotateX(angleSliderX.value());

  //draw surface
  stroke(255);
  fill(100);
  for (j = -rows; j < rows; j++) {
    beginShape(TRIANGLE_STRIP);
    for (i = -cols; i < cols; i++) {
      if (f(i, j) <= 20) {
        if (f(i, j+1) <= 20) {
          vertex(i, j, fcnTable[i+cols][j+rows]);
          vertex(i, (j+1), fcnTable[i+cols][j+1+rows]);
        }
      }
    }
    endShape();
  }
}

```

I’m concerned that this creates jagged boundaries which I’m not so happy with. Are there known best practices to deal with such concerns without consuming too much computing power? Ideally, I wish to have a flat cut-out at z = 20 of the surface.

Thank you for your time!

---

<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:** [May 15, 2020, 3:37am UTC](https://discourse.processing.org/t/how-to-nicely-generate-a-graph-of-a-function-of-two-variables-with-a-restriction-on-the-domain/20760/2 "2020-05-15T03:37:28Z")

</div>

It looks like you want to solve algebraic equations in JavaScript. Instead of trying to implement your own solution, maybe try using a library? For example (untested):

[https://algebra.js.org/](https://algebra.js.org/)

---

<div class="post-metadata">

**Author:** ![jancnahn](https://avatars.discourse-cdn.com/v4/letter/j/df788c/32.png) [@jancnahn](https://discourse.processing.org/u/jancnahn)\
**Post date:** [May 15, 2020, 3:31pm UTC](https://discourse.processing.org/t/how-to-nicely-generate-a-graph-of-a-function-of-two-variables-with-a-restriction-on-the-domain/20760/3 "2020-05-15T15:31:14Z")

</div>

thx, i’ll check that out!