Computer Science I Keyboard examples Slingshot example Processing
Computer Science I Keyboard examples. Slingshot example. Processing. JS examples. Review for midterm quiz. Classwork/Homework: study for midterm. Work on midterm project.
Use of keyboard examples • Use of arrow keys • Use of number keys – Perhaps multiple keys • Concatenate text of each key (using +) and then use (int) to convert to integer • Need to require enter/return key to complete process
Slingshot • Background: I have done cannonball and then slingshot examples in Visual Basic, Flash, Java. Script and now Processing. • Historically: determining ballistic paths for weapons was one of first applications for computers (computer-like machines) – Along with decrypting messages
Basic approach • Determine initial horizontal and vertical displacements. • Each iteration, in simplest model, horizontal displacement does not change. • Each iteration, determine new vertical displacement based on gravitational pull. – Average vertical displacement at start and end of interval. That is the displacement used. – Change old vertical displacement to new value. • Determine if rock (missile) hits target. • Determine if rock hits ground.
Note • Certain variables (gravity, adjust) defined to make a nice arc…. • I could, with some work, really simulate gravity.
Slingshot • Player uses mouse to pull back on slingshot. • Upon release, calculation of initial horizontal and vertical displacements. • Continue with ballistic simulation. – Check for hitting the chicken. – Check for rock traveling outside of window. • This could be changed to hitting the ground. • Note: this is done using just the vertical value.
Planning • Used classes EVEN THOUGH I just had one of everything: – Slingshot – Rock – Picture • Each child classes of a Thing class. • Each subclass has its own show method. • An array, named scene, holds all the things in a scene.
![Examine code • Defined [my] Thing, Rock, Slingshot, Picture classes. • Defined setup, draw,](http://slidetodoc.com/presentation_image_h/21ea251f46880dd76c33ab7caa02cc6b/image-8.jpg "Examine code • Defined [my] Thing, Rock, Slingshot, Picture classes. • Defined setup, draw,")
Examine code • Defined [my] Thing, Rock, Slingshot, Picture classes. • Defined setup, draw, mouse. Pressed, mouse. Released – Note: the draw uses the current values of mouse. X and mouse. Y to pull back on the slingshot. My code does not use mouse. Dragged. • Defined [my] calculate. Speeds, simulate. Rock. In. Air – Note these functions called from just one place.
My iterations • Wrote Thing class and then Slingshot extends Thing, but not with all the methods. – Decided to define a slingshot by 5 points, with one center tx, ty and the others all relative to the base. This took a few times. • Added Rock. Added scene array. • Added Chicken, but didn't do much with it for a time. Did plan ahead to swap in feathers. • Worked to get mouse to pull back moving both "pocket" of slingshot and rock. • Calculation of initial speeds and then iteration. – Took time, adjusted adjust and gravity values! • Added hits method for Picture, so hit requires rock to be really on the chicken! • Added simple test for rock to stop at bottom of window. – Had idea of adding Turf class to be pieces of ground—to make ground lumpy. • Changed order of objects in scene array so my. Rock is visible on the chicken.
Processingjs • Way to run Processing on (in) a browser. • Sister project to Processing. • Note: there was an older way to produce applications that was discontinued.
Steps • Produce Processing sketch in normal way. – You will be uploading the. pde file and anything in the data folder • Download latest file(s) from processingjs. org – I used processing. min. js • Create a small html file (see next) • Use ftp program such as Filezilla to upload files to your website
The minimum html file <script src="processing. min. js"></script> <canvas data-processing-sources ="make. Path. Then. Image. Travel. pde"> </canvas>
My html file: image. Travel. html <html> <title>Biker chick </title> <script src="processing. min. js"></script> <canvas data-processing-sources ="make. Path. Then. Image. Travel. pde"> </canvas> </html>
Proper html <html> <head> <title>Biker chick </title> <script src="processing. min. js"></script></head> <body> <canvas data-processing-sources ="make. Path. Then. Image. Travel. pde"> </canvas> </body> </html>
Files to be uploaded • • make. Path. Then. Image. Travel. pde processing. min. js bikerchick. WGrant. jpg image. Travel. html
Access on the web • … usual way, by a URL • http: //faculty. purchase. edu/jeanine. meyer/Pr ocessing. JS/image. Travel. html
![[more] examples • http: //faculty. purchase. edu/jeanine. meyer/pr ocessing/index. html • Slingshot – Note:](http://slidetodoc.com/presentation_image_h/21ea251f46880dd76c33ab7caa02cc6b/image-17.jpg "[more] examples • http: //faculty. purchase. edu/jeanine. meyer/pr ocessing/index. html • Slingshot – Note:")
[more] examples • http: //faculty. purchase. edu/jeanine. meyer/pr ocessing/index. html • Slingshot – Note: this did need adjustment in coding (to kill the chicken!) – Insert extra statement /* @pjs preload="chicken. gif, feathers. gif”; */
p 5 js Something else: http: //p 5 js. org/ Different language combining Processing and Java. Script – Weak typing: var statements, not datatypes. – Claim: faster executing code – An IDE in development. Now use Sublime, other text editor
Questions for midterm quiz • Take time now to study the midterm guide • Review lecture charts
![Classwork/Homework • [Post proposal. Look for my response. ] • Work on midterm project.](http://slidetodoc.com/presentation_image_h/21ea251f46880dd76c33ab7caa02cc6b/image-20.jpg "Classwork/Homework • [Post proposal. Look for my response. ] • Work on midterm project.")
Classwork/Homework • [Post proposal. Look for my response. ] • Work on midterm project.
- Slides: 20