Annotations for final videos

[scottgarner]

The big one!

Between native jQuery functions and helper functions I've written, we should have everything we need to populate the popcorn scripts in scripts.js.

If we get the shapes video first, I'll try to do that myself and then it would be great to get help annotating the rest. I can always add new helper functions as needed.

[shiffman]

Yes, I'm happy to take on doing a lot of the annotation / timing work. We can also divide it up between us for anyone else that might have time.

[scottgarner]

I just pushed a first stab at annotations for the color video. Overall, everything was really easy. Just a few notes:

1. There's the problem I mentioned in my email where you talk about the code editor "below" at the beginning of the video. We should really be full screen, but I think we can cut that line.

2. For the most part, I condensed things (e.g. add code, change color, run code). Dan, an easy way to get familiar with the system might be to try to add more granularity to the events I have by splitting them up a bit, but that's up to you.

3. I did add the color picker display you cued in the video. It's a little clumsy, but it's probably okay.

4. The example code we currently have deals with noStroke() and alpha values. It would be nice to get relevant examples as soon as we can.

I've also been pushing major changes for fluid layout handling, so let me know if things are wonky anywhere.

Oh, and this video is still hosted by Jesse, so you'll have to enter the password he sent in his email.

[shiffman]

Awesome, I just went through this and it's great.

1. I'm a little torn about the opening "editor below" thing. I do agree that visually it makes the most sense to start all videos in full screen. But I wonder if we should just try having this one start as a smaller window and see how it feels. I worry that if a user spends a lot of time working on their first assignment and it suddenly disappears when the second lesson begins they'll worry they lost it?

I could also add something to the hints after the first lesson:

"When you are finished, select "next lesson" to move on. The code editor will disappear, but don't worry, you'll have a chance to return to your assignment later."

2. I'll definitely work on refining the timing of the moments and breaking them down into smaller steps. Sometime before Monday.

3. color picker looks great, i agree it works.

4. @REAS, I just updated the "color" example to not have alpha or noStroke(), but if you want to take a pass over all of them (and incorporate rect() as well) that would be great.

I'll touch base with Jesse re: hosting of videos

[scottgarner]

@shiffman, I made the change so the lesson starts in the editor mode, though I don't think we'll really be able to decide until we have lesson two in place.

[shiffman]

I have refined the timing of all the script moments for color lesson in the most recent commits. really easy to do, I don't think it'll be that much work for me to create everything for the other lessons once we have them. @scottgarner it's not bothering me that it starts in the smaller window (I kind of like it actually), but yes, I agree we can decide once we have everything else in and see how it feels.

[scottgarner]

Really pleased to hear that it went smoothly!

One thing I should maybe point out is that loadCode currently loads a pde file asynchronously, so you have to use a callback to run it (as seen in the end of the color script). It will probably work anyway locally if you don't, but almost definitely won't on the server.

I'm not crazy about that approach because there can be a delay between the Popcorn event and the actual display of the file. I may go for something like the hints were Jekyll combines them into the body of the page when the site is built.

[shiffman]

Going through these now. Made some minor adjustments to drawing and color. I actually think color works really well having it start with the smaller window and then open up. Going to work on interact and questions next.

[shiffman]

Ok, we now have a draft of all popcorn events for all four lessons! There is a lot of fine-tuning that can be done.

• massaging the timing to be more precise
• i might have missed some small moments where I could have the code follow along with what i am saying
• all of my mini-examples could be styled to have the same look / feel as the end of lesson examples.

@scottgarner I think this will all be made easier by your idea (mentioned here: #11 (comment)) to make loading code from a file work more seamlessly. Right now, it's very awkward for me to type in code like:

helloEditor.setCode("void setup() {\n  size(500,400);\n  background(0);\n}\n\nvoid draw() {\n\n  if (mousePressed) {\n    background(0);\n  }\n\n  stroke(255);\n  fill(128);\n  ellipse(mouseX, mouseY, 100, 100);\n}");

So being able to just load from a file will make it easier to make tweaks to these examples.

Everyone should feel free to watch them through and provide comments for things I can add / fix. @scottgarner you should obviously feel free to make changes to script.js directly if you are so inclined.

[shiffman]

Also, I haven't added any events for when the various buttons "code" "next lesson" "share" "run code" etc. should appear.

[shiffman]

Finally, here are quick links to where each of the interactive features begin:

http://hello.processing.org/editor/#shapes-4:20
http://hello.processing.org/editor/#color-2:40
http://hello.processing.org/editor/#interact-4:40
http://hello.processing.org/editor/#decisions-2:30

[scottgarner]

@shiffman, I think we can definitely make things a little easier for you. I'll look at breaking each of the code snippets into a "snippets" include for each lesson. Rather than a file for each little change, I think it might be best to store all of the snippets for a given lesson in one file and break them up with either script tags or divs.

[shiffman]

@scottgarner sounds like a great solution.

[scottgarner]

Okay, I split the individual snippets into files in _includes. This should make it easier to edit and format the code. You just call helloEditor.loadSnippet() with the id of the div the code is in.

There's probably a more elegant way to do this that would automatically add the events from the snippet files, but it seemed safest to keep all script events in script.js.

@shiffman, I almost certainly broke something in your formatting while moving things over. I left the old code commented out just in case. I almost numbered the divs in increments of 10 just in case something needs to be inserted later.

[shiffman]

awesome, this solution looks perfect. i haven't had a chance to go through it yet, but will do so over the weekend.

[scotthmurray]

You guys, this is absolutely magical. No exaggeration. I love having the UI elements in sync with Dan's presentation. He just talks and points and — voila! — things happen.

This is going to be so much fun for our visitors.

[shiffman]

I've now put in the hello and goodbye videos. I also added a couple of "script" moments in hello when I refer to the interactive features of the tutorial. Not sure if they work.

@scottgarner what should I put in helloEditor.popcorn.on("ended", function () { in order for "hello" to advance directly to "shapes"? Right now, it's showing the empty hint.

[scottgarner]

@shiffman, helloEditor has a method to load a lesson: helloEditor.loadLesson( lessonIndex, startTime);

I made the change. It should work now.

[shiffman]

I did another pass over all of the script moments and we're in pretty good shape. I'm going to close this issue now and open new more specific ones as problems/questions come up regarding the script.