rileyjshaw

I spent the weekend adding a new version with a web component export. Documentation is here[1]. A quick example:

  <shader-pad style="width: 320px; height: 480px">
    <img src="/trees.jpg" data-texture="u_trees" />
    <script type="x-shader/x-fragment">
      #version 300 es
      precision highp float;
      in vec2 v_uv;
      uniform float u_time;
      uniform sampler2D u_trees;
      out vec4 outColor;
      void main() {
        vec2 p = 2.0 * (v_uv - 0.5);
        float r = length(p);
        vec2 uv = 0.15 + v_uv * 0.7 + p * (0.1 + 0.025 * sin(u_time * 2.0)) * r;
        outColor = texture(u_trees, uv);
      }
    </script>
  </shader-pad>

---

[1] https://misery.co/shaderpad/docs/components/web-component/

Nice work! Great use of proxies for setting uniforms.

Great point; I wasn’t sure if anyone would see this post so I spent most of my time on the docs. I just added a few visual examples to the post. Thanks!

This is a great idea! ShaderPad should be able to wrap into a web component easily. I already export a React wrapper[1], so I can use a similar API for the web component.

Give me a few days and check back in.

[1] https://misery.co/shaderpad/docs/guides/react/

Thanks for posting this! Really appreciate everyone’s comments.

Universe says go to bed :P

Great catch - thanks for taking the time to let me know! I just fixed the link.

“The managers tell us that the swimmers, crawlers, walkers, and fliers spent their lives working in order to eat. These managers are broadcasting their news too soon. The varied beings haven’t all been exterminated yet. You, reader, have only to mingle with them, or just watch them from a distance, to see that their waking lives are filled with dances, games, and feasts. Even the hunt, the stalking and feinting and leaping, is not what we call Work, but what we call Fun. The only beings who work are inmates like us.”

- Fredy Perlman, Against Leviathan

Cool, thanks! Happy to have helped out. A little section on the site under About and on the README should be fine :)

Love the examples on this page!

As the author of Terra, I'm surprised to see how similar the API for cellauto is... and by that I mean it's nearly identical :-P sanojian, were you aware of Terra while writing this?

Thanks for posting! Glad you liked it :)

The hints are fantastic

Thanks!!

It was actually inspired by this[1] awesome demo by Fabrizio Bianchi, among other things. There's a list of papers in the repo under REFERENCES.md[2].

[^1]: http://codepen.io/fbrz/pen/Hgqmd/

[^2]: https://github.com/rileyjshaw/tappy/blob/master/REFERENCES.m...

Ooh! Awesome :)

I've got some similar demos for rileyjshaw.com/terra that I haven't thrown up yet, I'll see if I get a chance to this week. One fun advantage of doing this in Terra is that it supports periodic boundaries (meaning that there aren't any "safe" edges)

Fantastic!! High-quality educational videos like this are hard to come by. Here's another retro tutorial that really stands out in my memory (differential gears): http://youtu.be/K4JhruinbWc?t=1m40s

I'd strongly prefer per-user, but maybe you could allow the choice at time of purchase?

I like the idea but the title's a bit misleading. For comparison, this article is over twice as long as the Git in 5 Minutes guide that you reference. I'm not trying to be snarky, I was just very surprised when I saw the article's length.

People searching for Git in X minutes might prefer a shorter preamble and a more expository form, like this: http://rogerdudler.github.io/git-guide/

/2¢

o______o

oh my. this is why one shouldn't do math at 4am.

:s/4.25/3.75

Here's how I solved it mathematically:

  Farmer 1 has 10 chickens.
  Farmer 2 has 16 chickens.
  Farmer 3 has 26 chickens.

  Price before lunch: x
  Price after lunch: y

  # of chickens sold before lunch by farmers 1, 2, 3: a, b, c

  Total earned by each farmer: $35

  x > y

  a > b > c

From this information, we know that:

  ax + (10 - a)y = bx + (16 - b)y = cx + (26 - c)y = 35

  ax + (10 - a)y = bx + (16 - b)y
  ax - ay + 10y + bx - by + 16y = 0
  (a - b)(x - y) = 6y

  (a - c)(x - y) = 16y

  (a - b) = (3 / 8)(a - c)

  (a - b) > 0
  (a - c) > 0

  a ≤ 10

  b ≥ 0
  c ≥ 0

Given all of this, 0 ≤ (a - b), (a - c) ≤ 10. The only numbers that satisfy this and,

  (a - b) = (3 / 8)(a - c)

  (a - b) = 3
  (a - c) = 8

  a = 10: {10, 7, 1}
  a = 9:  {9, 6, 1}
  a = 8:  {8, 5, 0}

  (a - b)(x - y) = 6y
  3(x - y) = 6y
  3x = 9y
  x = 3y

We've got a few equations that look like,

  ax + (10 - a)y = 35

  2ay + 10y = 35

So...

  y = $1.25
  x = $4.25

*This is assuming that they didn't decide to "sell" their chickens for $0 in the afternoon, which is probably a safe bet.

Edit: add intermediate steps for clarity

Loved this quote:

...this is exacerbated by the existence of this term "growth hacks"... whenever you hear anybody talk about "growth hacks", just mentally translate it... to "bullshit".

  Uncaught ReferenceError: React is not defined

Cool :) author here, thanks for posting this!

Sorry @kordless! That was just me being dumb and forgetting to push bugfixes. It should "just work" now :)

Actually, I've been thinking more about this and feel it's better to define creatures on the root terra object. Running the same simulation 100 times with slightly different starting conditions, for example, would require a new terrarium for each trial but creatures should be shared between..

The gang's all here..

I understand what you mean now. Are you able to make a pull request (or an issue) at https://github.com/rileyjshaw/terra? Pretty busy for the next few days but I'll try to get to it

It doesn't have to be global! Terra works as a module with most popular module systems. For example:

  var terra = require('./terra.min.js');

Good point! I just added a few lines to each to make them complete; if you include terra before running each example they should work now. Is this better?

Very cool! Let me know when you include it and I'll add a link to the page

Hahah glidr, nice