1. Programming Games Reprise: storage, datatypes. Geolocation/Google API example. Work session Homework: [Catch up. Upload work. Post proposal.] Work on your game.

2. Storage Everything (data, instructions) is kept in memory and storage in 1s and 0s. Different data types are stored in different ways –whole numbers: binary. Typically 4 bytes = 32 bits. –numbers with fractions (mixed numbers): floating point –character strings: ASCII (1 byte) or UNICODE (2 bytes) –logical values: Booleans (may be stored in whole byte=8 bit units) Media, e.g., video, audio, images, stored in various ways.

3. Hexadecimal Base 16 shorter way to express a binary number Use 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F One way to define a color is as (combined) levels of red, green and blue, each one going from 0 to 255. This can be expressed with 3 x 2 hexadecimal symbols. –00 is 0 * 16 + 0* 1 0A is 0 * 16 + 10*1 F0 is 15*16 + 0 *1 FF is 15*16 + 15*1 = 255

4. RGB colors You can reason about colors without making any conversions –FF0000 is red –CC00DD is purple –?

5. Geolocation navigator.geolocation provides current location for the IP address (latitude and longitude) User (on client computer) must confirm that it is okay. Done by interpreting signals from several satellites. GPS systems use that information together with locally stored maps.

6. Map app Use Google Maps API to bring up map at current location. Respond to clicking by placing a marker and calculating distance. Provide way to change to fixed set of locations or the last marker. need to give permission to Share Location http://faculty.purchase.edu/jeanine.meyer/html5/ geolocationkm.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5/ geolocationkm.html http://faculty.purchase.edu/jeanine.meyer/html5 workshop/geolocationdistance2.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5 workshop/geolocationdistance2.html

7. Opening screen

8. Brings up ….

9. After click on map

10. After choose CUNY

11. Mapping Google Maps API (and other applications) defines positions using special latitude/longitude data object Access to Google Map is created for a place in the HTML document, using specified map options HTML has a specification for doing geolocation. –navigator.geolocation produces latitude and longitude values

12. How to get positions? Google Maps –get to a map Browser location javascript:void(prompt('',gApplication.getMap().get Center())); OR Click on green beaker and enable the drop latlng marker –right click then normal click

13. Basics if (navigator.geolocation) checks if this object exists. Does NOT cause any errors. map = new google.maps.Map(document.getEle mentById("place"), myOptions); brings up Google Maps in the div with id "place" using the parameters in myOptions.

14. style, external script header {font-family:Georgia,"Times New Roman",serif; font-size:20px; display:block; }

15. standalone code if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(function(position) {doStuff(position.coords.latitude, position.coords.longitude); }); } else { if (document.getElementById("place")) { document.getElementById("place").innerHTML = "I'm sorry but geolocation services are not supported by your browser"; document.getElementById("place").style.color = "#FF0000"; }

16. variables var listener; var map; var markersArray =[]; var blatlng; var myOptions; var locations = [ [40.82276,-73.94806, "CUNY"], [41.04796,-73.70539,"Purchase College/SUNY"], [41.878928, -87.641926,"IIT"] ];

17. create/access map function doStuff(mylat, mylong) { blatlng = new google.maps.LatLng(mylat,mylong); myOptions = { zoom: 14, center: blatlng, mapTypeId: google.maps.MapTypeId.ROADMAP }; map = new google.maps.Map(document.getElementById("place"), myOptions); listener = google.maps.event.addListener(map, 'click', function(event) { checkit(event.latLng);}); }

18. response to click on map function checkit(clatlng) { var distance = dist(clatlng,blatlng); distance = Math.floor((distance+.005)*100)/100; var distanceString = String(distance)+" miles"; marker = new google.maps.Marker({ position: clatlng, title: distanceString, map: map }); markersArray.push(marker); document.getElementById("answer").innerHTML = "The distance from base to most recent marker is "+String(distance) +" miles."; }

19. distance function function dist(point1, point2) { //spherical law of cosines //var R = 6371; // km var R = 3959; // miles var lat1 = point1.lat()*Math.PI/180; var lat2 = point2.lat()*Math.PI/180 ; var lon1 = point1.lng()*Math.PI/180; var lon2 = point2.lng()*Math.PI/180; var d = Math.acos(Math.sin(lat1)*Math.sin(lat2) + Math.cos(lat1)*Math.cos(lat2) * Math.cos(lon2-lon1)) * R; return d; }

20. change base using radio buttons function changebase() { for(var i=0;i<locations.length;i++) { if (document.f.loc[i].checked) { doStuff(locations[i][0],locations[i][1]); document.getElementById("header").innerHTML = "Base location is "+locations[i][2]; } return false; }

21. Base location is your current geolocation Change base location: CUNY Purchase College Illinois Institute of Technology

22. Work session Make sure you have made a proposal and I have approved it!

23. Homework [Catch up. Upload projects.] [Post JavaScript project proposal.] Work on project.