#### Howdy, Stranger!

We are about to switch to a new forum software. Until then we have removed the registration on this forum.

#### In this Discussion

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);
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;
}
``````