flâneur

p5js with AI 100日チャレンジ

zenn.dev · 1,888 words · saved by 1 readers

まずは格子状にシェイプ（△，□，◯）を並べ，時間経過とともに小さくなったり，本のサイズに戻るようなアニメーションをする幾何学アート．吐かれたコードを自分で手直しをすれば頭の中の完成品になるんだが，あえてプロンプトのみでコーディングをしてみたかったので，完成には至らず．だいぶ気持ちの悪い挙動になってしまった… ちなみに今日は Cursor の Agent で Auto-select で書いてみた． 三角関数を多重にかけることで，変わった挙動をするように変更してみた． 本当は point() 関数を使って全然違う絵を描きたかったが，昨日の絵の文脈のまま書いてしまったのと，思ったより見たら面白かったので，今日はこれを作品とする． ちなみに今日も Cursor に全振りしてる． 正直ちょっと不満というか，納得はいっていない．というのも，開始10minくらいでできたものをアップしているから．ただ，完全に不満ではなく，思ったよりは良いものが一瞬で出てきたなと． これをブラッシュアップしてより良い作品に仕上げられそうに感じている． 今日からどんなプロンプトを投げたかも乗せておく 本当は，任意の絵文字を画面の中央に拡大して描画し，それを画像をして認識し，その画像内を円充填したかったが，何度やっても loadPixles() 後の pixels 配列を観ても，絵文字の部分がすべて 255 のままだったため，無理だった．途中からガチで自分自身でデバッグして無理だったので，自分の能力不足のため，どっかでリベンジする． ということで，違う円充填を描いた． キャンバス内に quad を用いてランダムな配置とサイズで図形を描き，その内部を4色の円で充填させたもの． アイディアそのものが全く浮かばなかったので，ちょっと置きに行った作品． 困ったら誰かの作品を模倣するところから言っても良いかもなぁ． ドットによる点描のアニメーションや画像は地味に好きなのでなにかないかなーということで書いてみた． 改良の余地はあるが，眠すぎるのでこれが今の実力ということで，明日以降の俺に託す． 途中経過のものもすべて添付 プロンプトは以前のものがなくなってしまったので今回はなしで． Okazz さんの様なアニメーションをしてみたかったので，ちょっとコードはパクった． といってもまだ不完全さは残る． 最近は Clau

// =========================== // Config // =========================== let W, routes = [], gridSize, hubPoints = []; const GRID = { edgeMin: 2, edgeMax: 12, hubMin: 4, hubMax: 10, cells: 14 }; const ROUTE = { min: 7, max: 10, waypoints: [6, 9], stations: [8, 12], hubs: [3, 6], }; const THRESH = { selfIntersect: 2.5, minWaypoint: 1.5, hubReach: 1.5, cornerRadius: 0.8, transfer: 0.6, }; const PROB = { hubPass: 0.7, maxAttempts: 20 }; const STYLE = { line: 5, lineOutline: 8, stationNormal: 9, stationTransfer: 11, strokeNormal: 3.5, strokeTransfer: 4.5, }; const colors = [ '#E63946',…

saved by

related reading