processing / p5.js-video

Since the release of Processing 3.5.4 in January 2020, development has moved to a new repository.

Using a 4.0 release (even an alpha or beta version) is recommended if you find an issue. To avoid confusion, this repo will remain open at least until a 4.0 release is the default download at https://processing.org/download. We chose to move to a new repository so that we could clean out old files accumulated over the last 20 years.

Processing

This is the official source code for the Processing Development Environment (PDE), the “core” and the libraries that are included with the download.

I've found a bug! Let us know here (after first checking if someone has already posted a similar problem). If it's a reference, web site, or examples issue, take that up with folks here. There are also separate locations for Android Mode, or the Video and Sound libraries. The processing.js project is not affiliated with us, but you can find their issue tracker here.

Locked Issues Where possible, I've started locking issues once resolved. This helps reduce the amount of noise from folks adding to an issue that's been closed for years. Because this project has existed for a long time and we have thousands of closed issues, lots of them may sound similar to an issue you're having. But if there's a new problem, it'll be missed if it's lost in a comment added to an already closed issue. I don't like to lock issues because it cuts off conversation, but it's better than legitimate problems being missed. Once an issue has been resolved for 30 days, it will automatically lock.

That processing-bugs fella is suspicious. The issues list has been imported from Google Code, so there are many spurious references amongst them since the numbering changed. Basically, any time you see references to changes made by processing-bugs, it may be somewhat suspect. Over time this will clean itself up as bugs are fixed and new issues are added from within GitHub. Help speed this process along by helping us!

Please help. The instructions for building the source are here. Please help us fix problems, and if you're submitting code, following the style guidelines helps save me a lot of time.

And finally... Someday we'll also fix all these bugs, throw together hundreds of unit tests, and get rich off all this stuff that we're giving away for free. But not today.

So in the meantime, I ask for your patience, participation, and patches.

Ben Fry, 20 January 2019

p5.js-video's Issues

mouseX and mouseY default to 0,0 until mouse is moved

@lmccart is this a p5.js bug or just the way things work? I think this would be worth dealing with if we can.

hello.p5js.org text for non-WebGL browsers could be more helpful

If you visit hello and the site doesn't think your browser supports WebGL, the page is fairly unhelpful. There are no links to or description of, for example, what p5 actually is.

safari broken?

getting this error, mac os x 10.9 safari Version 7.0.5 (9537.77.4)

Progress on load

Show progress indicator for long loads.

CTA Panel

Here's what the final call to action panel looks like now:

@lmccart, I'm guessing there are already appropriate pages on either the p5 site or the wiki to link to, I just need the URLs. The example page and about page will probably be part of the video site.

"Transition Guide" is a little opaque, but "Transitioning from Processing" is a little long for a button. Thoughts on a better way to put this?

Example Integration

I made some updates and wanted to lay down the current approach to handling examples. You can see how things are going here:

http://scottgarner.github.io/p5.js-video/#70

So, every example that runs in the video is stored as a object in js/examples.js. These examples are loaded and modified from popcorn events in js/script.js. They also hold a reference to a simplified version of the example to show the user, which is stored in _includes/examples.html.

One thing to note is that everything placed on the screen can be positioned absolutely (relative to 0,0 in the browser) or relative to the video, so that things maintain their relationship to Dan no matter how the browser is scaled. To help with event creation and timing, you can click anywhere on the page and get a relative position and timecode in the console. You can also jump to a section of the video by appending a location hash with the time (as in the URL above).

There are still some funny things about clearing and unloading and I'm not sure everything happens in the absolute best place, but I think I've got a fairly solid foundation.

I'll take another pass to add more incidental events. Dan, maybe you could work out the particle examples? Integrating them might be fussy, so if you an build them standalone I can work on finding the best way to include them.

check angle direction for wind

Intro popups

Just a few animations to go with Lauren's intro. I was thinking of drawing and animating the logo slightly.

Greenscreen visible in Chrome?

code samples

I'm not sure about this, but just want to throw this out there. I am wondering if we should make the code samples a bit more "real." A smaller fixed-width font that looks more like a code editor with more specific code (even if not 100% accurate). For example:

ellipse(300, 500, 100, 100);

or even

strokeWeight(4);
stroke(0, 100, 200);
fill(0, 100, 200);
ellipse(300, 500, 100, 100);

and

if (mousePressed) {
  fill(random(255), random(255), random(255));
}

var d = dist(mouseX, mouseY, 500, 300);
if (d < 200) {
  fill(random(255), random(255), random(255));
}

and

var slider = createSlider(0, 255, 127);
slider.position(500,320);

