Author: Shaikha Alshehhi

IDEA & DESIGN :

My idea for my final project was to create the game “WHAC-A-MOLE” using Arduino as a controlling system for the game. But because I wanted my game to be unique I thought I’d change the theme and change the game to “WHAC-A-VAMP” so whacking vampires instead (which if you ask me is way cooler). I chose a vampire because (not sure if I mentioned it in my first assignment or not, but I made a “vampire themed self-portrait??”)

Yes, she’s supposed to be a vampire. What do you mean she doesn’t look like one?

Anyways, so users whack my vampire self-portrait. Now that I think about it my idea is kind of problematic-

IDEA (but seriously):

For the game itself, I re-drew my self-portrait:

I was hoping I’d finish it completely to put the finished piece in the main menu but my program quit and only the sketch was saved. Basically, all my painting efforts have gone to waste and thankfully I screenshotted the face at least to include it in my game. This is what’s been saved ;-;

I use the same code for the stars in my dancing planets project in the background because I really liked it and I did not want a boring plain background.

APPLICATION AND CHALLENGES:

My game took much more time than anticipated. Whenever I tried to solve a problem a new problem arises. My highest streak of coding for this assignment was 10 hours straight! (not my highest streak for coding btw) But, it was definitely very exhausting. My main problems were the following:

• Wiring problems (honestly I’m embarrassed that I faced them)

I did not know that I was not inserting my buttons correctly on the breadboard! The buttons were always loose, but I just thought it was how they were designed. So, when I run my program, I would think I pressed the button but it is just loose, thus I’d think it is a logical problem. I only fixed this problem after the professor pointed it out lol.

• Logical problems

I faced problems because there would be loophole in my code that I could not see. For that, I needed a fresh pair of eyes to have a look at it and point out how to fix them.

My first problem was that when I would click to begin the game, the screen would go back and forth from menuScreen to gameScreen. I solved that by using boolean variables instead of using integer variables.

final int MENUSCREEN = 0;
final int GAMESCREEN = 1;
final int AGAINSCREEN = 2;
int screenState;

those were the previous variables and switching to boolean fixed it

• Problems regarding functions I’m not familiar with

This problem occurred with the serialEvent function. Because I was not aware of how to use it properly, I used it like it is a normal function. And so, I would call it whenever I would call the drawGame function and that interrupted the button values from Arduino. The fix was to not call it, it would read the Arduino information whenever it receives it.

DEMONSTRATION:

My code is in this zip file

submitted at 12:09 am (please don’t consider this to be late)

For me, the hardest part (other than the coding *starts crying*) is not to change my idea. My initial idea was to recreate WHACK-A-MOLE game, but since I’m recreating it to be my own I’m going to make it WHACK-A-VAMP (whacking vampires instead of moles hahaha so creative). And so, to insure that I won’t change my idea, I started drawing the background *I’m drawing the characters and the setup of the game on my own*

// variable declaration
const int rLED = 2;
const int bLED = 3;
const int gLED = 4;
const int yLED = 5;

const int rButton = 9;
const int bButton = 8;
const int gButton = 7;
const int yButton = 6;

void setup()
{
  //Set LED pins, displays light
  pinMode(rLED, OUTPUT);
  pinMode(bLED, OUTPUT);
  pinMode(gLED, OUTPUT);
  pinMode(yLED, OUTPUT);
 
  //Set Buttons as inputs. controls if the user whacked the vamp
  pinMode(rButton, INPUT);
  pinMode(bButton, INPUT);
  pinMode(gButton, INPUT);
  pinMode(yButton, INPUT);
}

