lostintangent

Deep Sea Trench

This is demo compo posted on Tokyo Demo Fest 2018. https://github.com/r21nomi/TokyoDemoFest2018

A Pen by r21nomi on CodePen.

License.

lostintangent

<!-- See JS -->
<div>Tap for slow mo</div>

lostintangent

lines

A Pen by Dillon on CodePen.

License.

lostintangent

Hexagonal Truchet Tiles

A Pen by Ben Matthews on CodePen.

License.

lostintangent

<div class="wrapper">
    <svg class="frame" viewBox="0 0 530 380">
        <defs>
            <filter id="blackOutlineEffect">
            <feMorphology in="SourceAlpha" result="MORPH" operator="dilate" radius="2" />
            <feColorMatrix in="MORPH" result="WHITENED" type="matrix" values="0 0 0 0 0, 0 0 0 0 0, 0 0 0 0 0, 0 0 0 1 0"/>
            <feMerge>
                <feMergeNode in="WHITENED"/>
                <feMergeNode in="SourceGraphic"/>
            </feMerge>

lostintangent

Beach Crusin'

Drawn in Illustrator, created with SVG and Greensock. Learn how to animate this in my Skillshare course: https://skl.sh/2SgBfAR

A Pen by Alex Trost on CodePen.

License.

lostintangent

function App() {
  const { Renderer, Camera, Geometry, Program, Mesh, Vec2, Vec3, Color, GPGPU } = ogl;

  let renderer, gl, camera;
  let time, mouse, color1, color2;
  let points, positionB, velocityB;

  init();

  function init() {

lostintangent

<!--comments in JS-->
<script id="vertexShader" type="x-shader/x-vertex">
  varying vec2 v_uv;
void main() {
  v_uv = uv;
	gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.);
}
</script>
<!-- FragmentShader code here -->
<!-- // built from the tutorial https://www.youtube.com/watch?v=dhuigO4A7RY -->

lostintangent

<div id="controls"></div>

lostintangent

<!-- Contents -->
<div id="contents">
  <canvas id="canvas">This browser cannot use a canvas.</canvas>
</div>