Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
LFU - 12. October 2014 - Ljubljana - KCQ
Ada 
Lovelace 
L. F. Menabrea: Sketch of The Analytical Engine Invented 
by Charles Babbage Note G
Have the courage 
to try. You can 
make amazing 
things happen. 
Megan Smith, U.S. CTO, former VP of Google[x] 
Photo: Tay...
Source Code 
Original: https://github.com/andrea-3000/TAMPON-RUN 
Workshop Copy: https://github.com/princessdesign/TAMPON-...
Building Blocks 
● HTML 
● CSS 
● JavaScript 
○ Processing.js http://processingjs.org/ 
○ Buzz a Javascript HTML5 Audio li...
Avatars / Images
Navigation with Keys 
● RIGHT: 39 // forward 
● LEFT: 37 // back 
● M: 77 // mute 
● SHIFT: 16 // begin 
● SPACE: 32 // th...
Music 
● beethovenSound 
● jumpSound 
● tamponSound 
● gameOverSound 
● ouchSound 
● shootSound
Let’s make our own game...
Play the game for the next 
5 minutes and make a list 
of things you would like 
to change.
● ____________ 
● ____________ 
● ____________ 
● ____________ 
● ____________ 
● ____________ 
● ____________ 
● ________...
DOABLE TODAY 
● ____________ 
● ____________ 
● ____________ 
● ____________ 
● ____________
What can we ‘easily’ 
change? 
● Skip intro and go directly to the game 
● Navigation keys 
● Initial number of tampons 
●...
Let’s do it...
index.html
<html> 
<head> 
<title>Tampon Run!</title> 
<style type="text/css"> 
/* CSS CODE for STYLE */ 
</style> 
<script src="lib/...
for loop 
for(var count=0; count<10; count++){ 
console.log(count); 
}JavaScript Basics
brackets.io
Comments 
for loop 
// Hi, my name is comment 
for(var count=0; count<10; count++){ 
console.log(count); 
/* 
} 
I am comm...
for test.html 
loop 
<html> 
for(var count=0; count<10; count++){ 
console.log(count); 
} 
<head> 
<script> 
console.log("...
Google Chrome Console
Numbers 
for loop 
14 
1+1 
5-2 
32*3 
829/3 
5%4 
for(var count=0; count<10; count++){ 
console.log(count); 
}
Strings 
"Ada" 
"Lovelace" 
"Ada".length 
"Lovelace".length 
for loop 
for(var count=0; count<10; count++){ 
console.log(c...
Boolean 
for loop 
true 
false 
1<2 
for(var count=0; count<10; count++){ 
console.log(count); 
}
Variables 
for loop 
var score = 0; // number 
score; 
console.log(score); 
for(var count=0; count<10; count++){ 
console....
Arrays 
for loop 
var lampList = []; 
for(var count=0; count<10; count++){ 
var console.tampons log(= ["count); 
red", "gr...
Functions 
for loop 
confirm("I feel awesome!"); 
for(var count=0; count<10; count++){ 
console.log(count); 
prompt("What ...
Functions 
for loop 
var sayHello = function(name) { 
for(var count=0; count<10; count++){ 
console.log(count); 
} 
consol...
Functions / Methods 
for loop 
void pauseSound(soundToPlay) { 
for(var count=0; count<10; count++){ 
console.log(count); 
...
if sentence 
for loop 
var x = 1; 
if ( x == 1) { 
for(var count=0; count<10; count++){ 
console.log(count); 
} 
console.l...
if sentence 
for loop 
var x = 4; 
if ( x !== 1) { 
console.log("x doesn’t equal 1"); 
} 
for(var count=0; count<10; count...
if for else 
loop 
var key = "left"; 
for(var count=0; count<10; count++){ 
if (key == "up" ){ 
console.log(count); 
} 
co...
if for & loop 
else if & else 
var key = "left"; 
for(var count=0; count<10; count++){ 
if (key == "right" ) { 
console.lo...
for loop 
for(var count=0; count<100; count++){ 
console.log(count); 
}
for loop 
towns = ["LJ", "MB", "KR", "NM", "KP", "GO", "KR"]; 
for(var i=0; i<towns.length; i++){ 
document.write(towns[i]...
Classes and objects 
Animation 
GameState 
Lamppost 
LampFactory 
Cloud 
CloudFactory 
Gun 
Ammo 
BuildingFactory 
EnemyFa...
class Tampon { 
var xTamp; 
var yTamp; 
var tampSpeed; 
var randFR; 
Animation tampPic; 
var h; 
var w; 
Tampon() { 
xTamp...
Methods 
play(soundToPlay) 
pauseSound(SoundToPlay) 
setup() 
draw() 
keyPressed() 
keyReleased()
Remember what you wanted 
to change in the game?
What can we ‘easily’ 
change? 
● Skip intro and go directly to the game 
● Navigation keys 
● Initial number of tampons 
●...
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 ...
Change navigation keys 
if (keyCode == 77) 
if (keyCode == 39) 
if (keyCode == 16) 
if (keyCode == 83) 
if (keyCode == 38)...
Change the number of 
initial tampons 
HINT: find where the number is defined and change it 
//player variables 
var tampo...
Change the number of 
tampons in the pack 
HINT: Find where the number is defined and change it 
tampon = tampon + 5 // 50
Change intro images 
statementOne = loadImage("res/statementOne0000.png"); 
statementTwo = loadImage("res/statementTwo0000...
Color of tampons 
TASK: Open images in image 
editor and change the color. 
● ammo…png 4x 
● attack…png 2x
New enemy 
enemies = new EnemyFactory("eWalk", 1); 
/* change to swat and play the game */ 
eWalk swat 
TASK: Now try to b...
Animations 
Animation title; 
title = new Animation("title", 2, 20); 
Animation girlIntro; 
girlIntro = new Animation("wal...
Background coloor 
void startGame() { 
background(100); 
/* 
background(255,255,0); //yellow (red, green and blue 0-255) 
...
Ground color 
void showBuilding() { 
fill(0); // color name or number(s) 
/* 
background(255,255,0); //yellow (red, green ...
Change the cloud color 
void showCloud() { 
fill(255); 
fill(0); // black or 
// (0,0,0) (red, green and blue 0-255)
Change the cloud color 
Gray clouds (uncomment c and add c to fill()) 
c = Math.floor((Math.random() * 255) + 1); 
} 
void...
Change the cloud color 
Color clouds 
r = Math.floor((Math.random() * 255) + 1); 
g = Math.floor((Math.random() * 255) + 1...
Image of lamppost 
TASK: Open the image 
lamppost0000.png in Image editor 
and change it.
Height of the jump 
jumpHeight = 200; 
/* 
jumpHeight = 100; // higher 
jumpHeight = 300; // lower 
*/
Larger game canvas 
var CANVAS_HEIGHT = 500; // 700 
var CANVAS_WIDTH = 700; // 1200
Change sounds 
var jumpSound = new buzz.sound("res/sound/jumpSound", {formats: ["ogg", "mp3"]}); 
var tamponSound = new bu...
You can leave behind the old 
regressive sexist 
representations and 
instead create interactive 
experiences that portray...
JAVASCRIPT REFERENCE 
http://learnxinyminutes.com/docs/javascript/ 
http://www.codecademy.com/glossary/javascript 
https:/...
PROCESSINGJS REFERENCE 
http://processingjs.org/reference/
Contact: 
https://www.facebook.com/princessdesignnet 
https://twitter.com/princessdesign
[EN] Ada Lovelace Day 2014  - Tampon run
[EN] Ada Lovelace Day 2014  - Tampon run
[EN] Ada Lovelace Day 2014  - Tampon run
[EN] Ada Lovelace Day 2014  - Tampon run
[EN] Ada Lovelace Day 2014  - Tampon run
[EN] Ada Lovelace Day 2014  - Tampon run
[EN] Ada Lovelace Day 2014  - Tampon run
[EN] Ada Lovelace Day 2014  - Tampon run
[EN] Ada Lovelace Day 2014  - Tampon run
[EN] Ada Lovelace Day 2014  - Tampon run
[EN] Ada Lovelace Day 2014  - Tampon run
[EN] Ada Lovelace Day 2014  - Tampon run
[EN] Ada Lovelace Day 2014  - Tampon run
[EN] Ada Lovelace Day 2014  - Tampon run
Upcoming SlideShare
Loading in …5
×

[EN] Ada Lovelace Day 2014 - Tampon run

Ada Lovelace Day 2014 Workshop

https://www.facebook.com/princessdesignnet

  • Be the first to comment

[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

×