by Florian Rieder 5 (1 reviews)

Easy p5.js Block

Name: Easy p5.js Block
Rating: 5.0 (1 reviews)
Author: Florian Rieder

Adds a Gutenberg block to easily add custom p5.js code in your pages and preview it as you edit.

Easy p5.js Block ranks #11,653 among WordPress.org plugins with 200+ active installations, is #998 of 4,938 in the Utilities & Tools category, a 5/5 rating from 1 reviews, and was last updated Oct 6, 2024. Data from WordPress.org, refreshed twice daily — see methodology.

Tested up to WP 6.6.7 (Current: 7.1)

v1.1.2 Current Version v1.1.2

Updated 1 year ago Last Update on 06 Oct, 2024

Refreshed 8 hours ago Last Refreshed on

#998 of 4,938 in Utilities & Tools Top 25% by installs No update in over a year

View on WordPress.org

Rank

#11,653

-13 this week

Active Installs

200+

-28.1%

KW Avg Position

13.7

0.3 better

Downloads

+2 today

Support Resolved

— No change

Rating

100%

Review 5 out of 5

5 (1 reviews)

Next Milestone 300

Total Progress 75%

200+ 300+

521

Ranks to Climb

Growth Needed

8,000,000

Active Installs

Pro

Unlock Exact Install Count

See the precise estimated active installs for this plugin, calculated from real-time ranking data.

Exact install estimates within tiers
Track install growth over time
Milestone progress predictions

Upgrade to Pro

Need 25 more installs to reach 300+

Rank Changes

Current #11,653

Change

Best #

Upgrade to Pro

Unlock 30-day and 90-day rank history charts with a Pro subscription.

Upgrade Now

Active Installs Growth

Upgrade to Pro

Active Installs 0,000,000+

Growth +0.0%

Peak 0,000,000

Downloads Growth

Downloads

Growth

Peak

Upgrade to Pro

Unlock 30-day, 90-day, and yearly download history charts with a Pro subscription.

Upgrade Now

Reviews & Ratings

5.0

1 reviews

Overall 100%

1 (100%)

0 (0%)

Security History

Source: WPVulnerability

No known vulnerabilities on record for Easy p5.js Block. Checked 1 month ago.

Track This Plugin

Get detailed analytics, keyword tracking, and position alerts delivered to your inbox.

Start Tracking Free

Plugin Details

Version: 1.1.2
Last Updated: Oct 06, 2024
Requires WP: 6.1+
Tested Up To: 6.6.7
PHP Version: 7.0 or higher
Author: Florian Rieder

Support & Rating

Rating: ★ ★ ★ ★ ★ 5
Reviews: 1
Support Threads: 0
Resolved: 0%

Keywords

creative coding generative art javascript p5js processing

Upgrade to Pro

Unlock keyword rankings, search positions, and detailed analytics with a Pro subscription.

Upgrade Now

Similar Plugins

Adminify – White Label, Admin Menu Editor, Login Customizer

6K+ installs

#2,751

Master Addons for Elementor – Elementor Addons, Widgets, Mega Menu Builder, Popup Builder, Widget Builder & Template Kits

30K+ installs

#1,006

Elementor Website Builder - more than just a page builder

10M+ installs

Contact Form 7

10M+ installs

All-in-One WP Migration and Backup

5M+ installs

#10

UpdraftPlus: WP Backup & Migration Plugin

3M+ installs

#15

WPCode - Insert Headers and Footers + Custom Code Snippets - WordPress Code Manager

View all Utilities-and-tools plugins

TL;DR

AI summary of the plugin's readme

This plugin is for artists, designers, and developers who want to showcase generative art on a WordPress site using p5.js. It solves the problem of easily inserting and previewing custom p5.js sketches in the Gutenberg editor without relying on the original, less-maintained p5.js block plugin.

Gutenberg block for p5.js code
Live preview while editing
Bundles p5.js library 1.7.0

Frequently Asked Questions

Common questions about Easy p5.js Block

A: No ! Just activate the plugin and add the p5.js block to any page or post to get started.

A: It is highly recommended to define the height and width of your block in the block settings panel, and use createCanvas(windowWidth, windowHeight) to ensure that your sketche's sizing is responsive. However, you can define a fixed size for the canvas in your script using for example createCanvas(600, 400). In this case, the size of the block will adapt to the canvas size defined in the script automatically, unless the size of the block has been defined in its setting panel. In order for your sketch to be rendered properly when using createCanvas(windowWidth, windowHeight), it is important to remember that in the context of the p5.js block, the variables windowWidth and windowHeight refer to the width and height of the block. When using dynamic sizing in your script, define the desired height and width of your canvas in the block settings panel. Warning : when using windowHeight, the preview won't work. You can fix this by using an integer value (e.g. createCanvas(windowWidth, 500)), or leave as is, since it won't affect the final page.

A: To achieve this effect, select the "Full width" alignment option in the block's toolbar, and use createCanvas(windowWidth, windowHeight) in your script. Don't forget to set the height of your canvas in the block settings panel. The width setting will be ignored. A horizontal scroll bar can appear in pages using full width alignment. To fix it, you can add this CSS to your site's custom CSS: `css body { overflow-x: hidden; } `

A: You can contribute on the GitHub Repository of this plugin.