Skip to content

Commit

Permalink
adds timer
Browse files Browse the repository at this point in the history
  • Loading branch information
@OmerShapira
OmerShapira committed Jun 17, 2016
1 parent 68f32d8 commit f86987d
Show file tree
Hide file tree
Showing 4 changed files with 147 additions and 62 deletions.
50 changes: 32 additions & 18 deletions index.html
View file
Expand Up @@ -82,17 +82,21 @@

<script id="fs-Main" type="x-shader/x-fragment">
precision mediump float;

uniform sampler2D mainTex;
uniform sampler2D bg;
varying vec2 v_texCoord;
uniform vec2 screenResolution;

uniform float image_presence;

const float SPREAD_SIZE = 0.001;

void main()
{
vec2 uv = v_texCoord * 0.5;
vec2 uv_flip_norm = vec2(1.)- gl_FragCoord.xy / screenResolution.xy;
vec2 uv_norm = gl_FragCoord.xy / screenResolution.xy;
vec2 uv_norm_flipy = vec2(uv_norm.x, 1. - uv_norm.y);
float spread = 0.;
for (int j = -1 ; j <= 1; j++)
{
Expand All @@ -105,45 +109,55 @@
color.a = color.x;
color += spread * vec4(0.,0.,0.,1.);
color = clamp(color, vec4(0.), vec4(1.));
// vec3 bg_color = vec3(0.,0.,0.6);
// color.xyz = color.a * color.xyz + bg_color * (1. - color.a);
vec4 bg_imgcolor = texture2D(bg, uv_flip_norm);
vec3 bg_color = vec3(0.,0.,0.6);
vec3 bg_imgcolor = mix(bg_color, texture2D(bg, uv_norm_flipy).xyz, image_presence);
color.xyz = color.a * color.xyz + bg_imgcolor.xyz * (1. - color.a);
// color.xyz = bg_imgcolor.xyz;
color.a = 1.;
gl_FragColor = color;
}
</script>

<script src="js/main.js"> </script>
<script src="js/request.js"></script>
<script src="js/keys.js"></script>
<script src="js/timer.js"> </script>
<script src="js/main.js"> </script>

<script type="text/javascript">

RequestLocationFromRemoteService()
.then(JSON.parse, Error)
.then(x => Flickr.RequestSearchByLatLong(x.location.lat, x.location.lng))
.then(JSON.parse, Error)
.then(
x => {
.then(x => {
//select a photo randomly
let pic = x.photos.photo[Math.floor(Math.random() * x.photos.photo.length)]
return Flickr.RequestGetSizes(pic.id)
})
.then(JSON.parse, Error)
.then(
x => {
.then(x => {
let img_src = x.sizes.size[Math.max(x.sizes.size.length - 2, 0)].source
LoadTextureFromSource("bg", img_src, {"min" : gl.LINEAR, "mag": gl.LINEAR, "wrap": gl.CLAMP_TO_EDGE, "generateMipmap" : false})
LoadTextureFromSource("bg", img_src, {
"min" : gl.LINEAR,
"mag": gl.LINEAR,
"wrap": gl.CLAMP_TO_EDGE,
"generateMipmap" : false})
})
.then( x => {
BindTextureAt(textures["bg"], gl.TEXTURE_2D, 2)
let main = programs.get("Main")
WithProgram(main, () => {
gl.uniform1i(gl.getUniformLocation(main, "bg"), 2)
})
}, Error)

.then(x => {
BindTextureAt(textures["bg"], gl.TEXTURE_2D, 2)
}, Error)
//Wait for bind
.then(x => Timer.Count(2000))
//fade
.then(x => Timer.Count(500, (rel, abs, del, rem) => {
let pgm = programs.get("Main")
let val = Math.min(rel / 200., 1.)
WithProgram(pgm, () => {
gl.uniform1f(gl.getUniformLocation(pgm, "image_presence"), val)
})
}))




</script>
Expand Down
101 changes: 59 additions & 42 deletions js/main.js
View file
Expand Up @@ -72,18 +72,19 @@ function Start(gl)

//Set up uniforms

gl.useProgram(programs.get("FontSampler"))
gl.uniform1i(gl.getUniformLocation(programs.get("FontSampler"), "font"), 0)
WithProgram(programs.get("FontSampler"), () => {
gl.uniform1i(gl.getUniformLocation(programs.get("FontSampler"), "font"), 0)
})

gl.useProgram(programs.get("Main"))
gl.uniform1i(gl.getUniformLocation(programs.get("Main"), "mainTex"), 1)
WithProgram(programs.get("Main"), () => {
gl.uniform1i(gl.getUniformLocation(programs.get("Main"), "mainTex"), 1)
gl.uniform1i(gl.getUniformLocation(programs.get("Main"), "bg"), 2)
gl.uniform1f(gl.getUniformLocation(programs.get("Main"), "image_presence"), 0)
})


//Bind textures

gl.activeTexture(gl.TEXTURE0);
gl.bindTexture(gl.TEXTURE_2D, textures["unifont"]);

gl.activeTexture(gl.TEXTURE1)

var tex = CreateTexture(gl, {
"width": gl.drawingBufferWidth,
"height": gl.drawingBufferHeight,
Expand All @@ -94,12 +95,12 @@ function Start(gl)
framebufferTextures.set("Text", tex)
var fb = gl.createFramebuffer()
framebuffers.set("Text", fb)
gl.bindFramebuffer(gl.FRAMEBUFFER, fb)
gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, tex, 0)

WithFramebuffer (fb, () => {
gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, tex, 0)
})

gl.bindFramebuffer(gl.FRAMEBUFFER, null)
//set up drawing context


gl.clearColor(0,0,0,1)
gl.enable(gl.DEPTH_TEST)
Expand All @@ -112,29 +113,35 @@ function Start(gl)

function Update(gl, time)
{
Timer.Tick(time)

for (let pgm of programs.values())
{
gl.useProgram(pgm)
gl.uniform1f(gl.getUniformLocation(pgm, "time"), time);
WithProgram(pgm, () => {
gl.uniform1f(gl.getUniformLocation(pgm, "time"), time)
})
}

}

function Draw(gl, time)
{
gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffers.get("Text"))
function Draw(gl, time){

WithProgram(programs.get("FontSampler"), () => {
BindTextureAt(textures["unifont"], gl.TEXTURE_2D, 0)
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT)
gl.drawElements(gl.TRIANGLES, 6, gl.UNSIGNED_SHORT, 0)

BindTextureAt(textures["unifont"], gl.TEXTURE_2D, 0)

WithFramebuffer(framebuffers.get("Text"), () => {
WithProgram(programs.get("FontSampler"), () => {

gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT)
gl.drawElements(gl.TRIANGLES, 6, gl.UNSIGNED_SHORT, 0)

})
})

gl.bindFramebuffer(gl.FRAMEBUFFER, null)
BindTextureAt(framebufferTextures.get("Text"), gl.TEXTURE_2D, 1)
BindTextureAt(textures["bg"], gl.TEXTURE_2D, 2)

WithProgram(programs.get("Main"), () => {
BindTextureAt(textures["bg"], gl.TEXTURE_2D, 2)
BindTextureAt(framebufferTextures.get("Text"), gl.TEXTURE_2D, 1)
gl.clear(gl.COLOR_BUFFER_BIT, gl.DEPTH_BUFFER_BIT)
gl.drawElements(gl.TRIANGLES, 6, gl.UNSIGNED_SHORT, 0)
})
Expand All @@ -152,26 +159,29 @@ function Loop(time)
}

function LoadTextureFromSource(name, source, params)
{
return new Promise( (resolve, reject) => {
var img = new Image()
//TODO (OS): Make optional
img.crossOrigin = "anonymous"
img.onload = () =>
{
return new Promise( (resolve, reject) => {
var img = new Image()
//TODO (OS): Make optional
img.crossOrigin = "anonymous"
img.onload = () =>
{
params.pixels = img
//TODO (OS): This blocks too, need to async
let tex = CreateTexture(gl, params)
if (tex)
{
textures[name] = tex
resolve(tex);
}
else
{
params.pixels = img
//TODO (OS): This blocks too, need to async
let tex = CreateTexture(gl, params)
if (tex)
{
textures[name] = tex
resolve(tex);
}
else { reject (Error ("Couldn't Create Texture : " + name))}
reject ("Couldn't Create Texture : " + name)
}
img.src = source
})
}
img.src = source
})
}

function LoadAssets(gl, textures)
{
Expand Down Expand Up @@ -276,6 +286,13 @@ function WithProgram(pgm, func)
gl.useProgram(active)
}

function WithFramebuffer(fb, func)
{
gl.bindFramebuffer(gl.FRAMEBUFFER, fb)
func()
gl.bindFramebuffer(gl.FRAMEBUFFER, null)
}

function InitGLContext(canvas)
{
try
Expand Down
2 changes: 0 additions & 2 deletions js/request.js
View file
Expand Up @@ -56,9 +56,7 @@ function RequestLocationFromBrowser ()
var Flickr = {

// https://www.flickr.com/services/api/flickr.places.findByLatLon.html
// API_KEY : "d36ec994c888939b1153f43994b63789",
BASE_URL: "https://api.flickr.com/services/rest/?",
EPILOG: "&api_key=d36ec994c888939b1153f43994b63789&format=json",

RequestSearchByLatLong : function(lat, lng)
{
Expand Down
56 changes: 56 additions & 0 deletions js/timer.js
View file
@@ -0,0 +1,56 @@
Timer = (()=>{

let _subscribers = new Set()
let _time = 0

let time = () =>
{
if (_time <= 0) time = performance.now()
return _time
}

function _count(duration, update)
{
return new Promise( (resolve, reject) =>
{
// let _t = time()
//HACK (OS): Dunno why this doesn't work
let _t = _time
let _begin = _time
let end = _t + duration
let handle = _tick

function _tick(t)
{
//relative, absolute, delta, remain,
if (update)
{
update(t - _begin, t - _t, end - t)
}

_t = t

if (t >= end)
{
_subscribers.delete(handle)
resolve(t)
}
}
_subscribers.add(handle)
})
}

return {
Tick : (t) =>
{
_time = t
for (let sub of _subscribers)
{
sub(_time)
}
},
Count : _count
}

})()

0 comments on commit f86987d

Please sign in to comment.