Category Archives: Many

Many – Space Invaders Enemies

In thinking about what types of systems require both looping, objects, and arrays, one of the primary examples that kept coming back to my mind was the logic behind repeating video game enemies. As I was making a space-invaders like game for ComLab anyway, I thought that this would be a good opportunity to explore that area. Here is the code that would be generating and subsequently controlling the enemies to that they follow a repeatable path, all this needs to work is a div with the id “enemies” somewhere within the html code for the page.

// Tracks amount of enemies    
        var enemies = [];
    // States of enemy movement
    // Possible states: down, up, left
        var enemyState = [];
        var previousEnemyState = [];
    // Distance traveled left
        var distanceLeft = []
    // Enemy Speed
        var enemySpeed = 5;
//Create Enemy Ships
        function createEnemy(){
            for(i=0;i<waveTotals.length;i++){
                if(currentlyWave){
                    for(var n=0;n<waveTotals[i];n++){
                        setTimeout(function(){
                            enemies.push(n);
                            enemyState.push("down");
                            previousEnemyState.push("down");
                            distanceLeft.push(0);
                        },1000*n);
                        $("#enemies").append("<div class='enemy' id='enemy" + n + "'></div>");
                    }
                    currentlyWave = false;
                    currentWave++;
                }
            }
        }
    // Move Enemy Ships
        function moveEnemy(){
            for(var i=0;i<enemies.length;i++){
                console.log(enemies.length);
                console.log("i:"+i);
                // If the i-th element is traveling downwards
                    if(enemyState[i]=="down"){
                        var enemyTop = $("#enemy"+i).position().top;
                        enemyTop+=enemySpeed;
                        $("#enemy"+i).css("top",enemyTop);
                            if(enemyTop>=(window.innerHeight-distanceFromEdges)){
                                enemyState[i]="left";
                                previousEnemyState[i]="down";
                            }
                // If the i-th element is traveling to the left
                    }else if(enemyState[i]=="left"){
                        var enemyLeft = $("#enemy"+i).position().left;
                        enemyLeft-=enemySpeed;
                        distanceLeft[i]+=enemySpeed;
                        //If done traveling to the left and previously was down
                            if(distanceLeft[i]>=distanceToTravelLeft && previousEnemyState[i]=="down"){
                                enemyState[i]="up";
                                distanceLeft[i]=0;
                                previousEnemyState[i]="left";
                            }
                        //If done traveling to the left and previously was up
                            if(distanceLeft[i]>=distanceToTravelLeft && previousEnemyState[i]=="up"){
                                enemyState[i]="down";
                                distanceLeft[i]=0;
                                previousEnemyState[i]="left";
                            }
                        $("#enemy"+i).css("left",enemyLeft);
                // If the i-th element is traveling up
                    }else if(enemyState[i]=="up"){
                        var enemyTop = $("#enemy"+i).position().top;
                        enemyTop-=enemySpeed;
                        $("#enemy"+i).css("top",enemyTop);
                            if(enemyTop<=distanceFromEdges){
                                enemyState[i]="left";
                                previousEnemyState[i]="up";
                            }

                    }
            }
        }
.enemy{
        width: 6vh;
        height: 6vh;
        position: absolute;
        z-index: 11;
        top: -10vh;
        right: 2vh;
        border: 10px solid #C1272D;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
    }
<div id="enemies"></div>

 

Comet Particle System

For this project, I created a comet by following the coding challenge by the Coding Train.

Here is the code:

var cometText;
let particles = [];
function setup()
{
createCanvas(400, 400);
cometText = loadImage(“cometText.jpg”);
frameRate(50);
//let p = new Particle();
//particles.push(p);
}

function draw()
{
background(0);
let p = new Particle();
particles.push(p);
for(let i = 0; i < particles.length; i++)
{
particles[i].update();
particles[i].show();
}
//texture(cometText);
ellipse(mouseX, mouseY, 25, 25);
fill(225);

for(var i = 0; i < 100; i++)
{
var a = random(400);
var b = random(400);
ellipse(a, b, 1.5, 1.5);
//ellipse(a, b, 20, 20);
i++;
}

}

