From 0671004a382de781f91885fc5826851045eff941 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ga=C5=A1per=20Dobrovoljc?= <gasper.dobrovoljc1@gmail.com>
Date: Sun, 17 Nov 2024 19:09:01 +0100
Subject: [PATCH] Naloga 2: WIP Bezier curves

---
 .gitignore                          |   1 +
 .idea/codeStyles/Project.xml        |   2 +
 .idea/prettier.xml                  |   7 ++
 naloga_1/.prettierrc => .prettierrc |   3 +-
 naloga_2/index.html                 |  20 ++++++
 naloga_2/main.js                    | 103 ++++++++++++++++++++++++++++
 package.json                        |  14 ++++
 pnpm-lock.yaml                      |  32 +++++++++
 vaja_1/index.html                   |  13 ++++
 vaja_1/main.js                      |  90 ++++++++++++++++++++++++
 vaja_1/shader.wgsl                  |  17 +++++
 11 files changed, 301 insertions(+), 1 deletion(-)
 create mode 100644 .gitignore
 create mode 100644 .idea/prettier.xml
 rename naloga_1/.prettierrc => .prettierrc (53%)
 create mode 100644 naloga_2/index.html
 create mode 100644 naloga_2/main.js
 create mode 100644 package.json
 create mode 100644 pnpm-lock.yaml
 create mode 100644 vaja_1/index.html
 create mode 100644 vaja_1/main.js
 create mode 100644 vaja_1/shader.wgsl
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..40b878d
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1 @@
+node_modules/
\ No newline at end of file
diff --git a/.idea/codeStyles/Project.xml b/.idea/codeStyles/Project.xml
index ff175f5..66741e1 100644
--- a/.idea/codeStyles/Project.xml
+++ b/.idea/codeStyles/Project.xml
@@ -6,6 +6,7 @@
     <JSCodeStyleSettings version="0">
       <option name="FORCE_SEMICOLON_STYLE" value="true" />
       <option name="SPACE_BEFORE_FUNCTION_LEFT_PARENTH" value="false" />
+      <option name="USE_DOUBLE_QUOTES" value="false" />
       <option name="FORCE_QUOTE_STYlE" value="true" />
       <option name="ENFORCE_TRAILING_COMMA" value="WhenMultiline" />
       <option name="SPACES_WITHIN_OBJECT_LITERAL_BRACES" value="true" />
@@ -113,6 +114,7 @@
     <TypeScriptCodeStyleSettings version="0">
       <option name="FORCE_SEMICOLON_STYLE" value="true" />
       <option name="SPACE_BEFORE_FUNCTION_LEFT_PARENTH" value="false" />
+      <option name="USE_DOUBLE_QUOTES" value="false" />
       <option name="FORCE_QUOTE_STYlE" value="true" />
       <option name="ENFORCE_TRAILING_COMMA" value="WhenMultiline" />
       <option name="SPACES_WITHIN_OBJECT_LITERAL_BRACES" value="true" />
diff --git a/.idea/prettier.xml b/.idea/prettier.xml
new file mode 100644
index 0000000..0c83ac4
--- /dev/null
+++ b/.idea/prettier.xml
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="PrettierConfiguration">
+    <option name="myConfigurationMode" value="AUTOMATIC" />
+    <option name="myRunOnSave" value="true" />
+  </component>
+</project>
\ No newline at end of file
diff --git a/naloga_1/.prettierrc b/.prettierrc
similarity index 53%
rename from naloga_1/.prettierrc
rename to .prettierrc
index 2105c60..6130a7a 100644
--- a/naloga_1/.prettierrc
+++ b/.prettierrc
@@ -1,5 +1,6 @@
 {
   "semi": true,
   "trailingComma": "all",
-  "tabWidth": 4
+  "tabWidth": 4,
+  "singleQuote": true
 }
