New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Content proposal #6

Closed
maxwellito opened this Issue Jun 27, 2018 · 25 comments

Comments

Projects
None yet
2 participants
@maxwellito
Contributor

maxwellito commented Jun 27, 2018

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

This comment has been minimized.

Owner

tholman commented Jun 28, 2018

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

This comment has been minimized.

Contributor

maxwellito commented Jun 28, 2018

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

This comment has been minimized.

Owner

tholman commented Jun 28, 2018

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

This comment has been minimized.

Contributor

maxwellito commented Jun 28, 2018

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

This comment has been minimized.

Owner

tholman commented Jun 28, 2018

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

This comment has been minimized.

Contributor

maxwellito commented Jun 28, 2018

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

This comment has been minimized.

Owner

tholman commented Jun 28, 2018

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

This comment has been minimized.

Contributor

maxwellito commented Jun 28, 2018

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

This comment has been minimized.

Owner

tholman commented Jun 28, 2018

@tholman

This comment has been minimized.

Owner

tholman commented Jun 28, 2018

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

This comment has been minimized.

Contributor

maxwellito commented Jun 28, 2018

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

This comment has been minimized.

Owner

tholman commented Jun 28, 2018

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

@maxwellito

This comment has been minimized.

Contributor

maxwellito commented Jun 28, 2018

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

This comment has been minimized.

Owner

tholman commented Jun 28, 2018

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

@maxwellito

This comment has been minimized.

Contributor

maxwellito commented Jun 28, 2018

👍

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

This comment has been minimized.

Owner

tholman commented Jun 28, 2018

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

This comment has been minimized.

Contributor

maxwellito commented Jun 29, 2018

Yes sure :) With pleasure!

@maxwellito maxwellito referenced this issue Jun 29, 2018

Merged

Triangle mesh #7

@tholman

This comment has been minimized.

Owner

tholman commented Jun 29, 2018

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

This comment has been minimized.

Contributor

maxwellito commented Jun 29, 2018

@tholman

This comment has been minimized.

Owner

tholman commented Jun 30, 2018

Ok! Made a few little changes there, maxwellito#2 ... let me know what you think :)

@maxwellito

This comment has been minimized.

Contributor

maxwellito commented Jun 30, 2018

@tholman

This comment has been minimized.

Owner

tholman commented Jul 1, 2018

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

@tholman

This comment has been minimized.

Owner

tholman commented Jul 1, 2018

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

@tholman tholman closed this Jul 1, 2018

@maxwellito

This comment has been minimized.

Contributor

maxwellito commented Jul 1, 2018

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

This comment has been minimized.

Owner

tholman commented Jul 1, 2018

<3

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment