Examples

[scottgarner]

So the actual demo code has gotten pretty intense with optimizations and popcorn hooks, so I think it would be best to kind of start from scratch and present examples in global mode that illustrate concepts from the demos. Maybe six or eight? Here's an idea of a list:

• Circle sketch

Should we combine draw, color and click into one sketch?

• Animation sketch

A moving circle?

• Particle sketch

Simple particle system? Perhaps just something dead simple without all of the behaviors?

• Data Sketch

Fetch the weather in New York or based on a place name in an input box?

• Audio sketch

Simple piano keyboard made of divs that trigger sounds?

• Drawing sketch

Not as fancy as the videos, maybe just draws lines and dots without the animation or fade?

I'm totally open to anything here, though I do think global mode would be best and ideally we'd stick to single files.

[shiffman]

Agree about separate global mode examples. Also agree about simplifying and combining all the circle drawing stuff into one sketch. I might also make an example that just draws a static version of the basic shapes we demo (circle, square, triangle, flower).

Happy to help work on these.

[scottgarner]

That would be great, Dan, thanks.

On Tue, Jul 29, 2014 at 8:59 PM, Daniel Shiffman notifications@github.com wrote:

Agree about separate global mode examples. Also agree about simplifying and combining all the circle drawing stuff into one sketch. I might also make an example that just draws a static version of the basic shapes we demo (circle, square, triangle, flower).

Happy to help work on these.

— Reply to this email directly or view it on GitHub https://github.com/scottgarner/p5.js-video/issues/19#issuecomment-50564997 .

[scottgarner]

All of the example editor stuff lives in /examples/ for now, though I may rework it. There's a basic circle example in /examples/circle/ to get things started, but I'll continue to refine the interface.

[shiffman]

I'm not getting examples with setup() and draw() to work. See: a5712e07270e7b8739ec05b2455fbbb75345f1d2

[shiffman]

Added something for each item of the list except sound. https://github.com/scottgarner/p5.js-video/commit/e7ea165d3ad5cace4c3314fb5137a55c6cf5c69e

[scottgarner]

The setup() thing is tricky. It works now with it, but not without. I think there might need to be some changes to p5 to get this working both ways. For now I just added setup() to the one example without it.

[scottgarner]

I can do a little sound sketch. We should also have something for the dom addon.

[lmccart]

Yes, the problem with having no setup/draw is that the p5 variables are not bound to the window until p5 is instantiated in window.onload call. https://github.com/lmccart/p5.js/issues/158

There were some proposed solutions for supporting this but what it came down to was needing some external way to tell the library which mode it was in. Maybe via a data- tag in the script link. This of course requires users to know about the two modes, and the ones in the non-default one to know to add the tag in, and the question of which would be "default".

[scottgarner]

Ah, tricky. Well, for our purposes here it's easy enough to present everything with setup() and draw().

So what would it look like to add these examples to the main site?

[lmccart]

this explains the process, basically we'd just add a folder named Hello p5.js and throw the examples in there. I can take care of running the build script if you just want to move them there. https://github.com/lmccart/p5js.org/wiki/Adding-examples

[lmccart]

and yeah I agree it'd be good to switch over to ace for the main site examples (non ref). I'll add this to my todo list.

[scottgarner]

Thanks! @shiffman, would you mind moving your examples over?

On Wed, Jul 30, 2014 at 2:41 PM, Lauren McCarthy notifications@github.com wrote:

this explains the process, basically we'd just add a folder named Hello p5.js and throw the examples in there. I can take care of running the build script if you just want to move them there. https://github.com/lmccart/p5js.org/wiki/Adding-examples

— Reply to this email directly or view it on GitHub https://github.com/scottgarner/p5.js-video/issues/19#issuecomment-50668778 .

[lmccart]

ok I switched over to ace editor for the main site examples. however, I didn't figure out yet how to style the editor, and there's some weird bug where it's limiting the width of the editor. @scottgarner if you had any ideas about these I'd be much obliged. I will ask @antiboredom too.

[shiffman]

preliminary version of examples moved over. https://github.com/lmccart/p5js.org/pull/30

Random thoughts:

1. It's nice to have a "hello p5" category but some of these examples may make more sense in other categories? I guess maybe I shouldn't worry about that for now.
2. Will it work to add DOM elements in terms of the site build / design? I plan to add a slider to the interactivity one as well as change the weather examples to displaying text as DOM elements.
3. Now that they are over at the p5 site, I wonder if it might actually work better to have these examples mirror more closely the actual ones presented in the video. Related to item 1, perhaps these are more "demos" than examples and will make more sense in a separate category this way.

[lmccart]

yeah, maybe it would make sense to add a demos heading similar to examples? it should work to add DOM elements. since I just switched over to ace editor, the example is now running in an iframe so everything should be contained in there.

I added a background(200) to some of the examples because the big white space looked strange. does this make sense or would be it be better to just put a border around the sketch? I'm not crazy about the gray color.

[lmccart]

you can see them here btw http://localhost/p5js.org/site/learn/#examples

[shiffman]

How does the build process for the site work? Am curious to locally test.

[lmccart]

there's an explanation here: https://github.com/lmccart/p5js.org/wiki/Adding-examples

basically you navigate to site/learn/build_examples/ npm install the first time then node . to rebuild everything

(to view the site you need an apache server running)

[shiffman]

Agree about the all white being a problem. Not my forte but I think the grey is the right idea? Processing.org uses a dark grey and natureofcode.com uses a black outline with white background if you want to see a comparison.

[shiffman]

ah whoops, i totally read that page and somehow completely missed these instructions.

[lmccart]

but the main site itself is just php, no build required for that, just a server running

[scottgarner]

I think ace has a wrap set by default, but that might not be what you're seeing. I can look when I'm back at a computer. — Sent from Mailbox

On Wed, Jul 30, 2014 at 7:04 PM, Lauren McCarthy notifications@github.com wrote:

ok I switched over to ace editor for the main site examples.

however, I didn't figure out yet how to style the editor, and there's some weird bug where it's limiting the width of the editor. @scottgarner if you had any ideas about these I'd be much obliged. I will ask @antiboredom too.

Reply to this email directly or view it on GitHub: https://github.com/scottgarner/p5.js-video/issues/19#issuecomment-50697262

[shiffman]

@lmccart do i have to do something special to make sure that the dom addon is included? am getting:

"createP is undefined"

https://github.com/shiffman/p5js.org/commit/98911852071f1fad81fe6b5a1e2f21cbbfd79011

[lmccart]

whoops just broke this today, will have a fix up shortly.

[lmccart]

ok the addon libs should be working now with ace

[shiffman]

Now that the examples have moved to p5js.org, I wonder if it makes more sense to go back to our original plan and think of them more as "demos" and have code samples that mirror the demos more closely.

We currently have:

• Simple Shapes
• Interactivity
• Animation
• Particle System
• Weather
• Drawing

I am thinking:

• Simple Shapes: same
• Interactivity: include slider and maybe use HSB and hue.
• Flocking system
• Weather (get same exact data that is in the demo)
• Play a song (maybe make it interactive so you can click on the circles to trigger notes)
• Drawing (add color and fading)

Happy to work on this. Also happy to be talked out of this idea.

Thoughts?

[scottgarner]

That all sounds great.

The drawing demo could be simplified pretty significantly. I just had the two extra buffers so that the points would become a static image when they settled to keep the overhead down, but that probably wouldn't be needed in a standalone sketch.

Same for all of the optimizations in flocking.

Making the notes clickable in the song demo would be trivial. It might work best to have an oscillator for every key, but I can definitely tackle that if it's unclear.

[shiffman]

Great, I'll take a crack at these but probably won't get to it until early next week. @lmccart let me know if a firm deadline emerges.