void loop()
{
// here is the code for when the LED lights are represented as the vamps so that once i'm done with the processing animation part i would just add another condition which is for the vamp to be shown on screen
for(int i = 0; i < 10; i++)
  {
    //Randomly turns on an LED
    digitalWrite(random(2, 6), HIGH);
   
    //Checks if any of the LEDs are on
    while(digitalRead(rLED) == HIGH || digitalRead(bLED) == HIGH || digitalRead(gLED) == HIGH ||digitalRead(yLED) == HIGH)
    {
      //Functions that turns off the randomly lit LED
      if (digitalRead(rLED) == HIGH)
      {
        // Makes sure button is pressed
        if (digitalRead(rButton) == HIGH)
        {
          //Turns off LED
          digitalWrite(rLED, LOW);
        }
      }

      if (digitalRead(bLED) == HIGH)
      {
        // Makes sure button is pressed
        if(digitalRead(bButton) == HIGH)
        {  
          //Turns off LED
          digitalWrite(bLED, LOW);
        }
      }

      if (digitalRead(gLED) == HIGH)
      {
        //Makes sure button is pressed
        if(digitalRead(gButton) == HIGH)
        {
          //Turns off LED
          digitalWrite(gLED, LOW);
        }
      }

      if (digitalRead(yLED) == HIGH)
      {
        // Makes sure button is pressed
        if(digitalRead(yButton) == HIGH)
        {
          //Turns off LED
          digitalWrite(yLED, LOW);
        }
      }
      delay(100);
    }
  }
 
// ends the game
for (int i = 0; i < 3; i++)
  {
    digitalWrite(rLED, HIGH);
    digitalWrite(bLED, HIGH);
    digitalWrite(gLED, HIGH);
    digitalWrite(yLED, HIGH);

    delay(250);

    digitalWrite(rLED, LOW);
    digitalWrite(bLED, LOW);
    digitalWrite(gLED, LOW);
    digitalWrite(yLED, LOW);

    delay(250);
  }
}

My idea for the time being is making a WHAC-A-MOLE game with a twist of my own using ardiuno and processing together where you use a controller to play the game.

The controller will require the following tools:

• 4 buttons > for the main menu + hitting/whacking the moles
• motor sensor > so that when it does not detect a movement in a duration of time the game would close
• LED > to indicate if the game is on or off + another LED that lights if you got the point
• potentiometer > to adjust the volume of the game

The game would be a normal WHAC-A-MOLE, but I will draw the setup of the game on my own. I will probably look into more ways I could take this game to another level.

Exercise 1

Arduino

//Exercise 1
 
const int pinPont = A0;
 
void setup() {
  Serial.begin(9600);
  Serial.println("0");
}
 
void loop() {
  while (Serial.available()) {
    if (Serial.read() == '\n') {
 
      //read the values of the potentiometer
      int sensor = analogRead(pinPont);
      delay(1);
      //print the value
      Serial.println(sensor);
    }
  }
}

//Exercise 1
import processing.serial.*;
Serial myPort;
int xPos = 0;
int yPos;

void setup() {
  size(960, 720);
  printArray(Serial.list());
  String portname=Serial.list()[3]; // "/dev/cu.usbmodem101"
  println(portname);
  myPort = new Serial(this, portname, 9600);
  myPort.clear();
  myPort.bufferUntil('\n');
}

void draw() {
  background(255);
  yPos = height/2;
  ellipse(xPos, yPos, 30, 30);
 
}

void serialEvent(Serial myPort) {
  String s=myPort.readStringUntil('\n');
  s=trim(s);
  if (s!=null) {
    //read value from Arduino (potentiometer)
    
    println(s);
    int value = int(s);
    
    //map the value to a position in range of the width
    xPos=(int)map(value, 0, 1023, 0, width);
  }
  myPort.write("\n");
}

//Exercise 2
 
int ledPin = 5;
 
float brightness;
 
void setup() {
  Serial.begin(9600);
  Serial.println("0");
  pinMode(ledPin, OUTPUT);
}
 
void loop() {
  while (Serial.available()) {
    //get the brightness value from processing
    brightness = Serial.parseFloat();
    
    if (Serial.read() == '\n') {
    //turn on the LED with the given brightness
      analogWrite(ledPin, brightness);
      Serial.println(brightness);
    }
  }
}

//Exercise 2
import processing.serial.*;
Serial myPort;
int xPos = 0;
int yPos;
 
int brightness;
 
void setup() {
  size(960, 720);
  printArray(Serial.list());
  String portname=Serial.list()[3]; // "/dev/cu.usbmodem101"
  println(portname);
  myPort = new Serial(this, portname, 9600);
  myPort.clear();
  myPort.bufferUntil('\n');
}
 
void draw() {
  background(255);
 
  //map the mouseX position to the range of birghtness of the LED
  brightness = int(map(mouseX, 0, width, 0, 255));
  
  yPos = height/2;
  ellipse(mouseX, yPos, 30, 30);
}
 
void serialEvent(Serial myPort) {
  String s=myPort.readStringUntil('\n');
  s=trim(s);
 
  //write brightness so that Arduino can use it
  myPort.write(brightness+ "\n");
}

