Creative Coding Exercise

Stage 1: draw a ball and assign behaviors to it — in this case, bounce around the edges
https://editor.p5js.org/megagpxp/sketches/hwRM3G0aQ

let posx;
let posy;
let xSpeed;
let ySpeed;

function setup() {
  createCanvas(400, 400);
  posx = width/2;
  posy = height/2;
  xSpeed = random(-5, 5);
  ySpeed = random(-5, 5);
}

function draw() {
  background(220);
  posx += xSpeed;
  if (posx > width || posx < 0) {
    xSpeed *= -1;
  }
  posy += ySpeed;
  if (posy > height || posy < 0) {
    ySpeed *= -1;
  }
  ellipse(posx, posy, 10);
}

Stage 2: make the ball into a class
https://editor.p5js.org/megagpxp/sketches/FAVtr2ZsG

let oneBall;

function setup() {
  createCanvas(400, 400);
  oneBall = new ball(random(0, width), random(0, height), random(-3, 3), random(-3, 3));
}

function draw() {
  background(220);
  oneBall.update();
  oneBall.display();
}

class ball {
  constructor(px, py, sx, sy) {
    this.px = px;
    this.py = py;
    this.sx = sx;
    this.sy = sy;
  }

  update() {
    this.px += this.sx;
    if (this.px > width || this.px < 0) {
      this.sx *= -1;
    }
    this.py += this.sy;
    if (this.py > height || this.py < 0) {
      this.sy *= -1;
    }
  }

  display() {
    ellipse(this.px, this.py, 50);
  }
}

Stage 3: bounce 100 balls
https://editor.p5js.org/megagpxp/sketches/v3DmiOK-B

let manyBalls = [];
function setup() {
  createCanvas(400, 400);
  for (let i = 0; i < 100; i ++) {
    manyBalls[i] = new ball(
      random(0, width),
      random(0, height),
      random(-3, 3),
      random(-3, 3)
    );
  }
}

function draw() {
  background(220);
  for (let i = 0; i < 100; i ++) {
  manyBalls[i].update();
  manyBalls[i].display();
  }
}

class ball {
  constructor(px, py, sx, sy) {
    this.px = px;
    this.py = py;
    this.sx = sx;
    this.sy = sy;
  }

  update() {
    this.px += this.sx;
    if (this.px > width || this.px < 0) {
      this.sx *= -1;
    }
    this.py += this.sy;
    if (this.py > height || this.py < 0) {
      this.sy *= -1;
    }
  }

  display() {
    ellipse(this.px, this.py, 50);
  }
}

Stage 4: define the relationship between bouncing balls
https://editor.p5js.org/megagpxp/sketches/YYVsvsTkf

let manyBalls = [];
function setup() {
  createCanvas(400, 400);
  for (let i = 0; i < 100; i++) {
    manyBalls[i] = new ball(
      random(0, width),
      random(0, height),
      random(-3, 3),
      random(-3, 3)
    );
  }
}

function draw() {
  background(220);
  for (let i = 0; i < 100; i++) {
    manyBalls[i].update();
    //manyBalls[i].display();
    for (let n = 0; n < 100; n++) {
      let d = dist(manyBalls[i].px, manyBalls[i].py, manyBalls[n].px, manyBalls[n].py);
      if (d < 60) {
        let w = ((60-d)/60)*3;
        strokeWeight(w);
        line(manyBalls[i].px, manyBalls[i].py, manyBalls[n].px, manyBalls[n].py);
      }
    }
  }
}

class ball {
  constructor(px, py, sx, sy) {
    this.px = px;
    this.py = py;
    this.sx = sx;
    this.sy = sy;
  }

  update() {
    this.px += this.sx;
    if (this.px > width || this.px < 0) {
      this.sx *= -1;
    }
    this.py += this.sy;
    if (this.py > height || this.py < 0) {
      this.sy *= -1;
    }
  }

  display() {
    ellipse(this.px, this.py, 50);
  }
}

Casey Reas’s Process