This is my first pass at plotting tangents and normals.

Starting with a sine wave and will modify to work with any curves focusing on mathematical plots.

I have yet to deal with length of tangent and length of normal; just using a an “offset” for now and lengths will vary depending on slope.

Suggestions welcome.

I prefer hints and tips to a “canned” solution with complete code.

I do not want to use a library but may want to glean code for insight.

```
float theta = 0;
int cycles = 4; // # cycles to display
float x = 0, y = 0;
float w = width;
float xScale; //used to scale across x axis; only used for plotting!
float yScale; //these will distort tangents and normals if no the same
float m1, m2;
float offset;
float amp;
float x1, y1, xa, ya, xb, yb;
void setup()
{
size(1280, 1024, P3D);
background(0);
// ortho();
}
void draw()
{
background(0);
translate(0, height/2);
stroke(64);
strokeWeight(2);
line(0, 0, width, 0);
xScale = 100;
yScale = 100;
amp = 3;
// Sine wave plot
for (x = 0; x <= cycles*TWO_PI; x+=TWO_PI/width)
{
stroke(255, 0, 0);
y = sin(x);
point(xScale*x, yScale*y);
}
for (x = 0; x <= cycles*TWO_PI; x+=TAU/16) // Try /8 /16 etc. here
{
x1 = x;
y1 = sin(x);
offset = PI/32;
// Tangent ******************************************************************
m1 = cos(x);
// First point
xa = x + offset;
ya = m1*(xa-x1) + y1;
// Second point
xb = x - offset;
yb = m1*(xb-x1) + y1;
stroke(0, 255, 0);
line(xScale*xa, yScale*ya, xScale*xb, yScale*yb);
// Normal *******************************************************************
m2 = -1/m1;
// First point
xa = x + offset;
ya = m2*(xa-x1) + y1;
// Second point
xb = x - offset;
yb = m2*(xb-x1) + y1;
stroke(255, 255, 0);
line(xScale*xa, yScale*ya, xScale*xb, yScale*yb);
}
}
```