add versions

stefanvoegelisrf · Dec 10, 2023 · 4c668d8 · 4c668d8
1 parent 8480090
commit 4c668d8
Show file tree

Hide file tree

Showing 6 changed files with 210 additions and 14 deletions.
diff --git a/semesterproject/noisealgorithms/snowflakes/index.html b/semesterproject/noisealgorithms/snowflakes/index.html
@@ -2,6 +2,10 @@
 
 <head>
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/p5.js"></script>
+    <!-- <script src="sketch versions/v1.js"></script> -->
+    <!-- <script src="sketch versions/v2.js"></script> -->
+    <!-- <script src="sketch versions/v3.js"></script> -->
+    <!-- <script src="sketch versions/v4.js"></script> -->
     <script src="sketch.js"></script>
     <link rel="stylesheet" type="text/css" href="style.css">
     <meta charset="utf-8" />

diff --git a/semesterproject/noisealgorithms/snowflakes/sketch versions/v1.js b/semesterproject/noisealgorithms/snowflakes/sketch versions/v1.js
@@ -0,0 +1,33 @@
+/** Setup function is called by p5 once */
+function setup() {
+    // Create a canvas that fills the browser window
+    createCanvas(windowWidth, windowHeight);
+    // Set black as the background color
+    background(0);
+    // Move the origin to the center of the canvas
+    translate(width / 2, height / 2);
+    // Set the stroke color to white
+    stroke(255);
+    // Set the stroke weight to 2 pixels
+    strokeWeight(2);
+
+    drawSnowflakeArm();
+}
+
+/** Draws a single snowflake arm */
+function drawSnowflakeArm() {
+    // Divide the arm into 10 sections
+    const sections = 1;
+    // Set the armlength to 100 pixels
+    const armLength = 100;
+
+    beginShape();
+    for (let sectionIndex = 0; sectionIndex <= sections; sectionIndex++) {
+        // Calculate the x and y coordinates of the current arm section
+        let x = armLength * sectionIndex;
+        let y = armLength * sectionIndex;
+        // Draw a vertex at the x and y coordinates
+        vertex(x, y);
+    }
+    endShape();
+}
diff --git a/semesterproject/noisealgorithms/snowflakes/sketch versions/v2.js b/semesterproject/noisealgorithms/snowflakes/sketch versions/v2.js
@@ -0,0 +1,41 @@
+/** Setup function is called by p5 once */
+function setup() {
+    // Create a canvas that fills the browser window
+    createCanvas(windowWidth, windowHeight);
+    // Set black as the background color
+    background(0);
+    // Move the origin to the center of the canvas
+    translate(width / 2, height / 2);
+    // Set the stroke color to white
+    stroke(255);
+    // Set the stroke weight to 2 pixels
+    strokeWeight(2);
+
+    // Draw six arms of the snowflake
+    const arms = 6;
+
+    for (let armIndex = 0; armIndex < arms; armIndex++) {
+        push();
+        rotate(TWO_PI / arms * armIndex);
+        drawSnowflakeArm();
+        pop();
+    }
+}
+
+/** Draws a single snowflake arm */
+function drawSnowflakeArm() {
+    // Divide the arm into 10 sections
+    const sections = 1;
+    // Set the armlength to 100 pixels
+    const armLength = 100;
+
+    beginShape();
+    for (let sectionIndex = 0; sectionIndex <= sections; sectionIndex++) {
+        // Calculate the x and y coordinates of the current arm section
+        let x = armLength * sectionIndex;
+        let y = armLength * sectionIndex;
+        // Draw a vertex at the x and y coordinates
+        vertex(x, y);
+    }
+    endShape();
+}
diff --git a/semesterproject/noisealgorithms/snowflakes/sketch versions/v3.js b/semesterproject/noisealgorithms/snowflakes/sketch versions/v3.js
@@ -0,0 +1,45 @@
+/** Setup function is called by p5 once */
+function setup() {
+    // Create a canvas that fills the browser window
+    createCanvas(windowWidth, windowHeight);
+    // Set black as the background color
+    background(0);
+    // Move the origin to the center of the canvas
+    translate(width / 2, height / 2);
+    // Set the stroke color to white
+    stroke(255);
+    // Set the stroke weight to 2 pixels
+    strokeWeight(2);
+
+    // Draw six arms of the snowflake
+    const arms = 6;
+
+    for (let armIndex = 0; armIndex < arms; armIndex++) {
+        push();
+        rotate(TWO_PI / arms * armIndex);
+        drawSnowflakeArm();
+        pop();
+    }
+}
+
+/** Draws a single snowflake arm */
+function drawSnowflakeArm() {
+    // Divide the arm into 10 sections
+    const sections = 10;
+    // Set the armlength to 100 pixels
+    const armLength = 100;
+
+    beginShape();
+    for (let sectionIndex = 0; sectionIndex <= sections; sectionIndex++) {
+        // Calculate the length of the current arm section
+        let armSectionLength = armLength / sections * sectionIndex;
+        // Calculate the angle of the current arm section
+        let angle = map(noise(sectionIndex * 0.2, frameCount * 0.01), 0, 1, -PI / 6, PI / 6);
+        // Calculate the x and y coordinates of the current arm section
+        let x = armSectionLength * cos(angle);
+        let y = armSectionLength * sin(angle);
+        // Draw a vertex at the x and y coordinates
+        vertex(x, y);
+    }
+    endShape();
+}
diff --git a/semesterproject/noisealgorithms/snowflakes/sketch versions/v4.js b/semesterproject/noisealgorithms/snowflakes/sketch versions/v4.js
@@ -0,0 +1,54 @@
+/** Setup function is called by p5 once */
+function setup() {
+    // Create a canvas that fills the browser window
+    createCanvas(windowWidth, windowHeight);
+    // Set black as the background color
+    background(0);
+    // Move the origin to the center of the canvas
+    translate(width / 2, height / 2);
+    // Set the stroke color to white
+    stroke(255);
+    // Set the stroke weight to 2 pixels
+    strokeWeight(2);
+
+    // Draw six arms of the snowflake
+    const arms = 6;
+
+    for (let armIndex = 0; armIndex < arms; armIndex++) {
+        // Draw the right part of an arm
+        push();
+        rotate(TWO_PI / arms * armIndex);
+        drawSnowflakeArm();
+        pop();
+
+        // Draw the left part of an arm
+        push();
+        rotate(TWO_PI / arms * armIndex + PI / arms);
+        // Flip the arm horizontally
+        scale(-1, 1);
+        drawSnowflakeArm();
+        pop();
+    }
+}
+
+/** Draws a single snowflake arm */
+function drawSnowflakeArm() {
+    // Divide the arm into 10 sections
+    const sections = 10;
+    // Set the armlength to 100 pixels
+    const armLength = 100;
+
+    beginShape();
+    for (let sectionIndex = 0; sectionIndex <= sections; sectionIndex++) {
+        // Calculate the length of the current arm section
+        let armSectionLength = armLength / sections * sectionIndex;
+        // Calculate the angle of the current arm section
+        let angle = map(noise(sectionIndex * 0.2, frameCount * 0.01), 0, 1, -PI / 6, PI / 6);
+        // Calculate the x and y coordinates of the current arm section
+        let x = armSectionLength * cos(angle);
+        let y = armSectionLength * sin(angle);
+        // Draw a vertex at the x and y coordinates
+        vertex(x, y);
+    }
+    endShape();
+}
diff --git a/semesterproject/noisealgorithms/snowflakes/sketch.js b/semesterproject/noisealgorithms/snowflakes/sketch.js
@@ -1,44 +1,63 @@
+/** Setup function is called by p5 once */
 function setup() {
-    let noiseSeedValue = 135;
+    // Default seed value is 135
+    let seedValue = 135;
+    // Seed value can be overwritten in the URL
     let params = getURLParams();
     if (params.seed) {
-        noiseSeedValue = params.seed;
+        seedValue = params.seed;
     }
-    noiseSeed(noiseSeedValue);
+    // Set the noise seed value to get the same snowflake every time
+    noiseSeed(seedValue);
+    // Create a canvas that fills the browser window
     createCanvas(windowWidth, windowHeight);
+    // Set black as the background color
     background(0);
 
+    // Move the origin to the center of the canvas
     translate(width / 2, height / 2);
+    // Set the stroke color to white
     stroke(255);
+    // Set the stroke weight to 2 pixels
     strokeWeight(2);
 
-    // Number of arms
+    // Draw six arms of the snowflake
     const arms = 6;
 
-    for (let i = 0; i < arms; i++) {
+    for (let armIndex = 0; armIndex < arms; armIndex++) {
+        // Draw the right part of an arm
         push();
-        rotate(TWO_PI / arms * i);
+        rotate(TWO_PI / arms * armIndex);
         drawSnowflakeArm();
         pop();
 
+        // Draw the left part of an arm
         push();
-        rotate(TWO_PI / arms * i + PI / arms);
+        rotate(TWO_PI / arms * armIndex + PI / arms);
+        // Flip the arm horizontally
         scale(-1, 1);
         drawSnowflakeArm();
         pop();
     }
 }
 
+/** Draws a single snowflake arm */
 function drawSnowflakeArm() {
-    const steps = 10;
-    const length = 100;
+    // Divide the arm into 10 sections
+    const sections = 10;
+    // Set the armlength to 100 pixels
+    const armLength = 100;
 
     beginShape();
-    for (let i = 0; i <= steps; i++) {
-        let l = length / steps * i;
-        let angle = map(noise(i * 0.2, frameCount * 0.01), 0, 1, -PI / 6, PI / 6);
-        let x = l * cos(angle);
-        let y = l * sin(angle);
+    for (let sectionIndex = 0; sectionIndex <= sections; sectionIndex++) {
+        // Calculate the length of the current arm section
+        let armSectionLength = armLength / sections * sectionIndex;
+        // Calculate the angle of the current arm section
+        let angle = map(noise(sectionIndex * 0.2, frameCount * 0.01), 0, 1, -PI / 6, PI / 6);
+        // Calculate the x and y coordinates of the current arm section
+        let x = armSectionLength * cos(angle);
+        let y = armSectionLength * sin(angle);
+        // Draw a vertex at the x and y coordinates
         vertex(x, y);
     }
     endShape();