Comments (18)
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.
from processing-hour-of-code.
I just pushed a first stab at annotations for the color video. Overall, everything was really easy. Just a few notes:
-
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.
-
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.
-
I did add the color picker display you cued in the video. It's a little clumsy, but it's probably okay.
-
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.
from processing-hour-of-code.
Awesome, I just went through this and it's great.
- 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."
-
I'll definitely work on refining the timing of the moments and breaking them down into smaller steps. Sometime before Monday.
-
color picker looks great, i agree it works.
-
@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
from processing-hour-of-code.
@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.
from processing-hour-of-code.
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.
from processing-hour-of-code.
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.
from processing-hour-of-code.
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.
from processing-hour-of-code.
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.
from processing-hour-of-code.
Also, I haven't added any events for when the various buttons "code" "next lesson" "share" "run code" etc. should appear.
from processing-hour-of-code.
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
from processing-hour-of-code.
@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.
from processing-hour-of-code.
@scottgarner sounds like a great solution.
from processing-hour-of-code.
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.
from processing-hour-of-code.
awesome, this solution looks perfect. i haven't had a chance to go through it yet, but will do so over the weekend.
from processing-hour-of-code.
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.
from processing-hour-of-code.
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.
from processing-hour-of-code.
@shiffman, helloEditor has a method to load a lesson: helloEditor.loadLesson( lessonIndex, startTime);
I made the change. It should work now.
from processing-hour-of-code.
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.
from processing-hour-of-code.
Related Issues (20)
- Share button highlighting? HOT 2
- Remove next lesson button from the last section. HOT 4
- Code buttons cover code in editor that can't scroll past HOT 1
- page that accumulates a bunch of things made with the tutorial HOT 15
- code comments
- Typo on About page HOT 1
- Exit confirmation during all exercise sections HOT 2
- make it more clear that size() is needed when you move out of tutorial? HOT 1
- Vimeo Player Issues HOT 6
- Revisiting Video Navigation HOT 8
- video tutorial shapes not showing code examples/screen HOT 2
- No Sound On Initial Play HOT 1
- tracking for 2016 Hour of Code HOT 4
- www.parsecdn.com no longer exists HOT 7
- Spam / Security HOT 2
- Misalignment of the title bar HOT 2
- enforce https? HOT 1
- Forum link HOT 1
- Videos unavailable HOT 3
- "Back 10 sec." button closes and breaks editor windows in tutorial HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from processing-hour-of-code.