Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
7
Help us understand the problem. What is going on with this article?
@y___k

CreativeCoding用にP5.jsがTypeScriptで書ける環境をつくった。

More than 1 year has passed since last update.

数学から創るジェネラティブアート - Processingで学ぶかたちのデザイン」という本を予約したが、しばらくProcessingを書いてないので、本を待ちつつコーディングする環境をつくった。
サンンプルで入れたのは、ローレンツ・アトラクター。カオスの一面。
lorenz_attractor.png

GitHub

考えたのは以下のこと。

  • ブラウザで見たいのでP5.jsをつかう。
  • TypeScriptで書きたい。
  • 少しはCSS使いたいから、Sass入れる。
  • もろもろWebpackでまとめる。
  • でも作品ごとのjsは分けたい。
  • HTMLのジェネレーターは特に入れず。
  • シンプルに。

バンドルしたP5.jsの容量が大きい!

解決策はコレ。ありがたい。importの書き方を変えればよし。
https://github.com/processing/p5.js/issues/1734#issuecomment-390380630

import p5 from "p5"

import p5 from "p5/lib/p5.min"

ただし、p5.sound使う場合はまだ問題アリとのこと。

リンク

p5.js
https://p5js.org/
OpenProcessing
https://www.openprocessing.org/
NEORT
https://neort.io/

7
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
y___k
Front-End Engineer & Designer
un-tsystem
デジタル領域においてユーザーと企業をつなぐさまざまなWebサービスやシステム構築、アプリ制作等を、企画・戦略から制作・運用まで行います。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
7
Help us understand the problem. What is going on with this article?