NoC: Week 5 – Forces

Goal: The goal of this assignment is making a ball bounce in a 3D space and having a new ball appear every time the balls hit the floor. Each time the ball hits the floor, it will lose 40% of it’s radius and the new ball being created with also have 40% less than the origin ball. So by the end of the sequence, there should be dozens of tiny balls on the floor.

Process: First I created a class for the balls called Particle. I gave it a constructor with vector for the position, velocity and acceleration and also gave it a mass and a radius value. Then I gave it an update and display functions. I created a plane for the balls and made two other functions inside the class. One of them checked the boarders of the floor so that the balls do not fall out the floor, and the other one was to make them bounce of the plane. I also made a force function where the force of each ball would depend on its mass and a check collision function so that the balls would not intersect with each other and instead they would repel. I then created ambient light and gave it a position for the source of the light to make it have that purple color than can be seen in the images below. And finally, I created an if statement to great a new ball whenever a ball hit the floor and multiplied the radius by 0.6 to decrease the size by 40%. If there are more than 50 balls created, then the if statement stops creating new balls and they eventually stop bouncing.

Difficulties: Coming up with idea for this assignment was kind of hard because I really did not know what to do. But when I figure that I wanted to create a sort of exponential growth with the balls as they hit the floor, I followed that idea. Doing this was a bit confusing because I thought that I had to create the new particle inside the particle class, and this froze p5 a couple times.

NOC – Forces Homework – Sam Arellano

For this week I used forces to make a pong game. This game will be my starting point for my midterm project which will be training a neural network to play this game in 2 ways, first against a computer, and second with 2 neural networks learning from eachother at the same time. The second is totally experimental and might just not work, but I will do it for the case of science.

For this week’s project however, implementing it was pretty simple. I took code from the bouncing ball example and then adding two new classes, the player class and the computer class. The player took simple user input that moves the bumper up and down. The computer class has some rudimentary AI included that needs to be improved (the big issue is that it doesn’t calculate for bounces, only for future y position of the ball, so if the y position goes off screen it doesn’t calculate correctly). I then added to the ball class to make it properly respond the bouncing off the paddles and to reset its position when going off the screen.

There are a lot of things that could be improved, such as adding extra features, a two player mode would also be quick to implement, but I just wanted to start working on a backbone for my midterm to build upon.

"use strict"

var ball;
var player;
var computer;
var down = false;
var up = false;
var force;
var outSide;
var p1score = 0;
var p2score = 0;


function setup() {
  createCanvas(1000, 600);
  background(0);
  ball = new Particle(width / 2, height / 2);
  player = new Player(19*(width/20),height/2);
  computer = new Computer(1*(width/20),height/2);
  // let's give a random velocity
  ball.vel = createVector(5,-5);
}

function draw() {
  background(0);
  fill(255);
  textSize(32);
  text(p2score, 100,10,30,30);
  text(p1score, 800,10,30,30);

  if(down){
    force = createVector(0,1);
    player.applyForce(force);
  }
  else if(up){
    force = createVector(0,-1);
    player.applyForce(force);
  }

  player.checkBoundaries();
  player.update();
  player.display();

  if(computer.prediction(ball.pos.x,ball.pos.y,ball.vel.x,ball.vel.y)){
    force = createVector(0,-1);
    computer.applyForce(force);
  }
  else{
    force = createVector(0,1);
    computer.applyForce(force);
  }

  computer.checkBoundaries();
  computer.update();
  computer.display();



  ball.checkCollision(player.pos.x,player.pos.y);
  ball.checkCollision(computer.pos.x,computer.pos.y);

  outSide = ball.checkBoundaries();

  if(outSide === 1){
    p1score++;
  }
  else if(outSide === -1){
    p2score++;
  }

  ball.update();
  ball.display();


}

function keyPressed(){
  if(keyCode === UP_ARROW){
    up = true;
  }
  else if(keyCode === DOWN_ARROW){
    down = true;
  }
}

function keyReleased(){
  if(up === true){
    up = false;
  }
  else if(down === true){
    down = false;
  }
}

//ball

class Particle {
  constructor(x,y) {
    this.pos = createVector(x,y);
    this.vel = createVector(0,0);
    this.acc = createVector(0,0);
    this.dia = 30;
  }
  update() {
    this.vel.add(this.acc);  
    this.pos.add(this.vel);  
    this.acc.mult(0);        
  }
  display() {
    push();
    translate(this.pos.x, this.pos.y);
    noStroke();
    fill(255);
    ellipse(0,0, this.dia, this.dia);
    pop();
  }
  checkBoundaries() {
    // x
    if (this.pos.x < 0) {
      this.pos.x = width/2;
      this.pos.y = height/2;
      this.vel.x = random(4,10);
      this.vel.y = random(-4,-10);
      return(1);
    } else if (this.pos.x > width) {
      this.pos.x = width/2;
      this.pos.y = height/2;
      this.vel.x = random(-4,-10);
      this.vel.y = random(4,10);
      return(-1);

    }
    // y
    if (this.pos.y < 0) {
      this.pos.y = 0;
      this.vel.y = -this.vel.y;
    } else if (this.pos.y > height) {
      this.pos.y = height;
      this.vel.y = -this.vel.y;
    }

    return(0);
  }
  checkCollision(locX,locY){

    if((this.pos.x > locX) &&(this.pos.x<locX+30) &&(this.pos.y > locY) &&(this.pos.y < locY+250)){
      console.log("collision");
      this.vel.x = -this.vel.x;
      this.vel.mult(1.1);
    }
  }
  applyForce(f){
    this.acc.add(f);
  }
}

//player

class Player {