class Particle
{
constructor()
{
this.x = mouseX;
this.y = mouseY;
this.vx = random (1, -1);
this.vy = random (5, -1);
this.alpha = 255;
}
show()
{
noStroke();
fill(209, 115, 67, this.alpha);
ellipse(this.x, this.y, 15);

}
update()
{
this.x += this.vx;
this.y += this.vy;
this.alpha-=10;
}

}

I changed it by changing the color and creating a for loop so that I had stars that looked like they were moving so it looks like the comet is moving through space.

sc

Here’s the link!

https://editor.p5js.org/aramakrishnan/full/rybGu3i0Q 

 

Many faces

Using Array, mouse interaction, sound, and object-oriented programming

youtube

1
1

 fullscreen

edit

The version with sound is in my Bracket. This is the version withought sound, becasue I don’t know how to use import sound into the web editor.

//visual
let frame;
let _a=0;
let faces=[];
//sound
let song;

function preload(){
song=loadSound(“My Song.mp3”);
}

function setup() {
createCanvas(windowWidth, windowHeight);
for(let j=0;j<height/89;j++){
faces[j]=[];
for(let i=0;i<width/55;i++){
faces[j][i]=new Face(i*55,j*89,sin(j)*i*2,cos(i));
}
}
song.play();
}

function draw() {
background(100);

for(let j=0;j<faces.length;j++){
for(let i=0;i<faces[j].length;i++){
faces[j][i].show();
faces[j][i].change();
faces[j][i].hover();
}
}
}

class Face{

constructor(x,y,a,b){
this.x=x;
this.y=y;
this.a=a;
this.b=b;
}

show(){
fill(255);
rect(this.x,this.y,55,89);
}

change(){
if(this.a<55){
fill(0);
noStroke();
rect(this.x,this.y,this.a, 89);
this.a=this.a+0.3;
this.b=55;
}
else{
fill(0);
noStroke();
rect(this.x,this.y,this.b, 89);
this.b=this.b-0.3;
if(this.b<0){
this.a=0;
}
}
}

hover(){
let d=dist(mouseX,mouseY,this.x+22.5, this.y+44.5);
if(d<52){
this.a=mouseX-this.x+30;
this.b=mouseY-this.y+30;
}}
}

objects&arrays

Following the tutorial, I connected array with the objects. I also assigned random colors to the bubbles. However, the problem I met is, when I tried to change the mode of bubble’s movement, there is always some problems as I comment in the code. Besides, I want to figure out how to change the color of bubble one by one when mouse is pressed.

 

full screen: https://editor.p5js.org/Ruojin/full/HJifBYT2m

code: https://editor.p5js.org/jeremycricchus@gmail.com/sketches/Skv4eJ2n7

Trial & Error Objects/Arrays

For my assignment, I tried out a bunch of things that sometimes did and sometimes did not work. I followed The Coding Train’s videos pretty closely to get most of my code, but I pieced stuff together and tried to incorporate new things into the code to make it my own.

I started by first introducing myself to object-oriented programming. I did a basic bouncing ball example but used an object to organize my code. I did try to incorporate an image to replace the ball, but for some reason, it did not work.

This is the code for that example:

var ball = {
x: 300,
  y: 200,
  xspeed: 4,
  yspeed: -3
}

function setup() {
  createCanvas(windowWidth, 400);
}

function draw() {
  background(0);
  
  move();
  bounce();
  display();
}

function move(){
ball.x = ball.x + ball.xspeed;
  ball.y = ball.y + ball.yspeed;
}

function bounce () {
if (ball.x > width || ball.x < 0) {
  ball.xspeed = ball.xspeed * -1;
  }
  if (ball.y > height || ball.y < 0) {
  ball.yspeed = ball.yspeed * -1;
  }
}

function display () {
stroke(255);
strokeWeight(4);
noFill();
ellipse(ball.x, ball.y, 24, 24);
}

