p5.js Web Editor | All

xxxxxxxxxx
let susan,
  peter,
  sophie,
  abder,
  bernat,
  fred,
  german,
  jd,
  julie,
  kai,
  kyla,
  lucia,
  maia,
  meggie, poppins;
​
let images = [];
let people = [];
​
function preload() {
  poppins = loadFont('/images/Poppins-Thin.ttf')
  susan = {
    img: loadImage("images/susan.png"),
    july: "Developed Emoji Race (intro to JavaScript)",
    august: "aug msg",
    sept: "sept msg",
  };
  peter = {
    img: loadImage("images/peter.png"),
    july: "july msg",
    august: "aug msg",
    sept: "sept msg",
  };
  sophie = {
    img: loadImage("images/sophie.png"),
    july: "july msg",
    august: "aug msg",
    sept: "sept msg",
  };
  abder = {
    img: loadImage("images/abder.png"),
    july: "july msg",
    august: "aug msg",
    sept: "sept msg",
  };
  bernat = {
    img: loadImage("images/bernat.png"),
    july: "july msg",
    august: "aug msg",
    sept: "sept msg",
  };
  fred = {
    img: loadImage("images/fred.png"),
    july: "july msg",
    august: "aug msg",
    sept: "sept msg",
  };
  german = {
    img: loadImage("images/german.png"),
    july: "july msg",
    august: "aug msg",
    sept: "sept msg",
  };
  jd = {
    img: loadImage("images/jd.png"),
    july: "july msg",
    august: "aug msg",
    sept: "sept msg",
  };
  julie = {
    img: loadImage("images/julie.png"),
    july: "july msg",
    august: "aug msg",
    sept: "sept msg",
  };
  kai = {
    img: loadImage("images/kai.png"),
    july: "july msg",
    august: "aug msg",
    sept: "sept msg",
  };
  kyla = {
    img: loadImage("images/kyla.png"),
    july: "july msg",
    august: "aug msg",
    sept: "sept msg",
  };
  lucia = {
    img: loadImage("images/lucia.png"),
    july: "july msg",
    august: "aug msg",
    sept: "sept msg",
  };
  maia = {
    img: loadImage("images/maia.png"),
    july: "july msg",
    august: "aug msg",
    sept: "sept msg",
  };
  meggie = {
    img: loadImage("images/meggie.png"),
    july: "july msg",
    august: "aug msg",
    sept: "sept msg",
  };
}
​
function setup() {
  createCanvas(1200, 700);
  names = [
    susan,
    peter,
    sophie,
    abder,
    bernat,
    fred,
    german,
    jd,
    julie,
    kai,
    kyla,
    lucia,
    maia,
    meggie,
  ];
  for (let [index, person] of names.entries()) {
    let instructor = new Bubble(
      random(500, 900),
      (index + 1) * 500,
      100,
      person
    );
    people.push(instructor);
  }
}
​
function depth_background() {
   for (var i = 0; i < 240; i++) {
    stroke(255, 145-(i/5), 0);
    line(0, i, width, i);
  }
  for (var i = height / 3; i < height; i++) {
    stroke(0, 150, 199, i / 4);
    line(0, i, width, i);
  }
}
​
class Bubble {
  constructor(x, y, w, person) {
    this.x = x;
    this.y = y;
    this.w = w;
    this.img = person.img;
    this.july = person.july;
    this.aug = person.august;
    this.setp = person.sept;
    this.xoff = this.x;
  }
  show() {
    fill(140);
    image(this.img, this.x, this.y, 100, 100);
  }
  move() {
    this.xoff = this.xoff + 0.01;
    let n = (noise(this.xoff) * width) / 2;
    this.x = n;
    this.y -= 0.8;
  }
​
  message() {
    fill(220);
    strokeWeight(5);
    textSize(30);
    if (this.y > 300 && this.y < 400) {
      stroke(255);
      rect(400, 40, 450, 150, 40);
      fill(0);
      noStroke();
      text(this.july, 420, 55, 380, 200);
    }
  }
}
​
function draw() {
  background(255);
​
​
  depth_background();
  for (let person of people) {
    person.show();
    person.move();
    person.message();
  }
}
​
Cookies

Sketch Files

Console

Preview
