processing/p5.js-website-legacy

Archived p5.js website 2015-2024

This repository is archived. You can find the current repository for the p5js.org website here: https://github.com/processing/p5.js-website

p5js website

How To Contribute

Known bugs and intended new features are tracked using GitHub issues. If you'd like to start working on an existing issue, comment on the issue that you plan to work on it so other contributors know it's being handled and can offer help. Once you have completed your work on this issue, submit a pull request (PR) against the p5.js main branch. In the description field of the PR, include "resolves #XXXX" tagging the issue you are fixing. If the PR addresses the issue but doesn't completely resolve it (ie the issue should remain open after your PR is merged), write "addresses #XXXX".

If you discover a bug or have an idea for a new feature you'd like to add, begin by submitting an issue. Please do not simply submit a pull request containing the fix or new feature without making an issue first, we will probably not be able to accept it. Once you have gotten some feedback on the issue and a go ahead to address it, you can follow the process above to add the fix or feature.

We recognize all types of contributions. This project follows the all-contributors specification. Add yourself to the p5.js repository readme by following the instructions here!

Add Yourself to Contributors

If you've contributed to this website (or any other part of the p5.js project), add yourself here. Instructions to do this can be found at the bottom of the section.

Stewards

Stewards are contributors that are particularly involved, familiar, or responsive to certain areas of the project. Their role is to help provide context and guidance to others working on p5.js website. If you have a question about contributing to a particular area, you can tag the listed steward in an issue or pull request. They may also weigh in on feature requests and guide the overall direction of their area, with the input of the community.You can read more about the organization of the project at contributor_docs/organization.md, p5.js Contributor Guidelines, and p5.js Steward Guidelines.

✨Anyone interested can volunteer to be a steward! ✨There are no specific requirements for expertise, just an interest in actively learning and participating. We can start with 1-3 stewards for each area. If you’re familiar with one or more areas of p5.js website, please reply to this issue to volunteer as a steward!

Once added, a steward's username will remain in the stewards section of the readme until they request to be removed. If a steward is unresponsive for an extended period of time, we may ping them to ask about their status. And you can always take a break as a steward and come back!

Website Steward(s)

Area	Steward(s)
Overall	@Qianqianye, @limzykenneth
Reference	@Divyansh013
Example	GSoC 2022: @Malayvasa (Contributor), @tyler-yin(Mentor); @3ru
Teach	GSoC 2022: @Gracia-zhang (Contributor), @yinhwa(Mentor); @SarveshLimaye
Showcase	GSoC 2022: @anniezhengg (Contributor), @raclim(Mentor)
Learn	@nickmcintyre
Libraries	@Qianqianye
Community/Books/Social Media	@Qianqianye
Contributor Docs	SoD 2022: @limzykenneth
Other suggested area?

Translation Steward(s)

Language	Steward(s)
Overall	@Qianqianye, @limzykenneth
Spanish	@Guirdo, @Andreu-G, @dnd-alv, @holomorfo
Chinese	@unicar9, @Gracia-zhang, @pentalei
Korean	@yinhwa, @almchung, @jhongover9000, @sssueing, @GeryGeryGery, @sosunnyproject
Hindi	@adarrssh, @Divyansh013, @deepchauhan, @SarveshLimaye

Other Language Steward(s):

• Portuguese: @raphaelavelar, @mrseoliveira

Setup

1. Install node.js.
2. Clone this repo by typing git clone https://github.com/processing/p5.js-website/ in terminal.
3. Navigate to the p5.js-website directory in the terminal and type npm install.

Running

Once you've setup the site, type npm run watch to run the website. This should open a window in your browser with the site running at http://localhost:9000.

File structure