[lmccart]

re: deadline, I think whenever this piece is set we're ready to go live. I'm just working on adding and refining documentation, but I think the library and site are pretty ready to go.

[shiffman]

I'm away mon 8/4, but I think I can get these completed by the end of Tues 8/5 if that's ok.

[scottgarner]

Congratulations on the impending release!

I have a few thoughts on some intro elements that I'll add in that issue. Dan, I can take a stab at a sound example if that will make things easier on you.

[lmccart]

great, let's aim for weds morning live then? I can also help with examples, let me know!

[shiffman]

Ok, first pass here: https://github.com/lmccart/p5js.org/pull/36

[lmccart]

I think we talked about this, but would it make more sense to have the hello p5 examples under a "demos" section instead of "examples"? the examples have evolved a bit so I wasn't sure how everyone was thinking of them. I can make this change if we think this makes more sense.

[scottgarner]

I agree that these don't seem to quite fit in on the examples page and ideally it would be something we could link to directly. Is the idea that there would be a page for more fleshed out examples called demos, or that there would be a place for groups of different sketches based on a presentation or workshop or something like that, with Hello p5 being one such demo?

[lmccart]

I was thinking of adding another section called Demos below the Examples section with similar layout. we could then link directly to this section anchor, or to the hello p5 heading within it.

[scottgarner]

That sounds good, and it would lay the groundwork for similar packages of sketches that aren't necessarily arranged by topic.

[shiffman]

I prefer demos as well. Though this makes me think think we should mirror the song playback a bit more closely to the video. I wonder if we do a happy medium. Like the example shows a keyboard that you can click on to play notes, but when it starts up it autoplays the song on the keyboard.

[scottgarner]

Sure Dan, or maybe it has an "autoplay" button to play the song? Either way works for me.

On Tue, Aug 5, 2014 at 12:26 PM, Daniel Shiffman notifications@github.com wrote:

I prefer demos as well. Though this makes me think think we should mirror the song playback a bit more closely to the video. I wonder if we do a happy medium. Like the example shows a keyboard that you can click on to play notes, but when it starts up it autoplays the song on the keyboard.

— Reply to this email directly or view it on GitHub https://github.com/scottgarner/p5.js-video/issues/19#issuecomment-51230712 .

[shiffman]

Hacked something together very quickly http://hello.p5js.org/test/piano.html. It's a little weird but I also sort of like it. Maybe button better?

[scottgarner]

The double note didn't play at the end for me?

My personal feeling is that it's bad manners to automatically start making sound when a page loads. Especially if they're just clicking through examples in a classroom.

On Tue, Aug 5, 2014 at 1:00 PM, Daniel Shiffman notifications@github.com wrote:

Hacked something together very quickly http://hello.p5js.org/test/piano.html. It's a little weird but I also sort of like it. Maybe button better?

— Reply to this email directly or view it on GitHub https://github.com/scottgarner/p5.js-video/issues/19#issuecomment-51235277 .

[shiffman]

good point, revised with link to autoplay. fixed last note thing i think.

[lmccart]

note that I pushed the demos change, so the hello p5 files are now in demos_src/ instead of examples_src/

http://p5js.org/site/learn/#demos

[shiffman]

Ok, I cleaned up everything, added comments, and redid the song example to be a keyboard with autoplay option. https://github.com/lmccart/p5js.org/pull/39

[scottgarner]

Great! I'm going to remove the examples from this repository to avoid any confusion.

On Tue, Aug 5, 2014 at 2:08 PM, Daniel Shiffman notifications@github.com wrote:

Ok, I cleaned up everything, added comments, and redid the song example to be a keyboard with autoplay option. lmccart/p5js.org#39 https://github.com/lmccart/p5js.org/pull/39

— Reply to this email directly or view it on GitHub https://github.com/scottgarner/p5.js-video/issues/19#issuecomment-51244513 .