Simple game with Javascript (Code Clean-up)

Modularity & Reusability

To start with, I cleaned up the function draw(){}.

In order to do that, I categorized every codes/elements in draw function into several different functions.

As a result, it became easier to understand what is going to be happen in draw function.

Also, It is easier to make a adjustment because function() work as navigation.

function draw() {
  background(0);
  
   if (mode == "homePage") {
   startHome();
  }
  
  if (mode == "gamePage") {
    
    //Animate background
    backgroundDecorate();

    //Draw EVE
    drawEve();

    //Draw UFO
    drawUFO();

    //Draw ENEMY
    drawEnemy();

    //TEXT
    instructionText();
  }

Also, since I grouped codes into functions, I could make each functions to interact more freely. I also could

simulate in my head and come up with crazier ideas. So I decided to make a starting/landing page before the

game, so that users can chose when to start. I designed startPage() first.

Then, I used mousePressed(){} and if(){} to make it switch between homePage and gamePage when user press start button .

Simple game with Javascript

WALL-E (CLICK! to try the game)

My teammate and I decided to make a simple game. Our first idea was to make a game that’s similar to T-REX DINO from google chrome using balloons. We each opened up a separate p5 editor to code and decided to see how it goes from there. We helped each other out.

Our first conflict was to move ballon in a wave form. My teammate spent time to figure out how to move things in a wave form and I decided to move on. As a result my teammate and I came up with two distinctive games that are totally different but have a similar logic.

//UFO DESIGN

  //lenz
  push();
  stroke(255, 255, 255, 180);
  strokeWeight(5);
  fill(0, 255, 0);
  ellipse(82, 95, 60, 50);
  pop();

  push();
  noStroke();
  fill(a-80, b-80, c-80,240);
  moonY = moonY - 0.5
  ellipse(moonY - 10, 75, 35, 35)
  pop();

  //bottom
  for (i = 0; i < 10; i++) {
    noFill();
    fill(255);
    stroke(0, 80);
    strokeWeight(1);
    ellipse(82, 100 - (2.3 * i), 120 - (1.5 * i), 10);
  }

  //top
  for (i = 0; i < 10; i++) {
    noFill();
    fill(255);
    stroke(0, 80);
    strokeWeight(1);
    ellipse(82, 75 - (2.3 * i), 70 - (1.5 * i), 10);
  }

  //draw radar
  for (i = 0; i < 10; i++) {
    push();
    fill(0, 255, 0, (20 * i) - 30);
    noStroke();
    rect(50 - (1.5 * i), 100 + (20 * i), 65 + (3 * i), 20);
    pop();
  }

  for (i = 0; i < 10; i++) {
    noFill();
    stroke(255, 255, 255, random(0, 255));
    strokeWeight(1);
    ellipse(80, 290 - (20 * i), 120 - (5 * i), 10);
  }

//WALL-E DESIGN

var mouseClick = 0

function mouseClicked() { //had to use this instead of mouseIsPressed
  if (mouseClick === 0) { //to challenge the user
    userX = userX - 5 //movement speed of user charcater
  }
  
function draw() { 
//User character movement
  if (userX === 85) {
    userY = userY - 1
    enemyX = enemyX;
  }

  if (userX <= 85) {
    userX = 85 // when it reaches ufo, it won't move to left anymore
    enemyX = enemyX
  }

  if (userX <= enemyX) {
    enemyX = enemyX
  }

  //draw user character
  push();
  noStroke();


  fill(255);
  ellipse(userX, userY, 45, 80);
  fill(0);
  ellipse(userX, userY - 30, 75, 30);
  fill(120);
  ellipse(userX, userY - 17, 38, 10)
  fill(255);
  ellipse(userX, userY - 36, 45, 38);
  fill(200);
  ellipse(userX - 28, (userY + 3), 12, 60);
  ellipse(userX + 28, (userY + 3), 12, 60);
  fill(255);
  ellipse(userX - 30, (userY + 3), 6, 60);
  ellipse(userX + 30, (userY + 3), 6, 60);
  fill(0);
  ellipse(userX, userY - 32, 33, 23);
  fill(0);
  ellipse(userX, userY - 32, 33, 23);
  fill(0, 0, 255);
  ellipse(userX - 7, userY - 32, 10, 9);
  ellipse(userX + 7, userY - 32, 10, 9);
  pop();
}

//draw the enemy character
  push();
  noFill();
  stroke(255, 204, 100);
  strokeWeight(1);
  if (userX <= 85) { //to make enemy stop when the user lost game
    enemyX = enemyX

  } else {

    if (userX <= enemyX) {

      enemyX = enemyX - 0.55; //make enemy move[SPEED](Game level)
    }
  }



  //draw electricity

  curve(enemyX - 30, 160, (enemyX - 10), 240, ((enemyX + 10) + random(-10, 30)), 300, ((enemyX - 30) + random(-10, 20)), 300);
  curve(enemyX - 30, 160, (enemyX - 10), 240, ((enemyX + 10) + random(-10, 30)), 300, ((enemyX - 30) + random(-10, 20)), 300);
  curve(enemyX - 30, 160, (enemyX - 10), 240, ((enemyX + 10) + random(-10, 30)), 300, ((enemyX - 30) + random(-10, 20)), 300);
  curve(enemyX - 30, 160, (enemyX - 10), 240, ((enemyX + 10) + random(-10, 30)), 300, ((enemyX - 50) + random(-10, 20)), 300);
  curve(enemyX - 30, 160, (enemyX - 10), 240, ((enemyX + 10) + random(-10, 30)), 300, ((enemyX - 30) + random(-10, 20)), 300);
  pop();

  push();
  stroke(255, 204, 100, 180);
  strokeWeight(1)
  curve(enemyX, 160, (enemyX + 10), 240, ((enemyX - 10) + random(-10, 50)), 300, ((enemyX + 50) + random(-10, 50)), 300);
  curve(enemyX, 160, (enemyX + 10), 240, ((enemyX - 10) + random(-10, 50)), 300, ((enemyX + 50) + random(-10, 50)), 300);
  curve(enemyX, 160, (enemyX + 10), 240, ((enemyX - 10) + random(-10, 50)), 300, ((enemyX + 50) + random(-10, 50)), 300);
  curve(enemyX, 160, (enemyX + 10), 240, ((enemyX - 10) + random(-10, 50)), 300, ((enemyX + 50) + random(-10, 50)), 300);
  curve(enemyX, 160, (enemyX + 10), 240, ((enemyX - 10) + random(-10, 50)), 300, ((enemyX + 50) + random(-10, 50)), 300);
  pop();

  push();
  stroke(255, 255, 255, 180);
  strokeWeight(1)
  curve(enemyX + 30, 190, (enemyX + 10), 240, ((enemyX - 10) + random(-10, 20)), 300, ((enemyX - 50) + random(-10, 20)), 300);
  curve(enemyX + 30, 190, (enemyX + 10), 240, ((enemyX - 10) + random(-10, 20)), 300, ((enemyX - 50) + random(-10, 20)), 300);
  curve(enemyX + 30, 190, (enemyX + 10), 240, ((enemyX - 10) + random(-10, 20)), 300, ((enemyX - 50) + random(-10, 20)), 300);
  curve(enemyX + 30, 190, (enemyX + 10), 240, ((enemyX - 10) + random(-10, 20)), 300, ((enemyX - 50) + random(-10, 20)), 300);
  curve(enemyX + 30, 190, (enemyX + 10), 240, ((enemyX - 10) + random(-10, 20)), 300, ((enemyX - 50) + random(-10, 20)), 300);

  stroke(0, 0, 80, 180)
  curve(enemyX - 30, 160, (enemyX - 10), 240, ((enemyX + 10) + random(-10, 30)), 300, ((enemyX - 30) + random(-10, 20)), 300);
  curve(enemyX - 30, 160, (enemyX - 10), 240, ((enemyX + 10) + random(-10, 30)), 300, ((enemyX - 30) + random(-10, 20)), 300);
  curve(enemyX - 30, 160, (enemyX - 10), 240, ((enemyX + 10) + random(-10, 30)), 300, ((enemyX - 30) + random(-10, 20)), 300);
  curve(enemyX - 30, 160, (enemyX - 10), 240, ((enemyX + 10) + random(-10, 30)), 300, ((enemyX - 50) + random(-10, 20)), 300);
  curve(enemyX - 30, 160, (enemyX - 10), 240, ((enemyX + 10) + random(-10, 30)), 300, ((enemyX - 30) + random(-10, 20)), 300);
  pop();

  //draw arm
  push();
  noFill();
  stroke(255);
  strokeWeight(4);
  line(enemyX, 233, (enemyX - 5), 200);
  pop();


  //draw face and body
  push();
  fill(0);
  stroke(255, 204, 100);
  strokeWeight(3);
  ellipse(enemyX + 5, 260, 25, 25)
  stroke(255);
  fill(255, 204, 100);
  strokeWeight(2)
  rect((enemyX - 10), 243, 30, 20, 6);
  strokeWeight(1.5);
  ellipse(enemyX, 233, 35, 40);
  ellipse((enemyX - 10), 193, 25, 30);
  pop();

  push();
  stroke(255);
  strokeWeight(4);
  fill(0);
  ellipse(enemyX, 233, 20, 20);
  pop();

  //draw gun
  push();
  fill(255, 0, 0)
  noStroke();
  rect(enemyX - 35, 240, 8, 15, 10);
  rect(enemyX - 50, 240, 18, 6);
  fill(255);
  rect(enemyX - 59, 241, 8.7, 3);
  pop();

  //draw eyes
  push();
  noStroke();
  fill(0);
  rect(enemyX - 20, 190, 20, 8, 30);
  pop();


  //draw eyeball
  push();
  fill(255, 0, 0, random(130, 255));
  noStroke();
  rect(enemyX - 17, 192, 5, 5, 30);
  rect(enemyX - 8, 192, 5, 5, 30);
  pop();


  //draw arms
  push();
  noFill();
  stroke(255);
  strokeWeight(4);
  line(enemyX, 233, (enemyX - 20), 260);
  line((enemyX - 20), 260, (enemyX - 30), 250)
  pop();

LOGO Animation with p5.js

LOGO (Click! to try out)

On September 10, 2019 Apple showcased new Apple products. I was fascinated by their introductory motion graphic. How they implemented concepts and history through animated logo was very interesting and beautiful. It gave a characteristics, personality and energy to the Logo, and brand as a whole.

I always wanted to give my static Logo a movement and personality because I tried to represent and depict every side of me into the Logo. Especially as interactive designer (creative technologist), I always wanted to make an interactive logo that changes overtime.

This is an update of my last assignment. First of all, There was a big improvement on its look.

I made Neon Sunglasses to follow the cursor so that user can interact with Logo.

And I animated the background and nose to show some energy.

var chaser = {
  x: 75,
  y: 35
};

  // neon sunglasses
  push();
  fill(57, 255, 20, 150);
  if (chaser.x < mouseX) {
    chaser.x += 5;
  }

  if (chaser.x > mouseX) {
    chaser.x -= 5;
  }

  if (chaser.y < mouseY) {
    chaser.y += 5;
  }

  if (chaser.y > mouseY) {
    chaser.y -= 5;
  }

  textSize(20);
  rect(chaser.x - 77.5, chaser.y - 30, 160, 65, 25);
  text('Put him on a sunglasses then CLICK!', 10, 30)

  pop();

I also made color of the background to change each time user generates, so that the logo can have many different feelings. His eyes move as a default in order to give him some personality. My favorite part of this assignment is background. I generated 20 circles that wiggles when user press the mouse, and it came out beautifully.

  //background decoration (soundwave)
  push();
  noFill();
  strokeWeight(1);
  stroke(255, 255, 255);

  for (var wave = 0; wave < 20; wave++) {

    //animate the bg decor
    if (mouseIsPressed) {
      ellipse(300 + random(0, 15), 300 + random(0, 15), 20 + 40 * wave, 20 + 40 * wave);
    } else {
      ellipse(300, 300, 20 + 40 * wave, 20 + 40 * wave);
    }
  }
  pop();

I had some conflict with a museIsPressed(); function. I wanted to make eyes to follow cursor but I could not find a way to make eyeball stay in a boundary.

also whenever I release the mouse, eyes are in a wrong place and I could not figure out why. Sometime, it disappears.

 if (mouseIsPressed) {
    circle(260, 300, 25);
    circle(340, 300, 25);
  } else {
    if (ballX >= 320) {
      ballSpeedX = -ballSpeedX;
    }

    // bottom
    if (ballY >= 313) {
      ballSpeedY = -ballSpeedY;
    }

    // left
    if (ballX <= 270) {
      ballSpeedX = -ballSpeedX;
    }

    // top
    if (ballY <= 280) {
      ballSpeedY = -ballSpeedY;
    }
    strokeWeight(2);
    fill(0);
    circle(ballX - 37, ballY, 25);
    circle(ballX + 37, ballY, 25);

  }
  pop();

Logo Design with Javascript

"Code is a powerful tool for creative work"

Code is new language for future. I learned how to build blocks of creative computing within the visual and media environment. I have learned to create dynamic images, type and interfaces, that can translate into print, web and spatial forms. I also have learned fundamental of programming that translate in virtually all programming platforms. Primary software platform: JavaScript.

Computers are widely used in art and design. Almost all design work created today contains computationally generated/altered elements.

Many effects that were created by custom code in the past are now baked into Photoshop and After Effects. Coding can be used to create interactive experiences, animations, and even static illustration work. Code grants the ability to explore variations of complex themes quickly.

With traditional design and art media, you are constrained to a single expression of your intent. With digital media, you can codify your intent, and create works and forms that can change in response to unknown future contexts. You can create systems that can grow. You can build your intentions into your work and create a work that can not only speak at your audience but that can engage in a dialog.

By learning a programming, I have thorough and elaborate interactive concepts and techniques for applications. It is an extensive investigation in the interface, the mechanism, the controls and the aims of interactive works. I designed and developed several complex interactive projects, and now, I know how to undertake a comprehensive research and direct thinking process from brainstorming to final outcome. I also learned tools to conceive, plan and develop an interactive system and I am aware of the importance of my role in the development of interactive media.

p5.js

I chose to draw my logo with p5.js so that I can animate them or make it interact with user in the future.

First, I found all the colors (r, g, b) coordinates with photoshop.

Then, I started to draw from front to back.

I used several references: fill(); strokeWeight(); rect(); line(); text(); circle(); etc.

I had hard time figuring out in order to rotate word ‘A.’

To flip the word upside down, I had to relocate it after I rotate it.

I’m pretty sure that there is a way to keep the drawing in the center all the time.

Since rotated ‘A’ goes on the back, I had to re-rotate every shapes that goes on top of rotated ‘A’.

Doing so, all the x and y coordinates got messed up.