This week I decided to make a game as per recommendation of some peers. Mid-way through I realized I had a horrible mistake. However, I got a lot of help from Ross and the following is the process and final product.
First I brainstormed out loud and understood the logic of making a game. The initial idea was to make a clock like structure, much like a wheel of fortune, that would contain a spinning dial. Once the player mouse clicked the screen, the dial would stop. If the dial stopped between an area, the player would win, otherwise they would lose.
I used a class for the dial and the code is as follows:
class Dial {
float locX, locY;
float angle;
//constructor
Dial(float x, float y) {
locX = x;
locY = y;
}
void draw () {
if (!clicked) {
strokeWeight(5);
stroke(#E50C0C);
float t = millis()/1000.0f;
locX = (locX+100*cos(t));
locY = (locY+100*sin(t));
line(300, 300, locX, locY);
}
else{
if(clicked){
image(img,17,25);
}
}
}
}
The spinning was found online and it created a sort of 3D rotation of what looked like a cone shape. The line wouldn’t rotate exactly around the diameter of the circle. Therefore, to fix this I made the background have the same color as the dial. It was a slight ratchet solution, but it works.
I don’t really understand why, but near the designated ‘win’ area, the dial seems to move faster. I didn’t do it on purpose but it works so I kept it.
As for the ‘win’ and ‘lose’ results, I decided to implement a sadistic ending and added a jigsaw photo. No matter whether the player won or not, the results would just show the photo of jigsaw from the movie Saw. Recently I watched ‘Ready Player One’ and in the movie they talked a lot about Easter eggs. I was inspired to put an Easter egg of the combination of Saw and Rick & Morty. (side tracking: the new episode of my favorite series ‘Rick & Morty’ is maybe coming out today, so I was thinking about it a lot). The little Easter egg is at the top right hand corner of the screen.
Here is the code of the game sketch:
Dial dial1;
boolean clicked = false;
float stopX;
float stopY;
PImage img;
void setup() {
size (600, 600);
dial1 = new Dial(300, 100);
img = loadImage("jigsaw.jpg");
}
void draw() {
background (#E50C0C);
fill(255);
ellipse(300, 300, 400, 400);
fill(0, 0, 0);
arc(300, 300, 400, 400, 0, QUARTER_PI, PIE);
dial1.draw();
textSize(8);
text("Rick is...is this a 'Saw' thing? Are you Sawing the Vindicators -Morty", 8, 10);
fill(0, 102, 153);
}
Here is a photo of what the game screen looks like:
