Skip to content

Commit a2a5ebd

Browse files
crowz-fxcrowz-fx
committed
added in working rubiks cube, added FPS counters to all sketches
1 parent 1b6f50e commit a2a5ebd

8 files changed

Lines changed: 127 additions & 4 deletions

File tree

‎README.md‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,16 @@ This is a container for all of the processing and p5.js sketches that I create,
44

55
My CV-like wesbite and portfolio can be [found here][2] and to view this in github pages view [click here][6]
66

7+
## Running/Setup
8+
9+
To run these locally, to continue dev etc.
10+
711
## Sketches
812

913
### Table of Contents
1014

1115
- [Fractal Trees](#id-fractal-trees)
16+
- [Rubiks Cube](#id-rubiks-cube)
1217
- [Starfield Paralax](#id-starfield-paralax)
1318
<hr/>
1419

@@ -30,7 +35,7 @@ This is a "tree data structure that keeps data sorted and allows searches and se
3035

3136
### Rubik's Cube
3237

33-
...
38+
A WebGL rendered 3D rubik's cube you can rotate in all axises. `CLICK` and drag to rotate the cube
3439

3540
[View Sketch][7]
3641

‎fractal-trees/index.html‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,10 @@
99
data-collect-dnt="true"
1010
async
1111
src="https://scripts.simpleanalyticscdn.com/latest.js"
12+
data-hostname="crowz-fx.github.io"
1213
></script>
1314
<meta name="author" content="Lui Crowie" />
14-
<meta name="keywords" content="fractal trees tree data structure " />
15+
<meta name="keywords" content="fractal trees tree data structure" />
1516
<meta
1617
name="description"
1718
content="A recursive fractal tree drawn in processing."
@@ -20,6 +21,7 @@
2021
<link rel="stylesheet" type="text/css" href="../global_stylesheet.css" />
2122
</head>
2223
<body>
24+
<div class="overlay-text" id="text-overlay">Hi :)</div>
2325
<script src="sketch.js"></script>
2426
</body>
2527
</html>

‎fractal-trees/sketch.js‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,14 @@ function setup() {
1212
//cnv.style('display', 'block');
1313
}
1414

15+
function windowResized() {
16+
resizeCanvas(windowWidth, windowHeight);
17+
}
18+
1519
function draw() {
20+
const overlayText = document.getElementById("text-overlay");
21+
overlayText.textContent = `FPS: ${Number(frameRate()).toFixed(4)}`;
22+
1623
angle = TWO_PI * 0.93;
1724
stroke(255);
1825
translate(windowWidth / 2, windowHeight);

‎global_stylesheet.css‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,3 +32,18 @@ body {
3232
/* This centers our sketch vertically. */
3333
align-items: center;
3434
}
35+
36+
canvas {
37+
display: block;
38+
}
39+
40+
.overlay-text {
41+
position: absolute;
42+
top: 10px;
43+
left: 10px;
44+
color: white;
45+
font-size: 16px;
46+
background: rgba(0, 0, 0, 0.5);
47+
padding: 5px;
48+
border-radius: 4px;
49+
}

‎rubiks-cube/index.html‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,13 +9,20 @@
99
data-collect-dnt="true"
1010
async
1111
src="https://scripts.simpleanalyticscdn.com/latest.js"
12+
data-hostname="crowz-fx.github.io"
1213
></script>
1314
<meta name="author" content="Lui Crowie" />
14-
<meta name="keywords" content="" />
15-
<meta name="description" content=" />
15+
<meta name="keywords" content="webgl rubiks cube p5js" />
16+
<meta
17+
name="description"
18+
content="A WebGL rendered 3D rubiks cube you can rotate in all axises."
19+
/>
20+
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.11.2/p5.min.js"></script>
21+
<script src="https://cdn.jsdelivr.net/gh/freshfork/p5.EasyCam/p5.easycam.min.js"></script>
1622
<link rel="stylesheet" type="text/css" href="../global_stylesheet.css" />
1723
</head>
1824
<body>
25+
<div class="overlay-text" id="text-overlay">Hi :)</div>
1926
<script src="sketch.js"></script>
2027
</body>
2128
</html>

‎rubiks-cube/sketch.js‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
const cubeSize = 50; // Size of each small cube
2+
3+
function setup() {
4+
createCanvas(windowWidth, windowHeight, WEBGL);
5+
textSize(40);
6+
frameRate(60);
7+
8+
createEasyCam(
9+
{
10+
distance: 400,
11+
// rotation: [0.2, -1, 0, -0.25],
12+
rotation: [0.9, -0.185, -0.365, 0.068],
13+
},
14+
500
15+
);
16+
17+
// Suppress right-click context menu
18+
document.oncontextmenu = function () {
19+
return false;
20+
};
21+
}
22+
23+
function windowResized() {
24+
resizeCanvas(windowWidth, windowHeight);
25+
}
26+
27+
function draw() {
28+
background(21);
29+
lights();
30+
31+
const overlayText = document.getElementById("text-overlay");
32+
overlayText.textContent = `FPS: ${Number(frameRate()).toFixed(4)}`;
33+
34+
for (let x = -1; x <= 1; x++) {
35+
for (let y = -1; y <= 1; y++) {
36+
for (let z = -1; z <= 1; z++) {
37+
push();
38+
translate(x * cubeSize, y * cubeSize, z * cubeSize);
39+
draw3DCube(x, y, z);
40+
pop();
41+
}
42+
}
43+
}
44+
}
45+
46+
function draw3DCube(x, y, z) {
47+
noStroke(); // Disable edges for the planes
48+
drawFace(0, 0, cubeSize / 2, [255, 0, 0], 0, 0); // Front face (red)
49+
drawFace(0, 0, -cubeSize / 2, [255, 165, 0], 0, PI); // Back face (orange)
50+
drawFace(cubeSize / 2, 0, 0, [255, 255, 0], HALF_PI, 0); // Right face (yellow)
51+
drawFace(-cubeSize / 2, 0, 0, [255, 255, 255], -HALF_PI, 0); // Left face (white)
52+
drawFace(0, -cubeSize / 2, 0, [0, 0, 255], 0, -HALF_PI); // Top face (blue)
53+
drawFace(0, cubeSize / 2, 0, [0, 255, 0], 0, HALF_PI); // Bottom face (green)
54+
55+
drawCubeOutline(); // Draw the black outline for the entire cube
56+
}
57+
58+
function drawFace(tx, ty, tz, faceColor, rotY, rotX) {
59+
push();
60+
translate(tx, ty, tz);
61+
rotateY(rotY);
62+
rotateX(rotX);
63+
fill(faceColor);
64+
beginShape();
65+
vertex(-cubeSize / 2, -cubeSize / 2, 0);
66+
vertex(cubeSize / 2, -cubeSize / 2, 0);
67+
vertex(cubeSize / 2, cubeSize / 2, 0);
68+
vertex(-cubeSize / 2, cubeSize / 2, 0);
69+
endShape(CLOSE);
70+
pop();
71+
}
72+
73+
function drawCubeOutline() {
74+
stroke(0); // Black outline
75+
strokeWeight(2);
76+
noFill();
77+
box(cubeSize); // Use `box()` to draw the outline of the cube
78+
}

‎starfield-paralax/index.html‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99
data-collect-dnt="true"
1010
async
1111
src="https://scripts.simpleanalyticscdn.com/latest.js"
12+
data-hostname="crowz-fx.github.io"
1213
></script>
1314
<meta name="author" content="Lui Crowie" />
1415
<meta
@@ -23,6 +24,7 @@
2324
<link rel="stylesheet" type="text/css" href="../global_stylesheet.css" />
2425
</head>
2526
<body>
27+
<div class="overlay-text" id="text-overlay">Hi :)</div>
2628
<script src="sketch.js"></script>
2729
</body>
2830
</html>

‎starfield-paralax/sketch.js‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -74,10 +74,17 @@ function touchEnded() {
7474
return false;
7575
}
7676

77+
function windowResized() {
78+
resizeCanvas(windowWidth, windowHeight);
79+
}
80+
7781
function draw() {
7882
background(backgroundColour);
7983
translate(width / 2, height / 2);
8084

85+
const overlayText = document.getElementById("text-overlay");
86+
overlayText.textContent = `FPS: ${Number(frameRate()).toFixed(4)}`;
87+
8188
for (var i = 0; i < stars.length; i++) {
8289
stars[i].update();
8390
stars[i].show();

0 commit comments

Comments
 (0)