Content proposal

[maxwellito]

Hi Tim,

First, thanks for this project, I absolutely love it. The look and feel is brilliant too. I'm looking forward to your next posts.

I wanted to ask you if a post about how to build a map of random triangles would be interesting? I built a JS library to generate some but it's pretty basic to explain. The idea is to generate a perfect triangle grid, then use a bit of Math.random to move the points. You can see details on triangulr documentation (scroll until you see the two maps).

If you feel like it's interesting, I can try to make a PR with pictures following the same look and feel.

Thanks,
Max

[tholman]

Hey mate!

Yeah, I'd be all about that! I guess I'm trying not to use any libraries here, if you could put it in a tutorial the triangle gen, and the color stuff, perhaps keeping with the whites/greys color scheme. And then we could link out the library in the post as well.

I've been aiming to not really use many pictures in the posts, and generally have the code doing some drawing from an early stage.

[maxwellito]

Thanks for answering so quickly.
Of course no library. I mentioned mine to illustrate my idea, but I don't want to use it for the post. I also wanted to use just black lines, but you're probably right about using gray scale to fill triangles :)

[tholman]

Ahh awesome! Sounds great to me! Let me know if you need a hand with the tutorial markdown stuff, its definitely a little scrappy at the moment, but always improving!

[maxwellito]

YES! I don't wanted to disturb you at first, I wanted to find a solution by myself but I reached a point where I don't know what to do.

From what I see, the difference between dev and prod, is the snippets of code are pre-processed. It gently insert a .language-js that contain the code to add/insert/replace.
However at no point there's something in the build process that make this transformation. Do you do it manually?

Thanks for your help :)

[tholman]

Yeah, those are done manually. I want to make an easier way to automate it, but for the time being, thats been it. You can see in this file https://raw.githubusercontent.com/tholman/generative-artistry/master/content/tutorials/cubic-disarray.md what it looks like.

So, in the block below, I have the trigger, the action (replace, or insert) and the data-from / data-to which dictates how the information is injected into the editor.

Then the {{< highlight js "linenos=table,linenostart=1" >}} to highlight it in js and provide the line numbers.

<div class="tmd-trigger" data-from="0" data-action="replace" data-to="all">
{{< highlight js "linenos=table,linenostart=1" >}}
var canvas = document.querySelector('canvas');
var context = canvas.getContext('2d');
context.lineWidth = 2;

var size = window.innerWidth;

canvas.width = size;
canvas.height = size;

var squareSize = 40;
  
{{< / highlight >}}
</div>

If its easier, we could also do a quick call, I've been trying to work on the docs for this stuff, but it kinda evolves as I go.

[maxwellito]

Ermm.. I followed this syntax. But at no point highlight-js pick-up the code and render it.
Can you provide me more details about your manual process? Thanks :)

[tholman]

Ahh sorry.

I wonder if the problem is that I've got a global dependency on my laptop that should be actually in the project... chroma, or pygments perhaps.

Will have to check when I'm home, sorry bout this!

[maxwellito]

That might explain so many things 😅

I was looking through different highlighters to render the code and turn manually the following code

<div id="tmd-1" class="tmd-trigger" data-from="0" data-action="replace" data-to="all">
{{< highlight js "linenos=table,linenostart=1" >}}
var canvas = document.querySelector('canvas');
var context = canvas.getContext('2d');

var size = window.innerWidth;

canvas.width = size;
canvas.height = size;
 
{{< / highlight >}}
</div>

into

<div id="tmd-1" class="tmd-trigger" data-from="0" data-action="replace" data-to="all">
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><code class="language-js" data-lang="js"><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="lnt">5
</span><span class="lnt">6
</span><span class="lnt">7
</span><span class="lnt">8
</span><span class="lnt">9
</span></code></pre></td>
<td class="lntd">
<pre class="chroma"><code class="language-js" data-lang="js"><span class="kd">var</span> <span class="nx">canvas</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="s1">&#39;canvas&#39;</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">context</span> <span class="o">=</span> <span class="nx">canvas</span><span class="p">.</span><span class="nx">getContext</span><span class="p">(</span><span class="s1">&#39;2d&#39;</span><span class="p">);</span>

<span class="kd">var</span> <span class="nx">size</span> <span class="o">=</span> <span class="nb">window</span><span class="p">.</span><span class="nx">innerWidth</span><span class="p">;</span>

<span class="nx">canvas</span><span class="p">.</span><span class="nx">width</span> <span class="o">=</span> <span class="nx">size</span><span class="p">;</span>
<span class="nx">canvas</span><span class="p">.</span><span class="nx">height</span> <span class="o">=</span> <span class="nx">size</span><span class="p">;</span>
 
</code></pre></td></tr></table>
</div>
</div>
</div>

[tholman]

Rookie move from me there, will have it fixed up tonight ;)

[tholman]

Hmmm, there was the npm install vs brew install hugo step missed up, but I feel like you have hugo running correctly?

Whats your version, I'm on v0.42.1 darwin/amd64

[maxwellito]

Yes, I already had Hugo installed for a previous project. But it's an old one v0.26 darwin/amd64.
I noticed the package.json was.. missing.

[tholman]

Yeah, there is no package.json ... since hugo is easier to manage through brew. The updated package make any difference?

[maxwellito]

Ahhhhhh!! Tim, I'm so sorry. The update fixed everything. I really thought it was an extra plugin that would do all the magic, but no. So happy to see the canvas being alive. Sorry again, I should have started by that.

[tholman]

Not at all! I'll put something in the readme about the version too. We all win 💃

[maxwellito]

👍

However, your work on the updated editor and canvas along the scroll is absolute badass. The syntax is easy to understand and the effect is wonderful. I'm close to provide a first draft :)

[tholman]

Aw awesome! I'd love to have a chat with you when you're done, been trying to wrap up some documentation for a version of tutorial markdown for people to use separate of this website. 🙏

[maxwellito]

Yes sure :) With pleasure!

[tholman]

Amazing! Honestly, this is so cool to see someone else using this system!

I see a few problems caused by some of my tutorial markdowny bugs, and some of my lazy arounds that is causing you a couple of problems, going to fix that, and then have a few little ideas to make this cleaner.

Ahh, I love the shades of grey too, this is going to be great.

I'll do a pull request or two on yours this weekend, and we can walk our way towards publishing 💃

[maxwellito]

Happy to hear! You built an awesome system, it's really nice and easy to use. Glad you like the post. Looking forward to your PRs :-D

[tholman]

Ok! Made a few little changes there, https://github.com/maxwellito/generative-artistry/pull/2 ... let me know what you think :)

[maxwellito]

YAS! I'm AFK at the moment but will have a closer look once at home. Thanks for your PR :)

[tholman]

Awesome! Ya, weekend is for weekending, we're in no rush 💃

[tholman]

And there we have it! https://generativeartistry.com/tutorials/triangular-mesh/ awesome! 💃

[maxwellito]

YAS! Thanks Tim! That was awesome :)

PS: Great talk you gave at CSS conf in Berlin in 2015, it was my favorite of the day!

[tholman]

<3