# P5.js Asteroid Game Question

**URL:** <https://discourse.processing.org/t/p5-js-asteroid-game-question/1817>\
**Category:** p5.js\
**Created:** [July 16, 2018, 2:59pm UTC](https://discourse.processing.org/t/p5-js-asteroid-game-question/1817 "2018-07-16T14:59:30Z")\
**Posts on this page:** 17\
**Page:** 1

<div class="post-metadata">

**Author:** ![BlitzBane](https://avatars.discourse-cdn.com/v4/letter/b/6de8d8/32.png) [@BlitzBane](https://discourse.processing.org/u/BlitzBane)\
**Post date:** [July 16, 2018, 2:59pm UTC](https://discourse.processing.org/t/p5-js-asteroid-game-question/1817/1 "2018-07-16T14:59:30Z")

</div>

How to move the Bullet into the side of the Ship? Not the angle but on where is the bullet is coming from. I want to create guns on each side because I want to be more creative. But the problem is that everytime the ships turn, the bullet point is not moving. Its just changing its angle. Please help me out. Thank you 😃 ![Capture](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/1X/8c0b2b9c2a806a526364a8e22f181150b314fcc4.PNG)

---

<div class="post-metadata">

**Author:** ![jb4x](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jb4x/32/789_2.png) [@jb4x](https://discourse.processing.org/u/jb4x)\
**Post date:** [July 16, 2018, 3:07pm UTC](https://discourse.processing.org/t/p5-js-asteroid-game-question/1817/2 "2018-07-16T15:07:06Z")

</div>

Can you post your code here ? Without it we don’t know how it is structured and thus we can’t really help.

I presume that you have a “Bullet” class and a “SpaceShip” one.

In that case, from you “Bullet” class you would need to get the current position and rotation of the spaceship and then use trigonometric equations to position the two symmetric bullets.

---

<div class="post-metadata">

**Author:** ![BlitzBane](https://avatars.discourse-cdn.com/v4/letter/b/6de8d8/32.png) [@BlitzBane](https://discourse.processing.org/u/BlitzBane)\
**Post date:** [July 16, 2018, 3:09pm UTC](https://discourse.processing.org/t/p5-js-asteroid-game-question/1817/3 "2018-07-16T15:09:13Z")

</div>

![222](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/1X/f35847715246bac11eab23731b34883a611c8e6c.PNG)

This is the Bullet , its called Laser

---

<div class="post-metadata">

**Author:** ![BlitzBane](https://avatars.discourse-cdn.com/v4/letter/b/6de8d8/32.png) [@BlitzBane](https://discourse.processing.org/u/BlitzBane)\
**Post date:** [July 16, 2018, 3:10pm UTC](https://discourse.processing.org/t/p5-js-asteroid-game-question/1817/4 "2018-07-16T15:10:39Z")

</div>

![232](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/1X/36bb3196c9c42d2dac44a44dd8ba44d021e5607f.PNG)

Im calling out the Lasers if I enabled the spaceHeld.

---

<div class="post-metadata">

**Author:** ![BlitzBane](https://avatars.discourse-cdn.com/v4/letter/b/6de8d8/32.png) [@BlitzBane](https://discourse.processing.org/u/BlitzBane)\
**Post date:** [July 16, 2018, 3:13pm UTC](https://discourse.processing.org/t/p5-js-asteroid-game-question/1817/5 "2018-07-16T15:13:06Z")

</div>

![asdasd](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/1X/04be18af9f2988c1efb24bbde32b09dc601234ff.PNG)

This is how I turn my Space Ship

---

<div class="post-metadata">

**Author:** ![jb4x](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jb4x/32/789_2.png) [@jb4x](https://discourse.processing.org/u/jb4x)\
**Post date:** [July 16, 2018, 3:22pm UTC](https://discourse.processing.org/t/p5-js-asteroid-game-question/1817/6 "2018-07-16T15:22:15Z")

</div>

So when you create your laser, instead of writing

`this.pos = createVector(spos.x, spos.y);`

you should write

`this.pos1 = createVector(spos.x + r * cos(angle - theta), spos.y + r * sin(angle - theta)); this.pos2 = createVector(spos.x + r * cos(angle + theta), spos.y + r * sin(angle + theta));`

I’ll make a pic to explain a bit more.

---

<div class="post-metadata">

**Author:** ![BlitzBane](https://avatars.discourse-cdn.com/v4/letter/b/6de8d8/32.png) [@BlitzBane](https://discourse.processing.org/u/BlitzBane)\
**Post date:** [July 16, 2018, 3:24pm UTC](https://discourse.processing.org/t/p5-js-asteroid-game-question/1817/7 "2018-07-16T15:24:36Z")

</div>

Please. I need more explanation 😥 … It seems here that I need to learn more about this algorithm.

---

<div class="post-metadata">

**Author:** ![jb4x](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jb4x/32/789_2.png) [@jb4x](https://discourse.processing.org/u/jb4x)\
**Post date:** [July 16, 2018, 3:34pm UTC](https://discourse.processing.org/t/p5-js-asteroid-game-question/1817/8 "2018-07-16T15:34:14Z")

</div>

![Example](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/1X/c94b49f9daed13017dc5e41d80d6ac3e3983d8d3.jpg)

You need to find the coordinate of the bullet in the spaceship coordinate thanks to the angle of the spaceship, r and theta.

Then you just need to add the coordinate of the origin of your spaceship. This is the formulas I gave you in my previous answer.

---

<div class="post-metadata">

**Author:** ![BlitzBane](https://avatars.discourse-cdn.com/v4/letter/b/6de8d8/32.png) [@BlitzBane](https://discourse.processing.org/u/BlitzBane)\
**Post date:** [July 16, 2018, 3:36pm UTC](https://discourse.processing.org/t/p5-js-asteroid-game-question/1817/9 "2018-07-16T15:36:17Z")

</div>

It says that theta is not defined. I searched on google and they say that theta is 90-22 degree angle.

---

<div class="post-metadata">

**Author:** ![jb4x](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jb4x/32/789_2.png) [@jb4x](https://discourse.processing.org/u/jb4x)\
**Post date:** [July 16, 2018, 3:38pm UTC](https://discourse.processing.org/t/p5-js-asteroid-game-question/1817/10 "2018-07-16T15:38:23Z")

</div>

“Theta” and “r” are yours to define. Those are not absolute values. I could have name those variables alpha or beta or whatever instead of theta. It is just that theta is often use to define an angle value.

---

<div class="post-metadata">

**Author:** ![BlitzBane](https://avatars.discourse-cdn.com/v4/letter/b/6de8d8/32.png) [@BlitzBane](https://discourse.processing.org/u/BlitzBane)\
**Post date:** [July 16, 2018, 3:42pm UTC](https://discourse.processing.org/t/p5-js-asteroid-game-question/1817/11 "2018-07-16T15:42:39Z")

</div>

![dddda](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/1X/1b360c0169f44aea3b32f5fd819e1ea634018c25.PNG)!  
It worked! Thank you so much @jb4x for helping me out. I’ll add you on the credit list 😃

---

<div class="post-metadata">

**Author:** ![jb4x](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jb4x/32/789_2.png) [@jb4x](https://discourse.processing.org/u/jb4x)\
**Post date:** [July 16, 2018, 3:46pm UTC](https://discourse.processing.org/t/p5-js-asteroid-game-question/1817/12 "2018-07-16T15:46:01Z")

</div>

Glad it worked out !

Hope to see your game in the gallery section =)

---

<div class="post-metadata">

**Author:** ![BlitzBane](https://avatars.discourse-cdn.com/v4/letter/b/6de8d8/32.png) [@BlitzBane](https://discourse.processing.org/u/BlitzBane)\
**Post date:** [July 16, 2018, 3:47pm UTC](https://discourse.processing.org/t/p5-js-asteroid-game-question/1817/13 "2018-07-16T15:47:12Z")

</div>

Soon 😄 I hope so. 😆

---

<div class="post-metadata">

**Author:** ![BlitzBane](https://avatars.discourse-cdn.com/v4/letter/b/6de8d8/32.png) [@BlitzBane](https://discourse.processing.org/u/BlitzBane)\
**Post date:** [July 16, 2018, 3:56pm UTC](https://discourse.processing.org/t/p5-js-asteroid-game-question/1817/14 "2018-07-16T15:56:12Z")

</div>

BTW. Is there anyway to reduce lag ? Or a technic ?

---

<div class="post-metadata">

**Author:** ![jb4x](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jb4x/32/789_2.png) [@jb4x](https://discourse.processing.org/u/jb4x)\
**Post date:** [July 16, 2018, 4:05pm UTC](https://discourse.processing.org/t/p5-js-asteroid-game-question/1817/15 "2018-07-16T16:05:24Z")

</div>

If your game is getting slow it’s because you have to many computation to do at each frame.

In this case you need to optimize your code :

- be sure to delete all the objects that you don’t need anymore (bullets out of screen for examples)
- Avoid to recalculate variables at every frame if you can “bake” them before
- instead of using cpu you can use the gpu. But there it becomes way out of my knowledge, I’m just using processing (or coding in general) on my free time for personal project.

---

<div class="post-metadata">

**Author:** ![BlitzBane](https://avatars.discourse-cdn.com/v4/letter/b/6de8d8/32.png) [@BlitzBane](https://discourse.processing.org/u/BlitzBane)\
**Post date:** [July 16, 2018, 4:07pm UTC](https://discourse.processing.org/t/p5-js-asteroid-game-question/1817/16 "2018-07-16T16:07:48Z")

</div>

Is there any program or any code that I can add to remove the lag?

Im already doing those things. Im using splice in removing the bullets out of screen.

Im also making my if statements smaller and compact to reduce lag.

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [July 16, 2018, 7:01pm UTC](https://discourse.processing.org/t/p5-js-asteroid-game-question/1817/17 "2018-07-16T19:01:41Z")

</div>

This old sketch demos how to shoot bullets w/ angle: 🔫  
[http://Studio.ProcessingTogether.com/sp/pad/export/ro.91kLmk61vAOZp](http://Studio.ProcessingTogether.com/sp/pad/export/ro.91kLmk61vAOZp)