The next thing I tried, with the help of the videos, is object communication. I wanted to see if I could make something happened when many bubbles touched or overlapped. I got the color to change, and then while trying to incorporate an image, my code kind of went haywire and the image overlapped the bubbles. The repeated image were quite concentrated on one side of the screen, though I do not know why. I wanted to try tot make something happen if the mouse was released like maybe reset the sketch, but I was unable to find the right syntax to accomplish this.

This is the code for this example. I commented out the code that made the changes in the video. It currently show the last ‘state’ of the sketch that is shown in the video.

let bubbles = [];

let gudetama;

function preload() {
  gudetama = loadImage("gudetama.png")
}

function setup() {
  createCanvas(600, 400);
  for (let i = 0; i < 50; i++) {
    let x = random(width);
    let y = random(height);
    let r = random(10, 40);
    bubbles[i] = new Bubble(x, y, r);
  }
}

//function mousePressed() {
//}

function draw() {
  background(0);

  //   if (bubble1.intersects(bubble2)) {
  //   background(200, 0, 100);
  //   }

  //   for(let i = 0; i < bubbles.length; i++) {
  //   bubbles[i].show();
  //     bubbles[i].move();
  //   }


  for (var b of bubbles) {
    b.show();
    b.move();
    let overlapping = false;
    for (var other of bubbles) {
      if (b !== other && b.intersects(other)) {
        overlapping = true;
      }
    }
    if (overlapping) {
      b.changeColor(255);
    } else {
      b.changeColor(0);
    }
  }
}



class Bubble {
  constructor(x, y, r) {
    this.x = x;
    this.y = y;
    this.r = r;
    this.brightness = 0;
    this.xspeed = 1;
    this.yspeed = -1;
  }

  intersects(other) {
    let d = dist(this.x, this.y, other.x, other.y);
    return (d < this.r + other.r);
    //if (d < this.r + other.r);
  }

  changeColor(bright) {
    this.brightness = bright;
  }

  // contains(px, py) {
  //   let d = dist(px, py, this.x, this.y);
  //   if (d < this.r) {
  //     return true;
  //   } else {
  //     return false;
  //   }
  // }

  move() {
    this.x = this.x + random(-6, 6);
    this.y = this.y + random(-6, 6);
  }

//   bounce() {
//     if (this.x > width || this.x < 0) {
//       this.xspeed = this.xspeed * -1;
//     }
//     if (this.y > height || this.y < 0) {
//       this.yspeed = this.yspeed * -1;
//     }

//   }

  show() {

    image(gudetama, this.x, this.y, 550, 500);
    // stroke(255);
    // strokeWeight(4);
    // fill(this.brightness, 125);
    // ellipse(this.x, this.y, this.r * 2);
  }
}

^^https://editor.p5js.org/samasrinivas/full/rJQHDU6h7

The last example I did is a combination of the examples that Daniel Shiffman showed in his videos for the Coding Train, but I tried to add an image to the code, but because of the changes that are triggered I couldn’t find a way to succeed in incorporating it to the sketch.

This is the code:

let bubbles = [];

let gudetama;
function preload(){
  gudetama = loadImage("gudetama.png");
}

function setup() {
  createCanvas(600, 400);
  for (let i = 0; i < 50; i++) {
    let x = random(width);
    let y = random(height);
    let r = random(10, 50);
    let b = new Bubble(x, y, r);
    bubbles.push(b);
  }
}

function mouseDragged() {
  let x = random(width);
  let y = random(height);
  let r = random(30, 50);
  let b = new Bubble(mouseX, mouseY, r);
  bubbles.push(b);
}

// function mouseReleased(){
// locked = false;

// }

function mousePressed() {
  for (let i = bubbles.length - 1; i >= 0; i--) {
    if (bubbles[i].contains(mouseX, mouseY)) {
      bubbles.splice(i, 1);
    }
  }
}

