https://jpcharalambosh.co/tags/texturing/ Recent content in Texturing on blog https://jpcharalambosh.co/papermod-cover.png https://jpcharalambosh.co/papermod-cover.png Hugo en Wed, 05 Jun 2024 20:08:45 -0500 https://jpcharalambosh.co/posts/platonic_cells/ Wed, 05 Jun 2024 20:08:45 -0500 https://jpcharalambosh.co/posts/platonic_cells/ <blockquote> <p>This demo illustrates new capabilities of the WebGL mode in the <a href="https://github.com/objetos/p5.quadrille.js/tree/next">next</a> major upcoming version of p5.quadrille.js, currently under development. It showcases how <a href="https://jpcharalambosh.co/posts/platonic/">Platonic solids</a> can be stored in quadrille cells and rendered using either immediate or retained mode with the <a href="https://github.com/VisualComputing/p5.platonic">p5.platonic</a> library.</p> </blockquote> <h1 id="platonic-cells">Platonic Cells</h1> <p>Platonic cells are cell functions (<code>cellFn</code>) that implement the filling of Platonic solid cells in a quadrille <code>game</code>.</p> <h2 id="retained-mode">Retained Mode</h2> <p>(<strong>mouse</strong> click to clear/add Platonic solids, drag to navigate; <strong>press</strong> <code>s</code> (or <code>c</code>) to save)<br> <iframe id="" style="width:525px; height:525px" srcdoc=" <!DOCTYPE html> <html> <head> <script src='https://cdn.jsdelivr.net/npm/p5@1.11.10/lib/p5.min.js'></script> <script src=https://cdn.jsdelivr.net/gh/VisualComputing/p5.platonic/p5.platonic.min.js></script> <script src=https://cdn.jsdelivr.net/gh/objetos/p5.quadrille.js/p5.quadrille.min.js></script> <script> `use strict` let cnv let game, solids let font let images = [] const r = 5, c = 5, l = Quadrille.cellLength function preload() { font = loadFont(&#39;noto_sans.ttf&#39;) for (let i = 1; i &lt;= 10; i&#43;&#43;) { images.push(loadImage(`p${i}.jpg`)) } } function setup() { cnv = createCanvas(r * l, c * l, WEBGL) solids = createQuadrille(r, c) const args = [l / 2, true, [&#39;yellow&#39;, &#39;blue&#39;, &#39;red&#39;, &#39;cyan&#39;, &#39;magenta&#39;, &#39;yellow&#39;]] visitQuadrille(solids, (row, col) =&gt; solids.fill(row, col, platonicGeometry(...args))) game = createQuadrille(5, 5) visitQuadrille(game, (row, col) =&gt; game.fill(row, col, random(images))) game.rand(15).rand(10, cellFn) } function draw() { background(&#39;Gold&#39;) drawQuadrille(game, { textFont: font, origin: CORNER, options: { origin: CENTER } }) } function cellFn({ row, col }) { push() background(&#39;black&#39;) stroke(&#39;lime&#39;) fill(&#39;blue&#39;) rotateX(millis() * 0.001) rotateY(millis() * 0.001) rotateZ(millis() * 0.001) model(solids.read(row, col)) pop() } function mouseClicked() { const row = game.mouseRow const col = game.mouseCol game.isEmpty(row, col) ? game.fill(row, col, cellFn) : game.clear(row, col) } function keyPressed() { key === &#39;s&#39; &amp;&amp; game.toImage(&#39;game.png&#39;, { textFont: font, origin: CORNER, options: { origin: CENTER } }) key === &#39;c&#39; &amp;&amp; save(cnv, &#39;platonic_cells.png&#39;) } const mouseWheel = () =&gt; false </script> </head> <body> </body> </html> " ></iframe> </p> https://jpcharalambosh.co/posts/game_of_life/ Sun, 08 Oct 2023 15:46:53 -0500 https://jpcharalambosh.co/posts/game_of_life/ <blockquote> <p>Before diving into development, thoroughly reading the <a href="https://objetos.github.io/p5.quadrille.js/">Quadrille API documentation</a> is key to efficient coding, preventing mistakes, and ensuring optimal performance. By acquainting yourself with the API&rsquo;s nuances, you set the stage for informed decision-making, seamless collaboration, and a smoother development journey.</p> </blockquote> <p>The following demo illustrates the <a href="https://en.wikipedia.org/wiki/Conway%27s_Game_of_Life">game of life</a> using a <a href="https://conwaylife.com/wiki/Pentadecathlon">pentadecathlon</a> pattern as its initial seed, rendered as a surface texture on p5 <a href="https://p5js.org/reference/#group-Shape">3D shapes</a> in <a href="https://p5js.org/reference/#/p5/WEBGL">WEBGL</a> mode:</p> <p>(mouse drag to navigate; [1..7] keys change shape, other keys reset)<br> <iframe id="" style="width:425px; height:425px" srcdoc=" <!DOCTYPE html> <html> <head> <script src='https://cdn.jsdelivr.net/npm/p5@1.11.10/lib/p5.min.js'></script> <script src=https://cdn.jsdelivr.net/gh/objetos/p5.quadrille.js/p5.quadrille.min.js></script> <script> `use strict`; Quadrille.cellLength = 20 let game, pattern let life let graphics let mode = 1 const shapes = { 1: () =&gt; plane(width, height), 2: () =&gt; sphere(100), 3: () =&gt; torus(100, 50), 4: () =&gt; box(200), 5: () =&gt; cylinder(100, 200, 24, 1, false, false), 6: () =&gt; cone(100, 200, 24, 1, false), 7: () =&gt; ellipsoid(100, 180) } function setup() { game = createQuadrille(20, 20) life = color(&#39;lime&#39;) pattern = createQuadrille(3, 16252911n, life) game = Quadrille.or(game, pattern, 6, 8) createCanvas(game.width * Quadrille.cellLength, game.height * Quadrille.cellLength, WEBGL) graphics = createGraphics(game.width * Quadrille.cellLength, game.height * Quadrille.cellLength) update() } function draw() { background(&#39;yellow&#39;) orbitControl() frameCount % 20 === 0 &amp;&amp; update() noStroke() shapes[mode] ? shapes[mode]() : shapes[1]() } function update() { const next = game.clone() visitQuadrille(game, (row, col) =&gt; { const order = game.ring(row, col).order game.isFilled(row, col) ? (order &lt; 3 || order &gt; 4) &amp;&amp; next.clear(row, col) : order === 3 &amp;&amp; next.fill(row, col, life) }) game = next graphics.background(&#39;blue&#39;) drawQuadrille(game, { graphics, outline: &#39;magenta&#39; }) texture(graphics) } function keyPressed() { mode = &#43;key game.clear() game = Quadrille.or(game, pattern, 6, 8) } </script> </head> <body> </body> </html> " ></iframe> </p>