Skip to content

Commit

Permalink
feat: add more example to the page
Browse files Browse the repository at this point in the history
  • Loading branch information
Jaysmito101 committed Feb 1, 2025
1 parent 80b8fe8 commit e6aac3d
Show file tree
Hide file tree
Showing 14 changed files with 387 additions and 1 deletion.
1 change: 1 addition & 0 deletions builds/barnsley_fern/cglweb.js

Large diffs are not rendered by default.

Binary file added builds/barnsley_fern/cglweb.wasm
Binary file not shown.
94 changes: 94 additions & 0 deletions builds/barnsley_fern/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,94 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CGL-Web</title>
<style>
body {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
}
canvas {
border: 1px solid #000;
}
html,
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}

canvas {
width: 100vmin;
height: 100vmin;
}

.window {
position: fixed;
top: 10px;
left: 10px;
width: 120px;
background: #1e1e1e;
padding: 15px;
border-radius: 10px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
z-index: 9999;
text-align: center;
}
.window p {
font-size: 14px;
margin-bottom: 10px;
color: #bbb;
}
.options {
list-style: none;
padding: 0;
}
.options li {
background: #333;
padding: 10px;
margin: 5px 0;
border-radius: 6px;
text-align: center;
cursor: pointer;
transition: background 0.2s, transform 0.1s;
font-size: 14px;
}
.options li:hover {
background: #444;
transform: scale(1.05);
}
</style>
</head>
<body>
<canvas id="cglCanvas" width="800" height="600"></canvas>
<!-- <div class="window">
<p>Drag and drop any WAV file to play</p>
<p>Or, choose from one of the following:</p>
<ul class="options">
<li onclick="playSample(1)">1. Sample Wav 1</li>
<li onclick="playSample(2)">2. Sample Wav 2</li>
</ul>
</div> -->
<script>
var Module = {
onRuntimeInitialized: function () {
console.log("WASM Module Loaded");
},
canvas: document.getElementById("cglCanvas"),
};
</script>
<script src="./cglweb.js"></script>
</body>
</html>
Binary file added builds/barnsley_fern/thumb.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions builds/basic_node_editor/cglweb.js

Large diffs are not rendered by default.

Binary file added builds/basic_node_editor/cglweb.wasm
Binary file not shown.
94 changes: 94 additions & 0 deletions builds/basic_node_editor/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,94 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CGL-Web</title>
<style>
body {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
}
canvas {
border: 1px solid #000;
}
html,
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}

canvas {
width: 100vmin;
height: 100vmin;
}

.window {
position: fixed;
top: 10px;
left: 10px;
width: 200px;
background: #1e1e1e;
padding: 15px;
border-radius: 10px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
z-index: 9999;
text-align: center;
}
.window p {
font-size: 14px;
margin-bottom: 10px;
color: #bbb;
}
.options {
list-style: none;
padding: 0;
}
.options li {
background: #333;
padding: 10px;
margin: 5px 0;
border-radius: 6px;
text-align: center;
cursor: pointer;
transition: background 0.2s, transform 0.1s;
font-size: 14px;
}
.options li:hover {
background: #444;
transform: scale(1.05);
}
</style>
</head>
<body>
<canvas id="cglCanvas" width="800" height="600"></canvas>
<div class="window">
<p>Press A to add a Node</p>
<p>Click to select and drag to move</p>
<p>Shift to multi select</p>
<p>Delete to delete</p>
<p>You can drag and connect points</p>
<p>Drag out of a connrected point to disconnect</p>
</div>
<script>
var Module = {
onRuntimeInitialized: function () {
console.log("WASM Module Loaded");
},
canvas: document.getElementById("cglCanvas"),
};
</script>
<script src="./cglweb.js"></script>
</body>
</html>
Binary file added builds/basic_node_editor/thumb.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions builds/basic_plotting/cglweb.js

Large diffs are not rendered by default.

Binary file added builds/basic_plotting/cglweb.wasm
Binary file not shown.
92 changes: 92 additions & 0 deletions builds/basic_plotting/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,92 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CGL-Web</title>
<style>
body {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
}
canvas {
border: 1px solid #000;
}
html,
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}

canvas {
width: 100vmin;
height: 100vmin;
}

