View main.js
var html = require('yo-yo')
var root = document.body.appendChild(document.createElement('div'))
var state = { n: 0 }
update()
function update () {
html.update(root, html`<div>
<h1>${state.n} clicks</h1>
<div>
<button onclick=${onclick}>click</button>
View vector-globe.md

making a vector globe

when you're done, it should look like this:

install some commands if you don't already have them:

View main.js
{
"scripts": {
"watch": "budo main.js"
},
"browserify": {
"transform": [ "glslify" ]
}
}
View show.js
var level = require('level')
var db = level('log1')
var hyperlog = require('hyperlog')
var log = hyperlog(db, { valueEncoding: 'json' })
var through = require('through2')
var pump = require('pump')
pump(log.createReadStream(), through.obj(write))
function write (row, enc, next) {
View globe.js
var regl = require('regl')()
var camera = require('regl-camera')(regl, {
minDistance: 1, distance: 3 //, phi: -Math.PI/2
})
var mat4 = require('gl-mat4')
var icosphere = require('icosphere')
//var scoords = require('varying-spherical-coordinates')
var glsl = require('glslify')
//var resl = require('resl')
View index.glsl
vec3 uv_to_xyz (vec2 uv) {
return vec3(
sin(uv.x)*cos(uv.y),
sin(uv.y),
cos(uv.x)*cos(uv.y)
);
}
#pragma glslify: export(uv_to_xyz)
View build.sh
#!/bin/bash
if test "$1" == 'watch'; then
drmark -t glslify -t multi-regl-transform --deferred -wvd --live \
-i index.md -o "./wrap.sh > index.html"
else
drmark -t glslify -t multi-regl-transform --deferred \
-i index.md -o "./wrap.sh > index.html"
fi
View cmd.sh
#!/bin/bash
dir=$(readlink -f $(dirname `readlink -f $0`))
budo $* -- -r $dir/regl.js:regl
View regl.js
var regl = require('regl')()
var camera = require('regl-camera')(regl, {
distance: 5
})
var bunny = require('bunny')
var mat4 = require('gl-mat4')
var anormals = require('angle-normals')
var draw = { cool: cool(regl) }
regl.frame(function () {
View main.js
var regl = require('regl')()
var fs = require('fs')
var snoise = fs.readFileSync(require.resolve('glsl-noise/simplex/3d.glsl'),'utf8')
var cnoise = fs.readFileSync(require.resolve('glsl-curl-noise/curl.glsl'),'utf8')
var sphereMesh = require('sphere-mesh')
var mat4 = require('gl-mat4')
var camera = require('regl-camera')(regl, {
center: [0,0,0],
distance: 4
})