Draw a parabola with point() and a custom function parabola()?

Nuss

Hi Guys,

I'm just trying to draw a parabola. I have now tried it over several days but it doesn't work. Here is the basic code I have to use.

    void setup() {
      size(301, 301);
      noLoop();
      background(0);
    }

    void draw() {

      strokeWeight(3);
      stroke(#66C1FC);
      line(0, 300, 300, 300);
      stroke(#F55719);
      line(150, 0, 150, 300);

      stroke(255);
      strokeWeight(1);

      // My problems begin, I have to rescale the x axis, so only values between -4
      // and 4 used for calculation  without map(). 
      for (int i = 0; i < 301; i ++) {  
       point(i,parabola(?));                    
      }
    }

    float parabola(float xValue) {
      float r;
      r = xValue * xValue;
      return r;
    }

I dont get it and believe me I tried everything.

koogs

(homework, given that we saw the exact same question, in german, a few days ago)

i suggest that if you want the domain to go from -4 to 4 then put that in the for loop. and translate the screen so that the origin is in the middle.

why can't you use map()?

Chrisir

first distinguish between

• the x-values you want to display on the screen and

• the values to put into parabola, replacing your question mark.

For the latter value use a variable of type float and of value -4.0 and increase it slowly till you reach +4 (hint: you should reach +4 when i reaches 300)

Best, Chrisir ;-)

Chrisir

You also need to modify the return value of the function parabola

• the values must be applied to the height of the screen

• it must be upside down since the 0,0 of processing is upper left corner and not lower left corner

kfrajer

Prev posts: https://forum.processing.org/two/search?Search=parabola

Kf

Nuss

Hi guys, thank you for the advices. I have tried again but it still doesnt work completely.

    void setup() {
      size(301, 301);
      noLoop();
      background(0);
    }

    void draw() {

      strokeWeight(3);
      stroke(#66C1FC);
      line(0, 300, 300, 300);
      stroke(#F55719);
      line(150, 0, 150, 300);

      stroke(255);
      strokeWeight(1);
      for (float i =0; i <width; i++) {
        float xWert = 4;
        xWert=xWert-i/37.625;
        float yWert = parabel(xWert)*18.8125;
        point(i,yWert);
        println("i:"+i, "yWert:"+yWert, "xWert:"+xWert);
      }
    }


    float parabel(float x) {
      float r;
      r = x*x;
      return r;
    }

The parabola is opened downwards and I dont know why. I just can't get it. Here is the code where I have used the map() function for rescaling the x axis and it works. But for the first variant without mapping I can't find the solution.

    void setup() {
      size(301, 301);
      noLoop();
      background(0);
    }

    void draw() {

      strokeWeight(3);
      stroke(#66C1FC);
      line(0, 300, 300, 300);
      stroke(#F55719);
      line(150, 0, 150, 300);

      stroke(255);
      strokeWeight(1);

      for (float i = 0; i <width; i++) {
        float xWert = map(i, 0, width, 4, -4);
        float yWert = parabel(xWert);
        yWert = map(yWert, 8, -8, 150, 450);

        point(i, yWert);
        println("i:"+i,"yWert:"+yWert, "xWert:"+xWert);
      }
    }

    float parabel(float x) {
      float r;
      r = x*x;
      return r;
    }

Best regards Nuss

kfrajer

One solution for your first code: Add these next lines in draw.

Kf

  translate(0,height);
  scale(1,-1);

Nuss

Hi kfrajer, with translate() and scale() Ive also solved it. But according to my professor it isnt the right solution because we didnt have these topic.

Chrisir

it must be upside down since the 0,0 of processing is upper left corner and not lower left corner as in math

try height - value

koogs

yWert = map(yWert, 8, -8, 150, 450);

Can you explain these values?

koogs

You can also flip the graph by changing the output values in the map()...

Chrisir

Nuss is not allowed to use map

Nuss

Hello koogs, ive already used map like these yWert = map(yWert, 0, 16, height, 0); But at the end it's the same. @ Chrissir: What do you mean with height - value?

Ive found a solution but am sure there is a more elegant one.

void setup() {
  size(301, 301);
  noLoop();
  background(0);
}

void draw() {

  strokeWeight(3);
  stroke(#66C1FC);
  line(0, 300, 300, 300);
  stroke(#F55719);
  line(150, 0, 150, 300);
    //translate(0, height);
    //scale(1, -1);
  stroke(255);
  strokeWeight(1);
  for (float i =0; i <width; i++) {
    float xWert = 4;
    xWert=xWert-i/37.625;
    float yWert = height-parabel(xWert)*18.8125; // No other way???
    point(i, yWert);
    println("i:"+i, "yWert:"+yWert, "xWert:"+xWert);
  }
}


float parabel(float x) {
  float r;
  r = x*x;
  return r;
}

Greets Nuss

koogs

sorry, was thrown by him using it in the code, i skimmed the text...

https://en.wikipedia.org/wiki/Linear_interpolation

^ this is pretty much what map does under the covers. but i see little value in making them rewrite map like this.

Chrisir

void setup() {
  size(301, 301);
  noLoop();
  background(0);
}

void draw() {
  strokeWeight(3);
  stroke(#66C1FC);
  line(0, 300, 300, 300);
  stroke(#F55719);
  line(150, 0, 150, 300);
  //translate(0, height);
  //scale(1, -1);
  stroke(255);
  strokeWeight(1);
  float xWert = -4;
  float step = 8.0/width; 
  // loop from left to right     
  for (float i = 0; i < width; i++) {
    xWert += step;  // I modified this !!!!!!!!!!!!!!!!
    float yWert = height - parabel(xWert) * 18.8125; 
    point(i, yWert);
    println("i:"
      +i 
      +", yWert:"
      +yWert 
      +", xWert:"
      +xWert);
  }
}

float parabel(float x) {
  float r;
  r = x*x;
  return r;
}

Nuss

Thanks guys you helped me a lot

koogs

18.8125

???