p5.js animate question

tim50

In the example I share here, I have an array of aliens. I'm trying to get the aliens to animate as they do in the original game. For every alien you see in the sketch, there is another alien underneath it. Is there anyway I can get the aliens to jump from 1 to 2 and back..... sort of like this: 1, 2, 1, 2, 1, 2 as they move across the screen? or like this: ( _ ) (^_^) ( _ ) (^_^) ( _ )...

I'm a NOOB so I barely understand anything.

https://openprocessing.org/sketch/428354

koogs

If you have a specific question then please make the subject relate to that question rather than just "p5.js".

kfrajer

****EDIT: My example is in java. Let me know if you want to see the p5.js version.

Is the alien made of two objects or are they always two aliens? As a concept, and important to the design, you would need to describe the behavior of your dual entity. Can one alien be killed while the other survives? Or if one dies, would the other die? Are they always tie together or can aliens swap with other aliens-pair?

Are you familiar with trigonometric functions? You can always check wikipedia or mathworld for more info. You don't have to use trig functions, but it is an alternative. Below there is a sketch that shows continues swapping vs. step swapping.

Kf

//===========================================================================
// GLOBAL VARIABLES:

int t=0;
float w1=0.01;  // TRY different value: 0.1, 0.01, 0.001
float amp1=height/4;
int rad=15;

PVector pos1=new PVector();
PVector pos2=new PVector();



//===========================================================================
// PROCESSING DEFAULT FUNCTIONS:

void settings() {
  size(400, 600);
}

void setup() {

  textAlign(CENTER, CENTER);
  rectMode(CENTER);

  fill(255);
  strokeWeight(2);
  background(0);
}



void draw() {

  background(0);  //DISABLE this line to see the accumulated effect

  float calcY;

  //TOP animation: Continuos sinusoidal
  pushMatrix();
  translate(0, height/4);
  calcY=amp1*sin(w1*millis());
  pos1.set(pos1.x+0.5, calcY);
  pos2.set(pos1.x, -pos1.y);

  fill(255, 0, 0);
  ellipse(pos1.x, pos1.y, rad, rad);
  ellipse(pos2.x, pos2.y, rad, rad);
  popMatrix();


  //BOTTOM animation: Steppping in and out aka. center-out
  pushMatrix();
  translate(0, 3*height/4);  
  fill(255, 0, 0);

  calcY=amp1*sin(w1*millis());
  pos1.set(pos1.x+0.5, abs(calcY)>amp1*0.95?amp1:0.0);
  pos2.set(pos1.x, -pos1.y);
  fill(250, 250, 0);
  ellipse(pos1.x, pos1.y, rad, rad);
  ellipse(pos2.x, pos2.y, rad, rad);
  popMatrix();

  if (pos1.x>width) {
    pos1.x=0;
    background(0);
  }
}

tim50

Thanks Kfrajer. The aliens are made with one object but I've thought of using more than one object. I want both to die if one is hit. I'll check out the trig functions. Thanks.

kfrajer

There is other way, using sprites. Check this post: https://forum.processing.org/two/discussion/comment/98098/#Comment_98098

For reference to learn about sprint and avialble functions, examples: http://p5play.molleindustria.org/docs/classes/p5.play.html#method-createSprite

For the post above, you can remove all the references to the video part. Then you need to download the sprites and store them under a specific folder, as defined in the sketch. You also need to include the p5.play js library in your html. I can't remember if you need p5.dom.js. Make sure these libs are set right after you load the p5.js (or p5.min.js) library call.

Kf