Does not render correctly. Same hardware/software configuration as #24

am bikeshedding here, but for 04-intro-4, I would prefer the third argument to be p, not x. That way, if multiple comparisons are done we have

lo.x <= p.x && lo.y <= p.y && hi.x >= p.x && hi.y >= p.y

and not

lo.x <= x.x && lo.y <= x.y && hi.x >= x.x && hi.y >= x.y

Or whatever is preferred!

Would be nice to differentiate between notation and code, we just had a guy try and type the notation out into the shader :)

Are we able to include some more background information for this one? Maybe I missed something, but I wasn't able to work it out from looking through the geom readmes.

We could link here but it's probably a little too explicit: http://en.wikipedia.org/wiki/Transformation_matrix#Reflection_2

In the workshopper start screen clicking on the exercises does nothing.

from 06-intro-6:

mat2 m = mat2(1, 2,
              3, 4);

vec2 v = m * vec2(1, 2);  //v = vec2(5, 8)

//Switching order of arguments is equivalent
//to transposing:
vec2 u = vec2(1, 2) * m;  //u = vec2(7, 10)

Now, I don't remember my linear algebra class much, but I thought you can't multiply vectors/matrices unless the columns of the first multiplicand are equal to the rows of the second multiplicand? So I would expect the first example to work since we would have a 2by2 x 2by1 (where the format is [num rows]by[num columns]) In my head I group the middle two 2by[2 x 2]by1 and if they're even, you can multiply them. By that logic, I would expect the second to fail since we have a 2by1 x 2by2 and 1 != 2. Am I getting mixed up by column major order, or is my memory of linear algebra just wrong (quite probable, in fact).

It might also be good to hint that matrix multiplication is not commutative to prevent things like this.

Should probably default to opening all the hamburger menus by default.

I just grabbed the latest version and did rm -rf node_modules/ && npm install to check that everything was working, and got the following error after doing npm start:

 ===============================
 = ~~~ glslify-workshopper ~~~ =
 ===============================

[?] We're about to populate this directory with some code for you to use for
    your answers. If they've already been created then don't worry, they won't
    be replaced. Continue? Yes

Done!
Booting up the workshop in your browser in just a second...

200  408ms       405B  /

/Users/mikolalysenko/GitHub/glslify-workshopper/node_modules/beefy/lib/bundlers/watchify.js:45
      return watchifies[entryPath]()
                                  ^
TypeError: Property '/Users/mikolalysenko/GitHub/glslify-workshopper/menu/index.js' of object #<Object> is not a function
    at Object.handlePath [as command] (/Users/mikolalysenko/GitHub/glslify-workshopper/node_modules/beefy/lib/bundlers/watchify.js:45:35)
    at handle (/Users/mikolalysenko/GitHub/glslify-workshopper/node_modules/beefy/lib/handlers/bundle.js:48:27)
    at handle (/Users/mikolalysenko/GitHub/glslify-workshopper/node_modules/beefy/lib/handlers/log.js:42:5)
    at beefyMainHandler (/Users/mikolalysenko/GitHub/glslify-workshopper/node_modules/beefy/lib/create-handler.js:42:12)
    at handler (/Users/mikolalysenko/GitHub/glslify-workshopper/node_modules/beefy/index.js:77:5)
    at Server.<anonymous> (/Users/mikolalysenko/GitHub/glslify-workshopper/index.js:79:14)
    at Server.EventEmitter.emit (events.js:98:17)
    a
npm ERR! [email protected] start: `mkdir answers; cd answers && NODE_ENV=development node ..`
npm ERR! Exit status 8
npm ERR!
npm ERR! Failed at the [email protected] start script.
npm ERR! This is most likely a problem with the glslify-workshopper package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     mkdir answers; cd answers && NODE_ENV=development node ..
npm ERR! You can get their info via:
npm ERR!     npm owner ls glslify-workshopper
npm ERR! There is likely additional logging output above.
npm ERR! System Darwin 13.1.0
npm ERR! command "node" "/usr/local/bin/npm" "start"
npm ERR! cwd /Users/mikolalysenko/GitHub/glslify-workshopper
npm ERR! node -v v0.10.26
npm ERR! npm -v 1.4.3
npm ERR! code ELIFECYCLE
npm ERR!
npm ERR! Additional logging details can be found in:
npm ERR!     /Users/mikolalysenko/GitHub/glslify-workshopper/npm-debug.log
npm ERR! not ok code 0