function draw() {
  background(0);
  //   for (let i = 0; i < bubbles.length; i++) {
  //     if (bubbles[i].contains(mouseX, mouseY)){
  //     bubbles[i].changeColor(200, 0, 100);
  //     } else {
  //     bubbles[i].changeColor(0);
  //     }

  //     bubbles[i].move();
  //     bubbles[i].show()
  //   }

  for (var b of bubbles) {
    b.show();
    b.move();
    // if (b.contains (mouseX, mouseY)){
    // fill(255);
    // } else {
    // fill(0);
    // }
    let overlapping = false;
    for (var other of bubbles) {
      if (b !== other && b.intersects(other)) {
        overlapping = true;
      }
    }
    if (overlapping) {
      b.changeColor(200, 0, 100);
    } else {
      b.changeColor(0);
    }
  }
  //add if adding mouse dragged
  if (bubbles.length > 50) {
    bubbles.splice(0, 1);
  }
  // locked = true;
}

class Bubble {
  constructor(x, y, r) {
    this.x = x;
    this.y = y;
    this.r = r;
    this.brightness = 0;
  }
  intersects(other) {
    let d = dist(this.x, this.y, other.x, other.y);
    return (d < this.r + other.r);
  }
  changeColor(bright) {
    this.brightness = bright;
  }

  contains(px, py) {
    let d = dist(px, py, this.x, this.y);
    if (d < this.r) {
      return true;
    } else {
      return false;
    }
  }

  move() {
    this.x = this.x + random(-5, 5);
    this.y = this.y + random(-5, 5);
  }

  show() {
    image(gudetama, this.x, this.y);
    stroke(255);
    strokeWeight(4);
    fill(this.brightness, 0, 0, 255);
    ellipse(this.x, this.y, this.r * 2);
  }
}

^^https://editor.p5js.org/samasrinivas/full/B1tVSB6hm

A lot of things I tried didn’t work out, but I’m going to try to keep working on my code to get to do what I wanted to do in the code.

Attributions:

@The Coding Train, all of my trial and errors came to fruition because of those videos and the p5.js library.

A Fortune Teller

This week, I wanted to kick it back to the 8 Ball fortune teller phase.

I decided that I was going to tackle this using Arrays in order to list and control the different responses the ball might have.

This was me checking that the array variable displayed the answer within the ball correctly:

https://editor.p5js.org/yunglizard/sketches/ryBaQQ62Q

https://editor.p5js.org/yunglizard/full/ryBaQQ62Q

It works! Now, I want the answer to change whenever the mouse is clicked. For this, I wanted to use the “index variable” that the videos on the class blog showed us. Although, I couldn’t get it to work, as you can see below:

https://editor.p5js.org/yunglizard/full/ryBaQQ62Q

https://editor.p5js.org/yunglizard/sketches/ryBaQQ62Q

Issue: using the index variable to select my array variables when the mouse is clicked.

Meteor in P5

Since people have the habit of making a vow when a meteor crosses the sky, my goal is to make a digital meteor creator.

At first, I built the one-click-for-one-meteor part.

Then, I use “starrain” object to make a rain of meteors when users double-click.

I got problems when adjusting the position of meteors. In rain mode, I can do delay, so I make an array to put meteors more backward than the former ones.

fullscreen:

https://editor.p5js.org/jeremycricchus@gmail.com/full/Skv4eJ2n7

code:

https://editor.p5js.org/jeremycricchus@gmail.com/sketches/Skv4eJ2n7

Many

For this week, I decided to do something I could also use in my final project. I decided to have a joystick that would change sounds when the user pushed it in different directions. Originally,  I wanted the sound was suppose to come from an arduino buzzer, but for some unknown reason it didn’t want to work. So, I decided to connect it to p5 and have the sound play from my laptop. After some trial and error, it finally worked!

Click the link below to see!

Arduino:

#define PIN_ANALOG_X 0

#define PIN_ANALOG_Y 1

int sensorValue1 = analogRead(A0);
int sensorValue2 = analogRead(A1);

void setup() {
Serial.begin(9600);
pinMode(A0, INPUT_PULLUP);
pinMode(A1, INPUT_PULLUP);
}

