Draw function not looping

I’m having issues with the draw function and I’m not sure whats causing them

``````
var theta = 0
var xcoor = 0
var ycoor = 0
var xint1 = 0
var xint2 = 0
var yint1 = 0
var yint2 = 0
var r = 10

function setup() {
createCanvas(1000, 401);
grid(10);
drawWords(401/2 +10, 401/2+3)
noFill()
angleMode(degrees);
text("theta=" + nf(theta,0,2), width / 2, height / 2);

}

function draw() {

grid(10);
background(255);
mousePressed();
theta -= PI / 360
theta %= 2 * PI
fill(255);
text("theta=" + nf(-theta * 180 / PI,0,2), msX-20, msY);

}

function polygon(x, y, radius, npoints, theta) {
strokeWeight(3)
var angle = TWO_PI / npoints;
beginShape();
for (var a = theta; a < TWO_PI + theta; a += angle) {
var sx = x + cos(a) * radius;
var sy = y + sin(a) * radius;
vertex(sx, sy);

}

endShape(CLOSE);
}

function grid(step) {
background(255);
strokeWeight(2);
line(401 / 2, 0, 401 / 2, 401);
line(0, 401 / 2, 401, 401 / 2);

strokeWeight(1);
for (var i = 0; i <= 400; i += step) {
line(0, i, 400, i);
line(i, 0, i, 400);
}

}

function mousePressed() {
grid(10);
drawWords(401/2 +10, 401/2+3);
noFill();
polygon(msX, msY, r, 30, theta);
var msX = mouseX
var msY = mouseY

fill(100);
fill(0);
fill(255);
text("theta=" + nf(-theta * 180 / PI,0,2), msX-20, msY);
fill(0);
var xcoor = (msX / 10) - 20
var ycoor = -(msY / 10) + 20
var xint1 = xcoor + sqrt((r*r)-(ycoor*ycoor))
var xint2 = xcoor - sqrt(r*r-ycoor*ycoor)
var yint1 = ycoor + sqrt(r*r-xcoor*xcoor)
var yint2 = ycoor - sqrt(r*r-xcoor*xcoor)
if(ycoor+r > (2*r) || ycoor-r < (-2*r)){
xint1 = "none"
xint2 = "none"
}
if(xcoor+r > (2*r) || xcoor-r < (-2*r)){
yint1 = "none"
yint2 = "none"
}
fill("red")
if(xint1<500){
ellipse((xint1+20)*10,401/2,10,10)
}
if(xint2<500)
ellipse((xint2+20)*10,401/2,10,10)

if(yint1<500)
ellipse(401/2,(yint1-20)*-10,10,10)
if(yint2<500)
ellipse(401/2,(yint2-20)*-10,10,10)

text("Center=("+nf(xcoor,0,2)+","+nf(ycoor,0,2)+")", 420, 15)
text("parametric: x ="+nf(xcoor,0,2)+"+"+r+"cos(t), y="+nf(ycoor,0,2)+"+"+r+"sin(t)", 420,55)
text("x-intercepts:"+nf(xint1,0,2)+"and"+nf(xint2,0,2), 420, 70)
text("y-intercepts:"+nf(yint1,0,2)+"and"+nf(yint2,0,2), 420, 85)
if(xcoor>=0 && ycoor>=0)
text("(x-"+nf(xcoor,0,2)+")^2 + (y-"+nf(ycoor,0,2)+")^2 = r^2",420,40)

else if(xcoor>0 && ycoor<0)
text("(x-"+nf(xcoor,0,2)+")^2 + (y+"+nf(ycoor,0,2)+")^2 = r^2",420,40)
else if(xcoor<0 && ycoor>0)
text("(x+"+nf(xcoor,0,2)+")^2 + (y-"+nf(ycoor,0,2)+")^2 = r^2",420,40)
else
text("(x+"+nf(xcoor,0,2)+")^2 + (y+"+nf(ycoor,0,2)+")^2 = r^2",420,40)

}

function drawWords(y,x) {

fill(0);
text("2", 215, y);
text("4", 235, y);
text("6", 255, y);
text("8", 275, y);
text("10", 295, y);
text("12", 315, y);
text("14", 335, y);
text("16", 355, y);
text("18", 375, y);
text("0", 195, y);
text("-2", 175, y);
text("-4", 155, y);
text("-6", 135, y);
text("-8", 115, y);
text("-10", 95, y);
text("-12", 75, y);
text("-14", 55, y);
text("-16", 35, y);
text("-18", 15, y);

text("-2", x, 225);
text("-4", x, 245);
text("-6", x,265 );
text("-8", x, 285);
text("-10", x, 305);
text("-12", x, 325);
text("-14", x, 345);
text("-16", x, 365);
text("-18", x, 385);
text("2", x, 185);
text("4", x, 165);
text("6", x, 145);
text("8", x, 125);
text("10", x, 105);
text("12", x, 85);
text("14", x, 65);
text("16", x, 45);
text("18", x, 25);

}
``````

It’s unusual that someone would call `mousePressed()` from inside `draw()`.

Can you rework your code so you aren’t doing that?

Put all the data you need to know what to draw in global variables.

If that data needs to change in `mousePressed()`, then change it.

In `draw()`, draw everything based on the global data. Do all your drawing in `draw()`!

I removed the line “mousePressed()” from inside draw(), and everything is working the same as before. But the draw function is still not looping. Are the other functions interfering?

After some more testing, it seems there is some issue from this line of code:

``````text("theta=" + nf(-theta * 180 / PI,0,2), msX-20, msY);
``````

What is the issue with it?

Seems to work fine after doing the following …

Remove mousePressed() from draw.

Declare `msX` and `msY`.

You already declared several of your variables globally, no need to declare them again in `mousePressed()’

Move everything currently inside `function mousePressed(){...}` into it’s own function, then call that function in draw.