Uncaught Reference Error

[hayliesunshine]

I am getting this error message in the console when I try to view my sketch on the browser:

sketch.js:4 Uncaught ReferenceError: ellipse is not defined
at sketch.js:4
(anonymous) @ sketch.js:4
sketch.js:32 Uncaught TypeError: Cannot set property 'locX' of undefined
at setup (sketch.js:32)
at e. (p5.min.js:7)
at e. (p5.min.js:7)
at new e (p5.min.js:7)
at e (p5.min.js:7)

Here is my code:

//defining giant circle
var constraint = {};
//assigning qualities to constraint
constraint.shape = ellipse( 0, 0, width/2, height/2);

//defining ring variable
//instantiating the variable as an object
var ring = {};

//assigning qualities to the object
ring.bigSize = 60;
ring.smallSize = 40;
ring.locX = 0;
ring.locY = 0;
ring.red = floor( random(256) );
ring.green = ('0');
ring.blue = floor( random(256) );
ring.greenSmall = floor( random(100) );

function setup() {
//createCanvas
createCanvas(windowWidth, windowHeight);
//set frame rate
frameRate(16);
//black background
background ( '0' );

constraint.shape = ellipse( 0, 0, width/2, height/2);

//starting position for ring in center of screen
ring.locX = width/2;
ring.locY = height/2;

}

function draw() {
//map function
var circleStroke = map( mouseX %3, 0, width, rgb(0, 255, 0), rgb(255, 255, 0) );

//properties of enclosing circle
noFill();
stroke(circleStroke);



//draw the ring
//position at ring location
draw(constraint);
translate( ring.locX, ring.locY);

//fill color for big ring
fill( rgba( ring.red, ring.green, ring.blue) );
//set stroke to none
stroke(0);
//draw large circle
ellipse(ring.locX, ring.locY, ring.bigSize);

//fill color for small circle
fill( rgba( ring.red, ring.greenSmall, ring.blue) );
//draw small circle
ellipse( ring.locX, ring.locY, ring.smallSize);

//update pos
ring.locX += random(width, height);
ring.locY += random(width, height);

}

What my code is supposed to do is have a circle that fills the screen to touch each edge of the canvas, but that has no fill. The background is black, and the stroke of the giant circle is a color (green-yellow) that depends on where the mouseX position is. Inside is an algorithm that generates rings (two ellipses stacked on each other) with some opacity. The larger circles should have a random blue-purple color, and the smaller ones should have a random blue-green color. They should also be appearing randomly. Can anyone look at my code and see what I'm doing wrong? I haven't been able to figure out what those error messages are trying to get me to do.

Thanks!

[hayliesunshine]

[cassadys]

I think the highlighted text should be: 0, 255 instead of the rgb entries Not sure if the way you have it is alright or not, hope you get it working!

…

On Thu, Oct 4, 2018, 01:35 Haylie Peacock ***@***.***> wrote: [image: capture] <https://user-images.githubusercontent.com/42792278/46459323-ca10cd80-c775-11e8-994c-61f2e4720c11.JPG> [image: capture2] <https://user-images.githubusercontent.com/42792278/46459328-cf6e1800-c775-11e8-8a10-1886ed457c70.JPG> — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#166 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/Ao1K1Vl2idof9QMiqJQSwCRoHZpVnUNhks5uhbpYgaJpZM4XHfKr> .

[spkvfx]

I could be wrong, but I think you're thinking of using a color() object, not rgb(). afaik, rgb() is not defined.

Nonetheless, I do not think you can use map() quite way; as @cassadys points out, map() is looking for single value to map to and from. Fortunately, you're only varying the red value, so you can just do this:

var red = map( mouseX %3, 0, width, 0, 255 );
var circleStroke = color(red,255,0) ;

Would you mind explaining what this is?

draw(constraint);