Draw function not looping

p5.js Coding Questions
1

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
var radius = 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);
    polygon(msX, msY, radius, 100, theta);
    fill(0);
     polygon(msX, msY, radius,3, theta);
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);



}
2

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()!

3

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?

4

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?

5

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.