Exercise 1

Arduino

Processing

Exercise 2

Arduino

//Exercise 2

int ledPin = 5;

float brightness;

void setup() {
  Serial.begin(9600);
  Serial.println("0");
  pinMode(ledPin, OUTPUT);
}

void loop() {
  while (Serial.available()) {
    //get the brightness value from processing
    brightness = Serial.parseFloat();
    
    if (Serial.read() == '\n') {
    //turn on the LED with the given brightness
      analogWrite(ledPin, brightness);
      Serial.println(brightness);
    }
  }
}

Processing

//Exercise 2
import processing.serial.*;
Serial myPort;
int xPos = 0;
int yPos;

int brightness;

void setup() {
  size(960, 720);
  printArray(Serial.list());
  String portname=Serial.list()[3]; // "/dev/cu.usbmodem101"
  println(portname);
  myPort = new Serial(this, portname, 9600);
  myPort.clear();
  myPort.bufferUntil('\n');
}

void draw() {
  background(255);

  //map the mouseX position to the range of birghtness of the LED
  brightness = int(map(mouseX, 0, width, 0, 255));
  
  yPos = height/2;
  ellipse(mouseX, yPos, 30, 30);
}

void serialEvent(Serial myPort) {
  String s=myPort.readStringUntil('\n');
  s=trim(s);

  //write brightness so that Arduino can use it
  myPort.write(brightness+ "\n");
}

Exercise 3

Arduino

int left = 0;
int right = 0;

int light1 = 0;
int LED1 = LOW;

void setup() {
  Serial.begin(9600);
  Serial.println("0,0");
  pinMode(2, OUTPUT);
  pinMode(5, OUTPUT);
}

void loop() {
  while (Serial.available()) {
    //    right = Serial.parseInt();

    //get whether LED should be turned on from Processing
    light1 = Serial.parseInt();
    
    Serial.println(light1);

    if (Serial.read() == '\n')
    {
      
      if (light1 == 1)
      {
        LED1 = HIGH;
      }
      else
      {
        LED1 = LOW;
        
      }
      digitalWrite(5, LED1);

      //get the vvalues from the potentiometer
      int sensor = analogRead(A0);
      delay(1);
     
      //      delay(1);
      Serial.println(sensor);
      
      //      Serial.print(',');
      //      Serial.println(sensor2);
      
      //Serial.println(LED1);
    }
  }
}

Processing

import processing.serial.*;
Serial myPort;

PVector velocity;
PVector gravity;
PVector position;
PVector acceleration;
PVector wind;
float drag = 0.99;
float mass = 50;
float hDampening;
boolean light; 

int valueCapacitor;

void setup() {
  size(640,360);
  noFill();
  position = new PVector(width/2, 0);
  velocity = new PVector(0,0);
  acceleration = new PVector(0,0);
  gravity = new PVector(0, 0.5*mass);
  wind = new PVector(0,0);
  hDampening=map(mass,15,80,.98,.96);
  printArray(Serial.list());
  String portname=Serial.list()[3];
  println(portname);
  myPort = new Serial(this,portname,9600);
  myPort.clear();
  myPort.bufferUntil('\n');
}

void draw() {
  background(255);
  
  
  if (!keyPressed){
    wind.x= valueCapacitor;
    velocity.x*=hDampening;
  }
  
  
  applyForce(wind);
  applyForce(gravity);
  velocity.add(acceleration);
  velocity.mult(drag);
  position.add(velocity);
  acceleration.mult(0);
  ellipse(position.x,position.y,mass,mass);
  if (position.y > height-mass/2) {
      velocity.y *= -0.9;  // A little dampening when hitting the bottom
      position.y = height-mass/2;
    }
    
   if (position.y == height - mass/2){
     light = true;
   }
}
  
void applyForce(PVector force){
  // Newton's 2nd law: F = M * A
  // or A = F / M
  PVector f = PVector.div(force, mass);
  acceleration.add(f);
}

void keyPressed(){
  if (keyCode==LEFT){
    wind.x=-1;
  }
  if (keyCode==RIGHT){
    wind.x=1;
  }
  if (key==' '){
    mass=random(15,80);
    position.y=-mass;
    velocity.mult(0);
  }
  
}

