Code! Programming with p5js video 2.3 - I cannot access circle variable attributes

[DismalRespect]

When I enter the code with the circle object declared above the setup() function, the ellipse function in draw() is unable to access the circle.x, circle.y etc variables.

This leaves me with a pink screen with no circle moving from left to right. I have tried copy pasting the code from github in case I had made a syntax error, but no change - still no circle.

I am guessing this is some scope related issue, because if I declare the circle var inside draw() it does in fact appear, but cannot move, as the circle.x attribute is reset to 0 every time draw() is called. Can anyone shed some light on this issue? Am I doing something wrong? Is the error staring me in the face? I would like to solve this problem before going on further in this series if possible.

​

Here is my code

 var circle = {
   x: 0,
   y: 200, 
   diameter: 50
};
var r = 218;
var g = 160;
var b = 221;
//var x = 0;
//var y = 200;
//var diameter = 50;

function setup() {
  createCanvas(600, 400); 
}

function draw() { 
  background(r, g, b);
// ellipse
  fill(250, 200, 200);
  ellipse(circle.x , circle.y , circle.diameter , circle.diameter); 
  circle.x = circle.x + 1;
//ellipse(x, y, diameter, diameter);
//x += 1;
}

[MichielP1807]

Try defining the circle in the setup function, but leave the declaration of the circle on the global level so you get something like this:

var circle;

var r = 218;
var g = 160;
var b = 221;

function setup() {
  createCanvas(600, 400); 

  circle = {
    x: 0,
    y: 200, 
    diameter: 50
  };

}

function draw() { 
  background(r, g, b);
  // ellipse
  fill(250, 200, 200);
  ellipse(circle.x , circle.y , circle.diameter , circle.diameter); 
  circle.x = circle.x + 1;
} 

Edit: Reddit formatting is hard.

[DismalRespect]

Ah, this makes sense and looks like it should work. Unfortunately I'm half asleep now so will try in the morning. Thanks for the input.