{"id":380,"date":"2025-02-26T11:15:50","date_gmt":"2025-02-26T11:15:50","guid":{"rendered":"https:\/\/intra.projects.unibz.it\/?page_id=380"},"modified":"2025-02-28T10:49:04","modified_gmt":"2025-02-28T10:49:04","slug":"cloud-generator","status":"publish","type":"page","link":"https:\/\/intra.projects.unibz.it\/?page_id=380","title":{"rendered":"Cloud Generator"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">Microfibre Cloud Generator<\/h2>\n\n\n\n<p>Processing script, originally written in Java (here revised in with P5js, in Javascript) to visualise microfibre areal release.&nbsp;It is ideal to create data visualisation and live-projections.<\/p>\n\n\n\n<p>It is inspired by the data published on the <a href=\"https:\/\/pubs.acs.org\/doi\/10.1021\/acs.est.9b06892?goto=supporting-info\" data-type=\"link\" data-id=\"https:\/\/pubs.acs.org\/doi\/10.1021\/acs.est.9b06892?goto=supporting-info\">paper of De Falco et al.<\/a> about microfibre areal release of garment through everyday use, and is visually inspired to the project <a href=\"https:\/\/artsexperiments.withgoogle.com\/plasticair\/\" data-type=\"link\" data-id=\"https:\/\/artsexperiments.withgoogle.com\/plasticair\/\"><em>Plastic Air<\/em> by Giorgia Lupi.<\/a><\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">A green blouse, a blue t-shirt, a black dress, a pink sweatshirt. <br>Which releases more microfibres to air?<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Click on the white canvas<\/strong><\/li>\n\n\n\n<li><strong>Press one of the following number key to check a single garment emission:<\/strong>\n<ul class=\"wp-block-list\">\n<li><strong>Press 1 <\/strong>: pink sweatshirt 50%:50% polyester\/cotton, knitted<\/li>\n\n\n\n<li><strong>Press 2 <\/strong>: black dress 100% polyester, knitted<\/li>\n\n\n\n<li><strong>Press 3<\/strong> : blue t-shirt 100% polyester, knitted<\/li>\n\n\n\n<li><strong>Press 4<\/strong> : green blouse 100% polyester, woven <em>(may by difficult to find)<\/em><\/li>\n\n\n\n<li><strong>Press 0 <\/strong>for the general overview<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n<div class=\"wp-block-cgb-block-p5js\"><iframe srcdoc=\"&lt;script src=&quot;https:\/\/intra.projects.unibz.it\/wp-content\/plugins\/wp-p5js-block\/assets\/js\/p5.min.js&quot;&gt;&lt;\/script&gt;&lt;script&gt;let numParticles = 100;\nlet particleGroups = [];\nlet isPaused = false;\nlet activeGroup = -1;\n\nconst groupConfigs = [\n{ color: [255,30,230], num: 403, length: 51, xVariation: 50, vertices: 68, thickness: 10.5 },\n    { color: [0, 0, 0], num: 347, length: 34, xVariation: 23, vertices: 75, thickness: 6.5 },\n   { color: [30, 60, 255], num: 108, length: 34, xVariation: 20, vertices: 2, thickness: 9 },\n    { color: [20, 230, 40], num: 1, length: 16, xVariation: 1, vertices: 3, thickness: 7.5 }\n];\n\nfunction setup() {\n    createCanvas(800, 600);\n    for (let config of groupConfigs) {\n        let group = [];\n        for (let i = 0; i &lt; config.num; i++) {\n            group.push(new Particle(random(width), random(height), config));\n        }\n        particleGroups.push(group);\n    }\n    strokeJoin(ROUND);\n    frameRate(24);\n    textFont(&#039;Courier New&#039;, 15);\n}\n\nfunction draw() {\n    if (!isPaused) {\n        background(255);\n        for (let i = 0; i &lt; particleGroups.length; i++) {\n            for (let p of particleGroups[i]) {\n                p.applyNoise();\n                p.update();\n                p.display(i === activeGroup);\n            }\n        }\n    }\n    noStroke();\n    fill(0);\n    textSize(16);\n}\n\nfunction keyPressed() {\n    if (key &gt;= &#039;1&#039; &amp;&amp; key &lt;= &#039;4&#039;) {\n        activeGroup = int(key) - 1;\n    } else if (key === &#039;0&#039;) {\n        activeGroup = -1;\n    }\n}\n\nclass Particle {\n    constructor(x, y, config) {\n        this.position = createVector(x, y);\n        this.velocity = p5.Vector.random2D().mult(0.5);\n        this.randomAngles = Array.from({ length: config.vertices }, () =&gt; random(-PI \/ 4, PI \/ 4));\n        this.baseSegmentLengths = Array.from({ length: config.vertices }, () =&gt; config.length \/ config.vertices);\n        this.currentSegmentLengths = Array(config.vertices).fill(0);\n        this.rotation = random(TWO_PI);\n        this.rotationSpeed = random(-0.01, 0.01);\n        this.color = config.color;\n        this.thickness = config.thickness;\n        this.xVariation = config.xVariation;\n        this.applyXVariation();\n    }\n\n    applyXVariation() {\n        let cumulativeLength = 0;\n        for (let i = 0; i &lt; this.baseSegmentLengths.length; i++) {\n            let smoothVariation = random(-this.xVariation \/ 2, this.xVariation \/ 2);\n            let newLength = max(this.baseSegmentLengths[i] + smoothVariation, this.baseSegmentLengths[i] * 0.5);\n            this.currentSegmentLengths[i] = newLength;\n            cumulativeLength += newLength;\n            if (cumulativeLength &gt; this.baseSegmentLengths.length) {\n                this.currentSegmentLengths[i] = this.baseSegmentLengths.length - (cumulativeLength - newLength);\n                break;\n            }\n        }\n    }\n\n    applyNoise() {\n        let nX = noise(this.position.x * 0.01, this.position.y * 0.01, frameCount * 0.01);\n        let nY = noise(this.position.x * 0.01 + 100, this.position.y * 0.01 + 100, frameCount * 0.01);\n        this.velocity.add(sin(map(nX, 0, 1, -PI \/ 8, PI \/ 8)) * 0.5, sin(map(nY, 0, 1, -PI \/ 8, PI \/ 8)) * 0.5);\n        this.velocity.limit(2);\n    }\n\n    update() {\n        this.position.add(this.velocity);\n        this.position.x = (this.position.x + width) % width;\n        this.position.y = (this.position.y + height) % height;\n        this.rotation += this.rotationSpeed;\n    }\n\n    display(isActive) {\n        noFill();\n        stroke([...this.color, activeGroup === -1 || isActive ? 255 : 50]); \/\/ Reduce transparency for inactive groups\n        strokeWeight(this.thickness);\n        push();\n        translate(this.position.x, this.position.y);\n        rotate(this.rotation);\n        beginShape();\n        let angle = 0;\n        let x = 0, y = 0;\n        for (let i = 0; i &lt; this.randomAngles.length; i++) {\n            angle += this.randomAngles[i];\n            x += cos(angle) * this.currentSegmentLengths[i];\n            y += sin(angle) * this.currentSegmentLengths[i];\n            vertex(x, y);\n        }\n        endShape();\n        pop();\n    }\n}\n&lt;\/script&gt;&lt;style&gt;body{margin: 0; padding: 0;}&lt;\/style&gt;\"><\/iframe><\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p>If you want to make your own visualisation you can create it below, you can also save it as an image. For further about its usage keep scrolling below.<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:66.66%\"><div class=\"wp-block-cgb-block-p5js\"><iframe srcdoc=\"&lt;script src=&quot;https:\/\/intra.projects.unibz.it\/wp-content\/plugins\/wp-p5js-block\/assets\/js\/p5.min.js&quot;&gt;&lt;\/script&gt;&lt;script&gt;let numParticles = 100;\nlet particles = [];\nlet n = 7;  \/\/ Number of vertices for the zig5zag line (modifiable)\nlet totalLength = 15;  \/\/ Total length of the zig-zag line (modifiable)\nlet x_variation = 12;  \/\/ \u00b1 x variation for segment lengths\nlet thick = 3;\nlet isPaused = false;\n\nfunction setup() {\n    createCanvas(600, 400);\n    for (let i = 0; i &lt; numParticles; i++) {\n        particles.push(new Particle(random(width), random(height)));\n    }\n      strokeJoin(ROUND);\n    frameRate(24);\n    textFont(&#039;Courier New&#039;, 15);\n\n}\n\nfunction draw() {\n    if (!isPaused) {\n        background(255);\n        for (let p of particles) {\n            p.applyNoise();\n            p.update();\n            p.display();\n        }\n    }\nnoStroke();\n    fill(0);\n    textSize(16);\n    text(`${numParticles} microfibres released`, 20, 20);\n\n    text(`length: ${totalLength} \u00b1${x_variation}`, 20, 40);\n\n    text(`${n} vertexes`, 20, height-40);\n    text(`Thickness: ${thick}`, 20, height-20);\n}\n\nfunction keyPressed() {\n      if (key.toLowerCase() === &#039;g&#039;) {\n        restartSimulation();\n    }\n\n   if (key.toLowerCase() === &#039;m&#039;) {\n  saveCanvas(numParticles+&#039;_&#039;+totalLength+&#039;-&#039;+ x_variation+&#039;_&#039;+n+&#039;_&#039;+thick+&#039;.png&#039;);\n    }\n    \/\/if (key === &#039; &#039;) isPaused = !isPaused;\n  \n  \/\/number of particles\n      if (key.toLowerCase() === &#039;q&#039;) changeNumParticles(numParticles - 3);\n    if (key.toLowerCase() === &#039;w&#039;) changeNumParticles(numParticles + 3);\n  \n  \n  \/\/length of segments\n    if (key.toLowerCase() === &#039;a&#039;) {\n        totalLength = constrain(totalLength - 5, 5, 50);\n        updateAllSegmentLengths();\n    }\n    if (key.toLowerCase() === &#039;s&#039;) {\n        totalLength = constrain(totalLength + 5, 5, 50);\n        updateAllSegmentLengths();\n    }\n  \n  \/\/number of vertexes\n    if (key.toLowerCase() === &#039;k&#039;) updateAllVertices(n - 1);\n    if (key.toLowerCase() === &#039;l&#039;) updateAllVertices(n + 1);\n   \n  \/\/thickness\n    if (key.toLowerCase() === &#039;z&#039;) thick = constrain(thick - .5, .5, 20);\n    if (key.toLowerCase() === &#039;x&#039;) thick = constrain(thick + .5, .5, 20);\n\n  \/\/variation\n        if (key.toLowerCase() === &#039;o&#039;) {\n        x_variation = constrain(x_variation - 2, 0, 50);\n        updateAllSegmentLengths();\n    }\n      if (key.toLowerCase() === &#039;p&#039;) {\n        x_variation = constrain(x_variation + 2, 0, 50);\n        updateAllSegmentLengths();\n    }\n}\n\nfunction restartSimulation() {\n    particles = [];\n    initializeParticles();\n}\n\nfunction initializeParticles() {\n    for (let i = 0; i &lt; numParticles; i++) {\n        particles.push(new Particle(width\/2, height\/2));\n    }\n}\n\nfunction updateAllVertices(newNumVertices) {\n    newNumVertices = constrain(newNumVertices, 2, 300);\n    for (let p of particles) {\n        p.updateVertices(newNumVertices);\n    }\n    n = newNumVertices;\n    updateAllSegmentLengths();\n}\n\nfunction updateAllSegmentLengths() {\n    for (let p of particles) {\n        p.updateSegmentLengths();\n    }\n}\n\nfunction changeNumParticles(newNumParticles) {\n    newNumParticles = constrain(newNumParticles, 1, 100000);\n    if (newNumParticles &gt; numParticles) {\n        for (let i = numParticles; i &lt; newNumParticles; i++) {\n            particles.push(new Particle(random(width), random(height)));\n        }\n    } else {\n        particles = particles.slice(0, newNumParticles);\n    }\n    numParticles = newNumParticles;\n}\n\nclass Particle {\n    constructor(x, y) {\n        this.position = createVector(x, y);\n        this.velocity = p5.Vector.random2D().mult(0.5);\n        this.randomAngles = Array.from({ length: n }, () =&gt; random(-PI \/ 4, PI \/ 4));\n        this.baseSegmentLengths = Array.from({ length: n }, () =&gt; totalLength \/ n);\n        this.currentSegmentLengths = Array(n).fill(0);\n        this.rotation = random(TWO_PI);\n        this.rotationSpeed = random(-0.01, 0.01);\n        this.applyXVariation();\n    }\n\n    applyXVariation() {\n        let cumulativeLength = 0;\n        for (let i = 0; i &lt; this.baseSegmentLengths.length; i++) {\n            let smoothVariation = random(-x_variation \/ 2, x_variation \/ 2);\n            let newLength = max(this.baseSegmentLengths[i] + smoothVariation, this.baseSegmentLengths[i] * 0.5);\n            this.currentSegmentLengths[i] = newLength;\n            cumulativeLength += newLength;\n            if (cumulativeLength &gt; totalLength) {\n                this.currentSegmentLengths[i] = totalLength - (cumulativeLength - newLength);\n                break;\n            }\n        }\n    }\n\n    updateSegmentLengths() {\n        let baseSegmentLength = totalLength \/ this.randomAngles.length;\n        this.baseSegmentLengths.fill(baseSegmentLength);\n        this.applyXVariation();\n    }\n\n    updateVertices(newNumVertices) {\n        if (newNumVertices &gt; this.randomAngles.length) {\n            for (let i = this.randomAngles.length; i &lt; newNumVertices; i++) {\n                this.randomAngles.push(random(-PI \/ 4, PI \/ 4));\n                this.baseSegmentLengths.push(totalLength \/ newNumVertices);\n                this.currentSegmentLengths.push(0.0);\n            }\n        } else {\n            this.randomAngles.length = newNumVertices;\n            this.baseSegmentLengths.length = newNumVertices;\n            this.currentSegmentLengths.length = newNumVertices;\n        }\n        this.updateSegmentLengths();\n    }\n\n    applyNoise() {\n        let nX = noise(this.position.x * 0.01, this.position.y * 0.01, frameCount * 0.01);\n        let nY = noise(this.position.x * 0.01 + 100, this.position.y * 0.01 + 100, frameCount * 0.01);\n        this.velocity.add(sin(map(nX, 0, 1, -PI \/ 8, PI \/ 8)) * 0.5, sin(map(nY, 0, 1, -PI \/ 8, PI \/ 8)) * 0.5);\n        this.velocity.limit(2);\n    }\n\n    update() {\n        this.position.add(this.velocity);\n        this.position.x = (this.position.x + width) % width;\n        this.position.y = (this.position.y + height) % height;\n        this.rotation += this.rotationSpeed;\n    }\n\n    display() {\n        noFill();\n        stroke(255, 75, 43);\n        strokeWeight(thick);\n        push();\n        translate(this.position.x, this.position.y);\n        rotate(this.rotation);\n        beginShape();\n        let angle = 0;\n        let x = 0, y = 0;\n        for (let i = 0; i &lt; this.randomAngles.length; i++) {\n            angle += this.randomAngles[i];\n            x += cos(angle) * this.currentSegmentLengths[i];\n            y += sin(angle) * this.currentSegmentLengths[i];\n            vertex(x, y);\n        }\n        endShape();\n        pop();\n    }\n}\n&lt;\/script&gt;&lt;style&gt;body{margin: 0; padding: 0;}&lt;\/style&gt;\"><\/iframe><\/div><\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:33.33%\">\n<p><strong>Click on the white canvas to interact with the particles<\/strong><\/p>\n\n\n\n<p><strong>G<\/strong> : restart the script<br><strong>M<\/strong> : save png<\/p>\n\n\n\n<p><strong>Q &#8211; W <\/strong>: number of particles<\/p>\n\n\n\n<p><strong>O &#8211; P <\/strong>: confidence interval<br><strong>A &#8211; S<\/strong> : particle length<br><strong>K &#8211; L<\/strong> : number of vertexes<\/p>\n\n\n\n<p><strong>Z &#8211; X : <\/strong>particle thickness<\/p>\n<\/div>\n<\/div>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><div class=\"wp-block-cgb-block-p5js\"><iframe srcdoc=\"&lt;script src=&quot;https:\/\/intra.projects.unibz.it\/wp-content\/plugins\/wp-p5js-block\/assets\/js\/p5.min.js&quot;&gt;&lt;\/script&gt;&lt;script&gt;let numParticles = 6;\nlet particles = [];\nlet n = 2;  \/\/ Number of vertices for the zig5zag line (modifiable)\nlet totalLength = 10;  \/\/ Total length of the zig-zag line (modifiable)\nlet x_variation = 0;  \/\/ \u00b1 x variation for segment lengths\nlet thick = 3;\nlet isPaused = false;\n\nfunction setup() {\n    createCanvas(400, 400);\n    for (let i = 0; i &lt; numParticles; i++) {\n        particles.push(new Particle(random(width), random(height)));\n    }\n    frameRate(24);\n      strokeJoin(ROUND);\n}\n\nfunction draw() {\n    if (!isPaused) {\n        background(0);\n        for (let p of particles) {\n            p.applyNoise();\n            p.update();\n            p.display();\n        }\n    }\nnoStroke();\n    fill(255);\n    textSize(16);\n    textFont(&#039;Courier New&#039;, 15);\n\n  \n    \/\/text(`Number of vertices (n): ${n}`, 20, 20);\n   \/\/ text(`Total length (len): ${totalLength}`, 20, 40);\n    \/\/text(`\u00b1 x variation: ${x_variation}`, 20, 60);\n    text(`Number of particles = ${numParticles}`, 20, height-20);\n   \/\/ text(`Thickness of particles: ${thick}`, 20, 100);\n}\n\nfunction keyPressed() {\n      if (key.toLowerCase() === &#039;g&#039;) {\n        restartSimulation();\n    }\n    \/\/if (key === &#039; &#039;) isPaused = !isPaused;\n  \n  \/\/number of particles\n      if (key.toLowerCase() === &#039;q&#039;) changeNumParticles(numParticles - 3);\n    if (key.toLowerCase() === &#039;w&#039;) changeNumParticles(numParticles + 3);\n  \n  \/*\n  \/\/length of segments\n    if (key.toLowerCase() === &#039;a&#039;) {\n        totalLength = constrain(totalLength - 5, 5, 50);\n        updateAllSegmentLengths();\n    }\n    if (key.toLowerCase() === &#039;s&#039;) {\n        totalLength = constrain(totalLength + 5, 5, 50);\n        updateAllSegmentLengths();\n    }\n  \n  \/\/number of vertexes\n    if (key.toLowerCase() === &#039;k&#039;) updateAllVertices(n - 1);\n    if (key.toLowerCase() === &#039;l&#039;) updateAllVertices(n + 1);\n   \n  \/\/thickness\n    if (key.toLowerCase() === &#039;z&#039;) thick = constrain(thick - .5, .5, 20);\n    if (key.toLowerCase() === &#039;x&#039;) thick = constrain(thick + .5, .5, 20);\n\n  \/\/variation\n        if (key.toLowerCase() === &#039;n&#039;) {\n        x_variation = constrain(x_variation - 2, 0, 50);\n        updateAllSegmentLengths();\n    }\n      if (key.toLowerCase() === &#039;m&#039;) {\n        x_variation = constrain(x_variation + 2, 0, 50);\n        updateAllSegmentLengths();\n    }\n    *\/\n}\n\nfunction restartSimulation() {\n    particles = [];\n    initializeParticles();\n}\n\nfunction initializeParticles() {\n    for (let i = 0; i &lt; numParticles; i++) {\n        particles.push(new Particle(width\/2, height\/2));\n    }\n}\n\n\nfunction updateAllVertices(newNumVertices) {\n    newNumVertices = constrain(newNumVertices, 2, 300);\n    for (let p of particles) {\n        p.updateVertices(newNumVertices);\n    }\n    n = newNumVertices;\n    updateAllSegmentLengths();\n}\n\nfunction updateAllSegmentLengths() {\n    for (let p of particles) {\n        p.updateSegmentLengths();\n    }\n}\n\nfunction changeNumParticles(newNumParticles) {\n    newNumParticles = constrain(newNumParticles, 1, 100000);\n    if (newNumParticles &gt; numParticles) {\n        for (let i = numParticles; i &lt; newNumParticles; i++) {\n            particles.push(new Particle(random(width), random(height)));\n        }\n    } else {\n        particles = particles.slice(0, newNumParticles);\n    }\n    numParticles = newNumParticles;\n}\n\nclass Particle {\n    constructor(x, y) {\n        this.position = createVector(x, y);\n        this.velocity = p5.Vector.random2D().mult(0.5);\n        this.randomAngles = Array.from({ length: n }, () =&gt; random(-PI \/ 4, PI \/ 4));\n        this.baseSegmentLengths = Array.from({ length: n }, () =&gt; totalLength \/ n);\n        this.currentSegmentLengths = Array(n).fill(0);\n        this.rotation = random(TWO_PI);\n        this.rotationSpeed = random(-0.01, 0.01);\n        this.applyXVariation();\n    }\n\n    applyXVariation() {\n        let cumulativeLength = 0;\n        for (let i = 0; i &lt; this.baseSegmentLengths.length; i++) {\n            let smoothVariation = random(-x_variation \/ 2, x_variation \/ 2);\n            let newLength = max(this.baseSegmentLengths[i] + smoothVariation, this.baseSegmentLengths[i] * 0.5);\n            this.currentSegmentLengths[i] = newLength;\n            cumulativeLength += newLength;\n            if (cumulativeLength &gt; totalLength) {\n                this.currentSegmentLengths[i] = totalLength - (cumulativeLength - newLength);\n                break;\n            }\n        }\n    }\n\n    updateSegmentLengths() {\n        let baseSegmentLength = totalLength \/ this.randomAngles.length;\n        this.baseSegmentLengths.fill(baseSegmentLength);\n        this.applyXVariation();\n    }\n\n    updateVertices(newNumVertices) {\n        if (newNumVertices &gt; this.randomAngles.length) {\n            for (let i = this.randomAngles.length; i &lt; newNumVertices; i++) {\n                this.randomAngles.push(random(-PI \/ 4, PI \/ 4));\n                this.baseSegmentLengths.push(totalLength \/ newNumVertices);\n                this.currentSegmentLengths.push(0.0);\n            }\n        } else {\n            this.randomAngles.length = newNumVertices;\n            this.baseSegmentLengths.length = newNumVertices;\n            this.currentSegmentLengths.length = newNumVertices;\n        }\n        this.updateSegmentLengths();\n    }\n\n    applyNoise() {\n        let nX = noise(this.position.x * 0.01, this.position.y * 0.01, frameCount * 0.01);\n        let nY = noise(this.position.x * 0.01 + 100, this.position.y * 0.01 + 100, frameCount * 0.01);\n        this.velocity.add(sin(map(nX, 0, 1, -PI \/ 8, PI \/ 8)) * 0.5, sin(map(nY, 0, 1, -PI \/ 8, PI \/ 8)) * 0.5);\n        this.velocity.limit(2);\n    }\n\n    update() {\n        this.position.add(this.velocity);\n        this.position.x = (this.position.x + width) % width;\n        this.position.y = (this.position.y + height) % height;\n        this.rotation += this.rotationSpeed;\n    }\n\n    display() {\n        noFill();\n        stroke(255);\n        strokeWeight(thick);\n        push();\n        translate(this.position.x, this.position.y);\n        rotate(this.rotation);\n        beginShape();\n        let angle = 0;\n        let x = 0, y = 0;\n        for (let i = 0; i &lt; this.randomAngles.length; i++) {\n            angle += this.randomAngles[i];\n            x += cos(angle) * this.currentSegmentLengths[i];\n            y += sin(angle) * this.currentSegmentLengths[i];\n            vertex(x, y);\n        }\n        endShape();\n        pop();\n    }\n}\n&lt;\/script&gt;&lt;style&gt;body{margin: 0; padding: 0;}&lt;\/style&gt;\"><\/iframe><\/div><\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h3 class=\"wp-block-heading\">Number of particles<\/h3>\n\n\n\n<p>To interact click on the black canvas<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Press<strong> G<\/strong> to restart the script<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Press<strong> W <\/strong>to increase the number of particles<\/li>\n\n\n\n<li>Press<strong> Q <\/strong>to decrease the number of particles<\/li>\n<\/ul>\n<\/div>\n<\/div>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><div class=\"wp-block-cgb-block-p5js\"><iframe srcdoc=\"&lt;script src=&quot;https:\/\/intra.projects.unibz.it\/wp-content\/plugins\/wp-p5js-block\/assets\/js\/p5.min.js&quot;&gt;&lt;\/script&gt;&lt;script&gt;let numParticles = 50;\nlet particles = [];\nlet n = 2;  \/\/ Number of vertices for the zig5zag line (modifiable)\nlet totalLength = 40;  \/\/ Total length of the zig-zag line (modifiable)\nlet x_variation = 20;  \/\/ \u00b1 x variation for segment lengths\nlet thick = 3;\nlet isPaused = false;\n\nfunction setup() {\n    createCanvas(400, 400);\n    for (let i = 0; i &lt; numParticles; i++) {\n        particles.push(new Particle(random(width), random(height)));\n    }\n    frameRate(24);\n      strokeJoin(ROUND);\n}\n\nfunction draw() {\n    if (!isPaused) {\n        background(0);\n        for (let p of particles) {\n            p.applyNoise();\n            p.update();\n            p.display();\n        }\n    }\nnoStroke();\n    fill(255);\n    textSize(16);\n    textFont(&#039;Courier New&#039;, 15);\n\n  \n    \/\/text(`Number of vertices (n): ${n}`, 20, 20);\n   \/\/ text(`Total length (len): ${totalLength}`, 20, 40);\n    text(`Confidence interval \u00b1 ${x_variation}`, 20, height-20);\n   \/\/ text(`Number of particles = ${numParticles}`, 20, height-20);\n   \/\/ text(`Thickness of particles: ${thick}`, 20, 100);\n}\n\nfunction keyPressed() {\n      if (key.toLowerCase() === &#039;g&#039;) {\n        restartSimulation();\n    }\n    \/\/if (key === &#039; &#039;) isPaused = !isPaused;\n  \n  \/\/number of particles\n    \/\/  if (key.toLowerCase() === &#039;q&#039;) changeNumParticles(numParticles - 3);\n  \/\/  if (key.toLowerCase() === &#039;w&#039;) changeNumParticles(numParticles + 3);\n  \n  \/*\n  \/\/length of segments\n    if (key.toLowerCase() === &#039;a&#039;) {\n        totalLength = constrain(totalLength - 5, 5, 50);\n        updateAllSegmentLengths();\n    }\n    if (key.toLowerCase() === &#039;s&#039;) {\n        totalLength = constrain(totalLength + 5, 5, 50);\n        updateAllSegmentLengths();\n    }\n  \n  \/\/number of vertexes\n    if (key.toLowerCase() === &#039;k&#039;) updateAllVertices(n - 1);\n    if (key.toLowerCase() === &#039;l&#039;) updateAllVertices(n + 1);\n   \n  \/\/thickness\n    if (key.toLowerCase() === &#039;z&#039;) thick = constrain(thick - .5, .5, 20);\n    if (key.toLowerCase() === &#039;x&#039;) thick = constrain(thick + .5, .5, 20);\n*\/\n  \/\/confidence interval\n        if (key.toLowerCase() === &#039;o&#039;) {\n        x_variation = constrain(x_variation - 2, 0, 40);\n        updateAllSegmentLengths();\n    } \n      if (key.toLowerCase() === &#039;p&#039;) {\n        x_variation = constrain(x_variation + 2, 0, 40);\n        updateAllSegmentLengths();\n    }\n   \n}\n\nfunction restartSimulation() {\n    particles = [];\n    initializeParticles();\n}\n\nfunction initializeParticles() {\n    for (let i = 0; i &lt; numParticles; i++) {\n        particles.push(new Particle(width\/2, height\/2));\n    }\n}\n\n\nfunction updateAllVertices(newNumVertices) {\n    newNumVertices = constrain(newNumVertices, 2, 300);\n    for (let p of particles) {\n        p.updateVertices(newNumVertices);\n    }\n    n = newNumVertices;\n    updateAllSegmentLengths();\n}\n\nfunction updateAllSegmentLengths() {\n    for (let p of particles) {\n        p.updateSegmentLengths();\n    }\n}\n\nfunction changeNumParticles(newNumParticles) {\n    newNumParticles = constrain(newNumParticles, 1, 100000);\n    if (newNumParticles &gt; numParticles) {\n        for (let i = numParticles; i &lt; newNumParticles; i++) {\n            particles.push(new Particle(random(width), random(height)));\n        }\n    } else {\n        particles = particles.slice(0, newNumParticles);\n    }\n    numParticles = newNumParticles;\n}\n\nclass Particle {\n    constructor(x, y) {\n        this.position = createVector(x, y);\n        this.velocity = p5.Vector.random2D().mult(0.5);\n        this.randomAngles = Array.from({ length: n }, () =&gt; random(-PI \/ 4, PI \/ 4));\n        this.baseSegmentLengths = Array.from({ length: n }, () =&gt; totalLength \/ n);\n        this.currentSegmentLengths = Array(n).fill(0);\n        this.rotation = random(TWO_PI);\n        this.rotationSpeed = random(-0.01, 0.01);\n        this.applyXVariation();\n    }\n\n    applyXVariation() {\n        let cumulativeLength = 0;\n        for (let i = 0; i &lt; this.baseSegmentLengths.length; i++) {\n            let smoothVariation = random(-x_variation \/ 2, x_variation \/ 2);\n            let newLength = max(this.baseSegmentLengths[i] + smoothVariation, this.baseSegmentLengths[i] * 0.5);\n            this.currentSegmentLengths[i] = newLength;\n            cumulativeLength += newLength;\n            if (cumulativeLength &gt; totalLength) {\n                this.currentSegmentLengths[i] = totalLength - (cumulativeLength - newLength);\n                break;\n            }\n        }\n    }\n\n    updateSegmentLengths() {\n        let baseSegmentLength = totalLength \/ this.randomAngles.length;\n        this.baseSegmentLengths.fill(baseSegmentLength);\n        this.applyXVariation();\n    }\n\n    updateVertices(newNumVertices) {\n        if (newNumVertices &gt; this.randomAngles.length) {\n            for (let i = this.randomAngles.length; i &lt; newNumVertices; i++) {\n                this.randomAngles.push(random(-PI \/ 4, PI \/ 4));\n                this.baseSegmentLengths.push(totalLength \/ newNumVertices);\n                this.currentSegmentLengths.push(0.0);\n            }\n        } else {\n            this.randomAngles.length = newNumVertices;\n            this.baseSegmentLengths.length = newNumVertices;\n            this.currentSegmentLengths.length = newNumVertices;\n        }\n        this.updateSegmentLengths();\n    }\n\n    applyNoise() {\n        let nX = noise(this.position.x * 0.01, this.position.y * 0.01, frameCount * 0.01);\n        let nY = noise(this.position.x * 0.01 + 100, this.position.y * 0.01 + 100, frameCount * 0.01);\n        this.velocity.add(sin(map(nX, 0, 1, -PI \/ 8, PI \/ 8)) * 0.5, sin(map(nY, 0, 1, -PI \/ 8, PI \/ 8)) * 0.5);\n        this.velocity.limit(2);\n    }\n\n    update() {\n        this.position.add(this.velocity);\n        this.position.x = (this.position.x + width) % width;\n        this.position.y = (this.position.y + height) % height;\n        this.rotation += this.rotationSpeed;\n    }\n\n    display() {\n        noFill();\n        stroke(255);\n        strokeWeight(thick);\n        push();\n        translate(this.position.x, this.position.y);\n        rotate(this.rotation);\n        beginShape();\n        let angle = 0;\n        let x = 0, y = 0;\n        for (let i = 0; i &lt; this.randomAngles.length; i++) {\n            angle += this.randomAngles[i];\n            x += cos(angle) * this.currentSegmentLengths[i];\n            y += sin(angle) * this.currentSegmentLengths[i];\n            vertex(x, y);\n        }\n        endShape();\n        pop();\n    }\n}\n&lt;\/script&gt;&lt;style&gt;body{margin: 0; padding: 0;}&lt;\/style&gt;\"><\/iframe><\/div><\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h3 class=\"wp-block-heading\">Confidence interval<\/h3>\n\n\n\n<p>To interact click on the black canvas<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Press<strong> G<\/strong> to restart the script<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Press<strong> O<\/strong> to increase the confidence interval<\/li>\n\n\n\n<li>Press<strong> P<\/strong> to decrease the confidence interval<\/li>\n<\/ul>\n<\/div>\n<\/div>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><div class=\"wp-block-cgb-block-p5js\"><iframe srcdoc=\"&lt;script src=&quot;https:\/\/intra.projects.unibz.it\/wp-content\/plugins\/wp-p5js-block\/assets\/js\/p5.min.js&quot;&gt;&lt;\/script&gt;&lt;script&gt;let numParticles = 1;\nlet particles = [];\nlet n = 3;  \/\/ Number of vertices for the zig5zag line (modifiable)\nlet totalLength = 120;  \/\/ Total length of the zig-zag line (modifiable)\nlet x_variation = 0;  \/\/ \u00b1 x variation for segment lengths\nlet thick = 3;\nlet isPaused = false;\n\nfunction setup() {\n    createCanvas(400, 400);\n    for (let i = 0; i &lt; numParticles; i++) {\n        particles.push(new Particle(width\/2, height\/2));\n    }\n    frameRate(24);\n      strokeJoin(ROUND);\n}\n\nfunction draw() {\n    if (!isPaused) {\n        background(0);\n        for (let p of particles) {\n            p.applyNoise();\n            p.update();\n            p.display();\n        }\n    }\nnoStroke();\n    fill(255);\n    textSize(16);\n    textFont(&#039;Courier New&#039;, 15);\n\n  \n    text(`Number of vertices = ${n}`, 20, height-40);\n    text(`Total length = ${totalLength}`, 20, height-20);\n    \/\/text(`\u00b1 x variation: ${x_variation}`, 20, 60);\n    \/\/text(`Number of particles = ${numParticles}`, 20, height-20);\n   \/\/ text(`Thickness of particles: ${thick}`, 20, 100);\n}\n\nfunction keyPressed() {\n    if (key.toLowerCase() === &#039;g&#039;) {\n        restartSimulation();\n    }\n  \n    \/\/if (key === &#039; &#039;) isPaused = !isPaused;\n  \n  \/\/number of particles\n \/\/     if (key.toLowerCase() === &#039;q&#039;) changeNumParticles(numParticles - 3);\n  \/\/  if (key.toLowerCase() === &#039;w&#039;) changeNumParticles(numParticles + 3);\n  \n \n  \/\/length of segments\n    if (key.toLowerCase() === &#039;a&#039;) {\n        totalLength = constrain(totalLength - 5, 5, 500);\n        updateAllSegmentLengths();\n    }\n    if (key.toLowerCase() === &#039;s&#039;) {\n        totalLength = constrain(totalLength + 5, 5, 500);\n        updateAllSegmentLengths();\n    }\n  \n  \/\/number of vertexes\n    if (key.toLowerCase() === &#039;k&#039;) updateAllVertices(n - 1);\n    if (key.toLowerCase() === &#039;l&#039;) updateAllVertices(n + 1);\n   \n  \n   \/*\n  \n  \/\/thickness\n    if (key.toLowerCase() === &#039;z&#039;) thick = constrain(thick - .5, .5, 20);\n    if (key.toLowerCase() === &#039;x&#039;) thick = constrain(thick + .5, .5, 20);\n\n  \/\/variation\n        if (key.toLowerCase() === &#039;n&#039;) {\n        x_variation = constrain(x_variation - 2, 0, 50);\n        updateAllSegmentLengths();\n    }\n      if (key.toLowerCase() === &#039;m&#039;) {\n        x_variation = constrain(x_variation + 2, 0, 50);\n        updateAllSegmentLengths();\n    }\n    *\/\n}\n\nfunction restartSimulation() {\n    particles = [];\nn = 3;  \/\/ Number of vertices for the zig5zag line (modifiable)\ntotalLength = 120;  \/\/ Total length of the zig-zag line (modifiable)\n    initializeParticles();\n}\n\nfunction initializeParticles() {\n    for (let i = 0; i &lt; numParticles; i++) {\n        particles.push(new Particle(width\/2, height\/2));\n    }\n}\n\nfunction updateAllVertices(newNumVertices) {\n    newNumVertices = constrain(newNumVertices, 2, 300);\n    for (let p of particles) {\n        p.updateVertices(newNumVertices);\n    }\n    n = newNumVertices;\n    updateAllSegmentLengths();\n}\n\nfunction updateAllSegmentLengths() {\n    for (let p of particles) {\n        p.updateSegmentLengths();\n    }\n}\n\nfunction changeNumParticles(newNumParticles) {\n    newNumParticles = constrain(newNumParticles, 1, 100000);\n    if (newNumParticles &gt; numParticles) {\n        for (let i = numParticles; i &lt; newNumParticles; i++) {\n            particles.push(new Particle(width\/2, height\/2));\n        }\n    } else {\n        particles = particles.slice(0, newNumParticles);\n    }\n    numParticles = newNumParticles;\n}\n\nclass Particle {\n    constructor(x, y) {\n        this.position = createVector(x, y);\n        this.velocity = p5.Vector.random2D().mult(0);\n        this.randomAngles = Array.from({ length: n }, () =&gt; random(-PI \/ 4, PI \/ 4));\n        this.baseSegmentLengths = Array.from({ length: n }, () =&gt; totalLength \/ n);\n        this.currentSegmentLengths = Array(n).fill(0);\n        this.rotation = random(TWO_PI);\n        this.rotationSpeed = random(0, 0);\n        this.applyXVariation();\n    }\n\n    applyXVariation() {\n        let cumulativeLength = 0;\n        for (let i = 0; i &lt; this.baseSegmentLengths.length; i++) {\n            let smoothVariation = random(-x_variation \/ 2, x_variation \/ 2);\n            let newLength = max(this.baseSegmentLengths[i] + smoothVariation, this.baseSegmentLengths[i] * 0.5);\n            this.currentSegmentLengths[i] = newLength;\n            cumulativeLength += newLength;\n            if (cumulativeLength &gt; totalLength) {\n                this.currentSegmentLengths[i] = totalLength - (cumulativeLength - newLength);\n                break;\n            }\n        }\n    }\n\n    updateSegmentLengths() {\n        let baseSegmentLength = totalLength \/ this.randomAngles.length;\n        this.baseSegmentLengths.fill(baseSegmentLength);\n        this.applyXVariation();\n    }\n\n    updateVertices(newNumVertices) {\n        if (newNumVertices &gt; this.randomAngles.length) {\n            for (let i = this.randomAngles.length; i &lt; newNumVertices; i++) {\n                this.randomAngles.push(random(-PI \/ 4, PI \/ 4));\n                this.baseSegmentLengths.push(totalLength \/ newNumVertices);\n                this.currentSegmentLengths.push(0.0);\n            }\n        } else {\n            this.randomAngles.length = newNumVertices;\n            this.baseSegmentLengths.length = newNumVertices;\n            this.currentSegmentLengths.length = newNumVertices;\n        }\n        this.updateSegmentLengths();\n    }\n\n    applyNoise() {\n        let nX = noise(this.position.x * 0, this.position.y * 0, frameCount * 0);\n        let nY = noise(this.position.x * 0 + 100, this.position.y * 0 + 100, frameCount * 0);\n        this.velocity.add(sin(map(nX, 0, 1, -PI \/ 8, PI \/ 8)) * 0, sin(map(nY, 0, 1, -PI \/ 8, PI \/ 8)) * 0);\n        this.velocity.limit(2);\n    }\n\n    update() {\n        this.position.add(this.velocity);\n        this.position.x = (this.position.x + width) % width;\n        this.position.y = (this.position.y + height) % height;\n        this.rotation += this.rotationSpeed;\n    }\n\n    display() {\n        noFill();\n        stroke(255);\n        strokeWeight(thick);\n        push();\n        translate(this.position.x, this.position.y);\n        rotate(this.rotation);\n        beginShape();\n        let angle = 0;\n        let x = 0, y = 0;\n        for (let i = 0; i &lt; this.randomAngles.length; i++) {\n            angle += this.randomAngles[i];\n            x += cos(angle) * this.currentSegmentLengths[i];\n            y += sin(angle) * this.currentSegmentLengths[i];\n            vertex(x, y);\n        }\n        endShape();\n        pop();\n    }\n}\n&lt;\/script&gt;&lt;style&gt;body{margin: 0; padding: 0;}&lt;\/style&gt;\"><\/iframe><\/div><\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h3 class=\"wp-block-heading\">Particle length &amp; number of vertices<\/h3>\n\n\n\n<p>To interact click on the black canvas<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Press <strong>G<\/strong> to restart the script<\/li>\n<\/ul>\n\n\n\n<p><strong>Particle length<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Press<strong> S<\/strong> to increase the length of the particle<\/li>\n\n\n\n<li>Press <strong>A<\/strong> to decrease the length of the particle<\/li>\n<\/ul>\n\n\n\n<p><strong>Number of vertices<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Press L<\/strong> to increase the number of vertexes<\/li>\n\n\n\n<li><strong>Press K<\/strong> to decrease the number of vertexes<\/li>\n<\/ul>\n<\/div>\n<\/div>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><div class=\"wp-block-cgb-block-p5js\"><iframe srcdoc=\"&lt;script src=&quot;https:\/\/intra.projects.unibz.it\/wp-content\/plugins\/wp-p5js-block\/assets\/js\/p5.min.js&quot;&gt;&lt;\/script&gt;&lt;script&gt;let numParticles = 1;\nlet particles = [];\nlet n = 20;  \/\/ Number of vertices for the zig5zag line (modifiable)\nlet totalLength = 200;  \/\/ Total length of the zig-zag line (modifiable)\nlet x_variation = 0;  \/\/ \u00b1 x variation for segment lengths\nlet thick = 3;\nlet isPaused = false;\n\nfunction setup() {\n    createCanvas(400, 400);\n    for (let i = 0; i &lt; numParticles; i++) {\n        particles.push(new Particle(width\/2, height\/2));\n    }\n    strokeJoin(ROUND);\n    frameRate(24);\n}\n\nfunction draw() {\n\n\n    if (!isPaused) {\n        background(0);\n        for (let p of particles) {\n            p.applyNoise();\n            p.update();\n            p.display();\n        }\n    }\nnoStroke();\n    fill(255);\n    textSize(16);\n    textFont(&#039;Courier New&#039;, 15);\n\n  \n   \/\/ text(`Number of vertices = ${n}`, 20, height-40);\n    \/\/text(`Total length = ${totalLength}`, 20, height-20);\n    \/\/text(`\u00b1 x variation: ${x_variation}`, 20, 60);\n    \/\/text(`Number of particles = ${numParticles}`, 20, height-20);\n    text(`Thickness = ${thick}`,20, height-20);\n}\n\nfunction keyPressed() {\n      if (key.toLowerCase() === &#039;g&#039;) {\n        restartSimulation();\n    }\n    \/\/if (key === &#039; &#039;) isPaused = !isPaused;\n  \n  \/\/number of particles\n \/\/     if (key.toLowerCase() === &#039;q&#039;) changeNumParticles(numParticles - 3);\n  \/\/  if (key.toLowerCase() === &#039;w&#039;) changeNumParticles(numParticles + 3);\n  \n   \/*\n  \/\/length of segments\n    if (key.toLowerCase() === &#039;a&#039;) {\n        totalLength = constrain(totalLength - 5, 5, 500);\n        updateAllSegmentLengths();\n    }\n    if (key.toLowerCase() === &#039;s&#039;) {\n        totalLength = constrain(totalLength + 5, 5, 500);\n        updateAllSegmentLengths();\n    }\n  \n  \/\/number of vertexes\n    if (key.toLowerCase() === &#039;k&#039;) updateAllVertices(n - 1);\n    if (key.toLowerCase() === &#039;l&#039;) updateAllVertices(n + 1);\n   \n  \n  *\/\n  \n  \/\/thickness\n    if (key.toLowerCase() === &#039;z&#039;) thick = constrain(thick - 1, 1, 30);\n    if (key.toLowerCase() === &#039;x&#039;) thick = constrain(thick + 1, 1, 30);\n    \n\/*\n  \/\/variation\n        if (key.toLowerCase() === &#039;n&#039;) {\n        x_variation = constrain(x_variation - 2, 0, 50);\n        updateAllSegmentLengths();\n    }\n      if (key.toLowerCase() === &#039;m&#039;) {\n        x_variation = constrain(x_variation + 2, 0, 50);\n        updateAllSegmentLengths();\n    }\n    *\/\n   \n}\n\nfunction restartSimulation() {\n    particles = [];\nthick = 3;\n    initializeParticles();\n}\n\nfunction initializeParticles() {\n    for (let i = 0; i &lt; numParticles; i++) {\n        particles.push(new Particle(width\/2, height\/2));\n    }\n}\n\nfunction updateAllVertices(newNumVertices) {\n    newNumVertices = constrain(newNumVertices, 2, 300);\n    for (let p of particles) {\n        p.updateVertices(newNumVertices);\n    }\n    n = newNumVertices;\n    updateAllSegmentLengths();\n}\n\nfunction updateAllSegmentLengths() {\n    for (let p of particles) {\n        p.updateSegmentLengths();\n    }\n}\n\nfunction changeNumParticles(newNumParticles) {\n    newNumParticles = constrain(newNumParticles, 1, 100000);\n    if (newNumParticles &gt; numParticles) {\n        for (let i = numParticles; i &lt; newNumParticles; i++) {\n            particles.push(new Particle(width\/2, height\/2));\n        }\n    } else {\n        particles = particles.slice(0, newNumParticles);\n    }\n    numParticles = newNumParticles;\n}\n\nclass Particle {\n    constructor(x, y) {\n        this.position = createVector(x, y);\n        this.velocity = p5.Vector.random2D().mult(0);\n        this.randomAngles = Array.from({ length: n }, () =&gt; random(-PI \/ 4, PI \/ 4));\n        this.baseSegmentLengths = Array.from({ length: n }, () =&gt; totalLength \/ n);\n        this.currentSegmentLengths = Array(n).fill(0);\n        this.rotation = random(TWO_PI);\n        this.rotationSpeed = random(0, 0);\n        this.applyXVariation();\n    }\n\n    applyXVariation() {\n        let cumulativeLength = 0;\n        for (let i = 0; i &lt; this.baseSegmentLengths.length; i++) {\n            let smoothVariation = random(-x_variation \/ 2, x_variation \/ 2);\n            let newLength = max(this.baseSegmentLengths[i] + smoothVariation, this.baseSegmentLengths[i] * 0.5);\n            this.currentSegmentLengths[i] = newLength;\n            cumulativeLength += newLength;\n            if (cumulativeLength &gt; totalLength) {\n                this.currentSegmentLengths[i] = totalLength - (cumulativeLength - newLength);\n                break;\n            }\n        }\n    }\n\n    updateSegmentLengths() {\n        let baseSegmentLength = totalLength \/ this.randomAngles.length;\n        this.baseSegmentLengths.fill(baseSegmentLength);\n        this.applyXVariation();\n    }\n\n    updateVertices(newNumVertices) {\n        if (newNumVertices &gt; this.randomAngles.length) {\n            for (let i = this.randomAngles.length; i &lt; newNumVertices; i++) {\n                this.randomAngles.push(random(-PI \/ 4, PI \/ 4));\n                this.baseSegmentLengths.push(totalLength \/ newNumVertices);\n                this.currentSegmentLengths.push(0.0);\n            }\n        } else {\n            this.randomAngles.length = newNumVertices;\n            this.baseSegmentLengths.length = newNumVertices;\n            this.currentSegmentLengths.length = newNumVertices;\n        }\n        this.updateSegmentLengths();\n    }\n\n    applyNoise() {\n        let nX = noise(this.position.x * 0, this.position.y * 0, frameCount * 0);\n        let nY = noise(this.position.x * 0 + 100, this.position.y * 0 + 100, frameCount * 0);\n        this.velocity.add(sin(map(nX, 0, 1, -PI \/ 8, PI \/ 8)) * 0, sin(map(nY, 0, 1, -PI \/ 8, PI \/ 8)) * 0);\n        this.velocity.limit(2);\n    }\n\n    update() {\n        this.position.add(this.velocity);\n        this.position.x = (this.position.x + width) % width;\n        this.position.y = (this.position.y + height) % height;\n        this.rotation += this.rotationSpeed;\n    }\n\n    display() {\n        noFill();\n        stroke(255);\n        strokeWeight(thick);\n        push();\n        translate(this.position.x, this.position.y);\n        rotate(this.rotation);\n        beginShape();\n        let angle = 0;\n        let x = 0, y = 0;\n        for (let i = 0; i &lt; this.randomAngles.length; i++) {\n            angle += this.randomAngles[i];\n            x += cos(angle) * this.currentSegmentLengths[i];\n            y += sin(angle) * this.currentSegmentLengths[i];\n            vertex(x, y);\n        }\n        endShape();\n        pop();\n    }\n}\n&lt;\/script&gt;&lt;style&gt;body{margin: 0; padding: 0;}&lt;\/style&gt;\"><\/iframe><\/div><\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h3 class=\"wp-block-heading\">Particle thickness<\/h3>\n\n\n\n<p>To interact click on the black canvas<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Press<strong> G<\/strong> to restart the script<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Press<strong> Z<\/strong> to increase the particle thickness<\/li>\n\n\n\n<li>Press<strong> X<\/strong> to decrease the particle thickness<\/li>\n<\/ul>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Microfibre Cloud Generator Processing script, originally written in Java (here revised in with P5js, in Javascript) to visualise microfibre areal release.&nbsp;It is ideal to create data visualisation and live-projections. It is inspired by the data published on the paper of De Falco et al. about microfibre areal release of garment through everyday use, and is visually inspired to the project Plastic Air by Giorgia Lupi. A green blouse, a blue t-shirt, a black dress, a pink sweatshirt. Which releases more microfibres to air? If you want to make your own visualisation you can create it below, you can also save [&hellip;]<\/p>\n","protected":false},"author":8,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-380","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/intra.projects.unibz.it\/index.php?rest_route=\/wp\/v2\/pages\/380","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/intra.projects.unibz.it\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/intra.projects.unibz.it\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/intra.projects.unibz.it\/index.php?rest_route=\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/intra.projects.unibz.it\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=380"}],"version-history":[{"count":47,"href":"https:\/\/intra.projects.unibz.it\/index.php?rest_route=\/wp\/v2\/pages\/380\/revisions"}],"predecessor-version":[{"id":457,"href":"https:\/\/intra.projects.unibz.it\/index.php?rest_route=\/wp\/v2\/pages\/380\/revisions\/457"}],"wp:attachment":[{"href":"https:\/\/intra.projects.unibz.it\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=380"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}