void serialEvent(Serial myPort) {
  String s=myPort.readStringUntil('\n');
  s=trim(s);
  
  if (s!=null) {
    int value = int(s);
    valueCapacitor = (int)map(value, 0, 1023, 0, width*.01);
  }
  
  // we need to use velocity,y so that the light turns off when it is not moving
  // if we use position, the blinking is delayed 
  if (round(velocity.y) < 0) {
    myPort.write(1 + "\n");
    println(1);
  } else {
    myPort.write(0 + "\n");
    println(0);
  }
}

OBJECTIVE(S):

For this assignment, I have to admit, I did the bare minimum which is fulfilling the criteria for this week. I wanted to control the brightness of one LED to fulfill the analog criteria. Then, to cross the digital sensor requirement, I used a button to control when the LED turns on.

DIFFICULTIES:

The moment I read the assignment prompt, I knew I had to learn the structure of an Arduino UNO board since I forgot everything we took in class lol. However, that was fruitful since I learned some things about Arduino boards we did not cover in class 🙂 I also faced difficulties with matching the name of the parts like the potentiometer to the pieces we have in our kits since there are different designs of the same pieces.

IMPLEMENTATION:

implementing the pieces and writing the code was fairly easy after learning the structure of the Arduino UNO board. I used a blue LED to be controlled by the potentiometer since it’s blue as well, additionally, I used a red LED to be used with the red button to make it more easy/satisfying to use.

CODE:

const int analogIn = A0;  
const int analogOut = 5; 
const int buttonPin = 4;     
const int ledPin =  7; 
int sensorValue = 0;        
int output = 0;  
int buttonState = 0;       

void setup() {
  // initialize serial communications
  Serial.begin(9600);
  pinMode(ledPin, OUTPUT);
  pinMode(buttonPin, INPUT);
  
}

void loop() {
  // read the analong input value
  sensorValue = analogRead(analogIn);
  // map it to the range of 0 to 255
  output = map(sensorValue, 0, 1023, 0, 255);
  // change the analog out value
  analogWrite(analogOut, output);

// delay 2 milliseconds 
  delay(2);

  // read the state of the pushbutton 
  buttonState = digitalRead(buttonPin);

  // check if the pushbutton is pressed
  if (buttonState == HIGH) {
    // turn LED on:
    digitalWrite(ledPin, HIGH);
  } else {
    // turn LED off:
    digitalWrite(ledPin, LOW);
  }
}

🙂

IDEA:

One of my favorite games I played back in my childhood was the snake game. I used to play it on the old Nokia phones which was a very basic version of it. I thought recreating the snake game would be a nice aim for the midterm. However, since I did not want to replicate it, but make my own version of it so, I got creative with it and added my own final touches on it to -in a way- make it my own.

^The form I tried replicating^

PROCESS:

I started with creating the main menu

and wrote an array list that will store the x and y values of the snake then, making the snake’s body that is generated through a for loop. Changed the frame count too, to make the snake faster after each 5 points.

In order to grow the snake’s body, I wrote a bunch of code that makes up the fruit of the snake and randomly generates it across the window. I also added a sound effect to play when the snake takes a bit from the food.

After that, a user would like to view their score instead of counting the squares that make up the snake’s body, so I added a text function that displays the score which is the size of the snake.

In order for this game to end, the snake must die. So, I created an if statement that checks of the snake’s position is on the window’s parameter. Then a for loop to check if the snake bit itself. Then an option to play again if the user wanted to.

WHY IT IS BETTER THAN THE ORIGINAL + FEATURES:

1)Different visuals and sounds

2)You can read your score

3)You can play over and over again

4)Night mode – in a way

5) snake speeds up every 5 points making it more challenging

DEMO:

CODE:

// main menu variables
String gameState;


// to make the snake's body
ArrayList<Integer> x = new ArrayList<Integer>(), y = new ArrayList<Integer>();

//image variable
PImage fruit;

//global variables
int w=30, h=30, blockSize=20, dir=2, foodX=15, foodY=15, speedNum = 8, fc = 255, life = 30, score;

//font variable
PFont f; 

//coordinates for x and y
int[] Xdir={0, 0, 1, -1};
int[] Ydir={1, -1, 0, 0}; 

//game condition 
boolean gameOver=false;

  
import processing.sound.*;
SoundFile foodSound;
SoundFile mainMenuSound;





void setup(){

  size(600, 600);
  gameState = "START";
  // font initializer
  f = createFont("Georgia", 35);
  //snake's starting position 
  x.add(0); y.add(15); 

  foodSound = new SoundFile(this, "0.aif");
  
  
  fruit = loadImage("apple.png");





}


