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>

Let me know if you have any feedback, or if you make something cool with it!

---

[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

We're told that,

  x > y

and can logically deduce that,

  a > b > c

because otherwise, the farmers with less chickens would have no chance of making the same amount as the other farmer.*

From this information, we know that:

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

Let's isolate the first and second farmers here:

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

We can do the same between farmers 1 and 3:

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

These two formulas yield,

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

Since a > b > c,

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

Since farmer 1 only has 10 chickens,

  a ≤ 10

Since you can't sell negative chickens,

  b ≥ 0
  c ≥ 0

And since the problem isn't very interesting if the farmers are allowed to sell half-chickens, a, b, and c (and the difference between them) are integers.

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

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

are,

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

Since c ≥ 0 and a ≤ 10, we have three triplets to consider:

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

We can find the relationship between x and y from an earlier equation:

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

So the farmers reduced their price to a third of the original price during the afternoon. What a deal!

We've got a few equations that look like,

  ax + (10 - a)y = 35

Which we can now simplify to,

  2ay + 10y = 35

By plugging [10, 9, 8] into the above formula, the only value that gives us a proper dollar amount for y is a = 9.

So...

  y = $1.25
  x = $4.25

Reading through the G+ comments it looks like someone beat me to it, but I figured I'd share my solution anyway.

*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".