Not showing up

[hayliesunshine]

So I obviously haven't finished the wing, but I need some help figuring out why nothing is showing up except for my background in the browser. Does anyone know what's wrong with my code?

//Flying Bird

function setup() { createCanvas(windowWidth, windowHeight); }

let headAngle = 0; let headRotationRate = 60; let headWidth = 80; let headHeight = 80; let yPosition = mouseY; let xPosition = 0.25

function draw() { //erase every frame background( 'rgb( 135, 206, 250)'); //turn the cursor off noCursor();

//update values // base head angle on rotation headRotationRate headAngle = headAngle + headRotationRate;

//bird sandbox

push();

//make the bird move right and on mouseY translate( xPosition + 1, yPosition);

//body fill ( 'rgb(169, 169, 169)' ); noStroke(); //end body pop();

push(); //head fill ( 'rgb(169, 169, 169)'); noStroke(); //rotate head based on headAngle rotate( radians(headAngle) ); //draw head ellipse( 0, 0, headWidth, headHeight ); noStroke();

//eyes strokeWeight(2); push(); //draw eyes based on head size translate( headWidth -0.2, headHeight -0.2); ellipse( 0, 0, headWidth 0.33, headHeight 0.33); noStroke(); fill( 'rgb(255, 255, 255)'); ellipse( 0, 0, 5); ellipse ( 0, 0, 10); pop(); push(); translate( headWidth 0.2, headHeight -0.2); ellipse( 0, 0, 20 ); noStroke(); fill( 'rgb(0)'); ellipse( 0, 0, 10); ellipse( 0, 0, 5); pop();

//beak push(); fill( 'rgb( 200, 80, 0)' ); triangle (40, 20, 80, 0, 40, -20 ); pop(); //end head

// wing push(); fill( 'rgb(110, 110, 110)' ); stroke(2); triangle( )

[phearsomm]

Your variables have to be defined globally so put them before your function setup() line.your variables won’t work right u less first defined before the sketch outside of a function.

[hayliesunshine]

I just made that change, but it still isn't showing up.

[cassadys]

Maybe if you use mouseY instead of the yPosition variable that would help, not sure though. Looks like your variables are defined after the setup function, don't know if you have moved them yet.

https://cassadys.github.io/120-work/hw-5/sketch.js : here is my code if that might help

On Thu, Sep 27, 2018, 00:30 Haylie Peacock notifications@github.com wrote:

I just made that change, but it still isn't showing up.

— 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/153#issuecomment-424974182, or mute the thread https://github.com/notifications/unsubscribe-auth/Ao1K1cGtZVdU-KoZewe7Vo4vWTCn59TUks5ufHCQgaJpZM4W78Uz .

[spkvfx]

Hi Haylie!

there's a few things I am noticing.

First, your draw() function does not have a closing bracket, and your last triangle() does not have any parameters.

You also have some unterminated statements, so make sure that you include semicolons at the end of each statement. Fixing this will get you your background, but your bid is still off-canvas.

Second, your main push() that set's the bird's position has a pop() before you actually draw anything, so your main 'translate()' isn't actually translating any shapes. Move this pop() to the end.

Now, your variable scopes. I like to initialize all the global variables without any value at the very top, above the setup() function, and establish the default values in setup().

//Flying Bird

//initialize variables
let headAngle;
let headRotationRate;
let headWidth;
let headHeight;
let yPosition;
let xPosition;

function setup() {
    createCanvas(windowWidth, windowHeight);

    headAngle = 0;
    headRotationRate = 60;
    headWidth = 80;
    headHeight = 80;
}

Remember that built-in p5 variables like mouseX and mouseY must be within a p5 function. Because mouse position needs to be updated, it must be within the draw() function:

function draw() {
    yPosition = mouseY;
    xPosition = mouseX ;
//erase every frame
    background('rgb( 135, 206, 250)');
//turn the cursor off
    //noCursor();

//update values
// base head angle on rotation headRotationRate
    headAngle = headAngle + headRotationRate;

Now, the sandbox issues. Due to the annoyingness of processing, I like to indent my push() and pop() functions. It's easier to keep track of this way. I changed the mouse tracking for debugguing.

    push();

        //make the bird move right and on mouseY
        translate(xPosition, yPosition);

        //body
        fill('rgb(169, 169, 169)');
        noStroke();

[...]

        //beak
        push();
                fill('rgb( 200, 80, 0)');
                triangle(40, 20, 80, 0, 40, -20);
        pop();
       //end head

       // wing
        push();
                fill('rgb(110, 110, 110)');
                stroke(2);
                //triangle() ;
        pop();
    pop();
}

Once you get that squared away, you should be in a better position.

[hayliesunshine]

@spkvfx Thanks so much for your help! My code now looks like the following:

//Flying Bird

var headAngle; var headRotationRate; var headWidth; var headHeight; var yPosition; var xPosition;

function setup() { createCanvas(windowWidth, windowHeight); } headAngle = 0; headRotationRate = 60; headWidth = 80; headHeight = 80;

function draw() { yposition = mouseY; xPosition = 0.25; //erase every frame background( 'rgb( 135, 206, 250)'); //turn the cursor off noCursor();

//update values // base head angle on rotation headRotationRate headAngle = headAngle + headRotationRate;

//bird sandbox

push();

//make the bird move right and on mouseY
translate( xPosition + 1, yPosition);

push();
  //body
  fill ( 'rgb(169, 169, 169)' );
  noStroke();
  //end body

push();
  //head
  fill ( 'rgb(169, 169, 169)');
  noStroke();
  //rotate head based on headAngle
  rotate( radians(headAngle) );
  //draw head
  ellipse( 0, 0, headWidth, headHeight );
  noStroke();
pop();

//eyes
strokeWeight(2);
push();
  //draw eyes based on head size
  translate( headWidth * -0.2, headHeight * -0.2);
  ellipse( 0, 0, headWidth * 0.33, headHeight * 0.33);
  noStroke();
  fill( 'rgb(255, 255, 255)');
  ellipse( 0, 0, 5);
  ellipse ( 0, 0, 10);
pop();

push();
  translate( headWidth * 0.2, headHeight * -0.2);
  ellipse( 0, 0, 20 );
  noStroke();
  fill( 'rgb(0)');
  ellipse( 0, 0, 10);
  ellipse( 0, 0, 5);
pop();

//beak
  push();
  fill( 'rgb( 200, 80, 0)' );
  triangle (40, 20, 80, 0, 40, -20 );
pop();
//end head

// wing
push();
  fill( 'rgb(110, 110, 110)' );
  stroke(2);
pop();

pop();

My bird is now showing up, but it is still stationary and not fully on screen. Do you know how I can fix this?

[spkvfx]

Ok. I think I have it debugged.

First, you still should have a close backet at the end of draw(). You also have xPosition mistyped as xposition.

You are right to add one to xPosition, but this will not accumilate since you're not setting the variable to the new value; rather you're just reading what's there, and adding 1 over and over. What you want to do is accumulate 1 on every loop:

So what you'll need is:

xPosition = xPosition + 1 ;
translate(xPosition, yPosition);

which is the same as this:

xPosition += 1 ;
translate(xPosition, yPosition);

or this:

xPosition++ ;
translate(xPosition, yPosition);

or just do it all within translate():

translate(xPosition++, yPosition);

However, this will not work unless you also move the default value for xPosition outside of draw(), otherwise it will just reset to 0.25 at every frame. Remember Setup() runs once at the start, and draw() repeats on every frame (See below)

Next, you still have an extra push();

push();
  //body
  fill ( 'rgb(169, 169, 169)' );
  noStroke();
  //end body

push(); 

Remove this last push()

Also if you're going to use my convention with initializing gobals without any value, then you should set your values in the setup() function. It'll work either way, but if you needed a built-in variable, you'll have to have it in there. This isn't any kind of strict requirement, but it's a bit cleaner this way - at least in my opinion.

var headAngle;
var headRotationRate;
var headWidth;
var headHeight;
var yPosition;
var xPosition;

function setup() {
    createCanvas(windowWidth, windowHeight);

    xPosition = 0.25;

    headAngle = 0;
    headRotationRate = 60;
    headWidth = 80;
    headHeight = 80;
}

[hayliesunshine]

Thanks so much for all of your help, @spkvfx !!!

[spkvfx]

@hayliesunshine No problem! Were you able to get it to work?

[hayliesunshine]

Everything is working now, except for that it is not rotating. I tried changing around the head rotation rate and head angle, but I haven't been able to figure it out yet. @spkvfx