p5.js video stops after a while

it stops at about one third of the video. after it starts for a few seconds and stops for more seconds, and so on... I thought it was some buffering issue, but after leaving it for a couple of minutes the same happens. it is the newest Chrome, on a Mac OS X 10.9.3.
are there a pre-rendered version of the video? I know this way the interactivity is lost, but at least it would be accessible for a lot of people.

image.width and image.height gives same value for a rectangular image

Two bugs on hello.p5js.org

The Argument 1 of AudioParam error happened toward the end when there was audio attached to the mouse and I clicked and dragged the cursor back and forth over the left border where white meets dark gray.

The weather.wind error didn't happen today but it happened a couple days ago when I took the screenshot.

Look and Feel

Here's a very quick mock-up. The basic idea is that Dan lives in whiteboard land and whatever he talks about happens behind him in a felt marker look. The animations aren't in the footage, but are actual p5.js sketches running and interacting with the viewer's mouse.

It makes production trickier, but I think the best experience would require Dan keyed out (seriously.js?) so that things can easily move behind him. The whole video could simply be a few minutes long and cover a handful of possible sketches.

interactive circles timing

I think maybe the circles should avoid the head area and the mouse immediately. If I'm correct the current behavior is that the interactivity turns on when I mention it. It feels like they should always be interactive and I'm just reminding the viewer when I reference it. Thoughts?

Video Tweaks

Sound in videos needs cleanup for rustling during the jumps. A little compression would make it sound less like an office.

I'll also do the h.264 and webm compression at the highest quality.

Google Analytics

@lmccart, I see UA-51635913-1 as the Google Analytics user id at p5js.org. Should I use the same one here?

'view examples' link at the end of the video

Hi,

