Commit 42088634 authored by Malcolm Gin's avatar Malcolm Gin

End of Part 1: Grid of cells stored in a 1D array. Each cell conditionally...

End of Part 1: Grid of cells stored in a 1D array. Each cell conditionally draws all four walls based on internal array, this.walls, of boolean values, represented by index (0=top, 1=right, 2=bottom, 3=left).
parent a00e4e10
function Cell(i, j) {
//column
this.i = i;
//row
this.j = j
//top, right, bottom, left
this.walls = [true, true, true, true];
this.show = function(w_) {
//fill(51);
//stroke(255);
var x = this.i * w_;
var y = this.j * w_;
//rect(x, y, w_, w_);
stroke(255);
if (this.walls[0]) {
//Top Line
line(x+w_, y , x , y );
}
if (this.walls[1]) {
//Right Line
line(x+w_, y+w_, x+w_, y );
}
if (this.walls[2]) {
//Bottom Line
line(x , y+w_, x+w_, y+w_);
}
if (this.walls[3]) {
//Left Line
line(x , y , x , y+w_);
}
}
}
<!DOCTYPE html>
<html>
<head>
<!-- Changed p5.js URLs to use versioned libraries local to my web host for library version control. -->
<script src="http://www.malcolmgin.com/TheCodingTrain/libraries/p5.js-0.5.14/p5.min.js"></script>
<script src="http://www.malcolmgin.com/TheCodingTrain/libraries/p5.js-0.5.14/addons/p5.dom.min.js"></script>
<script src="http://www.malcolmgin.com/TheCodingTrain/libraries/p5.js-0.5.14/addons/p5.sound.min.js"></script>
<script src="http://www.malcolmgin.com/TheCodingTrain/libraries/matter.js-0.10.0/matter.min.js"></script>
<script src="sketch.js"></script>
<script src="cell.js"></script>
<style> body {padding: 0; margin: 0;} </style>
</head>
<body>
This may not be interactive at all.
</body>
</html>
// Malcolm Gin
// from Daniel Shiffman @ The Coding Train
// Depth-first search
// Recursive backgracker
// https://en.wikipedia.org/wiki/Maze_generation_algorithm#Depth-first_search
var rows, cols;
var w = 80;
// NOTE: 1D Array
var cells = [];
function setup() {
createCanvas(800, 800);
cols = floor(width / w);
rows = floor(height / w);
// To me, cols are x/i and rows are y/j.
for (let j = 0; j < rows; j++) {
for (let i = 0; i < cols; i++) {
var cell = new Cell(i, j);
cells.push(cell);
}
}
}
function draw() {
background(51);
for (let i = 0; i < cells.length; i++) {
cells[i].show(w);
}
}
......@@ -83,6 +83,12 @@
<li><a href="http://www.malcolmgin.com/TheCodingTrain/CodingChallenge/009SolarSystem3DPart2-Processing/SolarSystemGenerator/">Processing files</a>.</li>
</ul>
</li>
<li>010 Maze Generator:<br /> From the <a href="https://www.youtube.com/watch?v=HyK_Q5rrcr4">Maze Generator with p5.js - Part 1 challenge</a>.
<ul>
<li><a href="http://www.malcolmgin.com/TheCodingTrain/CodingChallenge/010MazeGeneratorPart1-Javascript">JavaScript/p5.js files</a>.</li>
<li><a href="http://www.malcolmgin.com/TheCodingTrain/CodingChallenge/010MazeGeneratorPart1-Javascript/maze.html">Interactive browser-usable JavaScript/p5.js version</a>.</li>
</ul>
</li>
</ul>
<li><a href="http://www.malcolmgin.com/TheCodingTrain/Lessons/">Lessons</a><br />I'll come up with some sort of nomenclature in subdirectories or filenames that corresponds in some way to The Coding Train's video lectures and exercises.
<ul>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment