recentpopularlog in

robertogreco : webgl   6

Mapping Mountains · Mapzen
"I’ve been spending a lot of time over the mountains of Northern California lately. To view mountains from above is to journey through time itself: over ancient shorelines, the trails of glaciers, the marks of countless seasons, and the front lines of perpetual tectonic struggle. Fly with me now, on a tour through the world of elevation data:


If you see something above that looks like a lightning storm in a Gak factory, you’re in the right place. This is a “heightmap” of the area around Mount Diablo, about 30 miles to the east of San Francisco. The stripes correlate to constant elevations, but they’re not intended to be viewed in this way – the unusual coloring is the result of the way the data is “packed” into an RGBA image: each channel encodes a different order of magnitude, combining to form a 4-digit value in base-256.

The data originates from many sources, including those compiled by the USGS and released as part of The National Map of the United States. Mapzen is currently combining this data with other global datasources including ocean bathymetry, and tiling it for easy access through a tile server.

When “unpacked,” processed, and displayed with WebGL, this data can be turned into what you were maybe expecting to see:


This is a shaded terrain map, using tiled open-source elevation data, drawn in real time by your very own browser, and looking sweet.

We’re processing this data with a view toward custom real-time hillshading, terrain maps, and other elevation-adjacent analysis, suitable for use by (for instance) the Tangram map-rendering library.

Why, you ask, and how? I’m glad you asked. For the Why, come with me back through time, to the past."
peterrichartdson  2016  mapzen  maps  mapping  mountains  elevation  cartography  webgl  california  bayarea  mountdiablo  visualization 
march 2016 by robertogreco
Re-thinking reading on the Web — Truth Labs — Medium
"People have been reading and scrolling on the web longer than just about anything else! And at this point reading and scrolling (and the back button) should be respected as inherent attributes of the web (read: please stop scroll-jacking my websites).

Very early in the project we decided to preserve the natural document scroll and reading flow. We also established a small set of design principles that supported reading as the key tenet:

• Graphics should enhance, not displace the article text.
• Let readers read at their own pace.
• Use familiar design patterns for links and navigation.

Throughout the design process we found ourselves coming back to these principles often, both with the client and internally. There was a tendency to keep layering up the visuals so the reader could scan the article without actually reading it. We didn’t want to encourage that behavior so we focused on treating the graphics as supplements to rather than replacements for the copy."

"Putting it all together

After many rounds of iteration, finessing the details, and handful of fire drills, we’re proud to see our work out in the wild. In retrospect, we walked away with some key learnings:

Promote reading

The scroll interaction was something we prototyped meticulously upfront, and our test users found it to be intuitive.

We learned that in a situation where reading is the primary task, it’s best to let the user’s natural reading pace drive the visuals (as opposed to having the visuals drive the reading).

Use cinematic techniques

Designing for the web is a relatively new landscape. Because there are infinite approaches to solving a visual problem, it’s common to overlook tried and true techniques from more established mediums. We found that applying classic cinematic techniques enabled us to craft solid narratives.

Leverage real data

It was somewhat painful to find, massage and prep data for use in WebGL. We tried to “fake it” to save time, but ultimately came to terms with the fact that leveraging real data, no matter how tedious, always resulted in a better, weighty, respectable graphic. In the end, we learned it’s wise to start with the raw data rather than waste time trying to simulate it."
erikklimczak  reading  howweread  scrolling  2016  storyboarding  film  filmmaking  pacing  illustrations  matchcut  data  design  webdev  webgl  webdesign 
february 2016 by robertogreco
Chrome Experiments
"Chrome Experiments is a showcase of web experiments written by the creative coding community."
webdev  chrome  html5  webgl  mobile  webdesign 
august 2015 by robertogreco
"This is a gentle step-by-step guide through the abstract and complex universe of Fragment Shaders."

"The images above were made in different ways. The first one was made by Van Gogh's hand applying layer over layer of paint. It took him hours. The second was produced in seconds by the combination of four matrices of pixels: one for cyan, one for magenta, one for yellow and one for black. The key difference is that the second image is produced in a non-serial way (that means not step-by-step, but all at the same time).

This book is about the revolutionary computational technique, fragment shaders, that is taking digitally generated images to the next level. You can think of it as the equivalent of Gutenberg's press for graphics.

In the following chapters you will discover how incredibly fast and powerful this technique is and how to apply it to your professional and personal work.

Who is this book for?

This book is written for creative coders, game developers and engineers who have coding experience, a basic knowledge of linear algebra and trigonometry, and who want to take their work to an exciting new level of graphical quality. (If you want to learn how to code, I highly recommend you start with Processing and come back later when you are comfortable with it.)

