Sources:

​

CC tutorials 8.1-8.4.1 by Xin Xin

​

DT Study: Elena Xinyue Peng

​

Classmates: Nick D'Angelo

​

how to make an instance of a class:

https://p5js.org/reference/#/p5/class

​

hoop, rim, & post idea:

https://editor.p5js.org/rjgilmour/sketches/uCw6P5waj

https://p5js.org/reference/#/p5/quad

​

bouncing ball idea: 

https://editor.p5js.org/ellacyt/sketches/B1lmPZgoZ

​

Font:

https://www.1001fonts.com/press-start-2p-font.html

​

free use & self-drawn images

basketball:

http://clipart-library.com/clipart/8TGEydMdc.htm

​

school: https://creazilla.com/nodes/38220-school-building-and-playground-clipart

*/

​

let clouds = [];

let cloudsNum = 5;

let trees = [];

let treesNum = 2;

​

let dialog = ["Nerd!", "Four eyes!", "Leave me alone!", "We're just kidding!","Two kids are bullying me.", "I'll talk to them.", "Can we play basketball?", "Yes!"];

​

let dialogWidth;

​

let bitmapFont;

​

let sceneNum = 1;

let ground, theSky, drawSun, pavement, pg;

let goal, bBall;

let mc, bully1, bully2, teacher;

​

let transition = 0;

let switchScene = false;

let isFirstScene = false;

let confrontation = false;

​

let school, cloudImg, basketball, mcImg, b1Img, b2Img, teachImg, friendImg;

​

let y = 375;

let ballspeed = 0;

let gravity = 0.25;

​

function preload(){

  bitmapFont = loadFont('PressStart2P-Regular.ttf');

  school = loadImage('assets/playground.png');

  cloudImg = loadImage('assets/cloud.png');

  basketball = loadImage('assets/basketball.png');

  mcImg = loadImage('assets/main-character-neutral.png');

  mcImg2 = loadImage('assets/main-character-happy.png');

  mcImg3 = loadImage('assets/main-character-angry.png');

  b1Img = loadImage('assets/bully1.png');

  b2Img = loadImage('assets/bully2.png');

  teachImg = loadImage('assets/teacher.png');

  friendImg = loadImage('assets/friend.png');

}

​

function setup() {

  createCanvas(600, 400);

  noSmooth(10);

  frameRate(60);

  textFont(bitmapFont);

  textAlign(CENTER);

  ground = new Environment(this.x,this.y,this.w,this.h,this.c);

  theSky = new Environment(this.x,this.y,this.w,this.h,this.c);

  pavement = new Environment(this.x,this.y,this.w,this.h,this.c);

  pg =  new Environment(this.x,this.y,this.w,this.h,this.c);

  drawSun = new Sun(this.x,this.y,this.w,this.h,this.c);

  goal = new Activities(this.x,this.y,this.w,this.h,this.c);

  bBall = new Activities(this.x,this.y,this.w,this.h,this.c);

  mc = new People(20,165,80,110);

  bully1 = new People(350,150,80,130);

  bully2 = new People(400,160,80,120);

  teacher = new People(300,140,80,150);

  friend = new People(300,145,80,140);

  for(let i = 0; i < cloudsNum; i++){

    clouds[i] = new Clouds(random(width), this.y, this.w, this.h, this.c);

  }

}

​

function draw() {

  background(215,215,0,60);

  switch(sceneNum){

    //change a case to 1 for testing & editing

    case 2:

      begin();

      break;

    case 3:

      middle1();

      break;

    case 4:

      ending1();

      break;

    case 5:

      ending2();

      break;

    default:

      titleScreen();

      break;

  }

}

​

function keyPressed(){

  if(keyCode == RETURN){

    switchScene = true;

    sceneNum++;

    mc.x = 100;

  }

  if(mc.x > 600){

    sceneNum = 5;

    //reset characters

    mc.x = 20;

    friend.x = 300;

    console.log("Switching scenes!");

  }

}

​

class People{

  constructor(x,y,w,h){

    this.x = x;

    this.y = y;

    this.w = w;

    this.h = h;

    this.d;

  }

  mcBody(){

    image(mcImg,this.x,this.y,this.w,this.h);

  }

  b1Body(){

    image(b1Img,this.x,this.y,this.w,this.h);

  }

  b2Body(){

    image(b2Img,this.x,this.y,this.w,this.h);

  }

  teacherBody(){

    image(teachImg,this.x,this.y,this.w,this.h);

  }

  friendBody(){

    image(friendImg,this.x,this.y,this.w,this.h);

  }

  move(){

    if(keyIsDown(37)){

      keyIsPressed = true;

      this.x--;

    }

    if(keyIsDown(39)){

      keyIsPressed = true;

      this.x++;

    }

  }

  talk(dialog){

    this.d = dist(this.x,this.y,mc.x,mc.y);

    // let offset = this.x-200;

    // dialogWidth = textWidth(dialog) + offset;

    push();

    rectMode(CENTER);

    pop();

    // let expressions = {

    //     'neutral': loadImage('assets/main-character-neutral.png'),

    //     'happy': mcImg2, 

    //     'mad': mcImg3};

    if(keyCode == 84 && keyIsPressed){

      if(this.d < 110){

        // image(expressions.mad,this.x + 100,50);

        fill(255);

        // rect(dialogWidth,this.y-70,150,20);

        rect(this.x-100, this.y-67,250,15);

        fill(0);

        textSize(10);

        push();

        text(dialog,this.x,this.y-55);

        pop();

      }

    }

  }