void draw() {
  background(0);
  if (gameState == "START") {
    startGame();
  } else if (gameState == "PLAY") {
    playGame();
  } else if (gameState == "LOSE") {
    loseGame();
  }
}


void startGame(){
  
  textAlign(CENTER);
  textSize(18);
  textFont(f);
  fill(255);
  text("Click Anywhere to Start the Game!", width/2, height/2 -30);
  textSize(14);
  text("Use the Arrows to move\n Eat the fruits for a higher score \n Do NOT eat yourself or escape the walls of the game\n You have 1 life", width/2, height/2);
  //look for the click
  if (mousePressed == true) {
    gameState = "PLAY";
  }
}




void playGame(){
  
  
  
  
   //snake's body color
  fill(3, 252, 169); 
  
  //snake's body
  for (int i = 0; i < x.size(); i++){
    
    rect(x.get(i)*blockSize, y.get(i)*blockSize, blockSize, blockSize);
    }
    
    
    if (!gameOver) { 
    // food
    imageMode(CENTER);
    image(fruit, foodX*blockSize+10, foodY*blockSize+10, fruit.width*0.03, fruit.height*0.03);
    // score on player screen
    textAlign(LEFT); 
    textFont(f);
    textSize(25);
    fill(255);
    text("score : " + x.size(), 30, 30, width - 20, 50);
    
    //add more blocks to the snake
    if (frameCount%speedNum==0) { 
      x.add(0, x.get(0) + Xdir[dir]); 
      y.add(0, y.get(0) + Ydir[dir]);
    
    
      // snake die if it touches the window
      if (x.get(0) < 0 || y.get(0) < 0 || x.get(0) >= w || y.get(0) >= h) {
        
        gameOver = true;
    }
    //  snake die if it touches itself
    for (int i=1; i<x.size(); i++) 
        if (x.get(0)==x.get(i)&&y.get(0)==y.get(i)) gameOver = true; 
        
        // eating food 
        if (x.get(0)==foodX && y.get(0)==foodY) { 
         if (x.size() %5==0 && speedNum>=2) speedNum-=1;  // speed increases every 5 points 
          foodSound.play();
         // generates new food position
        foodX = (int)random(0, w);
        foodY = (int)random(0, h);
       
 
      } else {
        // so that the snake size doesnt become infinite
        x.remove(x.size()-1); 
        y.remove(y.size()-1);
      }
    }
  }
  
  
  else {
   
    loseGame();
  }
 

}


void loseGame(){

  // game is over screen
    fill(255); 
    textSize(30); 
    textFont(f);
    textAlign(CENTER); 
    text("GAME OVER \n Your Score is: "+ x.size() +"\n Press ENTER", width/2, height/3+30);
    
    keyPressed();
  
}


void keyPressed() { 
  int newDir=keyCode == DOWN? 0:(keyCode == UP?1:(keyCode == RIGHT?2:(keyCode == LEFT?3:-1)));
  if (newDir != -1) dir = newDir;
  
  if (keyCode == ENTER && gameOver) { 
    x.clear(); 
    y.clear(); 
    x.add(0);  
    y.add(15);
    dir = 2;
    speedNum = 8;
    gameOver = false;
  }
}

The link to download the zip folder with the code:

https://github.com/ShaikhaAlshehhi/Midterm-SnakeGameFinal

CONCLUSION:

I really had fun experimenting and testing this project. It did add to my coding career and inspired me. As a next step for this project, I would like to implement a life system where the snake would get injured instead of dying and could heal from it.

IDEA:

One of my favorite games I played back in my childhood was the snake game. I thought recreating the snake game would be a nice aim for the midterm. However, since I do not want to replicate it but make my own version of it, I am going to get creative with it. I am still not set with the creative part; however, I am thinking of shifting to a new mode after reaching a certain amount of points.

For now, I have almost made the classic snake game. After I figure out all the features I would like to add for my new mode, I will add it as an if statement when the score reaches a certain amount.

https://youtu.be/v1hmxYABemE

Code:

ArrayList<Integer> x = new ArrayList<Integer>(), y = new ArrayList<Integer>();

int w=30, h=30, blocks=20, direction=2, foodX=15, foodY=15, speed = 8, fc1 = 255, fc2 = 255, fc3 = 255; PFont f; 

