having a trail from my snake

thirdtimesa · May 2015

Hi, i'm creating a slightly different version of snake where everytime the food is eaten, the speed increases. However, i would like to Jazz it up a bit and add a trail that fades coming from the snake. I've tried adding a 4th number to my rect so that it would be transparent and fade but that doesn't work. Any suggestions? Here is my code. Thanks

Snake snake;

int headx;
int heady;
int size = 20;
int speed = 10;
char direction;
boolean foodEaten;
int eatx;
int eaty;
int snakesize = 1;
int fps = 5;
PImage background;
int highScore;

void setup() {
  size(1900, 1000);
  rectMode(CENTER);
  smooth();
  foodEaten = false;
  eatx=(round(random(90))+1)*10;
  eaty=(round(random(70))+1)*10;
  snake = new Snake();
  background = loadImage("Tron background.jpg");
}

void draw() {
  background(background);
  frameRate(fps);
  displayFood();
  snake.display();
  checkCollision();
  drawScoreboard();
}

void drawScoreboard() {
  //draw scoreboard
  fill(#FFB2B2);
  textSize(30);
  text("Score: " + highScore, 800, 400);
  fill(#FFB2B2);
  textSize(40);
  text("High Score:" + highScore, 800, 500);
}


void displayFood() {
  fill(#E3D250);
  ellipse(eatx, eaty, size, size);
}

void checkCollision() {
  if (snake.headx == eatx && snake.heady == eaty) {
    eatx=(round(random(90))+1)*10;
    eaty=(round(random(60))+1)*10;
    foodEaten = true;
    fps += 5;
  } 
  else {
    foodEaten = false;
  }
}

void keyPressed() {
  if (key == 'w') { //UP
    direction = 'w';
  } 
  else if (key == 'a') { //LEFT
    direction = 'a';
  } 
  else if (key == 's') { //DOWN
    direction = 's';
  } 
  else if (key == 'd') { //RIGHT
    direction = 'd';
  }
}

class Snake {

  int headx;
  int heady;
  int snakesize;

  Snake() {
    headx = width/2;
    heady = height/2;
    snakesize = 1;
  }

  void display() {
    fill(#87D9E3);
    noStroke();
    rect(headx, heady, size, size);
    checkMove();
    borders();
    checkCollision();
  }

  void moveUp() {
    heady -=speed;
  }
  void moveLeft() {
    headx -=speed;
  }
  void moveDown() {
    heady +=speed;
  }
  void moveRight() {
    headx +=speed;
  }

  void checkMove() {
    if (direction == 'w') {  // Move up
      snake.moveUp();
    } else if (direction == 'a') { // Move left
      snake.moveLeft();
    } else if (direction == 's') { // Move down
      snake.moveDown();
    } else if (direction == 'd') { // Move right
      snake.moveRight();
    }
  }

  void borders() {
    if (headx > width) {
      //headx=0;
      exit();
    } else if (headx < 0) {
      //headx = width;
      exit();
    } else if (heady > height) {
      //heady = 0;
      exit();
    } else if (heady < 0) {
      //heady = height;
      exit();
    }
  }
}

KevinWorkman · May 2015

Can you be more specific- what exactly do you mean by "it doesn't work"? Can you narrow it down to an MCVE? If you're just asking about a single function, then all we need to see is a sketch that uses that single function.

I don't see anywhere in this code that uses an alpha value.

GoToLoop · May 2015

Some online examples w/ fade effects: :D

blindfish · May 2015

I don't find either of these responses especially constructive: linking to code doesn't provide much direction. The linked examples don't appear to come with any explanation either (at least not anything that directly answers the OP's question) and there's a lot of complex (to a beginner) optimisation in the loops. It's not fair to assume that everyone can infer the answer from just raw code; and they may learn very little by copy-pasting.

This is also a simple enough problem that some general strategies can be given without the need for a simplified example; and the OP has already stated that their attempt to add an alpha value led nowhere...

So, two possible avenues of exploration I'd suggest:

Instead of a background image, try filling background with a semi-transparent colour each frame. A semi-transparent image might work too; but might not be quite the effect you're looking for. You'll also quickly find one drawback with the above is that it applies to everything and not just the snake; so you could draw it to a separate image layer; fading the background each frame and add this over the top.
create a trail dynamically; storing an array of previous points and drawing to these each frame.

KevinWorkman · May 2015

I'm asking for an MCVE because I can't run your code. I don't have access to the background image, for example. If your background image has nothing to do with your problem, then take it out- that's all an MCVE is. After all, shouldn't you make it as easy as possible for people to help you?

And I did provide a theory: you don't ever use an alpha value, so nothing you draw will be "faded". I'm not sure what else you want to hear.

I suggest creating an MCVE with that 4th number for an alpha value that you mentioned, and we'll go from there. But it's really up to you how you want to proceed.

blindfish · May 2015

I'm confused: I'm not the OP as should be fairly clear from my post... The point is you don't need to run the code to be able to make suggestions on how to add the desired behaviour; which is what the OP was asking for.

It's also trivial to replace the background(background); call with background(255,255,255); to get it running; though I didn't even do that...

As it happens my first suggestion did need some elaboration as you can't add alpha to the background() colour. Instead the following approach is one workaround:

void draw() {
    fill(0,0,0,50);
    rect(0,0,width,height);
    // do stuff...
}

It should be possible to add transparency to the image and achieve the same effect...

KevinWorkman · May 2015

That is definitely not the way to achieve this effect. Depending on the colors you use, you'll end up with trails that never go away. Also, you won't be able to have any objects that don't leave a trail.

Like I said the last time you mentioned this:

Please keep in mind that many of us do this for free, in our spare time, or at work "while our code compiles". We answer dozens of questions a day, not just on this forum but often on other forums, StackOverflow, etc. So we don't have time to format your code for you, or to make sure we have properly sized images so your code works, or to go through hundreds of lines of code- especially because none of that has anything to do with the problem.

So we ask you to do a bare minimum before posting- format your code (this is a one-step process), and try narrowing the problem down to as few lines as possible- most of the time, you'll find the error yourself before you post here! After all, shouldn't you make it as easy as possible for people to help you?

And yes, I realize you aren't the OP. But this is not the first post you've interrupted to complain about us asking to see an MCVE and any research that has already been done.

The OP said that they tried an approach and that approach did not work. I'm simply asking to see that approach so that I can help them figure out what went wrong with it.

blindfish · May 2015

I don't believe I have at any point "interrupted to complain about [you] asking to see an MCVE". I have simply endeavoured to interpret the OP's question and provide a constructive response. I may well have pointed out that an 'MCVE' was unnecessary - as I felt it was here - but that is neither an 'interruption', nor meant as a 'complaint'. I too do this for free and in my spare time...

KevinWorkman · May 2015

The point stands: your approach will not work in most cases except the most basic.

If the OP wants us to help debug their approach, they'll have to post an MCVE.

Any further bickering will just distract from the original point even further, so I'm going to bow out of this one until we can see the code the OP was trying to get working.

blindfish · May 2015

@KevinWorkman didn't bother reading my original post properly otherwise he would have noted the following (and not mistaken me for the OP):

You'll also quickly find one drawback with the above is that it applies to everything and not just the snake; so you could draw it to a separate image layer; fading the background each frame and add this over the top.

This approach definitely has limitations and admittedly is unlikely to be what was intended; but it's not for us to decide the exact effect the OP is looking for. This technique may also be appropriate in another context; so it's worth being aware of the possibility.

Proof of concept:

PGraphics foo;

void setup() {
    size(400,400);
    foo = createGraphics(width, height);
}

void draw() {

    background(0);

    foo.beginDraw();
      foo.noStroke();
      foo.fill(0,0,0,10);
      foo.rect(0,0,width,height);
      foo.fill(255,166,0);  
      foo.ellipse(mouseX, mouseY, 10, 10);
    foo.endDraw();
    image(foo, 0, 0);

    noStroke();
    fill(255,255,255);
    rect(width - mouseX, height - mouseY, 30, 30);  

}

KevinWorkman · May 2015

I agree, and I'm not trying to bicker.

I'm simply trying to point out a major drawback in your approach, especially because I've seen other people with your approach confused about why it's not working.

Also, OP already has an approach in mind, and is confused about why it's not working. I'd rather help them work through their original approach than start them over with what I thought was a good idea. All of our back-and-forth has just distracted from the main question, and possibly scared the OP away.

Howdy, Stranger!

Categories

In this Discussion

having a trail from my snake

Best Answer

Answers