How to draw a sine and cosine wave?

Tedballin

Hi, I am new to Processing, our instructor asks us to make a graphic calculator, and I just don't have a clue how to draw the trig graph. (I am thinking for loops and while loops, but I am not sure if that's the right approach) how does the sin(x) work in the code actually? Thank you in advance.

Ater

There's an example.

Tedballin

Thank you, Ater. I tried to make a solid curve, here's my code, but I think some of them are not ideal or appropriate code....

 void setup() {
 size(400,400);
 smooth();

}

void draw() {
  background(255);

  translate(width/2,height/2);
  noFill();
  rectMode(CENTER);
  rect(0,0,200,100);
  line(-100, 0, 100, 0);
  line(0, -50, 0, 50);


  fill(0);
  text("0", 0, 10); 
  text("-1", -100, 10);
  text("1", 90, 10);
  text("-1", 0, 50);
  text("1", 0, -40);


  rectMode(CORNER);
  fill(255);
  rect(0, 60, 40, 20); // buttons
  rect(0, 90, 40, 20);
  rect(0, 120, 40, 20);
  rect(0, 150, 40, 20); 

  fill(0);
  text("sin(X)", 5, 75); 
  text("cos(X)", 5, 105);
  text("tan(X)", 5, 135);
  text("| X |", 10, 165);
}

void mousePressed() { if(mouseX > width / 2 && mouseX < width / 2 + 40
     && mouseY > height / 2 +60 && mouseY < height /2 + 80) {


      pushMatrix();
      noFill();
      beginShape();
      for(float i= -1; i < 1 ;i+=0.01) {
      vertex(map(i, -200, 200, -100, 100)*200, 
             - map((sin(i)*200), -200, 200, - 50, 50));
      }
      endShape();
      popMatrix();
     }

   else if (mouseX > width / 2 && mouseX < width / 2 + 40
     && mouseY > height / 2 + 90 && mouseY < height /2 + 110) {

      translate(0, 1);
      pushMatrix();
      noFill();
      beginShape();
      for(float i= -1; i < 1 ;i+=0.01) {
      vertex(map(i, -200, 200, -100, 100)*200, 
             - map((cos(i)*200), -200, 200, - 50, 50));
      }
      endShape();
      popMatrix();
  }

  else if(mouseX > width / 2 && mouseX < width / 2 + 40
     && mouseY > height / 2 + 120 && mouseY < height /2 + 140) {


      pushMatrix();
      noFill();
      beginShape();
      for(float i= -1; i < 1 ;i+=0.01) {
      vertex(map(i, -200, 200, -100, 100)*200, 
             -  map(tan(i), -200, 200, -30, 30)* 200);
      }
      endShape();
      popMatrix();
  }

    else { if(mouseX > width / 2 && mouseX < width / 2 + 40
     && mouseY > height / 2 + 150 && mouseY < height /2 + 170) {


      pushMatrix();
      noFill();
      beginShape();
      for(float i= -1; i < 1 ;i+=0.01) {
      vertex(map(i, - 200, 200, -100, 100) * 200,
            - map(abs(i), -200, 200, -50, 50) * 200);
      }
      endShape();
      popMatrix();     
        }
      }
    }

TfGuy44

:((

https://forum.processing.org/two/discussion/8045/how-to-format-code-and-text#latest

Tedballin

Thanks TfGuy44, I've fixed the code format. One question, how do I make the graph staying after I click the mouse, and replace it by new graph when I click the next button?

TfGuy44

Well, now that I can copy, paste, and run your code without the nightmare that it was before, I can see what the problem is.

You're doing your function-drawing inside mousePressed(). But whatever functions you draw are just going to get wiped away when the next frame is drawn by draw().

What you need to do is add some booleans that track which functions should be drawn. When the user clicks a button, set those booleans to true or false depending on which button was pressed.

Then just draw all the functions, but conditionally, based on if the relevant boolean is true.

TfGuy44

boolean red, yellow, green, blue;

void setup(){
  size(200,200);
}

void draw(){
  // Draw background colors.
  fill(255,0,0);
  rect(0,0,100,100);
  fill(255,255,0);
  rect(100,0,100,100);
  fill(0,255,0);
  rect(0,100,100,100);
  fill(0,0,255);
  rect(100,100,100,100);

  // Draw conditional things.
  fill(0);
  if(red) rect(20,20,60,60);
  if(yellow) rect(120,20,60,60);
  if(green) rect(20,120,60,60);
  if(blue) rect(120,120,60,60);
}

void mousePressed(){
  int mx = mouseX-100;
  int my = mouseY-100;

  if(mx<0 && my<0) red = !red;
  if(mx>0 && my<0) yellow = !yellow;
  if(mx<0 && my>0) green = !green;
  if(mx>0 && my>0) blue = !blue;
}

Here's an example for you.

Chrisir

OR since only ONE of them red, yellow, green, blue; can be true at one time you might as well say (before setup())

final int showSin  =0; // constants 
final int showCos =1; // values must be unique
final int showTan =2; 
final int showX     =3; 
int currentShow = showSin; // variable 

and then in draw()

switch (currentShow) {
    case showSin; 
    //
    break;

    case showCos:
    //
    break; 

    case showTan:
    //
    break; 

    case showX:
    //
    break; 

    default: 
    // ERROR
    println ("unknown show value : " + currentShow); 
    exit();
    break; 

} // switch 

Tedballin

Thank you guys, I really appreciate the responses.