in Firefox, the shader compilation error messages aren't displayed quite right:

from 06-intro-6:

mat2 m = mat2(1, 2,
              3, 4);
mat2 w = mat2(7, 8,
              9, 10);

mat2 q = matrixCompMult(m, w);

//q = mat2( 1, 16,
//         27, 40)

component wise 1 * 7 == 7; // !1

WOW I didn't do any code yet and already have a dragon in my browser. Every coding problem should start with a hello dragon.

Anyway, Firefox is my default browser so it opened the workshopper there - I can't click on any of the menu items. If I click through using chrome and then paste the url into firefox I can't see the menu icons and some words.

I'm new to GLSL, but it seems that we should specify the translation matrix in column major order:

  mat2 rot = mat2(c, -s, s, c);

If the description text is too long it won't scroll. This is a problem for lessons with long descriptions or for users with small displays.

This might be helpful:

http://upload.wikimedia.org/wikipedia/commons/1/14/Bisection_construction.gif

I would guess pass by value wouldn't update the variable? eg x = 1.0?

The list is finally starting to get a little full, and on smaller displays it could possibly overflow. It might be worth adding some functionality for scrolling to to prevent this from breaking.

Is there a button/process in the work shopper for registering / notifying a user once they get a lesson right?

The way the examples read now, they ask you a question, then give you the tools you need to solve the problem. Is this to allow you to digest the problem, and see how such tools would be useful? Would it be better to put instructions before the exercise?

• Add home button
• Add folder icon for opening up local exercises
• Make exit menu item work Remove exit item from menu
• Disable selection while sliding sidebar slider
• Add labels to sidebar slider

Installed on Windows 7. Got blank gray background webpage, and this error in console:

"undefined is not a function" localhost:12492/index.js:126

From this code:

require('insert-css')(
fs.readFileSync(__dirname + '/style.css', 'utf8')
)

Currently the name of the directory for each exercise does not match the name in the menu. Ideally, these should be the same.

Probably should be fine to use gl-fbo-matching, just gotta reset the data and run a few iterations beforehand.

A few windows users (but not all, strangely) ran into issues with the workshopper; specifically having to do with brfs not being triggered.

For the first couple of lessons, I want to test just a snippet of GLSL in isolation. For this purpose it is a bit easier I think to use inline glsl and just require the user code via glslify. Here is a sketch of how I was thinking of doing this:

var actualShader = glslify({
  vert: "\
#pragma glslify: studentCode = require(" + process.env.file_student_glsl + ")\
void main() { \
 //HOOK UP CODE HERE \
}",
  frag: //etc.
})(gl)

But it seems that glslify-live doesn't like this. Is there a good way to triage this issue or some other way to implement it?

Inserting or rearranging lessons right now is too manual. This process should be automated.

Some developers might be a little lost when they hit the black screen. Putting this in as a nice-to-have :)

I think this will be a problem for teaching people glsl. We need some way to more gracefully report syntax and other programming errors to new users so they don't become frustrated and give up.

Right now glslify crashes the entire server if it hits a snag. Is there anyway we could perhaps make this more graceful?

the hint for 03-intro-3 really stumped me. I don't see how it's related to the expected. A better hint would be to visualize vector addition and then talk about normalization.

If either of you guys get a chance, take a look.

Lesson 2 has issues due to the glsl-live bug with inline shaders, but should be fixable.

The first fragment shader lesson should be ok, though maybe we should change the colors?

I've been working through this excellent nodeschool module, and came across the following puzzler ...

The exercise text :

The diffusion constant and damping will be sent in the parameters 
kdiffuse and kambient respectively.

doesn't accurately reflect that one needs to add :

uniform float kdiffuse, kdamping;

All the Best
Martin :-)

PS: I've got a bunch of other niggles too : Would you prefer (lots of tiny) patches, or one bigger patch (several typos, etc) ?

This was, based on the instructions, what I think the answer should be.