• See note about what to include in pull requests here.
• src/ – All the pieces for generating the built site. Edits should be made here.
  • assets/ – All static files (imgs, css, fonts, js, p5_featured homepage sketches)
    • Note: if you make edits here you must restart the server to see your changes. To see changes immediately, you can edit the assets files in the dist directory, but need to copy and paste your updated work here for it to be saved.
  • data/ – translation files
  • templates/
    • layouts/ – default.hbs is main page template
    • pages/ – Contains each of the pages of the p5 site, these get inserted in {{> body }} tag of default layout. Note that for some pages (ex: learn, teach, and libraries) the hbs files are built from ejs files in the data/ folder. When this is the case, you will find a README file inside that page's folder with notes about how this works.
    • partials/ – These are reusable pieces that can get added to any page or layout, they correspond to other {{> filename }} tags in the pages or default layout.
• dist/ – Where the rendered files are stored, this gets generated via grunt server but does not get added to pull requests as it is auto-built online.
• Gruntfile.js – This file contains all the tasks for using assemble and YAML to generate the final, static site. It uses the taskrunner grunt.

Tools

• Assemble is used to build a static site out of all the layouts and yml data.
• grunt-assemble-i18n renders a set of pages for each language specified in the gruntfile, based on the handlebars templates and yml data. There is not a lot of documentation, but this example demonstrates the functionality well.
• assemble-contrib-permalinks allows us to customize the permalinks (file structure of the rendered static site).

Translation/i18n

• Instructions for contributing to website translation/internationalization

Externally hosted language versions

• https://p5js.jp - 日本語 (Japanese), translated and hosted by Katsuya Endoh
• https://p5js-unofficial-french-translation.vercel.app - French, translated and hosted by LEMIBANDDEXARI

Regarding website translation, we are rolling out new languages slowly to be absolutely sure that we can support the full translation and maintenance of each language. We want to avoid the situation where we have many languages and it's beyond our means to support. So for this reason, we are holding now with Spanish, Chinese, Korean, and Hindi and getting those fully complete before we take on others.

We very much welcome translations that are hosted elsewhere. For example, https://p5js.jp/ - 日本語 (Japanese), translated and hosted by Katsuya Endoh. Please feel free to translate any of the website content and host it on an external blog or site. All of the website content is licensed under Creative Commons which makes it possible to reuse this content for non-commercial purposes if it is credited. We would be happy to share links and make connections so others can find and use this material.

p5.js-website-legacy's Issues

No text wrap in comments of reference examples

Reposting bug from processing/p5.js-website-OLD#234

This is still an issue on the new website.

Problem can be seen here: http://p5js.org/reference/#/p5/rect

Problem occurs both in Chrome and in IE

Merging

How or which repository will be the future main repository, mayaman/p5js-website or processing/p5.js-website? I'm worried about the differences in the content between these repositories. For instance the gallery and contribution section aren't in the scope or focus of the current translation. What is the plan?

port adding examples documentation to wiki

This page needs to be moved to the wiki here, and updated for the current website flow.

Also need to update the link from this page: https://github.com/processing/p5.js/wiki/Development

Broken link on texture()

https://p5js.org/reference/#/p5/texture

link to the example under the description is broken, links to: https://http//p5js.org/examples/3d-materials.html

one error on console when running the i18n version

Uncaught ReferenceError: w is not defined
at window.onload (init.js:103)

this doesn't happen on the p5js active website,
maybe because the i18n buttons are not enabled yet?

reference

this is a trickier one, it seems like it should be a second stage focus after the initial site launch

curating, organizing, and posting homepage sketches

We typically try to switch these out each month. For the next couple months we're doing a series featuring Asian women and gender non-conforming artists (see http://diversity.p5js.org for more info). But we have nothing planned after that. It would be awesome to curate other group collections.

crowd source translation

to translate the entire site, we need to have all of the text (currently stored as strings in a yml file) translated into another language and stored.

WEBGL renderer issues...

sorry, missed the right repository... pasting to the right one

DIfficult to copy Examples with iOS Safari

From @ricardocanada on November 24, 2016 20:2