This book will teach you how to use and integrate shaders into your projects, improving their performance and graphical quality. Because GLSL (OpenGL Shading Language) shaders compile and run on a variety of platforms, you will be able to apply what you learn here to any enviroment that uses OpenGL, OpenGL ES or WebGL. In other words, you will be able to apply and use your knowledge with Processing sketches, openFrameworks applications, Cinder interactive installations, Three.js websites or iOS/Android games.

What does this book cover?

This book will focus on the use of GLSL pixel shaders. First we'll define what shaders are; then we'll learn how to make procedural shapes, patterns, textures and animations with them. You'll learn the foundations of shading language and apply it to more useful scenarios such as: image processing (image operations, matrix convolutions, blurs, color filters, lookup tables and other effects) and simulations (Conway's game of life, Gray-Scott's reaction-diffusion, water ripples, watercolor effects, Voronoi cells, etc.). Towards the end of the book we'll see a set of advanced techniques based on Ray Marching.

There are interactive examples for you to play with in every chapter. When you change the code, you will see the changes immediately. The concepts can be abstract and confusing, so the interactive examples are essential to helping you learn the material. The faster you put the concepts into motion the easier the learning process will be."
patriciogonzalezvivo  jenlowe  fragmentshaders  books  glsl  opengl  webgl  processing  conwaysgameoflife  shaders  thebookofshaders 
march 2015 by robertogreco

Way to Go is an interactive experience for human beings between 5 and 105 years old. Maybe it lasts six minutes; maybe it lasts forever. Way to Go is ready for your web browser and willing to go VR, if you're Rift-y. It is like a grey squirrel balanced on a branch, fearless. Made by Vincent Morisset, Caroline Robert, Édouard Lanctôt-Benoit and the studio AATOAA, visionary creators of BLA BLA and Arcade Fire's award-winning Just A Reflektor. Produced by the National Film Board of Canada, co-produced by France Televisions, with a mesmerizing soundtrack by Philippe Lambert, it is a game and a solace and an alarm, a wake-up call to the hazards of today. At a moment when we have access to so much, and see so little, Way to Go will remind you of all that lies before you, within you, in the luscious, sudden pleasure of discovery.

Shorter Description

Way to Go is a walk in the woods. It is an astonishing interactive experience, a restless panorama, a mixture of hand-made animation, 360˚ video capture, music and dreaming and code; but mostly it is a walk in the woods, c'mon. Created by Vincent Morisset, Philippe Lambert, Édouard Lanctôt-Benoit & Caroline Robert (AATOAA). Produced by the NFB & France TV."


Yes, you are on your way.
It is not your first journey but Way to Go is the next journey before you. A walk through strange country - strange, familiar, remembered, forgotten. It is a restless panorama, a disappearing path, a game and a feeling. Way to Go is a small experience that gets bigger as you uncover it.
And the trees will change their shape, and the sky will widen.
And you will fly.
We go away every day. We plunge through the city, skate down roads, tunneling toward a destination without remembering the quests we are on. A journey is a collection of moments - we are here, we are here, we are here, and yet we miss these moments. A journey is a collection of choices - turn here, stop here, choose here, and yet we surrender these choices.
What if we quit surrendering? What if we didn't miss?
Here is a world enclosed in a screen. Here is an adventure. A landscape of leaves and wildflowers, teeming with hidden life. A garden and a wilderness, a wistful blink of dream. You are Jean Painlevé, Marco Polo, Maria Merian. You are Alice, Sonic, Osvaldo Cavandoli. You are a visitor, a cartoon of face and limbs, and you are going on a walk.
Using hand-made animation, music, 360° capture technology and webGL sorcery, Way to Go imagines a dream-world of journeys. Walk, run, fly; crouch in the grass and remember what's hidden all around. Slip like a rumour from one place into another; chase your shadow; listen to the slow pulse of the metronome, black-clad, following in your wake.
Are you alone? Are you not alone? Are you dreaming or awake? Can you ever reach the mountains?
Can you see what's here before you?
Set out through woods and fields, sunlight and aurora, grey and colours.
Set out, in deliberate lucid looking
and you'll find,
the present.

(Preface by Sean Michaels)"
games  storytelling  gaming  videogames  art  nfb  forest  aaotaa  javascript  html  html5  webgl  three.js  webaudioapi  vincentmorisset  philippelambert  édouardlanctôt-benoit  carolinerobert  nfbc 
february 2015 by robertogreco

Copy this bookmark:

to read