v1
This commit is contained in:
parent
545971d964
commit
00f2179801
6 changed files with 138 additions and 0 deletions
48
index.html
Normal file
48
index.html
Normal file
|
@ -0,0 +1,48 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
|
||||
<title>Sketch</title>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="style.css" />
|
||||
|
||||
<script src="libraries/p5.min.js"></script>
|
||||
<script src="libraries/p5.sound.min.js"></script>
|
||||
<style>
|
||||
p {
|
||||
color: white
|
||||
}
|
||||
body {
|
||||
background-color: black;
|
||||
}
|
||||
#sketch {
|
||||
display: flex;
|
||||
height: 100vh;
|
||||
}
|
||||
#defaultCanvas0 {
|
||||
border: solid white 1px;
|
||||
width: auto;
|
||||
align-content: center;
|
||||
margin: auto auto;
|
||||
}
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
canvas {
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="sketch">
|
||||
</div>
|
||||
|
||||
<script src="sketch.js"></script>
|
||||
</body>
|
||||
</html>
|
10
jsconfig.json
Normal file
10
jsconfig.json
Normal file
|
@ -0,0 +1,10 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"target": "es6"
|
||||
},
|
||||
"include": [
|
||||
"*.js",
|
||||
"**/*.js",
|
||||
"/home/melody/.vscode-oss/extensions/samplavigne.p5-vscode-1.2.16/p5types/global.d.ts"
|
||||
]
|
||||
}
|
2
libraries/p5.min.js
vendored
Normal file
2
libraries/p5.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
3
libraries/p5.sound.min.js
vendored
Normal file
3
libraries/p5.sound.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
75
sketch.js
Normal file
75
sketch.js
Normal file
|
@ -0,0 +1,75 @@
|
|||
const sketch = function (p) {
|
||||
const gridSize = [200, 200]; // min ~31, smaller is faster
|
||||
const cellSize = 4; // Smaller is also faster
|
||||
|
||||
let agent = { x: cellSize * 30, y: cellSize * 30, angle: 0 };
|
||||
let cols, rows;
|
||||
let grid = [];
|
||||
let cActive, cInactive;
|
||||
|
||||
p.setup = function () {
|
||||
const sketch = p.createCanvas(
|
||||
gridSize[0] * cellSize,
|
||||
gridSize[1] * cellSize
|
||||
);
|
||||
sketch.parent("sketch");
|
||||
cols = p.width / cellSize;
|
||||
rows = p.height / cellSize;
|
||||
|
||||
for (let i = 0; i < cols; i++) {
|
||||
grid[i] = [];
|
||||
for (let j = 0; j < rows; j++) {
|
||||
grid[i][j] = 0;
|
||||
}
|
||||
}
|
||||
|
||||
cActive = p.color(255, 105, 180, 255);
|
||||
cInactive = p.color(0, 0, 0, 255);
|
||||
p.background(0);
|
||||
p.frameRate(1000);
|
||||
};
|
||||
|
||||
p.draw = function () {
|
||||
// console.log(p.frameRate());
|
||||
p.noStroke();
|
||||
|
||||
const col = agent.x / cellSize;
|
||||
const row = agent.y / cellSize;
|
||||
|
||||
if (grid[col][row] === 1) {
|
||||
agent.angle += 90;
|
||||
grid[col][row] = 0;
|
||||
p.fill(cInactive);
|
||||
} else {
|
||||
agent.angle -= 90;
|
||||
grid[col][row] = 1;
|
||||
p.fill(cActive);
|
||||
}
|
||||
|
||||
agent.angle = (agent.angle + 360) % 360;
|
||||
|
||||
p.rect(agent.x, agent.y, cellSize, cellSize);
|
||||
|
||||
switch (agent.angle) {
|
||||
case 0:
|
||||
agent.y -= cellSize;
|
||||
break;
|
||||
case 90:
|
||||
agent.x += cellSize;
|
||||
break;
|
||||
case 180:
|
||||
agent.y += cellSize;
|
||||
break;
|
||||
case 270:
|
||||
agent.x -= cellSize;
|
||||
break;
|
||||
}
|
||||
|
||||
if (agent.x < 0) agent.x = p.width - cellSize;
|
||||
if (agent.x >= p.width) agent.x = 0;
|
||||
if (agent.y < 0) agent.y = p.height - cellSize;
|
||||
if (agent.y >= p.height) agent.y = 0;
|
||||
};
|
||||
};
|
||||
|
||||
p5Sketch = new p5(sketch);
|
BIN
sketch.wasm
Normal file
BIN
sketch.wasm
Normal file
Binary file not shown.
Loading…
Add table
Reference in a new issue