When I try to copy example code from https://p5js.org/examples/ in iOS Safari to use in my iPad environment, it is almost impossible to do so unless the example has an Edit button. That seems to put the code in Raw form, and then all of my selection and copy options work. Otherwise it is almost impossible to select text, and when occasionally I do get the menu with a Select All option, the menu with the Copy option does not appear. Very frustrating this morning, and I didn't get the code I wanted. I hope that the webmaster of the site will consider 1. Giving every example an Edit button or 2. GIving examples without an Edit button a Raw button the way GitHub does.

Thanks for listening.

Copied from original issue: processing/p5.js#1677

add hover feedback for run/reset example buttons

I think we used to have hover feedback for run/reset example buttons but it seems to have disappared. Maybe the button should come to full opacity (background and text) on hover?

issue with the examples

Examples (first two columns) not working on Chrome / Safari on OSX.
Error: Uncaught TypeError: a.indexOf is not a function
at r.fn.init.r.fn.load (jquery-3.2.0.min.js:4)
at Object.init (examples.js:36)
at examples.js:174

header bar on mobile isn't properly spaced

This should ideally be one line. Maybe "Processing for Android" could just become "Android" on mobile header. Maybe "Processing.py" could become "py" or "Python".

Site down!

It looks like the site is currently down, can anyone confirm?

http://downforeveryoneorjustme.com/p5js.org

download of a modular generated library

In the majority of cases I used canvas libs for simple drawings, but I had to download the complete library. In my view it's a huge disadvantage, because the libraries are almost fat.

It would be a huge advantage, if we could offer a download of a modular generated library. I imagine something like the Modernizr download page, where you can select parts of the library (primitives, lights, camrea, ...).

In addition we could add a seperate namespace.

What do you think?

Regards,
Darius

mobile examples not displaying correctly

for example: http://p5js.org/examples/mobile-simple-draw.html

processing/p5.js#1852

navigation between languages

Some pages have a more nested file path than others (i.e. examples) which makes it difficult to have the non-default language as simply another folder because the links on the sidebar would have to be different on the english site vs the spanish (or other languages) site.

Currently, I think the best solution is to create a completely new domain with either a specific extension or a subdomain to represent the site in another language, so the sidebar partial stays the same for all languages.

I must figure out how exactly this should be implemented if this is how we decide to structure the site. Also, I am open to other suggestions/feedback on the issue if anyone has any!

search site

need to implement search site function in the upper-right hand corner of the header

pages to port:

• download
• reference (and all of its subpages)
• form to submit work
• hello.p5js.org ?

Debugging Tutorial offline or missing

Reported here: fathominfo/processing-p5js-mode#12

Window Scroll Bar Issue on: http://p5js.org/get-started/

Issue first reported here: processing/p5.js-website-OLD#176

Still experiencing issue on new version of the site.

Can reproduce in Chrome on Windows 10.
Problem occurs without the resizing of the window described in the original ticket.

Create support for multiple languages

We can use google translate APIs or bing language APIs for translating the page automatically than to do manually for every language.

Any suggestions?

Example not working

Hi there,

Was looking at the Smoke Particles example on the p5 website and it doesn't seem to be working. I ran the p5 sketch locally and works just fine. Might be something to do with how the site is rendering examples. I noticed the bug when I ran on chrome and firefox. The only errors on the console were a reference to "testing i18n" init.js:172

https://p5js.org/examples/simulate-smokeparticles.html

hope this helps!
-Jason

home page sketch

need to choose what sketch will be put on the home page when the site goes live.

reference gone

The reference doesn't work anymore. When you refresh often sometimes it shows but in most cases the reference pages stay empty. (Both safari and chrome on mac. I don't know if window works).

Typo in P5.Element reference

https://p5js.org/reference/#/p5.Element
In the mousewheel() documentation on the above page,
callback is misspelled as "callabck"

items in need of spanish translation

to keep track of additional translation edits we need to make

