{"id":1274,"date":"2018-01-04T11:23:50","date_gmt":"2018-01-04T16:23:50","guid":{"rendered":"http:\/\/bluegalaxy.info\/codewalk\/?p=1274"},"modified":"2021-01-17T20:21:33","modified_gmt":"2021-01-18T01:21:33","slug":"p5-js-build-starfield","status":"publish","type":"post","link":"https:\/\/bluegalaxy.info\/codewalk\/2018\/01\/04\/p5-js-build-starfield\/","title":{"rendered":"p5.js: How to build a starfield"},"content":{"rendered":"<p>In this article, I will show how to build a starfield in p5.js. The starfield is presented as if you are flying through a field of stars, where the closer stars are bigger and there is an appearance of light streaking as your speed increases. This sketch is interactive in that moving the mouse to the right makes the stars fly faster, and moving the mouse to the left makes them appear to fly slower.<\/p>\n<p>Here is what the final result looks like:<br \/>\n\n<!-- iframe plugin v.5.2 wordpress.org\/plugins\/iframe\/ -->\n<iframe loading=\"lazy\" src=\"https:\/\/bluegalaxy.info\/processing\/p5\/star_field\/\" scrolling=\"no\" width=\"600\" height=\"600\" id=\"iframe_drop_shadow\" class=\"iframe-class\" frameborder=\"0\"><\/iframe>\n<\/p>\n<p>This p5.js code features use of a class called Star that has a constructor and two other functions called update() and show(). For example:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">class Star {\n    constructor() {\n    \tthis.x = random(-width, width);\n        this.y = random(-height, height);\n        this.z = random(width);      \n        this.pz = this.z;\n    }\n    update() {\n        this.z = this.z - speed;\n        if (this.z &lt; 1) {\n      \t    this.z = width;\n            this.x = random(-width, width);\n            this.y = random(-height, height);\n            this.pz = this.z;\n        }\n    }\n    show() {\n        fill(255);\n        noStroke();\n      \n        var sx = map(this.x\/this.z, 0, 1, 0, width);\n        var sy = map(this.y\/this.z, 0, 1, 0, height);\n        var r = map(this.z, 0, width, 12, 0);\n        ellipse(sx, sy, r, r);    \n      \n        var px = map(this.x\/this.pz, 0, 1, 0, width);\n        var py = map(this.y\/this.pz, 0, 1, 0, height);\n        this.pz = this.z;\n      \n        stroke(255);\n        line(px, py, sx, sy);\n    }\n}<\/pre>\n<p>It also uses an array called stars where 1600 stars of random x, y, and z postions are created.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">var stars = [];<\/pre>\n<p>Values for the array are generated like so (inside the setup() function):<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">\/\/ Create an array of 1600 star objects\nfor (var i = 0; i &lt; 1600; i++) {\n    stars[i] = new Star();\n\n    \/\/ This also works to populate the array\n    \/\/ star = new Star();\n    \/\/ append(stars, star);\n}<\/pre>\n<p>Stars are drawn on the screen inside the draw() function by iterating over the stars array:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">for (var i = 0; i &lt; stars.length; i++) {\n    stars[i].update();\n    stars[i].show();\n}<\/pre>\n<p>Another interesting feature of this code is use of the p5.js\u00a0<code class=\"EnlighterJSRAW\" data-enlighter-language=\"no-highlight\">map()<\/code> method, which remaps a number from one range to another. This is useful for mapping a range of numbers to the boundaries of a screen for example.<\/p>\n<p>For more information about the <code class=\"EnlighterJSRAW\" data-enlighter-language=\"no-highlight\">map()<\/code> method, see:<br \/>\n<a href=\"https:\/\/p5js.org\/reference\/#\/p5\/map\">https:\/\/p5js.org\/reference\/#\/p5\/map<\/a><\/p>\n<p>Here is the complete p5.js code:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">var stars = [];\nvar speed;\n\nclass Star {\n    constructor() {\n    \tthis.x = random(-width, width);\n        this.y = random(-height, height);\n        this.z = random(width);      \n        this.pz = this.z;\n\n    }\n    update() {\n      this.z = this.z - speed;\n      if (this.z &lt; 1) {\n      \tthis.z = width;\n        this.x = random(-width, width);\n        this.y = random(-height, height);\n        this.pz = this.z;\n      }\n    }\n  \n    show() {\n      fill(255);\n      noStroke();\n      \n      var sx = map(this.x\/this.z, 0, 1, 0, width);\n      var sy = map(this.y\/this.z, 0, 1, 0, height);\n      var r = map(this.z, 0, width, 12, 0);\n      ellipse(sx, sy, r, r);    \n      \n      var px = map(this.x\/this.pz, 0, 1, 0, width);\n      var py = map(this.y\/this.pz, 0, 1, 0, height);\n      this.pz = this.z;\n      \n      stroke(255);\n      line(px, py, sx, sy);\n    }\n}\n\nfunction setup() {\n    createCanvas(600, 600);\n    star = new Star();\n  \n    \/\/ Create an array of 1600 star objects\n    for (var i = 0; i &lt; 1600; i++) {\n      \tstars[i] = new Star();\n      \n        \/\/ This also works to populate the array\n      \t\/\/ star = new Star();\n  \t\/\/ append(stars, star);\n    }\n}\n\nfunction draw() {\n    speed = map(mouseX, 0, width, 5, 30);\n    background(0);\n    translate(width\/2, height\/2);\n  \n    for (var i = 0; i &lt; stars.length; i++) {\n    \tstars[i].update();\n      \tstars[i].show();\n    }\n}<\/pre>\n<p>The code in this article is based on The Coding Train &#8211; &#8220;<a href=\"https:\/\/www.youtube.com\/watch?v=17WoOqgXsRM\">Coding Challenge #1: Starfield in Processing<\/a>&#8220;.\u00a0 In this video, the sketch was coded by Daniel Shiffman in Processing. As I followed along, I translated it into p5.js. Then I double checked my code against the <a href=\"https:\/\/github.com\/CodingTrain\/Rainbow-Code\/tree\/master\/CodingChallenges\/CC_01_StarField_p5.js\">p5.js code<\/a> that was posted on github. My code does have some small differences.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In this article, I will show how to build a starfield in p5.js. The starfield is presented as if you are flying through a field of stars, where the closer stars are bigger and there is an appearance of light streaking as your speed increases. This sketch is interactive in that moving the mouse to &hellip; <a href=\"https:\/\/bluegalaxy.info\/codewalk\/2018\/01\/04\/p5-js-build-starfield\/\" class=\"more-link\">Continue reading <span class=\"screen-reader-text\">p5.js: How to build a starfield<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[47,35],"tags":[45,48],"class_list":["post-1274","post","type-post","status-publish","format-standard","hentry","category-p5-js","category-processing-language","tag-javascript","tag-p5-js"],"_links":{"self":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts\/1274","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/comments?post=1274"}],"version-history":[{"count":7,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts\/1274\/revisions"}],"predecessor-version":[{"id":3328,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts\/1274\/revisions\/3328"}],"wp:attachment":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/media?parent=1274"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/categories?post=1274"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/tags?post=1274"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}