Computer Science I - Purchase College Faculty Web Server

advertisement
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
<script src="processing.min.js"></script>
<canvas
data-processing-sources
="makePathThenImageTravel.pde">
</canvas>
My html file: imageTravel.html
<html>
<title>Biker chick </title>
<script src="processing.min.js"></script>
<canvas
data-processing-sources
="makePathThenImageTravel.pde">
</canvas>
</html>
Files to be uploaded
•
•
•
•
makePathThenImageTravel.pde
processing.min.js
bikerchickWGrant.jpg
imageTravel.html
Access on the web
• … usual way, by a URL
• http://faculty.purchase.edu/jeanine.meyer/Pr
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: http://p5js.org/
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.
Download