• http://p5js.org/download/ (text inside p5.js complete box)
• http://p5js.org/learn/ - added optimization
• http://p5js.org/libraries/ - added p5.func
• https://p5js.org/contributors-conference
• https://p5js.org/get-started (download7, download8)
• taglines
• tutorial page
• footer4
• http://p5js.org/download/support.html
• check that the footer "p5.js was created by Lauren McCarthy and is developed by a community of collaborators, with support from the Processing Foundation and NYU ITP. Identity and graphic design by Jerel Johnson. © Info." is translated in every kind of subdomain on the site.
• mailing list section on http://p5js.org/community/
• p5.js can't be downloaded from p5js.org/es/download, version doesn't appear too
• http://p5js.org/reference/ (offline reference link at top)
• p5js.org/es/reference page menu and header is still in English
• translate "If you see any errors or have suggestions, please let us know" to "Si encuentras algún error o tienes alguna sugerencia, por favor avísanos" in all of the Reference entries
• translate "Find any typos or bugs? X is documented and defined in Y. Please feel free to edit the file and issue a pull request!" to "¿Encontraste algún error? X está documentado y definido en Y. Por favor ten la libertad de editar el archivo y hacer un pull request" in all of the Reference entries
• translate "Parameters" to "Parámetros" in all of the Reference entries
• at p5js.org/es/reference, translate "Search the API" to "Busca en la API"
• at every entry of the p5jsorg/es/reference, translate "Search the API" to "Busca en la API"
• make hover-on texts in reference appear in Spanish
• add subtitles to http://hello.p5js.org/, it is linked from "hello" on the spanish version of the website.
• fix bug where [p5 Element] turns into [object Object] at https://p5js.org/es/reference/#/libraries/p5.dom
• translate example src/data/examples/es/00_Structure/en/08_Create_Graphics.js
• double-check that comments on reference examples are translated to Spanish
• add a sketch by a spanish speaking artist to celebrate the launch of the website.
• for translating the site https://p5js.org/es/reference/#/libraries/p5.dom to Spanish, do I need to modify the file p5.js/docs/reference/api.js ?

[Violation] 'requestAnimationFrame' handler took 1816ms

I'm using Chromium v. 57.0.2987.133 (64-bit) on GNU-Linux (8.4.13-1-ARCH) to navigate through the p5 reference pages. Every so often (in intervals ranging from about .5 < 4 seconds) the browser falls behind.

Sometimes I can't move the pointer for up to two seconds! And if I play sound or video in a background tab, it seems to seek back?! Using devtools, I observed the timeline and call stack. Here are some of the violations I get in the console. Note that I had disabled my extensions, and had only two tabs open.

[Violation] 'setTimeout' handler took 54ms
[Violation] 'requestAnimationFrame' handler took 1555ms
p5.min.js:6 [Violation] Handling of 'wheel' input event was delayed for 1868 ms due to main thread being busy. Consider marking event handler as 'passive' to make the page more responsive.
[Violation] 'requestAnimationFrame' handler took 1816ms
[Violation] 'mousemove' handler took 965ms
[Violation] Forced reflow while executing JavaScript took 965ms
[Violation] 'requestAnimationFrame' handler took 1781ms
[Violation] 'requestAnimationFrame' handler took 1289ms
etc ...

Is the wildcard animation really necessary? I think most users would agree that this experience makes the reference pages completely unusable. In an issue in the p5 repo, offline documentation is proposed. That did not really work for me (it depends on some php page?). I'd personally rather have it presented in one big happy plain text file or a pdf version anyway. I'm willing to contribute to that.

Grunt imagemin:images task is slow or frozen

I'm running grunt server, and it freezes on the imagemin:images task. If it's not frozen, then it takes a very long time to run (I let it run for as long as 7 minutes) and we might want to warn about that. This is my first time building the new website, I am following the steps from the readme.

how to change the wikipedia links on the spanish version

I want to, for example, change the link for "code editor" in the "getting started" in spanish, to point to the spanish link on wikipedia, instead of english.

I suppose it has to do with the index.hbs file, but still can't figure it out.

Reference Examples Editor Breaking on Chrome Mac 56