\ No newline at end of file
diff --git a/naloga_2/index.html b/naloga_2/index.html
new file mode 100644
index 0000000..8ffe68c
--- /dev/null
+++ b/naloga_2/index.html
@@ -0,0 +1,20 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Domača Naloga 2</title>
+
+    <script defer src="main.js" type="module"></script>
+</head>
+<style>
+    body {
+        margin: 0;
+        padding: 0;
+        overflow: hidden;
+    }
+</style>
+<body>
+<canvas></canvas>
+</body>
+</html>
\ No newline at end of file
diff --git a/naloga_2/main.js b/naloga_2/main.js
new file mode 100644
index 0000000..42474d8
--- /dev/null
+++ b/naloga_2/main.js
@@ -0,0 +1,103 @@
+const canvas = document.querySelector('canvas');
+const context = canvas.getContext('2d');
+
+/** @type {number[][]} */
+const points = [];
+
+/**
+ * @param {number} x
+ * @param {number} y
+ */
+function addPoint(x, y) {
+    if (points.length === 0) {
+        points.push([x, y]);
+        return;
+    }
+
+    if (points.length === 1) {
+        const h1x = lerp(0.25, points[0][0], x);
+        const h1y = lerp(0.25, points[0][1], y);
+        const h2x = lerp(0.75, points[0][0], x);
+        const h2y = lerp(0.75, points[0][1], y);
+
+        points.push([h1x, h1y], [h2x, h2y], [x, y]);
+        return;
+    }
+}
+
+/**
+ * @param {number} t
+ * @param {number} a
+ * @param {number} b
+ * @returns {number}
+ */
+function lerp(t, a, b) {
+    return (1 - t) * a + t * b;
+}
+
+/**
+ * interpolates the points
+ * @param {number} t
+ * @param {number[]} p array of points
+ */
+function curve(t, p) {
+    if (p.length === 1) return p[0];
+    return lerp(t, curve(t, p.slice(0, -1)), curve(t, p.slice(1)));
+}
+
+function drawCircles() {
+    for (const [x, y] of points) {
+        context.beginPath();
+        context.ellipse(x, y, 10, 10, 0, 0, Math.PI * 2);
+        context.stroke();
+    }
+}
+
+function drawLines() {
+    for (let i = 0; i < points.length - 3; i += 3) {
+        const p1 = points[i];
+        const p2 = points[i + 1];
+        const p3 = points[i + 2];
+        const p4 = points[i + 3];
+
+        context.beginPath();
+
+        context.moveTo(p1[0], p1[1]);
+        context.lineTo(p2[0], p2[1]);
+
+        context.moveTo(p3[0], p3[1]);
+        context.lineTo(p4[0], p4[1]);
+
+        context.moveTo(p1[0], p1[1]);
+        for (let t = 0; t <= 1; t += 0.01) {
+            const x = curve(t, [p1[0], p2[0], p3[0], p4[0]]);
+            const y = curve(t, [p1[1], p2[1], p3[1], p4[1]]);
+
+            context.lineTo(x, y);
+        }
+
+        context.stroke();
+    }
+}
+
+function draw() {
+    context.clearRect(0, 0, canvas.width, canvas.height);
+    if (points.length <= 0) return;
+
+    drawCircles();
+    drawLines();
+}
+
+function resizeCanvas() {
+    canvas.height = window.innerHeight;
+    canvas.width = window.innerWidth;
+    draw();
+}
+
+window.addEventListener('mousedown', (e) => {
+    addPoint(e.pageX, e.pageY);
+    draw();
+});
+
+window.addEventListener('resize', resizeCanvas);
+resizeCanvas();
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..bd721d2
--- /dev/null
+++ b/package.json
@@ -0,0 +1,14 @@
+{
+  "name": "rg",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {},
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "@webgpu/types": "^0.1.50",
+    "prettier": "^3.3.3"
+  }
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
new file mode 100644
index 0000000..d829a0e
--- /dev/null
+++ b/pnpm-lock.yaml
@@ -0,0 +1,32 @@
+lockfileVersion: '9.0'
+
+settings:
+  autoInstallPeers: true
+  excludeLinksFromLockfile: false
+
+importers:
+
+  .:
+    devDependencies:
+      '@webgpu/types':
+        specifier: ^0.1.50
+        version: 0.1.50
+      prettier:
+        specifier: ^3.3.3
+        version: 3.3.3
+
+packages:
+
+  '@webgpu/types@0.1.50':
+    resolution: {integrity: sha512-GjG3CQV7SyWk/lEXqFPuKchRPHIBbD317Gj8NUqqB+UOnQlOYtjGLCTRIWzO9Ta698LVzlBCSE9XKqBSWpIDmg==}
+
+  prettier@3.3.3:
+    resolution: {integrity: sha512-i2tDNA0O5IrMO757lfrdQZCc2jPNDVntV0m/+4whiDfWaTKfMNgR7Qz0NAeGz/nRqF4m5/6CLzbP4/liHt12Ew==}
+    engines: {node: '>=14'}
+    hasBin: true
+
+snapshots:
+
+  '@webgpu/types@0.1.50': {}
+
+  prettier@3.3.3: {}
diff --git a/vaja_1/index.html b/vaja_1/index.html
new file mode 100644
index 0000000..907f110
--- /dev/null
+++ b/vaja_1/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Vaja 1</title>
+
+    <script type="module" src="main.js"></script>
+</head>
+<body>
+<canvas width="512" height="512"></canvas>
+</body>
+</html>
\ No newline at end of file
diff --git a/vaja_1/main.js b/vaja_1/main.js
new file mode 100644
index 0000000..f17cb26
--- /dev/null
+++ b/vaja_1/main.js
@@ -0,0 +1,90 @@
+// Initialize WebGPU
+const adapter = await navigator.gpu.requestAdapter();
+const device = await adapter.requestDevice();
+const canvas = document.querySelector('canvas');
+const context = canvas.getContext('webgpu');
+
+const format = 'rgba8unorm';
+context.configure({ device, format });
+
+// Create shaders
+const code = await fetch('shader.wgsl').then((res) => res.text());
+const module = device.createShaderModule({ code });
+
+// Create vertex buffer layouts
+/** @type {GPUVertexBufferLayout} */
+const vertexBufferLayout = {
+    arrayStride: 32,
+    attributes: [
+        {
+            offset: 0,
+            format: 'float32x4',
+            shaderLocation: 0,
+        },
+        {
+            offset: 16,
+            format: 'float32x4',
+            shaderLocation: 1,
+        },
+    ],
+};
+
+// Create render pipeline
+const pipeline = device.createRenderPipeline({
+    vertex: {
+        module,
+        buffers: [vertexBufferLayout],
+    },
+    fragment: {
+        module,
+        targets: [{ format }],
+    },
+    layout: 'auto',
+});
+
+// Create vertex buffer
+const vertices = new Float32Array([
+    0, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 0, 1, 1, 1,
+    1, 0, 1, 1, 1, 0, 1, 1, 0, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 0, 1, 1,
+]);
+
+const vertexBuffer = device.createBuffer({
+    size: vertices.byteLength,
+    usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST,
+});
+
+device.queue.writeBuffer(vertexBuffer, 0, vertices);
+
+const indices = new Uint32Array([0, 1, 2, 1, 2, 3]);
+
+const indexBuffer = device.createBuffer({
+    size: indices.byteLength,
+    usage: GPUBufferUsage.INDEX | GPUBufferUsage.COPY_DST,
+});
+
+device.queue.writeBuffer(indexBuffer, 0, indices);
+
+// Create command encoder
+const commandEncoder = device.createCommandEncoder();
+
+// Encode render pass
+const renderPass = commandEncoder.beginRenderPass({
+    colorAttachments: [
+        {
+            view: context.getCurrentTexture().createView(),
+            loadOp: 'clear',
+            clearValue: [1, 1, 1, 1],
+            storeOp: 'store',
+        },
+    ],
+});
+renderPass.setPipeline(pipeline);
+renderPass.setVertexBuffer(0, vertexBuffer);
+renderPass.setIndexBuffer(indexBuffer, 'uint32');
+renderPass.drawIndexed(indices.length);
+renderPass.end();
+
+const commandBuffer = commandEncoder.finish();
+
+// Send commands to GPU
+device.queue.submit([commandBuffer]);
diff --git a/vaja_1/shader.wgsl b/vaja_1/shader.wgsl
new file mode 100644
index 0000000..cd3bdaa
--- /dev/null
+++ b/vaja_1/shader.wgsl
@@ -0,0 +1,17 @@
+struct VertexOutput {
+    @builtin(position) position: vec4f,
+    @location(0) color: vec4f,
+}
+
+@vertex
+fn vertex(@location(0) position: vec4f, @location(1) color: vec4f) -> VertexOutput {
+    var output: VertexOutput;
+    output.position = position;
+    output.color = color;
+    return output;
+}
+
+@fragment
+fn fragment(@location(0) color: vec4f) -> @location(0) vec4f {
+    return color;
+}
