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 notifications@github.com 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 https://github.com/Montana-Media-Arts/120_CreativeCoding/issues/166#issuecomment-426915562, 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);