Start the work on the Grimoire presentation

Pages/grimoire.html

@@ -0,0 +1,140 @@
+<!-- itemscope -->SoftwareApplication
+<!-- fr-title -->Grimoire
+<!-- fr-date -->Été 2023
+<!-- fr-description -->Un logiciel expérimental pour l'animation, le dessin,<br>et la programmation <span class="italic">in vivo</span> avec SuperCollider et WebGL.
+<!-- fr-content -->
+<img src="../../../images/grimoire/manoir-de-jais.jpg">
+<p class="article-top">
+    <span itemprop="name"><sc>Grimoire</sc></span> est un logiciel distribué en code source libre, que j’ai conçu tout d'abord afin de rendre possible de nouvelles rencontres entre les divers domaines qui composent ma pratique artistique &mdash; nommément : le cinéma d'animation, le dessin à la main traditionnel, la musique électronique, l'art génératif et l'écriture. Vous pouvez <a href="https://pelletierauger.com/grimoire/">essayer en ligne une version bêta de Grimoire.</a>
+</p>
+<p>
+    J'ai réglé la valeur de, mais le résultat est presque identique peu importe les valeurs initiales. Le système est ensuite itéré plusieurs millions de fois, et un point blanc d'une très faible opacité est dessiné à chaque itération.
+</p>
+<p>
+    Différentes images sont générées lorsque les constantes sont changées. On peut voir ci-dessous quatre ensembles de valeurs pour ces constantes, chacun suivi de l'image qu'il génère.
+</p>
+<img src="../../images/dunes/dunes002b.jpg">
+<p class="noindent">
+    <br>Voici le code complet de ce projet, écrit en JavaScript avec <a href="http://p5js.org/">la bibliothèque p<span class="lnum">5</span>.js</a>&nbsp;:
+</p>
+<code>var duneOne = {
+    a: -0.1,
+    b: 1,
+    c: 0.1,
+    d: 1
+};
+
+var duneTwo = {
+    a: -0.1,
+    b: -1,
+    c: 0.1,
+    d: 3
+};
+
+var duneThree = {
+    a: -0.6,
+    b: 1,
+    c: 0.1,
+    d: 1
+};
+
+var duneFour = {
+    a: -0.3,
+    b: 1,
+    c: 0.12,
+    d: 3
+};
+
+var vals = duneFour;
+var vec = new p5.Vector(0, 0, 0);
+
+function setup() {
+    createCanvas(windowWidth, windowHeight);
+    background(0);
+    fill(255, 5);
+    noStroke();
+}
+
+function draw() {
+    translate(width / 2, height / 2);
+    for (var i = 0; i < 1500; i++) {
+        vec = iterative(vec.x, vec.y, vec.z);
+        ellipse(vec.x * 70, vec.y * 200, 0.5, 0.5);
+    }
+}
+
+function iterative(x, y, z) {
+    var newX = sin(vals.a * x) + tan(vals.b * x) - tan(z);
+    var newY = sin(vals.c * x) + sin(vals.d * z);
+    var newZ = z + 0.1;
+    return createVector(newX, newY, newZ);
+}</code>
+<!-- en-title -->Grimoire
+<!-- en-date -->Summer 2023
+<!-- en-description -->An experimental software for animation, drawing,<br>and live coding with SuperCollider and WebGL.
+<!-- en-content -->
+<p class="noindent">
+    <sc>This project</sc> is based on <a href="http://koaning.io/fluctuating-repetition.html">Fluctuating Repetition</a>, a blog post by the Dutch data scientist Vincent D. Warmerdam. The images below are generated by this dynamical system:
+</p>
+<p class="noindent">
+    I set the value of , but setting them to different values gives practically identical results (for the purposes of this project). The system is then iterated several million times, and a white dot with a very low opacity is drawn on each iteration.
+</p>
+<p>
+    Different images are obtained when the constants  are changed. Below are four sets of values for these constants, followed by the image that each set generates.
+</p>
+<img src="../../images/dunes/dunes004.jpg">
+<p class="noindent">
+    <br>Here is the complete code for the project, written in JavaScript with the <a href="http://p5js.org/">p<span class="lnum">5</span>.js library</a>:
+</p>
+<code>var duneOne = {
+    a: -0.1,
+    b: 1,
+    c: 0.1,
+    d: 1
+};
+
+var duneTwo = {
+    a: -0.1,
+    b: -1,
+    c: 0.1,
+    d: 3
+};
+
+var duneThree = {
+    a: -0.6,
+    b: 1,
+    c: 0.1,
+    d: 1
+};
+
+var duneFour = {
+    a: -0.3,
+    b: 1,
+    c: 0.12,
+    d: 3
+};
+
+var vals = duneFour;
+var vec = new p5.Vector(0, 0, 0);
+
+function setup() {
+    createCanvas(windowWidth, windowHeight);
+    background(0);
+    fill(255, 5);
+    noStroke();
+}
+
+function draw() {
+    translate(width / 2, height / 2);
+    for (var i = 0; i < 1500; i++) {
+        vec = iterative(vec.x, vec.y, vec.z);
+        ellipse(vec.x * 70, vec.y * 200, 0.5, 0.5);
+    }
+}
+
+function iterative(x, y, z) {
+    var newX = sin(vals.a * x) + tan(vals.b * x) - tan(z);
+    var newY = sin(vals.c * x) + sin(vals.d * z);
+    var newZ = z + 0.1;
+    return createVector(newX, newY, newZ);
+}</code>