[EN] Ada Lovelace Day 2014 - Tampon run

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: Taylor Hill/FilmMagic for

Source Code
Original: https://github.com/andrea-3000/TAMPON-RUN
Workshop Copy: https://github.com/princessdesign/TAMPON-RUN

Building Blocks
● HTML
● CSS
● JavaScript
○ Processing.js http://processingjs.org/
○ Buzz a Javascript HTML5 Audio library http://buzz.jaysalvat.com/
● Images, music

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

Music
● beethovenSound
● jumpSound
● tamponSound
● gameOverSound
● ouchSound
● shootSound

Play the game for the next
5 minutes and make a list
of things you would like
to change.

● ____________
● ____________
● ____________
● ____________
● ____________
● ____________
● ____________
● ____________
● ____________
● ____________
TODO

DOABLE TODAY
● ____________
● ____________
● ____________
● ____________
● ____________

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
● ...

<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>

for loop
for(var count=0; count<10; count++){
console.log(count);
}JavaScript Basics

Comments
for loop
// Hi, my name is comment
console.log(count);
/*
}
I am comment too.
I can take more space.
*/

for test.html
loop
<html>
console.log(count);
}
<head>
<script>
console.log("JavaScript");
</script>
</head>
<body>
</body>
</html>

Numbers
for loop
14
1+1
5-2
32*3
829/3
5%4
console.log(count);
}

Strings
"Ada"
"Lovelace"
"Ada".length
"Lovelace".length
for loop
console.log(count);
}

Boolean
for loop
true
false
1<2
console.log(count);
}

Variables
for loop
var score = 0; // number
score;
console.log(score);
console.log(count);
}
var muted = false; // boolean
var feedback = "I feel awesome";

Arrays
for loop
var lampList = [];
var console.tampons log(= ["count);
red", "green", "blue"];
var }
first = tampons[0];
console.log(first);
console.log(tampons[0]);

Functions
for loop
confirm("I feel awesome!");
console.log(count);
prompt("What is your name?");
}
console.log("What is your name?");

Functions
for loop
var sayHello = function(name) {
console.log(count);
}
console.log("Hello" + " " + name);
};
sayHello("Maja");

Functions / Methods
for loop
void pauseSound(soundToPlay) {
console.log(count);
}
soundToPlay.pause()
}

if sentence
for loop
var x = 1;
if ( x == 1) {
console.log(count);
}
console.log("x equals 1");
}

if sentence
for loop
var x = 4;
if ( x !== 1) {
console.log("x doesn’t equal 1");
}
console.log(count);
}

if for else
loop
var key = "left";
if (key == "up" ){
console.log(count);
}
console.log("Key is up.");
} else {
console.log("Some key.");
}

if for & loop
else if & else
var key = "left";
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.");
}

for loop
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]);
document.write("<br />")
}

Classes and objects
Animation
GameState
Lamppost
LampFactory
Cloud
CloudFactory
Gun
Ammo
BuildingFactory
EnemyFactory
DuaneReade
Building
Player
Enemy
Tampon

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...
}

Methods
play(soundToPlay)
pauseSound(SoundToPlay)
setup()
draw()
keyPressed()
keyReleased()

Remember what you wanted
to change in the game?

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?

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!

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).

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.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");

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 build your own.

Animations
Animation title;
title = new Animation("title", 2, 20);
Animation girlIntro;
girlIntro = new Animation("walk",2,5);

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);
*/

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);
*/

Change the cloud color
void showCloud() {
fill(255);
fill(0); // black or
// (0,0,0) (red, green and blue 0-255)

Gray clouds (uncomment c and add c to fill())
c = Math.floor((Math.random() * 255) + 1);
}
void showCloud() {
fill(c);

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);

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 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"]});

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

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

PROCESSINGJS REFERENCE
http://processingjs.org/reference/

Contact:
https://www.facebook.com/princessdesignnet
https://twitter.com/princessdesign

[EN] Ada Lovelace Day 2014 - Tampon run

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Ähnlich wie [EN] Ada Lovelace Day 2014 - Tampon run

Ähnlich wie [EN] Ada Lovelace Day 2014 - Tampon run (20)

Mehr von Maja Kraljič

Mehr von Maja Kraljič (11)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

[EN] Ada Lovelace Day 2014 - Tampon run