{"id":1221,"date":"2018-10-18T15:51:29","date_gmt":"2018-10-18T15:51:29","guid":{"rendered":"https:\/\/www.courses.tegabrain.com\/cc18\/?page_id=1221"},"modified":"2018-11-26T19:14:41","modified_gmt":"2018-11-26T19:14:41","slug":"classes-objects-in-p5js","status":"publish","type":"page","link":"https:\/\/www.courses.tegabrain.com\/cc18\/classes-objects-in-p5js\/","title":{"rendered":"Classes &#038; Objects in P5JS"},"content":{"rendered":"<p><iframe loading=\"lazy\" src=\"https:\/\/www.youtube.com\/embed\/T-HGdc8L-7w\" width=\"560\" height=\"315\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><span style=\"display: inline-block; width: 0px; overflow: hidden; line-height: 0;\" data-mce-type=\"bookmark\" class=\"mce_SELRES_start\">\ufeff<\/span><\/iframe><\/p>\n<p>Classes in P5 are reusable modular blocks of code. They are templates for objects and, just like in Processing they have data and functionality.<br \/>\nIn P5 the basic class syntax is shown in the example below:<\/p>\n<pre lang=\"java\">\/\/This example uses a simple class with 4 arguments\r\n\r\n\/\/This example uses a simple class with 4 arguments\r\n\r\nvar pulse; \/\/all variables are var even for an object\r\nvar pulse2; \/\/declare a second pulse object\r\n\r\nfunction setup() {\r\n  createCanvas(windowWidth, windowHeight);\r\n  background(100);\r\n  pulse = new Pulser(width\/2, height\/2, 250, 250); \/\/initialize the object\r\n  pulse2 = new Pulser(random(width), random(height), 100, 100); \/\/initialize the object\r\n  noStroke();\r\n}\r\n\r\nfunction draw() {\r\n  background(255);\r\n  pulse.display(); \/\/run the display function of the object\r\n  pulse.move();\r\n  pulse2.display();\/\/run the display function of the object\r\n  pulse2.move();\r\n}\r\n\r\n\/\/class in p5js\r\n\r\nclass Pulser {\r\n  \r\n    \/\/The constructor (note no variable declarations above the constructor)  \r\n    constructor(x, y, w, h) { \/\/pulser has 4 arguments \r\n    this.x = x; \/\/this refers to the variables in the class. Need to use this in front of all variables.\r\n    this.y = y;\r\n    this.w = w;\r\n    this.h = h;\r\n    this.color = \"red\";\r\n    this.n=random(2);\/\/generate a random starting noise variable; \r\n    this.p=0; \/\/position variable\r\n    this.inc=0.005; \/\/noise variable increment\r\n  }\r\n   \r\n   \/\/Functions \r\n  display() {\r\n    fill(255, 0, 0,100);\r\n    ellipse(this.x, this.y, this.w, this.h); \r\n \tthis.w += random(-1, 1);\r\n   \tthis.h += random(-1, 1);\r\n   \r\n  }\r\n\r\n \r\n  move() {\r\n   this.p=noise(this.n);\r\n   this.x=map(this.p,0,1,0,width); \r\n   this.n=this.n+this.inc;\r\n  }\r\n}\r\n<\/pre>\n<p>If you need to use a class you probably will want to create an array of the resultant objects. In P5 arrays can change length. Objects can be added and removed from them as the program runs. They are not of a fixed length like in Processing.<\/p>\n<p>Here is the last example with an array of Pulser objects:<\/p>\n<pre lang=\"java\">\/\/This example uses a simple class with 4 arguments\r\n\r\nvar pulse=[];\r\n\r\nfunction setup() {\r\n  createCanvas(windowWidth, windowHeight);\r\n  background(100);\r\n\r\n  \/\/fill array\r\n  for(var i=0;i<5;i++){ \/\/loop 5 times\r\n    \/\/put an object in the array for each loop\r\n    var d=random(100,200);\r\n    pulse[i] = new Pulser(width\/2, height\/2, d,d); \r\n\r\n  }\r\n  noStroke();\r\n}\r\n\r\nfunction draw() {\r\n  background(255);\r\n  for(var i=0;i<5;i++){ \/\/loop 5 times\r\n    pulse[i].display(); \/\/run the display function of the object\r\n    pulse[i].move();\r\n  }\r\n}\r\n\r\n\/\/class in p5js\r\n\r\nclass Pulser {\r\n  \r\n    \/\/The constructor (note no variable declarations above the constructor)  \r\n    constructor(x, y, w, h) { \/\/pulser has 4 arguments \r\n    this.x = x; \/\/this refers to the variables in the class. Need to use this in front of all variables.\r\n    this.y = y;\r\n    this.w = w;\r\n    this.h = h;\r\n    this.color = \"red\";\r\n    this.n=random(2);\/\/generate a random starting noise variable; \r\n    this.p=0; \/\/position variable\r\n    this.inc=0.005; \/\/noise variable increment\r\n  }\r\n   \r\n   \/\/Functions \r\n  display() {\r\n    fill(255, 0, 0,100);\r\n    ellipse(this.x, this.y, this.w, this.h); \r\n \tthis.w += random(-1, 1);\r\n   \tthis.h += random(-1, 1);\r\n   \r\n  }\r\n\r\n \r\n  move() {\r\n   this.p=noise(this.n);\r\n   this.x=map(this.p,0,1,0,width); \r\n   this.n=this.n+this.inc;\r\n  }\r\n}\r\n<\/pre>\n<p>And what if we want to add a new pulser object to the array every time the mouse is clicked? Because P5 arrays can change in length, we can use the push function to add a new object to the array in function mousePressed().<br \/>\nNote that the for loop in draw needs to be changed to<\/p>\n<pre>for(var i=0;i&lt;pulse.length;i++){ \/\/loop\r\n<\/pre>\n<p>The array changes length, so avoid hard coding the number of loops into the code, rather use the .length function.<\/p>\n<pre lang=\"java\">\/\/This example uses a simple class with 4 arguments\r\n\r\nvar pulse=[];\r\n\r\nfunction setup() {\r\n  createCanvas(windowWidth, windowHeight);\r\n  background(100);\r\n\r\n  \/\/fill array\r\n  for(var i=0;i<2;i++){ \/\/loop 5 times\r\n    \/\/put an object in the array for each loop\r\n    var d=random(100,200);\r\n    pulse[i] = new Pulser(width\/2, height\/2, d,d); \r\n\r\n  }\r\n  noStroke();\r\n}\r\n\r\nfunction draw() {\r\n  background(255);\r\n  for(var i=0;i<pulse.length;i++){ \/\/loop 5 times\r\n    pulse[i].display(); \/\/run the display function of the object\r\n    pulse[i].move();\r\n  }\r\n}\r\n\r\n\/\/ADD an object to the array when mouse is clicked\r\nfunction mousePressed(){\r\n  var d=random(100,200);\r\n  pulse.push(new Pulser(width\/2, height\/2, d,d));\r\n  console.log(\"pushing\");\r\n}\r\n\r\n\/\/class in p5js\r\n\r\nclass Pulser {\r\n  \r\n    \/\/The constructor (note no variable declarations above the constructor)  \r\n    constructor(x, y, w, h) { \/\/pulser has 4 arguments \r\n    this.x = x; \/\/this refers to the variables in the class. Need to use this in front of all variables.\r\n    this.y = y;\r\n    this.w = w;\r\n    this.h = h;\r\n    this.color = \"red\";\r\n    this.n=random(2);\/\/generate a random starting noise variable; \r\n    this.p=0; \/\/position variable\r\n    this.inc=0.005; \/\/noise variable increment\r\n  }\r\n   \r\n   \/\/Functions \r\n  display() {\r\n    fill(255, 0, 0,100);\r\n    ellipse(this.x, this.y, this.w, this.h); \r\n \tthis.w += random(-1, 1);\r\n   \tthis.h += random(-1, 1);\r\n   \r\n  }\r\n\r\n \r\n  move() {\r\n   this.p=noise(this.n);\r\n   this.x=map(this.p,0,1,0,width); \r\n   this.n=this.n+this.inc;\r\n  }\r\n}\r\n\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>\ufeff Classes in P5 are reusable modular blocks of code. They are templates for objects and, just like in Processing they have data and functionality. In P5 the basic class syntax is shown in the example below: \/\/This example uses a simple class with 4 arguments \/\/This example uses a simple class with 4 arguments<a class=\"more-link button\" href=\"https:\/\/www.courses.tegabrain.com\/cc18\/classes-objects-in-p5js\/\">Read More<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"jetpack_post_was_ever_published":false,"footnotes":""},"class_list":["post-1221","page","type-page","status-publish","hentry"],"jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/Paeb9f-jH","jetpack-related-posts":[],"_links":{"self":[{"href":"https:\/\/www.courses.tegabrain.com\/cc18\/wp-json\/wp\/v2\/pages\/1221","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.courses.tegabrain.com\/cc18\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.courses.tegabrain.com\/cc18\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.courses.tegabrain.com\/cc18\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.courses.tegabrain.com\/cc18\/wp-json\/wp\/v2\/comments?post=1221"}],"version-history":[{"count":3,"href":"https:\/\/www.courses.tegabrain.com\/cc18\/wp-json\/wp\/v2\/pages\/1221\/revisions"}],"predecessor-version":[{"id":2060,"href":"https:\/\/www.courses.tegabrain.com\/cc18\/wp-json\/wp\/v2\/pages\/1221\/revisions\/2060"}],"wp:attachment":[{"href":"https:\/\/www.courses.tegabrain.com\/cc18\/wp-json\/wp\/v2\/media?parent=1221"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}