void loop() {

if (analogRead(PIN_ANALOG_X)<30 && analogRead(PIN_ANALOG_Y)<30) {
Serial.println(0);
}else{

if (analogRead(PIN_ANALOG_X)<30 && analogRead(PIN_ANALOG_Y)>93){
Serial.println(1);
}else{

if (analogRead(PIN_ANALOG_Y)<30 && analogRead(PIN_ANALOG_X)>93){
Serial.println(2);
}else{

if (analogRead(PIN_ANALOG_Y)>93 && analogRead(PIN_ANALOG_X)>93){
Serial.println(3);
}
delay(200);
}}}}

 b

a

P5:

https://editor.p5js.org/ach549@nyu.edu/sketches/BJe9woL2m

 

Rain

RM dropped mono and an MV for forever rain so

bbjk

of course I’ve been really emotional about it for the past week and decided to base my assignment on it.

https://editor.p5js.org/sspeng/full/BJO5dgMhX

I made some interactive rainfall. There’s not much to it, but it’s pretty satisfying to watch the rain go by, and rain sounds nice. I watched these two Coding Challenge videos surrounding particle systems to get the vectors and forces:

 

Flies and Bacteria

Ideation

After completing a range of production projects, I realized that I enjoy projects that tend to have a real world context the most. While I really loved the “hacked” interaction piece I was able to make, I realized I enjoyed creating it because it started a conversation about data and privacy. Of course, I find creating aesthetically beautiful p5 projects exciting, but I find that the more meaningful and impactful projects are the most rewarding. Thus, my goal for this week was to create an interaction that could serve a purpose.

Process

I began by watching the Coding Train series on arrays and objects. I loved that array of objects allowed for users to interact with a range of objects at once, expanding their interaction abilities. Here is a project I made to practice the skills I was learning (https://editor.p5js.org/andrikumar/sketches/ByKCeTVnX) It is called, “Let there be light”. Users can push rays of light out when dragging their mouse.

I decided to continue watching the series and ended up watching the video on Objects and Images (https://www.youtube.com/watch?v=i2C1hrJMwz0).

The way the images shook reminded me of how bugs move. Inspired by the movement, I realized I wanted to create a game that utilized an array of images of bugs. After some debate, I settled upon flies.

My initial idea was to create an array of flies that would be randomly placed onto a canvas. The user’s goal was to identity the king fly as quickly as possible. The user would identity by clicking on the fly to see if it was the king fly. However, as I reflected on the idea more I realized that it served no real world context. I also realized that individually clicking each fly would cause the user fatigue and decrease the entertainment value.

Iteration

I knew that I wanted to have a game that a had a “real world” application and offered a less tiring interaction behavior for the user. I brainstormed more ideas and decided I would create game in which the user would have to use a fly swatter to swat away flies from a Thanksgiving feast. The goal of the game would be to protect the food. I decided that the user could “swat” by using dragging their mouse over the screen.

I discovered how to remove objects by following another Coding Train video (https://www.youtube.com/watch?v=tA_ZgruFF9k).

I decided to remove the cursor and replace it with a fly swatter to flesh the story line out more.

Here is the game: https://editor.p5js.org/andrikumar/full/SkH8HaEnQ

Here is the code: https://editor.p5js.org/andrikumar/sketches/SkH8HaEnQ

I played the game for some time and while it was relaxing, I kept feeling like it did not truly have a real world application. Thus, I decided to iterate upon my design and change the story line. The new story line is that the user is to brush away the bacteria on teeth with a toothbrush. The toothbrush is the cursors and the bacteria can be removed by dragging the mouse. I thought this game could be easily implemented into a children’s dentist office to educate and excite children about dental hygiene.

Here is the game:

https://editor.p5js.org/andrikumar/full/H1iEqeHnX

Here is the code:

https://editor.p5js.org/andrikumar/sketches/H1iEqeHnX

I decided to reduce the number of bacteria to be less than the number of flies, so that the user could better see the teeth and understand the context of the game.