21.06.2024
This game has the goal to make people aware about the unfortunate and unfair situation, that important female film pioneers don’t get close to the same amount of attention as their male counterparts. The visual style additionally enhances the meaning behind the game, while at the same time giving it a bit of light playfulness. It acts as a starting point for further research, which is of high importance.
It consists of three seperate screens which can be switched by using the keyboard. The first one acts as an explanatory intro screen.
On the second screen, the player can drag the faces of famous male filmmakers by using the mouse. This will uncover the photos of important historical female filmmakers. When the player clicks on each photo, a pop up window opens, containing information about the lives and careers of these women. At the current moment, the window also shows film stills of their works, but in the further process I'm planning to switch these out with short film clips.
By using the keyboard, the player can switch to the third and final screen, where they not only get xxx.... but are also being reminded that this game is just the beginning of giving these incredible women the attention they deserve.
This is my very first project using creative coding and the program processing. Up until this course during my exchange I only had minor knowledge about programming, and the few things I knew were also totally unrelated to what I needed to learn in order to create such a mini-game.
Working on this project gave me the opportunity to explore a whole new world of skills, practices, and ways of creating - which definitely got me hooked on diving even deeper into programming.
Software I used:
Processing 4
Photoshop
InDesign
Illustrator
Sketch_Final_Version_Cleaned
int state = 0;
PImage imgRow5;
PImage imgRow4;
PImage imgRow3;
PImage imgRow2;
PImage imgRow1;
PImage imgBarbara;
PImage imgAlice;
PImage imgKinuyo;
PImage imgTressie;
PImage imgLotte;
PImage imgMadameE;
PImage imgJulie;
int OffsetX;
int OffsetY;
BoxWomen jd; //Julie Dash
BoxWomen bh; // Barbara Hammer
BoxWomen ag; // Alice Guy
BoxWomen tk; // Tanaka Kinuyo
BoxWomen trs; // Tressie Souders
BoxWomen me; // Madame E
BoxWomen lr; // Lottte Reiniger
BoxAH ah; //Hitchcock
BoxAH fl; // Fritz Lang
BoxAH se; // Eisenstein
BoxAH cc; // Chaplin
BoxAH sk; // Kubrick
BoxAH qt; // Tarantino
BoxAH aw; // Warhol
BoxAH jf; // Ford
BoxAH sb; // Brakhage
BoxAH ms; // Scorsese
PImage imgIntro;
PImage imgOutro;
PImage imgEndGame;
PImage imgPopUp1_jd;
PImage imgPopUp2_bh;
PImage imgPopUp3_ag;
PImage imgPopUp4_tk;
PImage imgPopUp5_trs;
PImage imgPopUp6_me;
PImage imgPopUp7_lr;
int selectedWomanId;
void setup() {
fullScreen();
OffsetX = 160;
OffsetY = 18;
//Male filmmakers:
ah = new BoxAH(205+OffsetX, 340+OffsetY, 190, 333, "Hitchcock.png");
fl = new BoxAH(173+OffsetX, 55+OffsetY, 324, 351, "Lang.png");
se = new BoxAH(1184+OffsetX, 60+OffsetY, 244, 363, "Eisenstein.png");
cc = new BoxAH(1008+OffsetX, 40+OffsetY, 246, 356, "Chaplin.png");
sk = new BoxAH(480+OffsetX, 60+OffsetY, 300, 388, "Kubrick.png");
qt = new BoxAH(765+OffsetX, 60+OffsetY, 225, 341, "Tarantino.png");
aw = new BoxAH(1095+OffsetX, 333+OffsetY, 317, 387, "Warhol.png");
jf = new BoxAH(610+OffsetX, 360+OffsetY, 348, 454, "Ford2.png");
sb = new BoxAH(928+OffsetX, 345+OffsetY, 231, 347, "Brakhage.png");
ms = new BoxAH(378+OffsetX, 332, 251, 352, "Scorsese.png");
//Male filmmakers ^
// Female Filmmakers:
jd = new BoxWomen(615+OffsetX, 154+OffsetY, 313, 409, "Julie Dash.png", 1);
bh = new BoxWomen(130+OffsetX, 186+OffsetY, 349, 428, "Barbara Hammer.png", 2);
ag = new BoxWomen(420+OffsetX, 220+OffsetY, 248, 394, "Alice_Guy.png", 3);
tk = new BoxWomen(934+OffsetX, 115+OffsetY, 434, 328, "Kinuyo.png", 4);
trs = new BoxWomen(640+OffsetX, 366+OffsetY, 373, 248, "Tressie Souders1.1.png", 5);
me = new BoxWomen(1226+OffsetX, 266+OffsetY, 213, 351, "Madame E. Toussaint Welcome
1.png", 6);
lr = new BoxWomen(953+OffsetX, 356+OffsetY, 325, 258, "Lotte Reinger.png", 7);
// Female Filmmakers^
// Cinema + Seatrows:
imgRow5 = loadImage("Room+ Row 5.png");
imgRow5.resize(1600, 1000);
imgRow4 = loadImage("Row 4.png");
imgRow4.resize(1600, 1000);
imgRow3 = loadImage("Row 3.png");
imgRow3.resize(1600, 1000);
imgRow2 = loadImage("Row 2.png");
imgRow2.resize(1600, 1000);
imgRow1 = loadImage("Row 1.png");
imgRow1.resize(1600, 1000);
// Cinema + Seatrows ^
// Intro & Outro screen + end game info for main game
imgIntro = loadImage("Intro Screen Sized2.png");
imgIntro.resize(1920, 1080);
imgOutro = loadImage("Outro Screen Sized 2.png");
imgOutro.resize(1920, 1080);
imgEndGame = loadImage("n to end game.png");
imgEndGame.resize(336, 55);
//Intro & Outro + end game info-button
//PopUp Windows:
imgPopUp1_jd = loadImage("PopUp Window Dash.png");
//imgPopUpAG.resize();
imgPopUp2_bh = loadImage("PopUp Window Barbara.png");
//imgPopUpAG.resize();
imgPopUp3_ag = loadImage("PopUp Window Alice.png");
//imgPopUpAG.resize();
imgPopUp4_tk = loadImage("PopUp Window Kinuyo_.png");
//imgPopUpAG.resize();
imgPopUp5_trs = loadImage("PopUp Window Tressie.png");
//imgPopUpAG.resize();
imgPopUp6_me = loadImage("PopUp Window Madame E_.png");
//imgPopUpAG.resize();
imgPopUp7_lr = loadImage("PopUp Window Lotte.png");
//imgPopUpAG.resize();
//PopUp Windows^
}
// End Setup
void draw() {
background(0);
if (state == 0) { // State 0: draw IntroPage
image(imgIntro, 0, 0);
} else if (state == 1 || state == 2) { // State 1: Main Game
image(imgRow5, 0+OffsetX, 0+OffsetY); // Cinema screen + Row5)
image(imgEndGame, 630+OffsetX, 1000+OffsetY); // n to end game info-button
// Female Filmmakers in front of screen & behind men
jd.display(); // Julie Dash
bh.display(); // Barbara Hammer
ag.display(); // Alice Guy
tk.display(); // Kinuyo Sakane
trs.display(); // Tressie Souders
me.display(); // Madame E
lr.display(); // Lotte Reiniger
// Female Filmmakers in front of screen & behind men ^
ah.display(); // Hitchcock sitting in row5
sk.display(); // Kubrik sitting in row5
image(imgRow4, 0+OffsetX, 0+OffsetY); // Row4)
se.display(); // Eisenstein sitting in row4
image(imgRow3, 0+OffsetX, 0+OffsetY); // Row3)
qt.display(); // Tarantino sitting in row3
aw.display(); // Warhol sitting in row3
jf.display(); // Ford sitting in row3
image(imgRow2, 0+OffsetX, 0+OffsetY); // Row2)
fl.display(); // Lang sitting in row2
cc.display(); // Chaplin sitting in row2
sb.display(); // Brakhage sitting in row2
ms.display(); // Scorsese sitting in row 2 & overlapping Lang in start position
image(imgRow1, 0+OffsetX, 0+OffsetY); // Row1)
// Female Filmmakers, Male Filmmakers in the right oder above/ between seat rows
// Cyan Frame:
rect(0+OffsetX, 0+OffsetY, 1600, 1000);
noFill();
strokeWeight(1);
stroke(20, 200, 200);
// Cyan Frame
// *************click at right position for correct PopUp***************
if (state == 2) {
if (selectedWomanId == 2) {
image(imgPopUp2_bh, 394, 138, 1135, 495);
} else if (selectedWomanId == 1) {
image(imgPopUp1_jd, 394, 138, 1135, 495);
} else if (selectedWomanId == 3) {
image(imgPopUp3_ag, 394, 138, 1135, 495);
} else if (selectedWomanId == 4) {
image(imgPopUp4_tk, 394, 138, 1135, 495);
} else if (selectedWomanId == 5) {
image(imgPopUp5_trs, 394, 138, 1135, 495);
} else if (selectedWomanId == 6) {
image(imgPopUp6_me, 394, 138, 1135, 495);
} else if (selectedWomanId == 7) {
image(imgPopUp7_lr, 394, 138, 1135, 495);
} else {
// If no woman box is associated to the selectedWomanId, return to state 1
// Otherwise the program will be blocked - (it will only wait for a close button to be clicked on - but
there is none)
state = 1;
}
}
// ****************************************************************
// State machine outro page:
} else if (state == 3) {
image(imgOutro, 0, 0);
}
}
// Drag&Drop Class Men + Click for Class Women
void mousePressed() {
if (state == 1) {
boolean b = ms.mousePressed();
if (b == false) b = sb.mousePressed();
if (b == false) b = jf.mousePressed();
if (b == false) b = aw.mousePressed();
if (b == false) b = qt.mousePressed();
if (b == false) b = sk.mousePressed();
if (b == false) b = cc.mousePressed();
if (b == false) b = se.mousePressed();
if (b == false) b = fl.mousePressed();
if (b == false) b = ah.mousePressed();
if (b == false) b = lr.mousePressed();
if (b == false) b = me.mousePressed();
if (b == false) b = trs.mousePressed();
if (b == false) b = tk.mousePressed();
if (b == false) b = ag.mousePressed();
if (b == false) b = bh.mousePressed();
if (b == false) b = jd.mousePressed();
} else if (state == 2) {
if (mouseX <= 1525 && mouseX >= 1468 && mouseY <=164 && mouseY >=139) { // close popup
window with mouse click
state = 1;
println("YES!!!");
//} else if (key == 'n' && state == 2) { // Resart to Intro
}
}
}
// Rest drag & drop class men
void mouseDragged() {
ms.mouseDragged();
sb.mouseDragged();
jf.mouseDragged();
aw.mouseDragged();
qt.mouseDragged();
sk.mouseDragged();
cc.mouseDragged();
se.mouseDragged();
fl.mouseDragged();
ah.mouseDragged();
}
void mouseReleased() {
ms.mouseReleased();
sb.mouseReleased();
jf.mouseReleased();
aw.mouseReleased();
qt.mouseReleased();
sk.mouseReleased();
cc.mouseReleased();
se.mouseReleased();
fl.mouseReleased();
ah.mouseReleased();
}
// Rest drag & drop class men ^
// State Machine key pressed:
void keyPressed() {
if (key == 's' && state == 0) { // Intro to main game
state = 1;
} else if (key == 'o' && state == 1) { //open PopUp window
state = 2;
} else if (key == 'x' && state == 2) { // close popup window with key x
state = 1;
//println("YES!!!");
//} else if (key == 'n' && state == 2) { // Resart to Intro
} else if (key == 'b' && state == 1) {
state = 0;
} else if (key == 'n' && state == 1) { //go to Outro
state = 3;
} else if (key == 'n' && state == 3) {
state = 0;
}
// State machine o-key/ n-key/ x-key pressed ^
}
// Class for men:
class BoxAH {
int xBoxAH;
int yBoxAH;
int wBoxAH;
int hBoxAH;
PImage img;
boolean dragging = false;
int offsetX;
int offsetY;
BoxAH(int x, int y, int w, int h, String path) {
xBoxAH = x;
yBoxAH = y;
wBoxAH = w;
hBoxAH = h;
img = loadImage(path);
// img.resize(1600, 1000); >> didn't do anything?
}
void display() {
//pushMatrix();
//translate(-xBox-wBox*0.5,-yBox-hBox*0.5);
//rotate(PI/6.0);
image(img, xBoxAH, yBoxAH, wBoxAH, hBoxAH);
//popMatrix();
}
// Class for men ^
// Drag&Drop Class Men :
boolean mousePressed() {
if (mouseX >= xBoxAH && mouseX <= xBoxAH + wBoxAH && mouseY >= yBoxAH && mouseY <=
yBoxAH+hBoxAH) {
dragging = true;
offsetX = mouseX-xBoxAH;
offsetY = mouseY-yBoxAH;
}
return dragging;
}
void mouseDragged() {
if (dragging == true) {
xBoxAH = mouseX - offsetX;
yBoxAH = mouseY - offsetY;
}
}
void mouseReleased() {
dragging = false;
}
// Drag&Drop Class Men ^
}
// Class for Women:
class BoxWomen {
int xBoxWomen;
int yBoxWomen;
int wBoxWomen;
int hBoxWomen;
PImage img;
boolean imgPopUp = false;
int offsetX;
int offsetY;
int id;
BoxWomen(int x, int y, int w, int h, String path, int womanId) {
xBoxWomen = x;
yBoxWomen = y;
wBoxWomen = w;
hBoxWomen = h;
id = womanId;
img = loadImage(path);
}
void display() {
//pushMatrix();
//translate(-xBox-wBox*0.5,-yBox-hBox*0.5);
//rotate(PI/6.0);
image(img, xBoxWomen, yBoxWomen, wBoxWomen, hBoxWomen);
//popMatrix();
}
// Class for Women ^
// Click Class Women to open PopUp :
boolean mousePressed() {
if (mouseX >= xBoxWomen && mouseX <= xBoxWomen + wBoxWomen && mouseY >=
yBoxWomen && mouseY <= yBoxWomen+hBoxWomen) {
imgPopUp = true;
state = 2;
selectedWomanId = id;
offsetX = mouseX-xBoxWomen;
offsetY = mouseY-yBoxWomen;
} else { // not sure what to put in here
imgPopUp = false;
offsetX = mouseX-xBoxWomen;
offsetY = mouseY-yBoxWomen;
}
return imgPopUp;
}
// Click Class Women to open PopUp ^
}