Title: Easy p5.js Block
Author: Florian Rieder
Published: <strong>2023年3月2日</strong>
Last modified: 2024年10月6日

---

プラグインを検索

![](https://ps.w.org/easy-p5-js-block/assets/banner-772x250.png?rev=2873329)

このプラグインは **WordPress の最新3回のメジャーリリースに対してテストされていま
せん**。もうメンテナンスやサポートがされていないかもしれず、最新バージョンの WordPress
で使用した場合は互換性の問題が発生する可能性があります。

![](https://ps.w.org/easy-p5-js-block/assets/icon.svg?rev=2873329)

# Easy p5.js Block

 作者: [Florian Rieder](https://profiles.wordpress.org/florianrieder/)

[ダウンロード](https://downloads.wordpress.org/plugin/easy-p5-js-block.1.1.2.zip)

 * [詳細](https://ja.wordpress.org/plugins/easy-p5-js-block/#description)
 * [レビュー](https://ja.wordpress.org/plugins/easy-p5-js-block/#reviews)
 *  [インストール](https://ja.wordpress.org/plugins/easy-p5-js-block/#installation)
 * [開発](https://ja.wordpress.org/plugins/easy-p5-js-block/#developers)

 [サポート](https://wordpress.org/support/plugin/easy-p5-js-block/)

## 説明

This p5.js Gutenberg block plugin is the perfect tool for showcasing your generative
art or adding an extra level of visual interest to your website. With [p5.js](https://p5js.org/),
you can create interactive, dynamic, and customizable visuals that will keep your
audience engaged and excited. Whether you’re an artist, designer, or developer, 
this plugin makes it easy to integrate your p5.js sketches into your WordPress website.
Impress your visitors with your stunning generative art and take your website to
the next level with this p5.js Gutenberg block plugin.

[Try it out on a free dummy site now !](https://tastewp.org/plugins/easy-p5-js-block/)

### Acknowledgements

This plugin is similar to Mark Uraine’s [p5.js block](https://wordpress.org/plugins/wp-p5js-block/),
and is in fact reverse engineered from it, although very little of the actual code
is reused (see [mapk/p5js-block](https://github.com/mapk/p5js-block)). I was prompted
to develop this plugin due to encountering bugs, lack of display options, and mostly
the lack of updates and support for this original plugin. I feel like it should 
be easier to insert p5.js artworks into WordPress websites and blogs, and this is
my contribution to it (although it may be buggy, I try my best. Feel free to ask
in the support forum, or open an issue or a pull request on [Github](https://github.com/florian-rieder/gutenbergp5)).

This project uses the p5.js library version 1.7.0, which is free software under 
the [GPL License](http://p5js.org/copyright.html). Currently, this plugin does not
include the `p5.sound.js` libraries.

## スクリーンショット

 * [[
 * Insert the p5.js block in the editor and edit the code.
 * [[
 * Preview the results from within the editor.
 * [[
 * Create full width sketches using the “Full width” alignment setting and `createCanvas(
   windowWidth, windowHeight)`

## ブロック

このプラグインは1個のブロックを提供します。

 *   p5.js Add custom p5.js code and preview it as you edit.

## インストール

 1. Upload the plugin files to the `/wp-content/plugins/` directory, or install the
    plugin through the WordPress plugins screen directly.
 2. Activate the plugin through the ‘Plugins’ screen in WordPress.

## FAQ

### Q: Does this plugin require a configuration ?

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

### Q: How should I size my canvas with this plugin ?

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.

### Q: How can I make a canvas that takes the full width of the window ?

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; } `

### Q: Where can I contribute to the project?

A: You can contribute on the [GitHub Repository](https://github.com/florian-rieder/gutenbergp5)
of this plugin.

## 評価

![](https://secure.gravatar.com/avatar/3fbfba82f0688d8f5c5ee5c72694f546122dd00929dc716bd897e8eb0cd58922?
s=60&d=retro&r=g)

### 󠀁[Showcase your generative art](https://wordpress.org/support/topic/showcase-your-generative-art/)󠁿

 [jawharkodadi](https://profiles.wordpress.org/jawharkodadi/) 2023年3月5日 1 reply

As an artist and programmer, I have been looking for a way to integrate my generative
art into my WordPress website, and this plugin has been the perfect solution. Thanks
to you I have been able to showcase my generative art on my WordPress website in
a way that is visually stunning and interactive. I highly recommend it to anyone
looking to integrate generative art into their WordPress site. In summary, if you’re
an artist or a programmer and you’re looking for a way to showcase your generative
art on your WordPress site, then look no further. It’s a fantastic plugin that is
easy to use, versatile, and powerful. Highly recommended!

 [ 1件のレビューをすべて表示 ](https://wordpress.org/support/plugin/easy-p5-js-block/reviews/)

## 貢献者と開発者

Easy p5.js Block はオープンソースソフトウェアです。以下の人々がこのプラグインに貢献
しています。

貢献者

 *   [ Florian Rieder ](https://profiles.wordpress.org/florianrieder/)

[“Easy p5.js Block” をあなたの言語に翻訳しましょう。](https://translate.wordpress.org/projects/wp-plugins/easy-p5-js-block)

### 開発に興味がありますか ?

[コードを閲覧](https://plugins.trac.wordpress.org/browser/easy-p5-js-block/)する
か、[SVN リポジトリ](https://plugins.svn.wordpress.org/easy-p5-js-block/)をチェック
するか、[開発ログ](https://plugins.trac.wordpress.org/log/easy-p5-js-block/)を [RSS](https://plugins.trac.wordpress.org/log/easy-p5-js-block/?limit=100&mode=stop_on_copy&format=rss)
で購読してみてください。

## 変更履歴

1.1.2

 * Fixed textarea width
 * Moved p5.js dependency to a local asset instead of using a CDN link.
 * Updated p5.js to 1.11.0.
 * Fixed horizontal overflow with full width option.
 * Fixed preview overflow issues.
 * Improved canvas auto-sizing.

1.1.1

 * Speculative fix for a bug where the canvas sizing would fail on chromium-based
   browsers.

1.1.0

 * Added a “Full width” alignment option.
 * Fixed a bug where the canvas sizing would sometimes fail.

1.0.0

 * Released working block with sizing, layout and scrollbar settings.

## メタ

 *  バージョン **1.1.2**
 *  最終更新日 **2年前**
 *  有効インストール数 **300+**
 *  WordPress バージョン ** 6.1またはそれ以降 **
 *  検証済み最新バージョン: **6.6.5**
 *  PHP バージョン ** 7.0またはそれ以降 **
 *  言語
 * [English (US)](https://wordpress.org/plugins/easy-p5-js-block/)
 * タグ
 * [generative art](https://ja.wordpress.org/plugins/tags/generative-art/)[javascript](https://ja.wordpress.org/plugins/tags/javascript/)
   [p5js](https://ja.wordpress.org/plugins/tags/p5js/)[processing](https://ja.wordpress.org/plugins/tags/processing/)
 *  [詳細を表示](https://ja.wordpress.org/plugins/easy-p5-js-block/advanced/)

## 評価

 5つ星中5つ星

 *  [  1 5-星レビュー     ](https://wordpress.org/support/plugin/easy-p5-js-block/reviews/?filter=5)
 *  [  0 4-星レビュー     ](https://wordpress.org/support/plugin/easy-p5-js-block/reviews/?filter=4)
 *  [  0 3-星レビュー     ](https://wordpress.org/support/plugin/easy-p5-js-block/reviews/?filter=3)
 *  [  0 2-星レビュー     ](https://wordpress.org/support/plugin/easy-p5-js-block/reviews/?filter=2)
 *  [  0 1-星レビュー     ](https://wordpress.org/support/plugin/easy-p5-js-block/reviews/?filter=1)

[Your review](https://wordpress.org/support/plugin/easy-p5-js-block/reviews/#new-post)

[すべてのレビューを見る](https://wordpress.org/support/plugin/easy-p5-js-block/reviews/)

## 貢献者

 *   [ Florian Rieder ](https://profiles.wordpress.org/florianrieder/)

## サポート

意見や質問がありますか ?

 [サポートフォーラムを表示](https://wordpress.org/support/plugin/easy-p5-js-block/)