  constructor(x,y){
    this.pos = createVector(x,y);
    this.vel = createVector(0,0);
    this.acc = createVector(0,0);
  }

  update(){
    this.vel.add(this.acc);
    this.pos.add(this.vel);
    this.acc.mult(0);

  }

  display(){
    push();
    translate(this.pos.x,this.pos.y);
    noStroke();
    fill(255);
    rect(0,0,30,250);
    pop();
  }

  applyForce(f){
    this.acc.add(f);
  }

  checkBoundaries(){
    if (this.pos.y > height-250) {
      this.pos.y = height-250;
      this.vel.y = 0;
    } else if (this.pos.y < 0) {
      this.pos.y = 0;
      this.vel.y = 0;
    }
  }




}

//computer 

class Computer {

  constructor(x,y){
    this.pos = createVector(x,y);
    this.vel = createVector(0,0);
    this.acc = createVector(0,0);
  }

  update(){
    this.vel.add(this.acc);
    this.pos.add(this.vel);
    this.acc.mult(0);

  }

  display(){
    push();
    translate(this.pos.x,this.pos.y);
    noStroke();
    fill(255);
    rect(0,0,30,250);
    pop();
  }

  applyForce(f){
    this.acc.add(f);
  }

  checkBoundaries(){
    if (this.pos.y > height-250) {
      this.pos.y = height-250;
      this.vel.y = 0;
    } else if (this.pos.y < 0) {
      this.pos.y = 0;
      this.vel.y = 0;
    }
  }

  prediction(ballX,ballY,balldx,balldy){
    var time = abs(ballX - this.pos.x) / balldx 
    var newY = ballY + time * balldy;
    if(newY < this.pos.y){
      return(0);
    }
    else{
      return(1);
    }
  }


}


Forces Exercise

This week, we learnt how to incorporate the different forces, including attraction, repulsion, and gravitational force. And for this week’s assignment, I tried to practise attraction force.

When I was taking an art class a few semesters back, I learnt of Jackson Pollock, an American painter whose work is mostly abstract painting. I thought that since so far, all of the particles we create in class move in a random fashion, if I could make the particles leave some kind of trails, that will create lines that mimic Pollock’s abstract lines.

To achieve this, I randomly placed invisible particles on the canvas and as the the particles pass by these invisible particles, they’ll get attracted to it and then create a random pattern as it moves towards and away from the invisible particles. Link: http://alpha.editor.p5js.org/full/rkCSfQfaZ

Moreover, I also tried to play with attraction forces in WEBGL. Link: http://alpha.editor.p5js.org/full/B10p7Xzab

 

NOC Week5 Forces

Inspired by Shiffman’s smoke particle, I want to create the effect of moving clouds and fog. There’re several things I learned from this little project.

  • push & pop

Since I want to add a background image here in the project, I have to use push and pop to make it still instead of moving with the clouds.

  • prototype

The prototype is new to me. And I get to know how it adds properties to the object.

  • map

Through this project, I finally understand how the map works and how important it is.

[Nature of Code]Week 6 Force

For this week’s assignment, I would like to create an infinite loop for the particles. Why? An animator shared me what he did as showed below. It’s a small motion graphics telling about being yourself out of the infinite loop of the society.

http://madeofbothsides.com/post/139170330106/beyourself

Then I was starting to think about how about creating a world by myself that you are forced to go with the public? Although you are not in the loop, you are guided towards to it. From here, I started coding.

I learned the mathematical formula of the infinity loop symbol, created each reference dot based on that, and gave them a direction towards the next point. Then I tried to create a flow field that can direct the particles to the symbol, and eventually follows the loop.

Here is my original idea. And the following is what I got. It’s a little bit different but still looks good.

For the direction fields, I had several tries. But because of the direction of the symbol points and the formula behind it, I realized that actually, I may need some machine learning stuff so that the particles can also control the flow field lines?

My code can be found here.

NOC Simulate Skydiving

Question: air resistance of a skydiver depends on two factors: velocity and surface (simulated with radius). After the parachute opens, the skydiver should experience a increased air resistance to slow down. In the code I was only able to implement a constant falling velocity after parachute opens.

I have a feeling that the solution to this is very simple, but I for some reason just cannot think of it.

 

 

Nature_of_Code hw5_Weiyu Wang

This week’s assignment is about small balls floating on the water surface. And there is a blower under the water. When there is a blower, the balls will be blew up. And it will drop down when the blower is removed. And the buoyancy in the water will move the balls up back to the water surface.

Here is the code:

NOC-Week 5: Forces-A Fountain

We learned WEBGL to do 3D effect in p5 this week. I was impressed by what WEBGL can make and therefore made this 3d fountain utilizing gravity and collision. I referred to the examples and tutorials on the p5 website and got to know how to draw difference geometries and light functions. The coordinate system in 3D bothered me a lot when I started, but later I’m more used to using translate( ) and rotate( ).
Basically, I make four cylinders first as the fountain pedestal, then I use push() to create two columns of spheres as water drops continually. The initial velocities of these spheres are the same in y-direction but vary in x and z. Then the program just keeps checking whether the water drops hit the floor. Also, I made a torus as the enclosure of the last floor of the fountain. The program checks if the water drops hit the enclosure and pushes it back when it does. When the water drops reach the last floor, I added collision between them, so that they would disperse in a natural way.
I used some functions of Vector to help the program understand whether the water drops fall out of a floor or not. Because my floors are in shape of circles instead of rectangles, I cannot judge it by checking whether the x and z position of a water drop is within some range. Therefore I check the distance between vectors using vector.dist() and vector.mag().
One problem of this program is that p5 would stop working after some time because of the huge operation required. I am still thinking about how to fix it.
Here is a demo: