either remove altogether, or format these pages

I can make this example, this issue is just to keep track of improvements we can make to the website.

Should http://p5js.org/reference/#/p5/loadImage look like:

loadImage(path,[callback]);

?

When my window is zoomed to 100% or lower the page stacks the menu on the left and the content on top of each other. The scrolling of the page no longer scrolls the content so you cannot see all the information on the page and the page appears to scroll forever. I attempted to repair the problem modifying only the css, but I couldn't find a simple enough solution without having to do a complete overhaul. An overhaul might not be a bad place to start. we could at least design a new page and see what others think. I know the page has become bloated with a lot of content that has been "ghetto rigged" together.

I originally saw this bug back when I first came to the page months ago. I couldn't figure out why the page wouldn't let me view all the content, the bug actually made me think the project wasn't worth my time. I thought "if they can't get their homepage to display correctly, how can I expect any of it to work," Unfair of me to think. But, one could imagine if others ran into this issue like I did, they might think the same thing. If you guys are having trouble reproducing the bug let me know and I'll make a video showing what I see.

I'm using Chrome Version 40.0.2214.93 m on a windows 8.1 laptop. When my window is zoomed in to 110% the page displays perfectly and I don't have issues. It only appears when the zoom is <= 100%.

Change the description for this example:
http://p5js.org/learn/examples/Sound_Sound_Effect.php

It seems to came from another example

Control an Oscillator and view the waveform using FFT. MouseX is mapped to frequency, mouseY is mapped to amplitude.

Could be changed to something like:

Play a sound effect when the mouse is clicked inside the circle.

here:
http://p5js.org/reference/#/p5/createImage

the created images should have color i assume, but i can just see grey rectangles...

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.

At http://p5js.org/get-started/

Open a web browser. Type:
localhost/path/to/your/index.html
in the address bar to view your sketch.

Does it mean localhost literally?? If that is the case, then that's assuming you have a web server running locally on your computer. If that is required, it should be mentioned, and some links to the most popular and easily to install web servers (perhaps xampp) should be given. You can't expect the typical user to already have a local web server installed, nor to automatically figure out that he needs to install and run one.
Or am I missing something and SublimeText includes one, or even the p5.js does?? If that is the case, that's also worth mentioning.

If, instead, by /localhost/path/to/your/index.html you mean /the/file/path/to/your/html, that is, if all you need is open the html file in your browser, then you should use a different example path that does not contain localhost, as that is very misleading, and also, you could rephrase it as something like "just open the index.html file in your browser by double clicking on it in your file manager or by typing '...' in your browser" or something like that, and MOST IMPORTANTLY the address should include file:///, as it won't work otherwise.

some things, like web audio and capture don't work in certain browsers. it would be good to display this on the reference as well as on the examples (or have them not show up) based on browser.

Show how to use Javascript ability to create new functions (closures) so that we can obtain a parametrized sketch in different contexts.

This wouldn't be a port from Processing, because it's a typical Javascript feature.

I think this example should be in the instatiation chapter

I just made them. adding them soon

including:
Increment/Decrement
Operator Precedence
Distance 1D
Distance 2D
Sine
Sine and Cosine
Sine Wave
Additive Wave
Polar to Cartesian
Arctangent
Graphing 2D Equation
Random
Double Random
Noise 1D
NoiseWave

missing:
Arctangent
Graphing 2D Equation

I'm working on p5.sound docs on my local environment, and so I updated the versions of both p5.min.js and p5.sound.js (here)

After updating p5, I'm no longer able to restart any of the example sketches (not just the sound examples). I get an error, Uncaught TypeError: Cannot read property 'call' of undefined that points to this line:

this._registeredMethods.remove.forEach(function (f) {
f.call(this);
}

take running example, add noLoop() call. doesn't stop looping.
noLoop() from original code does work.

http://creativecommons.org/licenses/by-nc-sa/4.0/

http://i.creativecommons.org/l/by-nc-sa/4.0/88x31.png

Current website documentation states that I should submit an issue here to let people know that one is working on a particular subject matter or issue so that we do not duplicate each other's efforts.

This would be my first formal contribution to P5. I am interested in taking advantage of P5's benefits in developing a project which I would know how to do with Processing.org 1.4 to 2.x. There are some things that are unique with P5 that I must learn in order to proceed, e.g. DOM, integrating third party libraries, and prototypes. For my own purposes, I need to understand certain features which are not currently explained (to the best of my searching). I believe the problems I am having would be helpful to others.

I am making a simple sketch that illustrates more of the use of DOM controls; updating text on the page, using values on checkboxes. The sketch also will illustrate the use of Gibber, specifically with respect to starting gibber, stopping gibber, and controlling gibber so that it does not force a browser to restart to turn audio back on, not starting it when it's already running, etc..

I suspect that much of this would be very mundane for those of you who are skilled and knowledgeable programmers, but, I think it's important for non-programmers who might have learned how to program via Processing and who don't have much experience with Java.

The sketch itself is very simulation of the trajectory of a frisbee in two dimensions based on the work of Canadian Professor Vance Morrison.

I expect this project to take approximately thee weeks.

The beginings of the sketch is up at my rootbsd hosted server at http://jq4q.x.rootbsd.net/frisbeesim-P5/ . I plan to refactor the code so that it more simply calls the simulate function and runs faster; that is part of another Example / Transitioning issue I intend to create soon. I might include an example of using DOM to change background that's on the page below the sketch without redrawing the background in the P5 js element.

As I mentioned, this would be my first contribution so forgive me if I'm starting off on a ... abnormal direction. I hope to improve the way I may contribute to processing through the process of contributing and will look for ways contributors collaborate on perfecting their example sketches for people without a lot of programming experience.

Respectfully,

Stephen
untls.net

The current code is not good enough for an example template; I can create a class that performs the same thing much faster in processing javascript and the same should be done through a prototype here. It has a terrible implementation of translation ... I need to draw elements at canvas orgin and translate and scale things more consistently with existing documentation. I do intend to submit something that's an improvement over documentation, consistent with the qualities of good instructional code. This code started out just to see what was feasible for me to do.

This proposed example sketch concerning the simulated flight of a frisbee also demonstrates how P5 DOM allows us to update text and interactive controls presented to the user without having to redraw the sketch background area.

Please do not let cause you to hesitate in developing examples for integrating with Gibber and other (probably common) ways people might want to use DOM controls. And please, if you do see any posts of mine seeking help regarding specific issues along the way on the Processing.org forums in the P5 programming questions section, chime in.

I'm working on a simulate category for the examples page pulling examples from natureofcode / processing.org. I'm running into a problem though where static p5.Vector methods are throwing an error: "p5 is not defined". This is the example I'm testing with:

https://github.com/shiffman/p5js.org/blob/simulate/site/learn/examples_src/09_Simulate/01_Forces.js

shiffman@9d4bffe

Hello!

I an interested in your project and I want to help, so I want to port the following processing sketches from the Monash Creative Coding Course found int www.futurelearn.com to p5:

Week1:
w1_01
w1_02
w1_03
w1_04_2DGraphics

There are more sketeches from this course I'd like to port. I an looking forward to any suggestion, comment or advice.

Thank you.

Hi,

First, thanks for p5.js! There are so many reasons why this is great I'll have to file another issue just to talk about how there are to many of them.

Anyway.

On the flocking example page, the instructions say to click to add more boids, when what you really need to do is click and drag.

http://p5js.org/learn/examples/Simulate_Flocking.php

Then in looking at it closer, it seems like there are a few other changes one could make.

Currently it's:

Demonstration of Craig Reynolds' "Flocking" behavior See: http://www.red3d.com/cwr/ Rules: Cohesion, Separation, Alignment from (fromnatureofcode.com Click mouse to add boids into the system

Perhaps:

Demonstration of Craig Reynolds' "Flocking" behavior See: http://www.red3d.com/cwr/ Rules: Cohesion, Separation, Alignment (from natureofcode.com) Click and drag mouse to add boids into the system.

Firefox 35.0.1, linux 3.19, macbook pro retina 13 w/i7, runs so slow (1/3 fps) and locks up the browser. Not sure why, and asked #firefox on irc.freenode.net on how to start profiling why. Would love other people to test to make sure its not just some quirk of how I setup my system, but an actual issue with firefox or how wave.js works.

For comparison, http://p5js.org/learn/examples/Math_Noise_Wave.php is smooth, at 2560x1600.

Will try following the info on https://developer.mozilla.org/en-US/docs/Mozilla/Performance/Reporting_a_Performance_Problem as well, especially if anyone can reproduce the issue.

Create neste html elements using p5dom.

Something like:
http://codepen.io/ajspadial/pen/dsLog

I promise to remove the football players in the official example 🎱

I could write other examples based in this one, like controlling position, etc.

from jerel:

In terms of the fonts, you'll want to license Avenir Next medium for the website. Once it's licensed you can deploy it either through a script element in each document or through a self-hosted package where you just @ font-face it. The HTML I've produced currently indicates both (a commented out script element) as I'm using the self-hosted. I have violated the EULA temporarily by putting this out there, as it is, etc since it's only currently licensed to my domain. Here's the URL to license that type face for p5.js http://www.fonts.com/font/linotype/avenir-next/medium/web-font

For print I would recommend licensing Avenir Next medium, Avenir Next medium italic and Avenir Next demi, but this detail I will restate in a summary document at the end of my initial 50hrs.

contributors

Hello

If you are still looking for ported examples from the processing.js page, I'd like to port these ones if you give me green light:

Image Processing:

Pixel Array
Brightness
Blur
Edge Detection
Zoom
Explode

Motion:

Linear
Bounce
Bouncy Bubbles
Moving On Curves
Brownian

Interaction:

Tickle
Follow 1
Follow 2
Follow 3
Reach 1
Reach 2
Reach 3

Cellular Automata:

Spore 1
Spore 2

Fractals and L-Systems:

Mandelbrot
Tree

Objects:

Inheritance

I'm looking forward for any comment.

Hello,

I tried to download the whole reference found at p5js.org/reference, but it didn't work with ScrapBook, I think because of JavaScript. I then found this page: https://github.com/lmccart/p5.js/wiki/Inline-documentation#generating-documentation So, I installed npm, grunt, all the dependencies and everything needed, but I end up with an odd document that doesn't work either.

So, how could we get a stand-alone, off-line and convenient documentation, that doesn't rely on JavaScript? Actually, a plain HTML page that lists everything would be perfect.

Thanks in advance!

Hello World,

I noticed that the oscillator example isn't working:

http://p5js.org/learn/examples/Sound_Oscillator_Frequency.php

I'm pretty sure its a broken link to the js file. Here is the error from the javascript console:

Failed to load resource: the server responded with a status of 404 (Not Found) http://p5js.org/learn/examples_src/33_Sound/05_Oscillator_FFT.js

When I looked through the source I noticed that the file name is 07_Oscillator_FTT.js but the error shows that it is trying to pull in a file called 05_Oscillator_FTT.js.

I cloned the repo and fixed the link and its working now. I'm not totally sure on what the protocol is for contributing so if someone could point me in the right direction that would be great.