The page which the 'view examples' button links to at the end of the video (http://p5js.org/learn/#demos) looks like it is missing something. I don't know if this is because the link is incorrect, or becase the page at p5js.org needs some maintenance. Either way, I thought you might like to know.

Final Testing for Launch

Everything seems to work on the devices and platforms I've tested so far. The only exception is on an iPad running the iOS 8 beta because of the way that device loads videos, but iOS 8 won't be out until next month so I just need to come up with a fix before then.

I was thinking of posting the demo to the ITP alum list for some last minute testing unless there are any objections.

About text in Readme.md

Just realized I never posted an issue to discuss the wording on this.

@shiffman, I'm worried I may have under-atttributed you—happy to change the wording. Also, did I miss anything?

Edge Issues

Edge quality is really inconsistent in different browsers. I've been talking to the author of Seriously.js and need to do more testing.

screen size compatibility

I'm getting "demo not compatible" on an 11 inch air which i feel we should support. Browser innerWidth/Height: 1076x670.

Script Contents

Just wanted to start a conversation about what should be covered in the script.

The first big question that comes to mind is whether this is geared towards people familiar with Processing that might want to experiment on the web or toward absolute beginners.

pause button?

Even though we've deleted the pause and play with the code feature, it feels like a subtle pause button might be useful. (Maybe we try only this but we could also consider a "jump back 10 seconds button as well").

Sound Sketch Styling

Note names in the sound sketch need styling.

Error message is cropped on small screens

Broken link on https://p5js.org/contribute

From @Haozhe321 on January 24, 2018 10:36

It looks like the abovementioned link is broken. I was trying to access this link after watching the introductory video on p5.js, from the "contribute" button(buttom left).

Copied from original issue: processing/p5.js-website#158

URL

The easiest thing is to point a subdomain of p5js.org to scottgarner.github.io with a CNAME entry.

Thoughts on the best naming? intro.p5js.org? hello.p5js.org?

Canvas is 1/2 size

Chrome Version 36.0.1985.125 Mac OS X

Flocking Demo Performance

@shiffman, I've done quite a bit of tuning on all of the sketches, but the flocking demo is still pretty heavy and I'm worried it will bog down older machines with the video compositing happening.

I'm going to take a pass at combining a lot of the functions to avoid redundant loops, but I might need some help. Here's the current state:

http://hello.p5js.org/#120

update p5.sound library

There is a bug with sound on hello.p5js.org right now, as mentioned here and here.

It is fixed in newer versions so the library.

If simply swapping it out for the latest version doesn't work, I can look into it more

Examples

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.

Weather Styling

Clean up the styling for the weather. Draw the arrow with p5 instead of using an image.

example code

I pushed a start of a set of examples here (each sketch.js file has a comment with the approximate timecode it relates to.)

https://github.com/scottgarner/p5.js-video/tree/gh-pages/examples

I'm writing these without the namespaced instantiation, but I can do them however would be most helpful?

Video not loading || playing

The video is not loading (taking a lot of time) when it is opened in a mobile phone.

Error (incorrect?) about WebGL compatibility shown on Chrome for Android

When I visit hello.p5js.org on Chrome Android Beta 37 with the WebGL flag enabled (which is the default setting), I see:

Your browser doesn't appear to support WebGL or it isn't enabled. Visit get.webgl.org to learn more or try the latest version of Chrome.

Your browser doesn't support all of the features required for this demo. Please consider using the latest version of Chrome.

It's not clear to me if that's just incorrect browser sniffing or if the WebGL support in Chrome Android really won't work, but in either case it's not a particularly helpful message.

"repel" mouse for flocking example

Outro pop-ups

A panel for the getting in touch. I'd also like to throw up illustrations for the role list (designer, developer, etc..)

Codebase doesn't seem to be updated with hello.p5js.org site

According to https://github.com/processing/processing/wiki/Project-List#-updated-hellop5jsorg-site - hello.p5js.org has this as its codebase. But the index.html file itself is a lot different.

weather api

I just watched the video again and the weather temp comes up 57 degrees, checking the NYC weather right now it's 71. Is this polling the right city?

p5.js link

the link in the bottom left should probably open the p5 site in a new window?

(going through the video now and will open issues for small things I notice.)

overall progress info?

I know there are a million issues around rewind / fast forward etc. but I've heard from a few people that they would at least like to know how long it is / where they are. I wonder if it wouldn't be too disruptive to just show a play bar along with the pause button? I'm mixed about this but just reporting the query.

Securing external links.

• Using rel="noopener noreferrer" in <a>...</a> tags.

I have read an article on Medium about vulnerabilities of using target="_blank" alone in <a>...</a> .
Here is the link to the article.

• Removing Protocol Relative URL

Using <a href="//example.com">...</a> when linking pages and assets. It automatically switch to HTTPS if assets is available on it.
Read this topic in detail here.

@scottgarner I wish to contribute myself to handle the above issues as a GSOC project. Guide me on how to begin and get accepted for the project,
This issue is in reference to project Updated hello.p5js.org site listed for GSOC.

Painting sketch fade sound

The sound at the end of the painting sketch needs to ramp down during the visual fade so it doesn't clip when it ends.

Social Links

Thoughts on adding social links to the CTA page in the lower right corner after the pause button vanishes?

I'm pretty indifferent toward that sort of thing, but it's easy enough to add.

Script

I just pushed a rough new script. Please have at it and change any crazy wording or anything else that stands out.

Below are some notes on the different sections.

Lauren's Intro

This section will be more or less the same, but I think we should skip the gestures unless we have specific animations planned. We can at least show Lauren's name and do some kind of reveal when she says "p5.js".

Dan's Intro

Should we go straight into the circle demo or try a few quick full-screen examples again?

Circle

We could potentially add more steps here, like adding a

to show the value, but since this section is pretty tame we might want to keep it short.

I thought, too, that we might try highlighting just a few snippets instead of showing all of the code for a given example. So Dan could mention ellipse() in the circle example and have it appear on the screen? I guess I'm just worried about showing all of the code because it gets unwieldy pretty quickly, but isolated commands might not be very useful.

Flocking

The circles could also be more mouse-interactive, like color or size changes based on proximity. Or we could throw in some more sliders to control things like that. Maybe the color is based on the temperature?

More Examples

At this point, we could show a few more fleshed out examples without all of the lead-up. A simple generative drawing app, for example, or a piano built with the audio addon. Another option would be to expand the flocking example a little further and add something like wind chimes that would play a sound when particles collided.

Dan's Closing

We can pop back to Lauren here or have Dan do the outro—whatever works best.

Lauren's Outro

We could potentially animate in some bullet point-type stuff here, too.

automatic slider demo

should the slider slide back and forth automatically when I first reference that it will change the color?

Style Error Panel

Style this and link to suggestions for getting WebGL up and running.

use p5 asterisk as "something else" icon?

very minor, and @scottgarner it's totally your call whether it fits with the graphic language you have going on there. but the file is here if you want to use it https://github.com/lmccart/p5js.org/blob/master/img/thick-asterisk-alone.svg.

Example Sketches

I thought I'd start an issue to keep track of example development while I make a pass at incorporating the sketches @shiffman has done so far and putting in placeholders for everything else.

One initial question for @lmccart: The new p5.dom addon seems to work really well, but what's the most correct way to remove elements it creates? It would be nice to remove them all in one go at the sketch level, but the ability to remove them individually would work, too—especially if the sketch exposed an array of them.