Canon and Projectile Motion
Run Demo of Canon Projectile Motion
In this lesson, we add gravity to our simulation. The program has a "Fire" button and you can adjust the angle an power of the canon that fires the ball.
Sample Prompts
Generate a single file p5.js sketch that demonstrates projectile motion.
Allow the user to set the initial angle and power of a projectile.
Here is a more precise specification with details on the control placement.
Generate a single file p5.js sketch on an 800x550 canvas.
The program is a simulation of projecile motion.
The upper drawing region is 800x500 and is intialized with a light gray rectangle of 245.
The lower 50 height is for placing the controls on a white background.
A circle of radius 10 is placed in the lower left corner of the drawing region.
A "Fire" buttin is below the circle.
To the right of the fire button are two sliders.
One slider is for the initial angle at fire time.
One slider is for the power at fire time.
Gravity is in the positive y of force 0.05
When the ball goes outside the drawing region (800x500) the simulation must stop.
When the simulation stops, place a new ball in the lower left corner of the drawing region.
Edit this Code Using the p5.js Editor
Sample Code
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 |
|
Learnings from the Code
- The p5.js has a library for simulating forces on an object.
- We can use the Class operator to create functions on the canon ball.