int[]Xdirection={0, 0, 1, -1}, Ydirection={1, -1, 0, 0}; //coordinates for x and y


boolean gameover=false;

void setup() { 
  size(600, 600); 
  f = createFont("Georgia", 35);
  x.add(0); y.add(15); //snake starting position 
}   

void draw() {  
  background(0);
  fill(3, 252, 169); //snakes color
  for (int i = 0; i < x.size(); i++) rect(x.get(i)*blocks, y.get(i)*blocks, blocks, blocks); 
  if (!gameover) {  
    fill(fc1, fc2, fc3); //food color red
    ellipse(foodX*blocks+10, foodY*blocks+10, blocks, blocks); //food
    textAlign(LEFT); //score
    textFont(f);
    textSize(25);
    fill(255);
    text("score : " + x.size(), 30, 30, width - 20, 50);
    //makes the snake longer
    if (frameCount%speed==0) { 
      x.add(0, x.get(0) + Xdirection[direction]); 
      y.add(0, y.get(0) + Ydirection[direction]);
      
      if (x.get(0) < 0 || y.get(0) < 0 || x.get(0) >= w || y.get(0) >= h) gameover = true; 
      for (int i=1; i<x.size(); i++) 
        if (x.get(0)==x.get(i)&&y.get(0)==y.get(i)) gameover=true; 
      if (x.get(0)==foodX && y.get(0)==foodY) { //new food
         if (x.size() %5==0 && speed>=2) speed-=1;  // every 5 points speed increases
        foodX = (int)random(0, w); //new food
        foodY = (int)random(0, h);
 
      } else { 
        x.remove(x.size()-1); 
        y.remove(y.size()-1);
      }
    }
  } else {
    fill(255); 
    textSize(30); 
    textFont(f);
    textAlign(CENTER); 
    text("GAME OVER \n Your Score is: "+ x.size() +"\n Press ENTER", width/2, height/3+30);
    if (keyCode == ENTER) { 
      x.clear(); 
      y.clear(); 
      x.add(0);  
      y.add(15);
      direction = 2;
      speed = 8;
      gameover = false;
    }
  }
}
void keyPressed() { 
  int newdir=keyCode == DOWN? 0:(keyCode == UP?1:(keyCode == RIGHT?2:(keyCode == LEFT?3:-1)));
  if (newdir != -1) direction = newdir;
}

IDEA:

I was thinking of a way to make a text look cool. The first thought in my mind was to let the user manipulate its position using the mouse. But that was not enough, so I thought I might make it look like it’s raining the characters of the sentence with other effects (different sizes and colors every time the program runs).

DIFFICULTIES:

I tried making colors be generated in for loop inside another for loop but for some odd reason it did not work. It either did not display anything or ran like crazy and did not look good. Then I realized I did not need a for loop for it.

CODE:

PFont f;
String s;
float g;


void setup(){
size (640, 480);


f = createFont("Georgia", 35);
s = "Shaikha is amazing";


}

void draw(){
 
  
  background(0);
  g = random(200, 255);
  textFont(f);
  textSize(35);
  fill(255);
  text(s, mouseX, mouseY);

  if (mousePressed == true){

      for (int i = 0; i< s.length(); i++){
                 
          fill (245, g, 66);
          textSize(random(9,100));
          text(s.charAt(i), random(width), random(height));
    
      }
      

  }


}

Idea:

At first, I wanted to make a galaxy portrait where most of the screen would consist of stars of different shapes and sizes. But, then I realized in order to do that with oop, every star would be an individual object and I was not sure how I would make the program construct objects by itself. Since, for instance, it is impractical to make 100 objects to display 100 stars. So, instead,  I decided to make a portrait of the solar system. I made a class where I could use to make any celestial object (planet, meteor, star, etc.). The class was quite simple so I added the random generators to give different y values for the planets; planets do not orbit at the same rate so it made sense. Every time the user runs the program, the location of the planets will change. After I was done with the class and the planets, I still needed the stars in the background, so I tried again with stars. However, this time I used two for loops, the Perlin noise function, and a random generator to make the stars spin around and I really liked how they turned out. But, they did not quite match the static planets so I thought I’d make the planets move. After doing so, the planets looked like they were vibrating. I was listening to a song at that time and they vibrated with the music as if they were dancing to it. So, I called it a day to the dancing planets portrait.

class celestial {
  
  float y;


