PR Development

Symo's Design Portfolio

Development...

In this Processing project I made a couple of small sketches to learn how to use the processing environment. As this is code based, there was a limited amount of research that was needed. This involved research into what bits of code do. This means that you could take several existing sketches and use their codes to implement something different using the same concepts. Below you will see my first couple of sketches followed by my final project.

First Sketches...

Final Design...

To the left is the first code I made, and the live sketch is to the right.
As you will see, the processing sketch draws grey circles on a black background, and when you click the mouse, the colour of the circles changes to blue.

To the left is the second code I made, and the live sketch is to the right.
As you will see, the processing sketch draws blue lines on a white background, and when you click the mouse, the colour of the lines changes to red.

For my final design I decided that I wanted to make a game to give myself a bigger challenge. I took a template from openprocessing.org to edit to make my game by adding extra levels. openprocessing.org is an online community where you can upload your sketches and others can play them and view your code. This is helpful for the education sector as you can change bits of the code and see exactly how it works.
Below is my game (Level 1).

// Steering Law

PFont poopfont;

float mx;
float my;
float r = 20;
float easing = 0.05;

int radius = 24;
int edge = 100;
int inner = edge + radius;
int level =1;
boolean finished = false;
void setup()
{
size(640, 280);
noStroke();
ellipseMode(RADIUS);
rectMode(CORNERS);
}

void draw()
{
if (!finished)
{
background(0);

// instruction

smooth();
fill(255);
textAlign(LEFT);
text("LEVEL " + level, edge, 20);
text("Move the red ball from one end of the white shape to the other.", edge, 50);
text("Try your best to keep the ball within the shape.", edge, 70);
text("If need be, click and hold to increase the width of the white shape.", edge, 200);
text("Click for next level.", edge, 230);

// movement and easing

if (abs(mouseX - mx) > 0.1) {
mx = mx + (mouseX - mx) * easing;
}
if (abs(mouseY - my) > 0.1) {
my = my + (mouseY- my) * easing;
}

// the "constrained" area

mx = constrain(mx, edge, width - edge);
my = constrain(my, edge, 135+r);

// white rect

fill(255);
rect(edge, edge, width-edge, 135);

rect(edge, edge, width-edge, 135+r);

// red ball

fill(255, 0, 0);
ellipse(mx, my, radius, radius);

//Test if mouse is within the beggining of the "road"
if(mouseX > 10 && mouseX < 20 && mouseY > 10 && mouseY < 20 && level == 2)
{
////YOU WIN
finished = true;
println("HIT!!!");
}

//Test if mouse is within the end of the "road"
println("LEVEL" + level + " --- POSITION IS " + mouseX + " ---- " + mouseY);
if(mouseX > 50 && mouseX < 100 && mouseY > 50 && mouseY < 100 && level == 1)
{
////GO TO LEVEL 2
level = 2;
println("HIT 2!!!");
}

// increased rect and constrain height

if (mousePressed)
{
r=30 ;
}
else
{
r=20 ;
}
}else
{
//DRAW FINISH
background(0);
}
}

As you will be able to see from my game above, I was unable to add the extra level, like I wanted to. I changed the code to add level 2 but experienced a few issues and was unable to complete it. To the right is the code that I have used.

Due to the complications with getting my live sketches onto Hotglue.me I have, below inserted screen shots of my products for your perusal.

The Code...

Sketch One...

Sketch Two...

Final Sketch...