When clicking on a reference example using Chrome 56 Mac the editor is glitching out and does not function. I noticed that some attributes are being changed very frequently to some very strange values.

URL Tested: https://p5js.org/reference/#/p5/alpha
Chrome: Version 56.0.2924.87 (64-bit)
OSX: 10.11.6

Works fine on Firefox Latest Macosx. I will continue to investigate and send a PR if I find a fix.

Displaying search results properly

When we hit a search query, the website is directing to a google search page, it would be nice if it is displayed on the web page itself.

Broken link on the examples page

Hey, looks like the link for Sound / Measuring Amplitude on the examples page is broken.

The link should be to https://p5js.org/examples/sound-measuring-amplitude.html
but is actually to https://p5js.org/examples/sound--measuring-amplitude.html

Not sure how that extra dash got added!

404 in example page

Hi,

On the examples page it seems that there's a typo in the link for the Noise1D example. It's pointing at: https://p5js.org/examples/math--noise1d.html which is a 404;

https://p5js.org/examples/math-noise1d.html (single hyphen) works correctly.

Thanks,
Stephen

can't see the EN/es buttons when building the website

i have to manually add "/es" at the end of the address to show the spanish version

Translations?

Feel free to close this one if it's not relevant yet or already in progress etc.

I'm just wondering if the translation for the site for other languages other than Spanish are ongoing? If not what are the plans if any?

Broken Link on normalMaterial Reference Page

The normalMaterial reference page has a broken link to the example (currently https://http//p5js.org/examples/3d-materials.html).

examples page

• look at example page build scripts, can it be integrated with current grunt process?
• once this is done, translation

gallery page?

top collapsable navigation bar for mobile only

The desktop version of the website has menu items which wrap themselves in mobile view. It would be a lot better if there is a top collapsible navigation bar for mobile view only.

@lmccart What do you think about this?

issue with Grammarly extension

In reference, whenever we click on the edit button of some example. Run and reset buttons are vanishing and this is happening only when there is a grammarly extension on the browser.

Do anyone know why this is happening?

See the gif.

Spanish version of Libraris page is missing some translations

The descriptions for the p5.tiledmap, p5.dimensions and p5.SceneManager libraries appear in English in the Spanish version of the website.

menu causes autoscroll when it locks to the bottom of the window

The menu can lock into the bottom of the window which causes a sort of autoscroll

Chrome Version 56.0.2924.87 (64-bit)

This is especially noticeable on the reference page:

Must introduce a copy button and a better documentation ...

3D_Materials.php not found

Clicking on the examples in the Material reference pages that includes normalMaterial(), texture(), ambientMaterial(), specularMaterial() leads to 404 error.

missing people page

things to do before going live

(we will hide i18n buttons until ready to go live with translation)

• add back in tagline
• disable i18n buttons and auto-detection for p5js.org domain
• add people page
• add reference
• fix spanish reference
• hook up versions for downloads
• copyright info page

titles of reference pages do not include a unique title

Currently the reference pages all have the title of "p5.js | reference". This makes going back through history a difficult task. It seems like these should all have unique titles.

proposed title: p5.js | reference | Image()
Processing's web documentation is more or less reversed: Image() | p5.js | Reference

I believe this would be a relatively easy template change.

search form not expanding on hover

the search bar in upper right should appear and expand on hover, you can see it in action here: http://p5js.org, on the staging site this seems to be broken.

the relevant code is here: https://github.com/mayaman/p5js-website/blob/master/src/assets/js/main.js.

@nok has jquery been removed completely from the site? I'd guess this is the issue then. however, while I like the idea of improving speed by removing jquery, I'm not sure it's sustainable from a development perspective to not have access to the helpers it provides. or maybe I'm misunderstanding the rearrangement that happened with jquery? it seems like it is being recognized in some places.. can you clarify? sorry if I missed the explanation somewhere earlier.

Links on main page not clickable

Happened to be on the p5.js website today and I noticed the links in the main copy (section#home) are not clickable.