Name: JS Workshop
Start: 2017-08-08T18:30:00-04:00
End: 2017-08-08T21:30:00-04:00
Location: Devhub

Welcome to the JS Workshop! This is a place for intermediate and advanced JavaScript developers to learn new skills, experiment with interesting technologies and have tons of fun.

This month Xavier Snelgrove will show us how to create organic 3D in WebGL -- it's going to be a delicious smorgasbord of abstract aesthetics!

Prerequisites:

- A laptop with a web dev environment, including an editor and a local server

- Some proficiency in JavaScript

- A cheerful and inquisitive attitude

- An appetite (for knowledge and for pizza -- thanks to New Relic for sponsoring us!)

The evening revolves around two main pieces: the code-along and the group work. The first hour has the speaker coding on the projector, while the attendees copy that code into their own laptops. During the second hour we'll break into groups to extend that common code in new and exciting ways.

Timetable:

6:30 - doors open, eat pizza

7:00 - workshop code-along

8:00 - break for ideas and more pizza

8:15 - extend the codebase in groups

9:15 - demo round

9:30 - everyone goes home

A brief intro from Xavier:

Hi all, I'll be teaching how to used distance functions to raytrace 3d forms on the GPU using shaders written in GLSL. If you've worked in 3d you're probably used to representing objects as meshes of triangles. Instead here we'll represent an object as the level set of a function. This lets you build very different kinds of shapes, and transform them in very different ways. To see some pieces by one of the masters of this technique check out Ingo Quilez's article (http://iquilezles.org/www/articles/raymarchingdf/raymarchingdf.htm), and then check out his work running in real-time in your browser on Shadertoy (https://www.shadertoy.com/view/llXGR4). If you can't get the Shadertoy demo to work, then your browser may not support WebGL which we'll need for this workshop.

For a light introduction to GLSL check out the first few chapters of the Book of Shaders (https://thebookofshaders.com/01/). We'll be working in their editor (http://editor.thebookofshaders.com/) for the workshop, which lets you see changes in real-time while you work. You can start playing with that now to get familiar with the language. Finally, for an intro to how the raytracing itself works, check out the Sphere Tracing blog series by Toronto's own Fab Castel (http://fabricecastel.github.io/blog.html)

While we won't assume prior experience with GLSL or raytracing, we'll be moving pretty quickly and assume you're comfortable with code.

The github repo that Xavier will be working through can be found here: https://github.com/wxs/df-workshop

dann

Toronto JavaScript

Technology

JavaScript

JavaScript Applications

JavaScript Frameworks

JavaScript Libraries

Web Technology

Web Development

Software Development

Functional Programming

Open Source

Programming Languages

Computer Programming

nodeJS

Front-end Development

HTML5

JS Workshop

Devhub

Share

Toronto JavaScript

JS Workshop

Toronto JavaScript

Details

Members are also interested in