{"id":1161,"date":"2017-12-21T22:34:45","date_gmt":"2017-12-22T03:34:45","guid":{"rendered":"http:\/\/bluegalaxy.info\/codewalk\/?p=1161"},"modified":"2021-01-17T20:56:33","modified_gmt":"2021-01-18T01:56:33","slug":"p5-js-how-to-rotate-3d-objects-on-the-x-y-and-z-axis","status":"publish","type":"post","link":"https:\/\/bluegalaxy.info\/codewalk\/2017\/12\/21\/p5-js-how-to-rotate-3d-objects-on-the-x-y-and-z-axis\/","title":{"rendered":"p5.js: How to rotate 3D objects on the X, Y, and Z axis"},"content":{"rendered":"<p>On the 2D plain of a browser window p5.js can represent 3D space using WEBGL. This is specified as the third argument to the createCanvas() function in the setup portion of the sketch:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">createCanvas(400, 300, WEBGL);\n<\/pre>\n<p>Here is some code that demonstrates how to rotate a 2D rectangle on the X axis, using <code class=\"EnlighterJSRAW\" data-enlighter-language=\"no-highlight\">rotateX()<\/code>, which takes in an angle of radians as an argument.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">let angle = 0;\n\nfunction setup() {\n  createCanvas(400, 300, WEBGL);\n}\n\nfunction draw() {\n  background(175);\n  rectMode(CENTER);\n  fill(0,0,255);\n  rotateX(angle);\n  rect(0, 0, 150, 150);\n  angle += 0.025;\n}<\/pre>\n\n<!-- iframe plugin v.5.2 wordpress.org\/plugins\/iframe\/ -->\n<iframe loading=\"lazy\" src=\"https:\/\/www.bluegalaxy.info\/processing\/p5\/rect_rotateX\" scrolling=\"no\" width=\"400\" height=\"300\" id=\"iframe_drop_shadow\" class=\"iframe-class\" frameborder=\"0\"><\/iframe>\n\n<p>We can also use <code class=\"EnlighterJSRAW\" data-enlighter-language=\"no-highlight\">rotateY()<\/code> to rotate it on the Y axis:<\/p>\n\n<!-- iframe plugin v.5.2 wordpress.org\/plugins\/iframe\/ -->\n<iframe loading=\"lazy\" src=\"https:\/\/www.bluegalaxy.info\/processing\/p5\/rect_rotateY\" scrolling=\"no\" width=\"400\" height=\"300\" id=\"iframe_drop_shadow\" class=\"iframe-class\" frameborder=\"0\"><\/iframe>\n\n<p>Or <code class=\"EnlighterJSRAW\" data-enlighter-language=\"no-highlight\">rotateZ()<\/code> to rotate on the Z axis:<\/p>\n\n<!-- iframe plugin v.5.2 wordpress.org\/plugins\/iframe\/ -->\n<iframe loading=\"lazy\" src=\"https:\/\/www.bluegalaxy.info\/processing\/p5\/rect_rotateZ\" scrolling=\"no\" width=\"400\" height=\"300\" id=\"iframe_drop_shadow\" class=\"iframe-class\" frameborder=\"0\"><\/iframe>\n\n<p>Or on all three axis at the same time:<\/p>\n\n<!-- iframe plugin v.5.2 wordpress.org\/plugins\/iframe\/ -->\n<iframe loading=\"lazy\" src=\"https:\/\/www.bluegalaxy.info\/processing\/p5\/rect_rotateXYZ\" scrolling=\"no\" width=\"400\" height=\"300\" id=\"iframe_drop_shadow\" class=\"iframe-class\" frameborder=\"0\"><\/iframe>\n\n<p>Here is some code for rotating a 3D cube on all three axis. In p5.js, a cube is created with <code class=\"EnlighterJSRAW\" data-enlighter-language=\"no-highlight\">box()<\/code>.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">let angle = 0;\n\nfunction setup() {\n  createCanvas(400, 300, WEBGL);\n}\n\nfunction draw() {\n  background(175);\n  rotateX(angle);\n  rotateY(angle);\n  rotateZ(angle * 0.75);\n\n  \/\/ box(w, h, d) \n  \/\/ if only one arg, then use the value for all three dimensions\n  box(175);\n  angle += 0.025;\n}<\/pre>\n\n<!-- iframe plugin v.5.2 wordpress.org\/plugins\/iframe\/ -->\n<iframe loading=\"lazy\" src=\"https:\/\/www.bluegalaxy.info\/processing\/p5\/box_rotateXYZ\" scrolling=\"no\" width=\"400\" height=\"300\" id=\"iframe_drop_shadow\" class=\"iframe-class\" frameborder=\"0\"><\/iframe>\n\n<p>For more information see:<br \/>\n<a href=\"https:\/\/p5js.org\/reference\/#\/p5\/box\">https:\/\/p5js.org\/reference\/#\/p5\/box<\/a><br \/>\n<a href=\"https:\/\/p5js.org\/reference\/#\/p5\/rotateX\">https:\/\/p5js.org\/reference\/#\/p5\/rotateX<\/a><br \/>\n<a href=\"https:\/\/p5js.org\/examples\/3d-geometries.html\">https:\/\/p5js.org\/examples\/3d-geometries.html<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>On the 2D plain of a browser window p5.js can represent 3D space using WEBGL. This is specified as the third argument to the createCanvas() function in the setup portion of the sketch: createCanvas(400, 300, WEBGL); Here is some code that demonstrates how to rotate a 2D rectangle on the X axis, using rotateX(), which &hellip; <a href=\"https:\/\/bluegalaxy.info\/codewalk\/2017\/12\/21\/p5-js-how-to-rotate-3d-objects-on-the-x-y-and-z-axis\/\" class=\"more-link\">Continue reading <span class=\"screen-reader-text\">p5.js: How to rotate 3D objects on the X, Y, and Z axis<\/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,85,84],"class_list":["post-1161","post","type-post","status-publish","format-standard","hentry","category-p5-js","category-processing-language","tag-javascript","tag-p5-js","tag-rotatex","tag-webgl"],"_links":{"self":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts\/1161","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=1161"}],"version-history":[{"count":13,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts\/1161\/revisions"}],"predecessor-version":[{"id":3469,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts\/1161\/revisions\/3469"}],"wp:attachment":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/media?parent=1161"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/categories?post=1161"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/tags?post=1161"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}