Computer Science I Slingshot example. ProcessingJS example. Review for midterm quiz. Classwork/Homework: study for midterm. Work on midterm project.

Slingshot Background: I have done cannonball and then slingshot examples in Visual Basic, Flash, JavaScript and now Processing. Historically: determining ballistic paths for weapons was one of first applications for computers (computer-like machines).

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 of 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, mousePressed, mouseReleased – Note: the draw uses the current values of mouseX and mouseY to pull back on the slingshot. My code does not use mouseDragged. Defined [my] calculateSpeeds, simulateRockInAir – 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 myRock 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 <canvas data-processing-sources ="makePathThenImageTravel.pde">

My html file: imageTravel.html Biker chick <canvas data-processing-sources ="makePathThenImageTravel.pde">

Files to be uploaded makePathThenImageTravel.pde processing.min.js bikerchickWGrant.jpg imageTravel.html

Access on the web … usual way, by a URL ocessingJS/imageTravel.html ocessingJS/imageTravel.html

Aside The slingshot program does not work in ProcessingJS!!!! The chicken is not hit… Extra credit opportunity for anyone figuring out the problem. I have posted on a Processing Forum.

p5js Something else: Different language combining Processing and JavaScript – Weak typing: var statements, not datatypes. – Claim: faster executing code – An IDE in development. Now use Sublime, other text editor

Questions for midterm quiz Study guide Review lecture charts ?

Classwork/Homework [Post proposal. Look for my response.] Work on midterm project.