   celestial(){

     y = random(height/3, height/2);
     
  
}

 //void color(){
 
 //   fill(r, g, b);

 // } 

 //void size(){
 
 //   ellipse(xUnique, yUnique, radius, radius);

 // }

  void shape (float r, float g, float b, float radius, float x){
  
  fill(r, g, b);
  ellipse(x, y, radius, radius);
  
  }
 

}

celestial sun;
celestial mercury;
celestial venus;
celestial earth;
celestial mars;
celestial jupiter;
celestial saturn;
celestial uranus;
celestial neptune;



int sunSize;
int xSun;
float xStar;
float yStar;
void setup() {

  size (1000, 1000);
  
  sun = new celestial();
  mercury = new celestial();
  venus = new celestial();
  earth = new celestial();
  mars = new celestial();
  jupiter = new celestial();
  saturn = new celestial();
  uranus = new celestial();
  neptune = new celestial();
  
  
  sunSize = 600;
  xSun = -40;
  xStar = random(width);
  yStar = random(height);
}


void draw(){

  background(0, 17, 46);
  
  // stars 
    stroke (245, 237, 24);
  for (float i = noise(width); i < width; i = i+random(width/2)) {
    for(float j = noise(height); j < height; j = j+random(height/2)){
    
      line(i, j, i+2, j+2);
    }
} 


// plants
  noStroke();
  
  for (float i = noise(width); i < width/200; i = i+random(width/4)){
    sun.shape(250, 232, 92, sunSize, xSun-70+i);
    mercury.shape(224, 179, 72, sunSize/40, xSun+sunSize/2-50+i);
    venus.shape(214, 130, 41, sunSize/35, xSun+sunSize/2+i);
    earth.shape(58, 161, 199, sunSize/25, xSun+sunSize/2+90+i);
    mars.shape(191, 76, 38, sunSize/30, xSun+sunSize/2+150+i);
    jupiter.shape(145, 128, 71, sunSize/8, xSun+sunSize/2+250+i);
    saturn.shape(191, 185, 117, sunSize/10, xSun+sunSize/2+350+i);
    uranus.shape(22, 219, 216,sunSize/14, xSun+sunSize/2+475+i);
    neptune.shape(28, 53, 138, sunSize/19, xSun+sunSize/2+550+i);
  }
  

}

I used this picture for reference (idk why it’s so compressed here):

Here are the final results (the music is not from the program;-;):

Idea:

My main goal -after using for/while loops- was to use the random function that is built-in processing to make an interactive artwork. I used the random function to get different hues of blue (for the ocean) and yellow (for the goldfish). I started with the circles that make the moving water up. I did not -at that point- think of it as water; I just wanted to experiment how the piece would look like with random different shades of a certain color would look like. I happen to like blues and so I started with them.

When I saw the result I immediately thought of the ocean, hence, inspiration?? To put the for loops into use I put nets as they match the theme as well. As for the fish, I thought it would be cool to have another interactive part for this. The fish’s color changes color as well (it’s not so obvious though) because it’s a shimmery goldfish.

float xValue;
float yValue;
float Rdecimal;
float Bdecimal;
int xCenterOfFish;
int yCenterOfFish;

int R;
int B;


void setup() {

  size (300, 300);
   background(255);
}




void draw(){
  
  
// random r values for the water
  xValue = random(width);
  yValue = random(height);
  Rdecimal = random (100, 200);
  int R = int(Rdecimal);


// circles that make the water up
  fill (R, 255, 244);
  noStroke();
  ellipse(xValue, yValue, 50, 50);
  
  
  
  //fish
// random b values for the water
Bdecimal = random (23, 100);
  int B = int(Bdecimal);


// to draw the fish when mouse is pressed
      if (mousePressed == true) {
        xCenterOfFish = mouseX;
        yCenterOfFish = mouseY;
        noStroke();
        fill(235, 188, B);
        circle (xCenterOfFish, yCenterOfFish, 22);
        triangle(xCenterOfFish, yCenterOfFish, xCenterOfFish+20, yCenterOfFish+10, xCenterOfFish+20, yCenterOfFish-10);
        
      }
  

  
  // net horizontally
  stroke (0);
  for (int i = 0; i < height; i = i+5) {
  line(width, i, 0, i);
  
}
  // net vertically
stroke (0);
  for (int i = 0; i < width; i = i+4) {
  line(i, height, i, 0);
}



}