Successfully reported this slideshow.
Your SlideShare is downloading. ×

[EN] Ada Lovelace Day 2014 - Tampon run

Ad

LFU - 12. October 2014 - Ljubljana - KCQ

Ad

Ada 
Lovelace 
L. F. Menabrea: Sketch of The Analytical Engine Invented 
by Charles Babbage Note G

Ad

Have the courage 
to try. You can 
make amazing 
things happen. 
Megan Smith, U.S. CTO, former VP of Google[x] 
Photo: Tay...

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Loading in …3
×

Check these out next

1 of 75 Ad
1 of 75 Ad

More Related Content

[EN] Ada Lovelace Day 2014 - Tampon run

  1. 1. LFU - 12. October 2014 - Ljubljana - KCQ
  2. 2. Ada Lovelace L. F. Menabrea: Sketch of The Analytical Engine Invented by Charles Babbage Note G
  3. 3. Have the courage to try. You can make amazing things happen. Megan Smith, U.S. CTO, former VP of Google[x] Photo: Taylor Hill/FilmMagic for
  4. 4. Source Code Original: https://github.com/andrea-3000/TAMPON-RUN Workshop Copy: https://github.com/princessdesign/TAMPON-RUN
  5. 5. Building Blocks ● HTML ● CSS ● JavaScript ○ Processing.js http://processingjs.org/ ○ Buzz a Javascript HTML5 Audio library http://buzz.jaysalvat.com/ ● Images, music
  6. 6. Avatars / Images
  7. 7. Navigation with Keys ● RIGHT: 39 // forward ● LEFT: 37 // back ● M: 77 // mute ● SHIFT: 16 // begin ● SPACE: 32 // throw tampon ● UP: 38 // jump ● P: 80 // pause ● S: 83 // restart
  8. 8. Music ● beethovenSound ● jumpSound ● tamponSound ● gameOverSound ● ouchSound ● shootSound
  9. 9. Let’s make our own game...
  10. 10. Play the game for the next 5 minutes and make a list of things you would like to change.
  11. 11. ● ____________ ● ____________ ● ____________ ● ____________ ● ____________ ● ____________ ● ____________ ● ____________ ● ____________ ● ____________ TODO
  12. 12. DOABLE TODAY ● ____________ ● ____________ ● ____________ ● ____________ ● ____________
  13. 13. What can we ‘easily’ change? ● Skip intro and go directly to the game ● Navigation keys ● Initial number of tampons ● Number of tampons in the pack ● Color of tampons ● Avatar of the enemy ● Animations ● Background color ● Ground color ● Cloud color ● Image of the lamppost ● Change lamppost into another object ● The height of the jump ● Larger canvas with the game ● Change Intro Images (Translate) ● Change sounds ● ...
  14. 14. Let’s do it...
  15. 15. index.html
  16. 16. <html> <head> <title>Tampon Run!</title> <style type="text/css"> /* CSS CODE for STYLE */ </style> <script src="lib/processing-1.4.1.min.js"></script> <script src="lib/buzz.min.js" type="text/javascript"></script> <script type="text/processing" data-processing-target="creators"> // JAVASCRIPT CODE (creators canvas) </script> <script type="text/processing" data-processing-target="mycanvas"> /* JAVASCRIPT CODE FOR THE GAME (mycanvas canvas) */ </script> </head> <body> <canvas id="creators"></canvas> <canvas id="mycanvas"></canvas> </body> </html>
  17. 17. for loop for(var count=0; count<10; count++){ console.log(count); }JavaScript Basics
  18. 18. brackets.io
  19. 19. Comments for loop // Hi, my name is comment for(var count=0; count<10; count++){ console.log(count); /* } I am comment too. I can take more space. */
  20. 20. for test.html loop <html> for(var count=0; count<10; count++){ console.log(count); } <head> <script> console.log("JavaScript"); </script> </head> <body> </body> </html>
  21. 21. Google Chrome Console
  22. 22. Numbers for loop 14 1+1 5-2 32*3 829/3 5%4 for(var count=0; count<10; count++){ console.log(count); }
  23. 23. Strings "Ada" "Lovelace" "Ada".length "Lovelace".length for loop for(var count=0; count<10; count++){ console.log(count); }
  24. 24. Boolean for loop true false 1<2 for(var count=0; count<10; count++){ console.log(count); }
  25. 25. Variables for loop var score = 0; // number score; console.log(score); for(var count=0; count<10; count++){ console.log(count); } var muted = false; // boolean var feedback = "I feel awesome";
  26. 26. Arrays for loop var lampList = []; for(var count=0; count<10; count++){ var console.tampons log(= ["count); red", "green", "blue"]; var } first = tampons[0]; console.log(first); console.log(tampons[0]);
  27. 27. Functions for loop confirm("I feel awesome!"); for(var count=0; count<10; count++){ console.log(count); prompt("What is your name?"); } console.log("What is your name?");
  28. 28. Functions for loop var sayHello = function(name) { for(var count=0; count<10; count++){ console.log(count); } console.log("Hello" + " " + name); }; sayHello("Maja");
  29. 29. Functions / Methods for loop void pauseSound(soundToPlay) { for(var count=0; count<10; count++){ console.log(count); } soundToPlay.pause() }
  30. 30. if sentence for loop var x = 1; if ( x == 1) { for(var count=0; count<10; count++){ console.log(count); } console.log("x equals 1"); }
  31. 31. if sentence for loop var x = 4; if ( x !== 1) { console.log("x doesn’t equal 1"); } for(var count=0; count<10; count++){ console.log(count); }
  32. 32. if for else loop var key = "left"; for(var count=0; count<10; count++){ if (key == "up" ){ console.log(count); } console.log("Key is up."); } else { console.log("Some key."); }
  33. 33. if for & loop else if & else var key = "left"; for(var count=0; count<10; count++){ if (key == "right" ) { console.log(count); } console.log("Key is right."); } else if (key == "up" ){ console.log("Key is up."); } else { console.log("Some key."); }
  34. 34. for loop for(var count=0; count<100; count++){ console.log(count); }
  35. 35. for loop towns = ["LJ", "MB", "KR", "NM", "KP", "GO", "KR"]; for(var i=0; i<towns.length; i++){ document.write(towns[i]); document.write("<br />") }
  36. 36. Classes and objects Animation GameState Lamppost LampFactory Cloud CloudFactory Gun Ammo BuildingFactory EnemyFactory DuaneReade Building Player Enemy Tampon
  37. 37. class Tampon { var xTamp; var yTamp; var tampSpeed; var randFR; Animation tampPic; var h; var w; Tampon() { xTamp = 750; yTamp = 250; tampSpeed = -2; randFR = Math.floor((Math.random() * 20) + 8); tampPic = new Animation("tampz", 2, randFR); h = tampPic.getHeight(); w = tampPic.getWidth(); } void showTamp() { tampPic.display(xTamp, yTamp); } void moveTamp() { xTamp = xTamp + tampSpeed; } void releaseTamp() { yTamp = yTamp + tampSpeed; } } class DuaneReade { var tamponList; DuaneReade() { tamponList = []; } void animate() { var willItBlend = Math.floor((Math.random() * 500) + 1); if (willItBlend == 50) { tamponList.push(new Tampon()); } showTamponList(); moveTamponList(); removeTampon(); reloadTampon(); } // MORE CODE... }
  38. 38. Methods play(soundToPlay) pauseSound(SoundToPlay) setup() draw() keyPressed() keyReleased()
  39. 39. Remember what you wanted to change in the game?
  40. 40. What can we ‘easily’ change? ● Skip intro and go directly to the game ● Navigation keys ● Initial number of tampons ● Number of tampons in the pack ● Color of tampons ● Avatar of the enemy ● Animations ● Background color ● Ground color ● Cloud color ● Image of the lamppost ● Change lamppost into another object ● The height of the jump ● Larger canvas with the game ● Change Intro Images (Translate) ● Change sounds ● ...
  41. 41. Skip intro HINT: If you are on the first page (0: home) press SHIFT (key 16) and go to the game page (3: game play) if (keyCode == 16 && state.page==0){ state.page = 1; // change to 3 Why is sound not playing?
  42. 42. Change navigation keys if (keyCode == 77) if (keyCode == 39) if (keyCode == 16) if (keyCode == 83) if (keyCode == 38) SPACE: 32 // throw tampon RIGHT: 39 // forward LEFT: 37 // back M: 77 // mute SHIFT: 16 // begin UP: 38 // jump P: 80 // pause S: 83 // restart TASK: Change the code so that you will be able to play the game with one hand!
  43. 43. Change the number of initial tampons HINT: find where the number is defined and change it //player variables var tampon = 10; //50 TASK: What happens if we restart the game (S)? Fix it! HINT: Find where the conditions are end screen (4) and key S (83).
  44. 44. Change the number of tampons in the pack HINT: Find where the number is defined and change it tampon = tampon + 5 // 50
  45. 45. Change intro images statementOne = loadImage("res/statementOne0000.png"); statementTwo = loadImage("res/statementTwo0000.png"); statementThree = loadImage("res/statementThree0000.png"); statementFour = loadImage("res/statementFour0000.png"); statementFive = loadImage("res/statementFive0000.png"); instructOne = loadImage("res/learn0000.png"); pausePage = loadImage("res/pause0000.png");
  46. 46. Color of tampons TASK: Open images in image editor and change the color. ● ammo…png 4x ● attack…png 2x
  47. 47. New enemy enemies = new EnemyFactory("eWalk", 1); /* change to swat and play the game */ eWalk swat TASK: Now try to build your own.
  48. 48. Animations Animation title; title = new Animation("title", 2, 20); Animation girlIntro; girlIntro = new Animation("walk",2,5);
  49. 49. Background coloor void startGame() { background(100); /* background(255,255,0); //yellow (red, green and blue 0-255) color yellow = color(255,252, 25); color red = color(178,18,18); color orange = color(255,83, 13); color blue = color(9, 113, 178); color pink = color(255, 182, 193); */
  50. 50. Ground color void showBuilding() { fill(0); // color name or number(s) /* background(255,255,0); //yellow (red, green and blue 0-255) color yellow = color(255,252, 25); color red = color(178,18,18); color orange = color(255,83, 13); color blue = color(9, 113, 178); color pink = color(255, 182, 193); */
  51. 51. Change the cloud color void showCloud() { fill(255); fill(0); // black or // (0,0,0) (red, green and blue 0-255)
  52. 52. Change the cloud color Gray clouds (uncomment c and add c to fill()) c = Math.floor((Math.random() * 255) + 1); } void showCloud() { fill(c);
  53. 53. Change the cloud color Color clouds r = Math.floor((Math.random() * 255) + 1); g = Math.floor((Math.random() * 255) + 1); b = Math.floor((Math.random() * 255) + 1); } void showCloud() { fill(r,g,b);
  54. 54. Image of lamppost TASK: Open the image lamppost0000.png in Image editor and change it.
  55. 55. Height of the jump jumpHeight = 200; /* jumpHeight = 100; // higher jumpHeight = 300; // lower */
  56. 56. Larger game canvas var CANVAS_HEIGHT = 500; // 700 var CANVAS_WIDTH = 700; // 1200
  57. 57. Change sounds var jumpSound = new buzz.sound("res/sound/jumpSound", {formats: ["ogg", "mp3"]}); var tamponSound = new buzz.sound("res/sound/tamponSound", {formats: ["ogg", "mp3"]}); var gameOverSound = new buzz.sound("res/sound/gameOverSound", {formats: ["ogg", "mp3"]}); var beethovenSound = new buzz.sound("res/sound/beethovenSound", {formats: ["ogg", "mp3"]}); var ouchSound = new buzz.sound("res/sound/ouchSound", {formats: ["ogg", "mp3"]}); var shootSound = new buzz.sound("res/sound/shootSound", {formats: ["ogg", "mp3"]});
  58. 58. You can leave behind the old regressive sexist representations and instead create interactive experiences that portray women as capable, complex and inspirational. Anita Sarkeesian, Feminist Frequency
  59. 59. JAVASCRIPT REFERENCE http://learnxinyminutes.com/docs/javascript/ http://www.codecademy.com/glossary/javascript https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide TUTORIALS http://www.codecademy.com/tracks/javascript https://www.khanacademy.org/computing/cs
  60. 60. PROCESSINGJS REFERENCE http://processingjs.org/reference/
  61. 61. Contact: https://www.facebook.com/princessdesignnet https://twitter.com/princessdesign

×