Merge pull request #305 from wedesoft/volumetric-clouds-5

Volumetric clouds article release
* remove draft status
* list dependencies
* update qmd file

Author: wedesoft

site/volumetric_clouds/main.qmd

@@ -12,7 +12,7 @@ author:
   image: https://avatars.githubusercontent.com/u/28663?v=4
   links:
   - {icon: github, href: 'https://github.com/wedesoft'}
-draft: true
+draft: false
 image: clouds.jpg
 
 ---
@@ -30,6 +30,42 @@ For a introductory video see [Sebastian Lague's video "Coding Adventure: Clouds]
 This article gets you started with computing and rendering volumetric clouds.
 
 
+## Dependencies
+
+To download the required libraries, we use a `deps.edn` file with the following content:
+
+```Clojure
+{:deps
+ {
+  org.clojure/clojure {:mvn/version "1.12.3"}
+  org.scicloj/noj     {:mvn/version "2-beta18"}
+  midje/midje         {:mvn/version "1.10.10"}
+  generateme/fastmath {:mvn/version "3.0.0-alpha4"}
+  comb/comb           {:mvn/version "1.0.0"}
+  }
+```
+
+We are going to import the following methods and namespaces:
+```Clojure
+(require '[clojure.math :refer (PI sqrt cos sin tan to-radians pow floor)]
+         '[midje.sweet :refer (fact facts tabular => roughly)]
+         '[fastmath.vector :refer (vec2 vec3 add mult sub div mag dot normalize)]
+         '[fastmath.matrix :refer (mat->float-array mulm
+                                   rotation-matrix-3d-x rotation-matrix-3d-y)]
+         '[tech.v3.datatype :as dtype]
+         '[tech.v3.tensor :as tensor]
+         '[tech.v3.datatype.functional :as dfn]
+         '[tablecloth.api :as tc]
+         '[scicloj.tableplot.v1.plotly :as plotly]
+         '[tech.v3.libs.buffered-image :as bufimg]
+         '[comb.template :as template])
+(import '[org.lwjgl.opengl GL11]
+        '[org.lwjgl BufferUtils]
+        '[org.lwjgl.glfw GLFW]
+        '[org.lwjgl.opengl GL GL11 GL12 GL13 GL15 GL20 GL30 GL32 GL42])
+```
+
+
 ## Worley noise
 
 [Worley noise](https://en.wikipedia.org/wiki/Worley_noise) is a type of structured noise which is defined for each pixel using the distance to the nearest seed point.
@@ -210,7 +246,7 @@ Here is a scatter plot showing one random point placed in each cell.
 
 
 ```{=html}
-<div style="height:auto;width:100%;"><script>Plotly.newPlot(document.currentScript.parentElement, [{"y":[2.091043172478159,13.487000356857614,28.378191315659517,26.45132308431047,14.930576069808424,30.60470206118209,30.056745413587898,19.839573429207405,46.90940623979559,48.64573841962488,63.9058168426489,50.941354160378765,42.300673606230696,59.2073013934458,35.00231762166883,48.21886850707247,68.37932668673787,73.82495677048118,75.46081326058564,68.3812412742809,64.59000324573823,94.59999212234524,94.24690773696024,64.73549793421351,112.41217017984488,102.18028209330932,123.50039413570121,121.70356666066586,123.54753505021861,104.7196698753319,122.99317055153399,99.13029029943365,156.0547179537659,139.44086479659663,152.34692288030402,134.0074554142909,144.05619018724445,158.42685225542678,132.63557147604058,159.2388399452142,170.64248341652817,186.26582522525794,186.99748401512645,191.07127016749047,181.59865792370348,185.1746237873759,189.8824555976158,168.8167006477372,221.578038174202,223.22569883123987,202.55845246658143,218.49030478603134,202.348217389663,205.30258184914524,216.50312156762618,203.98958224920034,236.73432482519758,226.4088810181621,226.30506590571852,253.4394825669808,243.8845586288411,246.95578287349892,253.69988768306874,244.3285442819603],"r":null,"name":"","fill":null,"mode":"markers","width":null,"type":"scatter","theta":null,"z":null,"lon":null,"lat":null,"x":[26.917795279516838,53.50885918587323,93.86017818568207,97.97585307015068,154.64530906635497,170.51818696823764,193.26523860241738,233.71144184620573,6.575207072545737,49.75189845897668,80.3470882348412,114.80131084860088,131.8598479334347,168.73442652378034,204.98502835575954,232.3253767668397,5.1315173355560155,35.81532252142469,87.82010438206223,115.70999070000079,158.0645912579932,186.56198348198822,202.1424577073595,249.3989878205934,2.7443390925469124,62.36527778093725,86.89783173437311,96.05013222715579,131.46737266464143,181.88305581049073,215.43821100889963,240.88194354661113,29.598727745787137,63.946550865534014,80.6416020402779,103.79592725255564,130.11059576204164,168.55467462688512,197.02595545259535,241.899181670635,26.427688713007974,34.58119934616097,80.48223018375126,97.0524062597874,156.20424570748764,160.81983373765215,210.25159389298489,227.068293915672,4.657685826418206,48.99218587354572,81.77177149965965,115.18531734152693,156.08389402312184,163.34362175683538,211.0175262387493,228.4419062994721,10.179151208796664,49.45201024565391,86.96028444056196,107.57601172080518,139.7937064389505,190.8743589502511,204.7719048710295,247.07506469397856],"text":null}], {"width":500,"height":400,"margin":{"t":25},"automargin":false,"plot_bgcolor":"rgb(235,235,235)","xaxis":{"gridcolor":"rgb(255,255,255)","title":"x","showgrid":true},"yaxis":{"gridcolor":"rgb(255,255,255)","title":"y","showgrid":true},"title":"Random points"}, {});</script></div>
+<div style="height:auto;width:100%;"><script>Plotly.newPlot(document.currentScript.parentElement, [{"y":[7.704462557617667,3.281812999906869,18.794573738128037,14.372938676630653,0.7992830556836417,26.81433205304141,19.411235487389142,17.579610793274007,55.00131842436367,51.71789024249472,61.94251066907533,54.63340374541396,53.336721187646106,48.80178717479153,37.12604581530867,37.35761981067125,89.72616393797774,67.64402612336795,94.47579457226489,67.47141564110902,86.35242202140735,71.48868223499261,67.56073566863034,92.72642700928327,110.75647133227136,105.02803486271885,123.82460773051758,97.74066360496747,116.28710710524285,120.69447351927028,102.57165401566236,111.15466770043167,141.52907349931124,141.08715893057905,132.74338980925728,150.7349368202497,156.33471009993232,131.15845702802952,138.1113800706178,140.04961496235066,190.0841144322408,177.78513761112515,165.5110341125714,190.3414470226613,169.79882065110033,174.34933525355243,183.74141801578705,177.2229997779622,215.73399230879045,199.95427968156744,216.75608035426282,205.81914813242028,198.07413246554694,198.89979009823682,210.769893126282,205.98182879032805,246.35730737482464,230.04253329148318,226.90691133486814,235.20205648423297,231.25288724691836,227.66605168197714,247.0142438137249,226.8442084972661],"r":null,"name":"","fill":null,"mode":"markers","width":null,"type":"scatter","theta":null,"z":null,"lon":null,"lat":null,"x":[24.546456175278554,50.26624889277414,91.38408817320924,109.37444166507396,148.3032641968907,185.9847960601303,204.85993288143433,234.6338642458594,10.100937081165032,60.312846199399324,82.2185508448135,118.52698611148428,159.72297878415085,190.30896482473256,208.3564730282615,236.7380812201438,19.878934388185677,37.923187149788205,73.76114041553396,126.81367338321905,156.72797786603462,182.6089862390474,192.00031457099928,227.9434493254957,27.99039297461823,54.429386624941145,87.11187844110484,114.54781648196791,155.27194462778434,184.28221218697772,193.51902957296977,244.29709581753352,11.226142031487012,47.869474374407034,67.09586041735119,109.18736010225548,136.1793897387352,188.03590840367895,194.00833194653205,246.29790816691397,14.844031007115277,60.10164276981563,67.9556388306562,116.8553843794316,147.7442822388549,172.81401327923388,222.4369597668736,254.22953792001198,23.980057402605066,49.54351338043899,72.66860765570406,97.48561798255187,157.95368383951163,182.34889271538196,197.7765581986116,247.118414500538,8.684504776475109,63.5363892305997,69.88938281687064,127.5929412402443,152.33638115484314,163.3381022409772,196.75656041260072,225.31674964018734],"text":null}], {"width":500,"height":400,"margin":{"t":25},"automargin":false,"plot_bgcolor":"rgb(235,235,235)","xaxis":{"gridcolor":"rgb(255,255,255)","title":"x","showgrid":true},"yaxis":{"gridcolor":"rgb(255,255,255)","title":"y","showgrid":true},"title":"Random points"}, {});</script></div>
 ```
 
 
@@ -615,7 +651,7 @@ The gradient field can be plotted with Plotly as a scatter plot of disconnected
 
 
 ```{=html}
-<div style="height:auto;width:100%;"><script>Plotly.newPlot(document.currentScript.parentElement, [{"y":[0.0,0.04410531444897837,null,0.0,-0.0026741821804405126,null,0.0,-0.4795381721533635,null,0.0,-0.49698817789485794,null,0.0,-0.2474691759843652,null,0.0,0.1104135557863166,null,0.0,-0.19931325922205229,null,0.0,0.4720492218094082,null,1.0,1.4419903762645205,null,1.0,0.5107865285189543,null,1.0,1.323429010946917,null,1.0,1.0881289036996948,null,1.0,0.5000508631884688,null,1.0,1.4720504395770138,null,1.0,0.6457756706918301,null,1.0,1.4675513908893454,null,2.0,1.9059444478864105,null,2.0,1.5432923952496864,null,2.0,2.387284551456553,null,2.0,1.5032761919686233,null,2.0,1.587332933519691,null,2.0,2.161361440344303,null,2.0,2.3312925051277413,null,2.0,2.171362953767855,null,3.0,2.6908756317836207,null,3.0,2.7983605153063054,null,3.0,2.794003848215544,null,3.0,3.1843144960614307,null,3.0,2.627284687764921,null,3.0,2.538257436692148,null,3.0,3.3637291271646363,null,3.0,3.0141435025423355,null,4.0,3.5106073839084844,null,4.0,4.470615912611445,null,4.0,4.219255244313526,null,4.0,3.834502102791345,null,4.0,4.1206567188286245,null,4.0,4.4546054187619974,null,4.0,3.7897189192592404,null,4.0,4.466534656743448,null,5.0,5.47769148737237,null,5.0,5.120378606773933,null,5.0,4.8728418138555485,null,5.0,5.491180017060712,null,5.0,4.5042644532538665,null,5.0,5.38348376855726,null,5.0,5.464876372015239,null,5.0,5.450951105092577,null,6.0,6.465849663347946,null,6.0,6.286012839782964,null,6.0,6.07332142600285,null,6.0,6.449446949800702,null,6.0,6.23076194691793,null,6.0,5.502831661384181,null,6.0,6.318168236714197,null,6.0,5.73064281370315,null,7.0,7.352328027533612,null,7.0,7.30609092959439,null,7.0,7.488395526478369,null,7.0,7.326450587040901,null,7.0,6.55825034235116,null,7.0,6.858761527451458,null,7.0,6.851258766747608,null,7.0,7.339063338535601,null],"r":null,"name":"","fill":null,"mode":"lines","width":null,"type":"scatter","theta":null,"z":null,"lon":null,"lat":null,"x":[0.0,0.49805092233360715,null,1.0,0.5000071513014752,null,2.0,2.1415738021238786,null,3.0,2.945202636625938,null,4.0,3.565535954378709,null,5.0,5.4876564843192615,null,6.0,6.458556675557431,null,7.0,6.835168169975784,null,0.0,-0.2337616463185258,null,1.0,0.8967034399340224,null,2.0,2.3813052253482754,null,3.0,3.4921720190468877,null,4.0,4.007131661896426,null,5.0,5.164828342511681,null,6.0,6.352881176214002,null,7.0,6.822811690912074,null,0.0,0.49107387745288167,null,1.0,0.7964854703879076,null,2.0,2.3162446461255852,null,3.0,3.0571441907354377,null,4.0,3.7176776802260645,null,5.0,4.526753250861654,null,6.0,6.37449335914831,null,7.0,6.5302822783032815,null,0.0,-0.3929912530512915,null,1.0,1.457538542870938,null,2.0,2.455593662653461,null,3.0,2.5352116970688474,null,4.0,4.333291608093434,null,5.0,5.191817114017217,null,6.0,5.656924028745744,null,7.0,7.4997999213043505,null,0.0,0.10244445966035554,null,1.0,0.8311193830041562,null,2.0,2.4493630356860874,null,3.0,2.5281838853753364,null,4.0,3.5147763853628824,null,5.0,5.208167992814046,null,6.0,6.453631862948909,null,7.0,6.820151691536247,null,0.0,0.1476849447031508,null,1.0,1.485292685944438,null,2.0,2.4835605398463083,null,3.0,3.0934996836371056,null,4.0,4.065163392271365,null,5.0,5.320842951072829,null,6.0,5.815907743938131,null,7.0,6.784029861286836,null,0.0,-0.1816152283224223,null,1.0,1.410117855596759,null,2.0,1.5054052482194047,null,3.0,3.2190831789865335,null,4.0,3.5564361107409144,null,5.0,4.946862037318068,null,6.0,6.385705811657251,null,7.0,6.57875576420532,null,0.0,0.3547745213713553,null,1.0,1.395358499111935,null,2.0,1.8929028024833663,null,3.0,2.621278447641739,null,4.0,3.7657837751838423,null,5.0,5.479637043890643,null,6.0,5.522636359228567,null,7.0,7.367472519327762,null],"text":null}], {"width":500,"height":400,"margin":{"t":25},"automargin":false,"plot_bgcolor":"rgb(235,235,235)","xaxis":{"gridcolor":"rgb(255,255,255)","title":"x","showgrid":true},"yaxis":{"gridcolor":"rgb(255,255,255)","title":"y","showgrid":true},"title":"Random gradients"}, {});</script></div>
+<div style="height:auto;width:100%;"><script>Plotly.newPlot(document.currentScript.parentElement, [{"y":[0.0,0.39047932427129406,null,0.0,-0.3714541173991453,null,0.0,-0.41683308947750913,null,0.0,-0.4518004757546597,null,0.0,-0.3117283706350664,null,0.0,0.04619542557956524,null,0.0,-0.4948177991207895,null,0.0,-0.4696288145471399,null,1.0,0.8710374422821043,null,1.0,0.6782849548853285,null,1.0,1.4643085350777518,null,1.0,0.8067712300543022,null,1.0,0.9045537178565671,null,1.0,0.811781576414065,null,1.0,1.0155509506022036,null,1.0,1.2035450937281107,null,2.0,1.5669700614296098,null,2.0,1.9446028518247782,null,2.0,2.045144546985421,null,2.0,2.3975921089901275,null,2.0,1.5578209555163012,null,2.0,1.7751418986185572,null,2.0,2.3733274414228513,null,2.0,2.394295678069661,null,3.0,3.12090031580506,null,3.0,3.2879289049958356,null,3.0,2.88388147978992,null,3.0,3.4937828083064626,null,3.0,3.299449669843025,null,3.0,2.8767542792053282,null,3.0,2.5641257259628776,null,3.0,3.3131865955348183,null,4.0,3.9613598962271794,null,4.0,4.028609187839379,null,4.0,3.537020220374206,null,4.0,4.022091536276743,null,4.0,4.466400588807397,null,4.0,4.029057213590948,null,4.0,4.494014353605602,null,4.0,4.396669063201563,null,5.0,5.474118459575006,null,5.0,4.649454354973885,null,5.0,5.346189635543292,null,5.0,4.690710280184171,null,5.0,5.4706231987872656,null,5.0,4.609634664199985,null,5.0,4.514950354365291,null,5.0,5.245258470956071,null,6.0,5.554202720117423,null,6.0,6.494695248615894,null,6.0,5.835344642248364,null,6.0,6.339419586826679,null,6.0,6.499680642172552,null,6.0,5.732598283397122,null,6.0,5.647583667490429,null,6.0,5.970600625605405,null,7.0,6.63762244880755,null,7.0,7.086140191403027,null,7.0,7.1791308403005845,null,7.0,6.508485187649486,null,7.0,6.540441465843952,null,7.0,6.958423225393017,null,7.0,7.31529253109054,null,7.0,7.375737895887182,null],"r":null,"name":"","fill":null,"mode":"lines","width":null,"type":"scatter","theta":null,"z":null,"lon":null,"lat":null,"x":[0.0,-0.3122913660616214,null,1.0,0.6653033632269036,null,2.0,2.2761343432400882,null,3.0,2.7858123950648332,null,4.0,4.390928923132079,null,5.0,4.502138590915582,null,6.0,6.071800735882427,null,7.0,7.1716064583488865,null,0.0,-0.4830824553912701,null,1.0,0.6172475607564795,null,2.0,1.814480232174703,null,3.0,2.538846400355291,null,4.0,3.5091945321973315,null,5.0,5.463221140518031,null,6.0,5.5002418905756825,null,7.0,6.543306016221787,null,0.0,0.24997014282054592,null,1.0,0.5030783200804652,null,2.0,2.4979577992937565,null,3.0,3.3031839620903165,null,4.0,3.7665954314511323,null,5.0,4.553414247603965,null,6.0,5.667394195058674,null,7.0,7.307458807412613,null,0.0,-0.4851629763679795,null,1.0,0.5912250672217055,null,2.0,2.486329609693078,null,3.0,3.0786036781644666,null,4.0,4.4004121566972,null,5.0,4.515427515942349,null,6.0,5.755023231238937,null,7.0,6.610238333879138,null,0.0,-0.49850470647770784,null,1.0,0.5008191566464404,null,2.0,1.8111886559084676,null,3.0,2.5004882743869437,null,4.0,4.180195701280896,null,5.0,4.5008450357470835,null,6.0,5.922864933839147,null,7.0,7.304390627810376,null,0.0,0.15878188275185387,null,1.0,1.3565357636384117,null,2.0,1.6392331275707217,null,3.0,3.3928611322289925,null,4.0,3.831139688608478,null,5.0,4.687566159634169,null,6.0,5.878645802422647,null,7.0,7.4357158276036,null,0.0,0.22641728125144286,null,1.0,0.9273597150552244,null,2.0,1.527889193977006,null,3.0,3.3671434924908876,null,4.0,3.982132268246191,null,5.0,5.422488250674305,null,6.0,5.645313196495128,null,7.0,7.499134928436396,null,0.0,-0.34450328066908564,null,1.0,0.5074760235023579,null,2.0,2.466810606191854,null,3.0,3.091723438880355,null,4.0,4.196992268082646,null,5.0,5.49826837328219,null,6.0,5.6119399275388915,null,7.0,6.67011966776682,null],"text":null}], {"width":500,"height":400,"margin":{"t":25},"automargin":false,"plot_bgcolor":"rgb(235,235,235)","xaxis":{"gridcolor":"rgb(255,255,255)","title":"x","showgrid":true},"yaxis":{"gridcolor":"rgb(255,255,255)","title":"y","showgrid":true},"title":"Random gradients"}, {});</script></div>
 ```
 
 
@@ -1441,7 +1477,7 @@ nil
 
 ::: {.printedClojure}
 ```clojure
-#object[org.lwjgl.opengl.GLCapabilities 0x79c3fe0c "org.lwjgl.opengl.GLCapabilities@79c3fe0c"]
+#object[org.lwjgl.opengl.GLCapabilities 0x7fa20c48 "org.lwjgl.opengl.GLCapabilities@7fa20c48"]
 
 ```
 :::

src/volumetric_clouds/main.clj

@@ -2,7 +2,7 @@
   :clay             {:title  "Volumetric Clouds with Clojure and LWJGL"
                      :external-requirements ["Xorg"]
                      :quarto {:author   [:janwedekind]
-                              :draft    true
+                              :draft    false
                               :description "Procedural generation of volumetric clouds using different types of noise"
                               :image    "clouds.jpg"
                               :type     :post
@@ -14,7 +14,7 @@
     (:require [clojure.math :refer (PI sqrt cos sin tan to-radians pow floor)]
               [midje.sweet :refer (fact facts tabular => roughly)]
               [fastmath.vector :refer (vec2 vec3 add mult sub div mag dot normalize)]
-              [fastmath.matrix :refer (mat->float-array mulm mulv inverse
+              [fastmath.matrix :refer (mat->float-array mulm
                                        rotation-matrix-3d-x rotation-matrix-3d-y)]
               [tech.v3.datatype :as dtype]
               [tech.v3.tensor :as tensor]
@@ -33,6 +33,41 @@
 ;; For a introductory video see [Sebastian Lague's video "Coding Adventure: Clouds](https://www.youtube.com/watch?v=4QOcCGI6xOU).
 ;; This article gets you started with computing and rendering volumetric clouds.
 ;;
+;; ## Dependencies
+;;
+;; To download the required libraries, we use a `deps.edn` file with the following content:
+;;
+;; ```Clojure
+;; {:deps
+;;  {
+;;   org.clojure/clojure {:mvn/version "1.12.3"}
+;;   org.scicloj/noj     {:mvn/version "2-beta18"}
+;;   midje/midje         {:mvn/version "1.10.10"}
+;;   generateme/fastmath {:mvn/version "3.0.0-alpha4"}
+;;   comb/comb           {:mvn/version "1.0.0"}
+;;   }
+;; ```
+;;
+;; We are going to import the following methods and namespaces:
+;; ```Clojure
+;; (require '[clojure.math :refer (PI sqrt cos sin tan to-radians pow floor)]
+;;          '[midje.sweet :refer (fact facts tabular => roughly)]
+;;          '[fastmath.vector :refer (vec2 vec3 add mult sub div mag dot normalize)]
+;;          '[fastmath.matrix :refer (mat->float-array mulm
+;;                                    rotation-matrix-3d-x rotation-matrix-3d-y)]
+;;          '[tech.v3.datatype :as dtype]
+;;          '[tech.v3.tensor :as tensor]
+;;          '[tech.v3.datatype.functional :as dfn]
+;;          '[tablecloth.api :as tc]
+;;          '[scicloj.tableplot.v1.plotly :as plotly]
+;;          '[tech.v3.libs.buffered-image :as bufimg]
+;;          '[comb.template :as template])
+;; (import '[org.lwjgl.opengl GL11]
+;;         '[org.lwjgl BufferUtils]
+;;         '[org.lwjgl.glfw GLFW]
+;;         '[org.lwjgl.opengl GL GL11 GL12 GL13 GL15 GL20 GL30 GL32 GL42])
+;; ```
+;;
 ;; ## Worley noise
 ;;
 ;; [Worley noise](https://en.wikipedia.org/wiki/Worley_noise) is a type of structured noise which is defined for each pixel using the distance to the nearest seed point.