[EN] Ada Lovelace Day 2014 - Tampon run

LFU - 12. October 2014 - Ljubljana - KCQ

AdaLovelaceL. F. Menabrea: Sketch of The Analytical Engine Invented by Charles Babbage Note G

https://www.fourmilab.ch/babbage/sketch.html

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 Google

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

https://github.com/andrea-3000/TAMPON-RUN

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

Avatars / Images

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

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.

● ____________● ____________● ____________● ____________● ____________

● ____________● ____________● ____________● ____________● ____________

TODO

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

● 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

What can we ‘easily’ change?

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

Let’s do it...

index.html

<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 loopfor(var count=0; count<10; count++){

console.log(count);}

JavaScript Basics

brackets.io



Comments// Hi, my name is comment

/*I am comment too. I can take more space.*/



test.html

<html><head>

<script>console.log("JavaScript");

</script></head><body></body>

</html>

Google Chrome Console



Numbers141+15-232*3829/35%4



Strings"Ada" "Lovelace""Ada".length "Lovelace".length



Booleantruefalse1<2



Variablesvar score = 0; // numberscore;console.log(score);

var muted = false; // boolean

var feedback = "I feel awesome";



Arraysvar lampList = [];

var tampons = ["red", "green", "blue"];

var first = tampons[0];

console.log(first);

console.log(tampons[0]);



Functionsconfirm("I feel awesome!");

prompt("What is your name?");

console.log("What is your name?");



Functionsvar sayHello = function(name) {

console.log("Hello" + " " + name);

};

sayHello("Maja");



Functions / Methodsvoid pauseSound(soundToPlay) {

soundToPlay.pause()

}



if sentencevar x = 1;if ( x == 1) {

console.log("x equals 1");}



if sentencevar x = 4;if ( x !== 1) {console.log("x doesn’t equal 1");}



if else var key = "left";

if (key == "up" ){console.log("Key is up.");

} else {console.log("Some key.");

}



if & else if & elsevar key = "left";

if (key == "right" ) {console.log("Key is right.");

} else if (key == "up" ){console.log("Key is up.");

} else {console.log("Some key.");

}

for looptowns = ["LJ", "MB", "KR", "NM", "KP", "GO", "KR"];

for(var i=0; i<towns.length; i++){document.write(towns[i]);document.write("<br />")

}

Classes and objectsAnimationGameStateLamppostLampFactoryCloudCloudFactoryGunAmmo

BuildingFactoryEnemyFactoryDuaneReadeBuildingPlayerEnemyTampon

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

}

Methodsplay(soundToPlay)pauseSound(SoundToPlay)setup()draw()keyPressed()keyReleased()

Remember what you wanted to change in the game?

● 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

What can we ‘easily’ change?

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

Skip introHINT: 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 keysif (keyCode == 77)if (keyCode == 39)if (keyCode == 16)if (keyCode == 83)if (keyCode == 38)

TASK: Change the code so that you will be able to play the game with one hand!

SPACE: 32 // throw tamponRIGHT: 39 // forwardLEFT: 37 // backM: 77 // muteSHIFT: 16 // beginUP: 38 // jumpP: 80 // pauseS: 83 // restart

Change the number of initial tamponsHINT: 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 packHINT: Find where the number is defined and change it

tampon = tampon + 5 // 50

Change intro imagesstatementOne = 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 tamponsTASK: Open images in image

editor and change the color.

● ammo…png 4x

● attack…png 2x

New enemyenemies = new EnemyFactory("eWalk", 1);

/* change to swat and play the game */

TASK: Now try to build your own.

eWalk swat

AnimationsAnimation title;

title = new Animation("title", 2, 20);

Animation girlIntro;

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

Background coloorvoid 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 colorvoid 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 colorvoid showCloud() {

fill(255);

fill(0); // black or // (0,0,0) (red, green and blue 0-255)

Change the cloud colorGray clouds (uncomment c and add c to fill())

c = Math.floor((Math.random() * 255) + 1);

}

void showCloud() {

fill(c);

Change the cloud colorColor 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 lamppostTASK: Open the image

lamppost0000.png in Image editor

and change it.

Height of the jumpjumpHeight = 200;

/*

jumpHeight = 100; // higher

jumpHeight = 300; // lower

*/

Larger game canvasvar CANVAS_HEIGHT = 500; // 700

var CANVAS_WIDTH = 700; // 1200

Change soundsvar 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 andinstead create interactive experiences that portray women as capable, complex and inspirational.Anita Sarkeesian, Feminist Frequency

JAVASCRIPT REFERENCEhttp://learnxinyminutes.com/docs/javascript/http://www.codecademy.com/glossary/javascript https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide

TUTORIALShttp://www.codecademy.com/tracks/javascripthttps://www.khanacademy.org/computing/cs

http://learnxinyminutes.com/docs/javascript/


http://www.codecademy.com/glossary/javascript

http://www.codecademy.com/glossary/javascript


http://www.codecademy.com/tracks/javascript

http://www.codecademy.com/tracks/javascript

https://www.khanacademy.org/computing/cs

https://www.khanacademy.org/computing/cs

PROCESSINGJS REFERENCEhttp://processingjs.org/reference/

http://processingjs.org/reference/

http://processingjs.org/reference/

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

https://www.facebook.com/princessdesignnet

https://www.facebook.com/princessdesignnet

https://twitter.com/princessdesign



[EN] Ada Lovelace Day 2014 - Tampon run

Technology

Transcript of [EN] Ada Lovelace Day 2014 - Tampon run