このプロンプトやってみて!
300匹の小さな魚が群れをなして泳ぐ姿のシミュレーションをp5jsを使って作って。Windowを水槽に見立てて、壁にぶつからないようにして
これは、@snakajimaさんのX.comからアイデアを拝借!
Claude 3.7 sonnet に作らせた魚の群れのシミュレーション。こんなのが一瞬で出来る。プロンプトは「300匹の小さな魚が群れをなして泳ぐ姿のシミュレーションをp5jsを使って作って。Windowを水槽に見立てて、壁にぶつからないようにして」。#メルマガのネタ pic.twitter.com/kYOoFyavbL
— Satoshi Nakajima @GraphAI (@snakajima) February 25, 2025
■P5.js とは?
p5.js(ピーファイブ・ドット・ジェイエス)は、JavaScriptベースのライブラリで、クリエイティブなコーディングやビジュアルメディアの作成を可能にしてくれる。
-
- 絵を描くようにプログラムを作成できる
- キャンバス上で図形や画像を描き、動かすことができる
- WebGLを活用した3D表現ができる
- テキストや入力、ビデオ、ウェブカメラ、サウンドなどのHTML5オブジェクトを含むブラウザのページ全体をスケッチと考えることができる
- 絵を描くようにプログラムを作成できる
- 無料でオープンソース
【活用例】アニメーションの作成、ゲーム風の読み込み画面の作成、アートやデザイン、 学習教材。
- オンラインエディターで作業することもできる
- お気に入りのエディターを使用することもできる
- YouTubeにはたくさんのチュートリアルがある
- 視覚的なプログラミング手法である
- ウェブブラウザ上で実行可能
- 即座にフィードバックを確認できる
- クロスプラットフォームに対応している
- Processingという電子アートのプログラミング言語をJavaScriptで使用できるようにしたライブラリ
- デザイナやアーティストなど普段プログラミングに慣れていない人たちが手軽に、Web上でビジュアルメディアの作成が行えるよう設計されている
show content. claude 3.7 sonet の成果
https://claude.site/artifacts/cb0ab700-82f6-4ada-909d-f106dadb9cb1
300匹の精子を一つのピンクの卵子を追いかけてください。ピンクの卵子は精子につかまらないように縦横無尽ににげてください。 その逃亡の経路をプロットしてリポートしてください
https://claude.site/artifacts/a5bd867f-a6ef-4802-a979-3252333e67ba
Cursor で使う Claude3.7sonnet
mikimiki Webスクール はやいですね!
比較表
Claude3.7Sonnet の位置づけ