Unit 3, Lesson 13

CS Discoveries Coding and Debugging Help
1

Project

The student wants a star to appear randomly on the screen every time the program is run.

If she places the ellipse block before the draw function, it is covered by the background. If she places it in the draw function block, the star moves all over the place. If she places it outside the draw function block, it doesn’t draw at all.

In the random number exercises, students learned to use random numbers so an ellipse would show up at a different spot every time you ran the program. This is what she is trying to replicate.

2

Remember the order of things matters in Game Lab
If something is drawn before the drawloop, then anything in the draw loop will cover it.
Think art class, if the student in the earlier class drew a star on paper, but in the next class the student is told to paint a house on that same piece of paper, the star will be covered and forgotten about.
In the drawloop the order is;
Background
Element 1 - circle
Element 2 - Star.x randomNumber
Element 2 - Star.yrandomNumber
Drawsprites

see if this helps

3

The student can’t draw the ellipse inside the draw loop or it animates the star. The ellipse needs to be a stationary object that appears at a random spot on the screen when the program is run.

4

@skschiltz,

What if they were to create two variables outside the draw loop, starX and starY.

This would generate a random position one time.

Then, inside the draw loop, create the ellipse using those variables as the x and y coordinates.

This should solve the problem and put the star in a random position each time the program is run.

Mike

6

Greetings @skschiltz,

if I’m understanding correctly wouldn’t it be better to show her how to generate an object @mwood? I’ll provide the following snippet below

var star = {
  x: randomNumber(1, 400),
  y: randomNumber(1, 400),
  w: 10,
  h: 10,
  // this function is optional you can do it another way
  display: function() {
    fill(255);
    ellipse(this.x, this.y, this.w, this.h)
  }
};

by using it this way you should show how the basis of sprites work as they are just a glorified class of properties used to make basic physics and animation to the game, also this is to be declared with the group of sprites you’ve created outside of the array however, you may need to slightly change how you draw the sprite which there are some ways of going about it I’ll share two that I like the most though

// Loop starts Here!
function draw() {
 // Example #1
 fill("white");
 ellipse(star.x, star.y, star.w, star.h);
 // Example #2
 star.display();
}

hopefully this resolves your issue, though if your just starting out I’d much more reccomend @mwood’s suggestion rather than showing them a completely new concept as they were looking for a solution that they could understand anyways best of luck!

7

@varrience ,

your solution is a very good one, but a little outside the scope of the CSD lessons.

Also, it would require the students to leave block mode. That’s great when they are ready, but as you mention, if they are beginners and are trying to create just the one star, the simplest approach may be the best.

I do like seeing your creative approaches to the problems, though. I have learned a thing or two myself from your posts.

Thanks!

Mike

8

Thank you, Mike! The star x and y variable is something my student understands and is able to do.

9

So happy that helped!