Today I made a Sand game<\/p>\n\n\n\n
<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/p5.js\/1.9.0\/p5.js\"><\/script>\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/p5.js\/1.9.0\/addons\/p5.sound.min.js\"><\/script>\n <link rel=\"stylesheet\" type=\"text\/css\" href=\"style.css\">\n <meta charset=\"utf-8\" \/>\n\n <\/head>\n <body>\n <main>\n <\/main>\n <script src=\"sketch.js\"><\/script>\n <\/body>\n<\/html>\n<\/code><\/pre>\n\n\n\nThis is the index<\/strong><\/p>\n\n\n\nhtml, body {\n margin: 0;\n padding: 0;\n}\ncanvas {\n display: block;\n}\n<\/code><\/pre>\n\n\n\nThis is the styling<\/strong><\/p>\n\n\n\nfunction make2DArray(cols, rows) {\n let arr = new Array(cols);\n for (let i = 0; i < arr.length; i++) {\n arr[i] = new Array(rows);\n\n for (let j = 0; j < arr[i].length; j++) {\n arr[i][j] = 0;\n }\n }\n return arr;\n}\n\n\nlet grid;\n\nlet w = 5;\nlet cols, rows;\nlet hueValue = 200;\n\n\nfunction withinCols(i) {\n return i >= 0 && i <= cols - 1;\n}\n\n\nfunction withinRows(j) {\n return j >= 0 && j <= rows - 1;\n}\n\nfunction setup() {\n createCanvas(500, 300);\n colorMode(HSB, 360, 255, 255);\n cols = width \/ w;\n rows = height \/ w;\n grid = make2DArray(cols, rows);\n}\n<\/code><\/pre>\n\n\n\nThis makes the grid that allows for the sand to spawn<\/strong><\/p>\n\n\n\nfunction mouseDragged() {\n let mouseCol = floor(mouseX \/ w);\n let mouseRow = floor(mouseY \/ w);\n \n\n let matrix = 5;\n let extent = floor(matrix \/ 2);\n for (let i = -extent; i <= extent; i++) {\n for (let j = -extent; j <= extent; j++) {\n if (random(1) < 0.75) {\n let col = mouseCol + i;\n let row = mouseRow + j;\n if (withinCols(col) && withinRows(row)) {\n grid[col][row] = hueValue;\n }\n }\n }\n }\n\n hueValue += 1;\n if (hueValue > 360) {\n hueValue = 1;\n }\n}<\/code><\/pre>\n\n\n\nThis makes the sand itself<\/strong><\/p>\n\n\n\nfunction draw() {\n background(0);\n \n\n for (let i = 0; i < cols; i++) {\n for (let j = 0; j < rows; j++) {\n noStroke();\n if (grid[i][j] > 0) {\n fill(grid[i][j], 255, 255);\n let x = i * w;\n let y = j * w;\n square(x, y, w);\n }\n }\n }\n \n\n let nextGrid = make2DArray(cols, rows);\n \n\n for (let i = 0; i < cols; i++) {\n for (let j = 0; j < rows ; j++) {\n\n let state = grid[i][j];\n \n\n if (state > 0) {\n\n let below = grid[i][j + 1];\n \n\n let dir = 1;\n if (random(1) < 0.5) {\n dir *= -1;\n }\n \n\n let belowA = -1;\n let belowB = -1;\n if (withinCols(i + dir)) {\n belowA = grid[i + dir][j + 1];\n }\n if (withinCols(i - dir)) {\n belowB = grid[i - dir][j + 1];\n }\n \n \n\n if (below === 0) {\n nextGrid[i][j + 1] = state;\n } else if (belowA === 0) {\n nextGrid[i + dir][j + 1] = state;\n } else if (belowB === 0) {\n nextGrid[i - dir][j + 1] = state;\n \n } else {\n nextGrid[i][j] = state;\n }\n }\n }\n }\n grid = nextGrid;\n}\n<\/code><\/pre>\n\n\n\nThis is for the physics<\/strong><\/p>\n\n\n\n<\/p>\n","protected":false},"excerpt":{"rendered":"
Today I made a Sand game This is the index This is the styling This makes the grid that allows […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[1],"tags":[],"class_list":["post-137","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/theroyalscode.com\/students\/l_rankins\/wp-json\/wp\/v2\/posts\/137","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/theroyalscode.com\/students\/l_rankins\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/theroyalscode.com\/students\/l_rankins\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/theroyalscode.com\/students\/l_rankins\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/theroyalscode.com\/students\/l_rankins\/wp-json\/wp\/v2\/comments?post=137"}],"version-history":[{"count":2,"href":"https:\/\/theroyalscode.com\/students\/l_rankins\/wp-json\/wp\/v2\/posts\/137\/revisions"}],"predecessor-version":[{"id":140,"href":"https:\/\/theroyalscode.com\/students\/l_rankins\/wp-json\/wp\/v2\/posts\/137\/revisions\/140"}],"wp:attachment":[{"href":"https:\/\/theroyalscode.com\/students\/l_rankins\/wp-json\/wp\/v2\/media?parent=137"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/theroyalscode.com\/students\/l_rankins\/wp-json\/wp\/v2\/categories?post=137"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/theroyalscode.com\/students\/l_rankins\/wp-json\/wp\/v2\/tags?post=137"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}