  conflict(){

    if(keyCode == 84 && keyIsPressed){

      fill(255);

      rect(95,320,425,50);

​

      fill(0);

      textSize(9);

      text("Will you confront them (press 1) or walk away?", 307,350);

    }

    if(!confrontation && keyCode == 49){

      sceneNum = 3;

    }

  }

}

​

class Clouds{

  constructor(x,y,w,h,c){

    this.x = random(0, width);

    this.y = random(-10, height-350);

    this.w = 100;

    this.h = 100;

    this.c = color(255);

  }

  clouds(){

   image(cloudImg,this.x,this.y,this.w,this.h);

  }

  movingClouds(){

    this.x+=0.5;

    if (this.x > width){

      this.x = 0;

    }

  }

}

​

class Sun{

   constructor(x,y,w,h,c){

    this.x = 0;

    this.y = 40;

    this.w = 75;

    this. h = 75;

    this.c = color(255, 216, 74);

  }

    sun(){

    fill(this.c);

    ellipse(this.x,this.y,this.w,this.h);

  }

   movingSun(){

    this.x+=0.5;

    if (this.x > width){

      this.x = 0;

    }

  }

}

​

class Environment{

  constructor(x,y,w,h,c){

    this.x = x;

    this.y = y;

    this.w = w;

    this. h = h;

    this.c = c;

  }

  playground(){

    image(school,-115,10, 830,500);

  }

  grass(){

    fill(50,157,50);

    rect(0,160,600,400);

  }

  sky(){

    fill(0,225,225);

    rect(0,0,700,405);

  }

  concrete(){

    fill(91,99,96);

    rect(0,215,600,200);

  }

}

​

class Activities{

  constructor(x,y,w,h,c){

    this.x = x;

    this.y = y;

    this.w = w;

    this.h = h;

    this.c = c;

  }

  basketballGoal(){

    push();

    translate(0,-50);

    //post

    push();

    stroke(0);

    strokeWeight(6);

    line(545, 100, 545, 305);

    pop();

    //goal

    fill(255);

    push();

    scale(1.3);

    translate(180,-50);

    quad(226, 146, 250, 154, 250, 94, 226, 86);

    pop();

    //base

    fill(0);

    rect(505,300,70,30,20);

    //details

    //rim

    push();

    scale(0.85);

    translate(100,-45);

    noFill();

    stroke(255,140,0);

    strokeWeight(6);

    ellipse(515,200,60,10);

    pop();

    //post deets

    push();

    fill(255,0,0);

    translate(312,-25);

    quad(220, 146, 241, 154, 241, 94, 220, 86);

    pop();

    //hoop lines

    push();

    scale(0.85);

    translate(100,-45);

    stroke(255);

    strokeWeight(4);

    //vertical 

    line(485, 206, 490, 275);

    line(542, 206, 535, 275);

    //diagonal

    line(490, 230, 540, 208);

    line(485, 206, 540, 230);

    line(490, 250, 540, 230);

    line(490, 230, 537, 250);

    line(490, 275, 537, 250);

    line(490, 250, 535, 275);

    pop();

    pop();

  }

  basketball(){

     image(basketball,400,230,45,45);

  }

  playBall(){

    //movement

     if(this.basketball() <= height/2 || this.basketball() >= 400){

    }

  }

}

​

function titleScreen(){

  fill(0,0,255);

  textSize(20);

  text("Overcoming Bullying", 310,100);

  text("Press return to begin",310,200);

  text("Press t to talk to characters",300,300);

}

​

function begin(){

  theSky.sky();

  drawSun.sun();

  drawSun.movingSun();

  ground.grass();

  pg.playground();

  mc.mcBody();

  mc.move();

  bully1.b1Body();

  bully1.talk(dialog[0]);

  bully2.b2Body();

  bully2.talk(dialog[1]);

  mc.conflict();

}

​

function middle1(){

  theSky.sky();

  drawSun.sun();

  drawSun.movingSun();

  for(let i = 0; i < cloudsNum; i++){

    clouds[i].clouds();

    clouds[i].movingClouds();

  }

  ground.grass();

  pg.playground();

​

  mc.mcBody();

  mc.move();

  //add some more conditions for bullies in terms of moving

  bully1.b1Body();

  bully2.b2Body();

  mc.talk(dialog[2]);

  bully1.talk(dialog[3]);

  push();

  fill(255);

  rect(88,320,435,50);

  fill(0);

  textSize(9);

  text("Press enter to talk to the teacher or walk away.", 307,350);

  pop();

}

​

function ending1(){

  theSky.sky();

  drawSun.sun();

  drawSun.movingSun();

  for(let i = 0; i < cloudsNum; i++){

    clouds[i].clouds();

    clouds[i].movingClouds();

  }

  ground.grass();

  pg.playground();

  mc.mcBody();

  mc.move();

  teacher.teacherBody();

  mc.talk(dialog[4]);

  teacher.talk(dialog[5]);

}

​

function ending2(){

  theSky.sky();

  drawSun.sun();

  drawSun.movingSun();

  pavement.concrete();

  goal.basketballGoal();

  bBall.basketball();

  mc.mcBody();

  mc.move();

  friend.friendBody();

  mc.talk(dialog[6]);

  friend.talk(dialog[7]);

}