.window {
position: fixed;
top: 10px;
left: 10px;
width: 220px;
background: #1e1e1e;
padding: 15px;
border-radius: 10px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
z-index: 9999;
text-align: center;
}
.window p {
font-size: 14px;
margin-bottom: 10px;
color: #bbb;
}
.options {
list-style: none;
padding: 0;
}
.options li {
background: #333;
padding: 10px;
margin: 5px 0;
border-radius: 6px;
text-align: center;
cursor: pointer;
transition: background 0.2s, transform 0.1s;
font-size: 14px;
}
.options li:hover {
background: #444;
transform: scale(1.05);
}
</style>
</head>
<body>
<canvas id="cglCanvas" width="800" height="600"></canvas>
<div class="window">
<p>Press 1 for Curve Plots</p>
<p>Press 2 for Scatter Plot</p>
<p>Press 3 for Pie Chart</p>
<p>Press 3 for Bar Graphs</p>
</div>
<script>
var Module = {
onRuntimeInitialized: function () {
console.log("WASM Module Loaded");
},
canvas: document.getElementById("cglCanvas"),
};
</script>
<script src="./cglweb.js"></script>
</body>
</html>
Binary file added builds/basic_plotting/thumb.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
98 changes: 97 additions & 1 deletion db.json
Original file line number Diff line number Diff line change
Expand Up @@ -47,5 +47,101 @@
"author": "Jaysmito101",
"difficulty": 3,
"youtube": "https://www.youtube.com/shorts/QNfG7SoRcog"
}
},
{
"name": "3D Pipes",
"path": "builds/3d_pipes",
"source_code": "https://github.com/Jaysmito101/cgl/blob/main/examples/c/3d_pipes.c",
"tags": ["3d", "pipes", "oldschool", "windows", "screensaver", "creative"],
"views": 121,
"description": "The 3D pipes screensaver from old windows versions.",
"image": "builds/3d_pipes/thumb.png",
"published_date": "2024-02-01",
"author": "s-mackeo",
"difficulty": 4
},
{
"name": "3D Widgets",
"path": "builds/3d_widgets",
"source_code": "https://github.com/Jaysmito101/cgl/blob/main/examples/c/3d_widgets.c",
"tags": ["3d", "widgets", "simple", "creative", "tutorial"],
"views": 121,
"description": "A simple example of how to render 3D meshes using CGL widgets API.",
"image": "builds/3d_widgets/thumb.png",
"published_date": "2024-02-01",
"author": "Jaysmito101",
"difficulty": 1
},
{
"name": "Advanced Widgets",
"path": "builds/advanced_widgets",
"source_code": "https://github.com/Jaysmito101/cgl/blob/main/examples/c/advanced_widgets.c",
"tags": ["cgl", "advanced", "widgets", "creative", "tutorial"],
"views": 121,
"description": "An example of some advanced usage of the CGL widgets API.",
"image": "builds/advanced_widgets/thumb.png",
"published_date": "2024-02-01",
"author": "Jaysmito101",
"difficulty": 2
},
{
"name": "Approximating Pi",
"path": "builds/approximating_pi",
"source_code": "https://github.com/Jaysmito101/cgl/blob/main/examples/c/approximating_pi.c",
"tags": ["cgl", "math", "monte carlo", "pi", "creative", "tutorial"],
"views": 121,
"description": "A creative coding and interesting mathematical challenge to approximate pi using monte carlo method.",
"image": "builds/approximating_pi/thumb.png",
"published_date": "2024-02-01",
"author": "Jaysmito101",
"difficulty": 2
},
{
"name": "Audio Visualizer",
"path": "builds/audio_visualizer",
"source_code": "https://github.com/Jaysmito101/cgl/blob/main/examples/c/audio_visualizer.c",
"tags": ["cgl", "audio", "visualizer", "creative", "tutorial"],
"views": 121,
"description": "An creative application that visualized a audio file using brilliant looking visuals.",
"image": "builds/audio_visualizer/thumb.png",
"published_date": "2024-02-01",
"author": "Jaysmito101",
"difficulty": 3
},
{
"name": "Barnsley Fern",
"path": "builds/barnsley_fern",
"source_code": "https://github.com/Jaysmito101/cgl/blob/main/examples/c/barnsley_fern.c",
"tags": ["cgl", "math", "fractal", "fern", "creative", "tutorial"],
"views": 121,
"description": "An example of how to render the barnsley fern fractal using CGL.",
"image": "builds/barnsley_fern/thumb.png",
"published_date": "2024-02-01",
"author": "Jaysmito101",
"difficulty": 2
},
{
"name": "Basic Node Editor",
"path": "builds/basic_node_editor",
"source_code": "https://github.com/Jaysmito101/cgl/blob/main/examples/c/basic_node_editor.c",
"tags": ["cgl", "node_editor", "simple", "creative", "tutorial"],
"views": 121,
"description": "A simple example of how to create a basic node editor using CGL's node editor API.",
"image": "builds/basic_node_editor/thumb.png",
"published_date": "2024-02-01",
"author": "Jaysmito101",
"difficulty": 5
},
{
"name": "Basic Plotting",
"path": "builds/basic_plotting",
"source_code": "https://github.com/Jaysmito101/cgl/blob/main/examples/c/basic_plotting.c",
"tags": ["cgl", "math", "plotting", "simple", "creative", "tutorial"],
"views": 121,
"description": "A simple example of how to use CGL's plotting API to plot graphs, curves, chats, scatter plots.",
"image": "builds/basic_plotting/thumb.png",
"published_date": "2024-02-01",
"author": "Jaysmito101",
"difficulty": 2
}
]
Loading

0 comments on commit e6aac3d

Please sign in to comment.