​

// javascript literal object, it has data in it. there are good reasons and uses for stand alone functions

// there is a style of progamming called functional programming, which JS is well suited 

//for because functions are like the core buidling blocks of JS

​

// if you want to program grpahics, simulations, animations, things moving around the 

//screen its good to think about what ever you are animating or showing as an object

// think about it with Data and functionality 

​

//i want to write code where i create these objects and i issue commands on them 

//the reason why i want to do that is because i want to think about this thing moving

//around on the screen as an object then maybe i can make a second bubble and a third

// bubble. so i have to think conceptually about what im doing 

​

//there are some principles about why you would use functions, you can make your

//code modular or you can make your code reusable. this is also true of object 

//oriented programming 

//but one of the frist key principles of object oreinted programming is this idea

//of encapsulation: i want to encapsulate everything that it is to be a certain thing

// inside of an object. 

// what properites does it have?

//waht things do they do?

​

// think of a class is a template or blueprint 

//the class which is a new block of code, everything that goes in between the { }

// is what it means to be a buble or a thign . all of that will go in there 

// so that in my main program, which has set up and draw, i dont have to write the 

//code for the bubble, i can just do things to create bubbles 

​

// new is a keyword that means to create a new object instance. its a function to 

//consruct an object 

// ther are a bunch of different ways to do things in JS but classes are a good way 

//to do ;objects in JS. A class is the idea of the template . the object is the thing

//itself also referened to as an instance . the class is the template, there is no 

//bubble in the class, it just describes what it means to be a bubble. the instance

// is where the actual bubble is based off of the class tempalte.

​

// in the class you declare a function called constructor. in the construcotr func

//is kind of liek the objects set up. this is where i hgave the data that has 

//to do with a particualr thing. set up is where i initialize everything , draw 

//is wehre i animate stuff and loop over and over again. 

​

// JS has 2 different ways to decalre variabeles "let" or "var". 

​

//"this" is a keyword in JS that can mean a lot of different things , but for right 

//now its a keywrod for the current object instance or what ever i am mkaing at the 

//moment 

​

//this. is the bane of your exsistance now, welcome to your life 

​

// print or println or console.log all work in JS

​

// the goal here is i want to write elegant easy to read code where i say things 

//like bubble.move bubble.show and have several instances of bubbles 

let  bubble1 ;

let  bubble2

​

​

function setup() {

  createCanvas(600, 400);

  bubble1 = new Bubble();

  bubble2 = new Bubble();

}

​

function draw() {

  background(220);

  bubble1.show();

  bubble1.move();

  bubble2.show();

  bubble2.move();

​

}

​

 class Bubble{

   constructor(){

     this.x =150;

     this.y= 200;

   }

   move(){

   this.x= this.x+random(-5,5);

   this.y= this.y +random (-5,5);

   }

   show(){

   stroke(255);

   strokeWeight(4);

   noFill();

   ellipse( this.x, this.y, 40,40);

   }

 }

​

​