Adding a Button

peterfarrell66

Hello! I'm trying to add a button to my 3-Gear Spirograph model but I get an error message: TypeError: fxn.bind is not a function. The sliders work so I have p5.dom.js in the right place. Can anybody help?

Peter

Here's my code:

var R = 275;// radius of big circle
var r = 203;//radius of circle 2
var r3 = 151;//radius of circle 3
var theta = 0;
var p = .8;//proportion of little circle
var trail = false;
var rSlider,r3Slider,button;

function setup(){
  createCanvas(600,600);
  background(0);
// create sliders
  rSlider = createSlider(0, 255, 100);
  rSlider.position(20, 20);
  r3Slider = createSlider(0, 255, 0);
  r3Slider.position(20, 50);
  button = createButton('Show Trail');
  button.position(20, 80);
  button.mousePressed(trail);
  }

function draw(){
frameRate(10);
 var r = rSlider.value();
  var r3 = r3Slider.value();

  if (!trail){
  background(0);
  }
  fill(255);
  textSize(16);
  text("radius of circle2", 180, 20);
  text("radius of circle3", 180, 50);
  fill(255,0);//transparent
  translate(width/2,height/2); //to center of big circle
  stroke(255);
  if (!trail){
  ellipse(0,0,2*R,2*R); //draw big circle
  }
  rotate(theta); //rotate to angle of circle2
  translate(R - r,0); //go to center of circle2
  if (!trail){
  ellipse(0,0,2*r,2*r); //draw little circle
  }
  var phi = -R/r*theta;//angle of rotation of circle 2
  rotate(phi); //rotate phi
  fill(255,0);
  translate(r - r3,0); //go to center of circle 3
  if (!trail){
  ellipse(0,0,2*r3,2*r3); //draw little circle
  }
  var angle3 = -r/r3*phi;//angle of rotation of circle 3
  rotate(angle3);
  line(0,0,p*r3,0);//draw using just this! cool.
  translate(p*r3,0);
  fill(255,0,0);
  ellipse(0,0,2,2);//or point(...
  theta += 0.05;
  }

  function trail(){
  var trail = true;
  }

blindfish

You have a naming clash, and need to better understand scope: var trail and function trail() are in the same scope and that's the likely cause of your problem. How about calling your function setTrail()? You'll then have to remove the 'var' in front of 'trail' in that function; otherwise you're creating a variable local only to the function; and not setting the value of the trail variable at the root of your sketch.

peterfarrell66

Thanks! That cleared that up.