vec2 runMandlebrot(highp vec2 z, highp vec2 c) {
     return vec2(z.x * z.x - z.y * z.y, 2.0 * z.x * z.y) + c;
}

bool diverges(highp vec2 mbs) {
     return length(mbs) >= 2.0;
}

bool mandelbrot(highp vec2 c) {
  // Test if the point c is inside the mandelbrot set after 100 iterations
  vec2 z = vec2(0.0);


  for (int i=0; i<100; i++) {
      z = runMandlebrot(z,c);
  }

  return diverges(z);
}


//Do not change this line or the name of the above function
#pragma glslify: export(mandelbrot)

But that doesn't return the correct answer. It returns the attached screenshot. Changing diverges to length(mbs) <= 2.0 fixes it.

On the face of it, it looks like the COLORs are the wrong way round in the sample initial code :

  if( length(gl_FragCoord.xy - vec2(256,256)) > 128.0) {
    gl_FragColor = CIRCLE_COLOR;
  } else {
    gl_FragColor = OUTSIDE_COLOR;
  }

https://gist.github.com/anonymous/328d2092576352cbdc42

For the mathematical terminology, even simple terms like predicate, it might be useful to link to an external page, such as a reference on Wolfram MathWorld or Wikipedia.

Many web developers won't be familiar with this stuff, so I think linking out to definitions will allow us to describe this stuff concisely while still being able to point newcomers in the right direction.

In shader-school/exercises/27-prims-1/index.js, the current code stops the point sprites having any radius (and also makes them twinkle in a non-intuitive way) - which means that code that matches the exercise description fails the verification test. Here's the (obvious) fix :

expectedShader.attributes.position.location = 0
expectedShader.attributes.color.location = 1
//expectedShader.attributes.size.location = 1  // This doesn't work
expectedShader.attributes.size.location = 2  // This works

HTH
Martin :-)

So, I started writing up a short blurb on homogeneous clip coordinates:

https://github.com/gl-modules/glslify-workshopper/tree/master/exercises/geom-1#clip-coordinates

It got a bit long winded though and I want to split it here before going on to talk about transformations (and ultimately 3D stuff). Do any of you guys have good suggestions regarding exercises we could try with clip coordinates in isolation?

I am having a bit of a tough time thinking up a good visual way to test this.

Based on @chrisdickinson's suggestion, it would be nice to give students feedback based on their answers.

OS:
Debian Jessie
Awesome Window Manager

Browser:
Chrome 35

from 06-intro-6, is this right?

mat3 m = mat3(1.1, 2.1, 3.1,
              1.2, 2.2, 3.2,
              1.3, 2.3, 3.3);

//Read out first column of m
vec3 a = m[0];

//Now: a = vec3(1.3, 2.3, 3.3);

Maybe trying to wrap my head around column major representation but I think some ascii art explaining column major vs row major would really help here.

@hughsk can you maybe take a shot at implementing a testing procedure for lesson 0? I will try to copy how you did it and apply it to the other lessons.

Per @wraithan, it's not immediately clear what the shader is responsible for drawing -- the changing background color, or the white pattern. We might clarify that we're taking care of drawing the colorful background in the lesson text.

explaining step and fract might help give clues towards parity.

for 03-intro-3 vectors.glsl func

visually, this seems to behave correctly but fails the test

highp float i = length(a);
highp float j = length(b);
return normalize(vec2((j * a.x + i * b.x), (j * a.y + i * b.y)));

thank you!

The published content is all gzipped and unzipped on install, need to make the postinstall script windows-friendly.

Again :( Will be fixed by NodeConf!

some ideas:

• OMGL (like OMG and GL)
• shady-business
• shaders-of-grey
• shader-school
• render-school

What should the progression be?

We've pretty much agreed (I think!) on going from fragment shaders to vertex shaders; and tackling the JS side of things in a separate workshopper with parallel lessons.

@maxogden suggests 10-15 lessons per workshopper. 3-4 of each difficulty.

To avoid stretching :)

Here is an example from the work in progress lesson 1:

It seems that anything with a * gets rendered incorrectly, including bulleted lists and emphasized text.

Any idea on how to fix this?