到可復(fù)現(xiàn)生成藝術(shù)：algorithmic-art Skill 的 p5.js 完整實(shí)現(xiàn)指南)
人工智能AI 技能AI 評(píng)測(cè)【免費(fèi)下載鏈接】skillsPublic repository for Agent Skills項(xiàng)目地址https://gitcode.com/GitHub_Trending/skills3/skills點(diǎn)擊查看免費(fèi)下載本文圍繞開(kāi)源倉(cāng)庫(kù)中algorithmic-art這一 Agent Skill 展開(kāi)系統(tǒng)講解如何通過(guò)「算法哲學(xué)創(chuàng)作 p5.js 生成藝術(shù)實(shí)現(xiàn)」兩階段流水線產(chǎn)出 90% 由算法生成、10% 由關(guān)鍵參數(shù)控制的交互式生成藝術(shù)品。讀完本文你將掌握種子隨機(jī)性Seeded Randomness、噪聲場(chǎng)、粒子系統(tǒng)與流場(chǎng)的建模思路以及如何基于 viewer.html 模板 構(gòu)建自包含、可實(shí)時(shí)調(diào)參、可復(fù)現(xiàn)的單個(gè) HTML 交互作品。algorithmic-art Skill 是什么algorithmic-art是倉(cāng)庫(kù)中面向「代碼生成藝術(shù)」場(chǎng)景的 Agent Skill其 SKILL.md 描述了一個(gè)明確的能力邊界當(dāng)用戶請(qǐng)求創(chuàng)作生成藝術(shù)、算法藝術(shù)、流場(chǎng)flow fields或粒子系統(tǒng)時(shí)Skill 會(huì)引導(dǎo) Claude 完成一次完整的創(chuàng)作閉環(huán)。它的產(chǎn)出物固定為三類文件.md文件記錄「算法哲學(xué)」Algorithmic Philosophy——一種計(jì)算美學(xué)流派的宣言.html文件一個(gè)可直接運(yùn)行的交互式查看器.js文件承載生成算法的核心邏輯。整個(gè)創(chuàng)作被拆分為兩個(gè)嚴(yán)格有序的階段算法哲學(xué)創(chuàng)作先以文字定義一個(gè)生成美學(xué)運(yùn)動(dòng)計(jì)算過(guò)程、涌現(xiàn)行為、數(shù)學(xué)之美、種子化變化p5.js 生成藝術(shù)表達(dá)再把這個(gè)哲學(xué)翻譯成可運(yùn)行代碼產(chǎn)出交互式 HTML 作品。這一設(shè)計(jì)把「思考」與「實(shí)現(xiàn)」解耦先明確計(jì)算世界觀再讓代碼去表達(dá)它從而避免生成千篇一律的「帶隨機(jī)數(shù)的靜態(tài)圖」。第一階段算法哲學(xué)創(chuàng)作關(guān)鍵理解Skill 強(qiáng)調(diào)一個(gè)核心心智模型用來(lái)界定輸入、創(chuàng)作物與下一步的關(guān)系收到什么用戶的輸入只是「地基」subtle input不應(yīng)約束創(chuàng)作自由度創(chuàng)作什么一個(gè)算法哲學(xué) / 生成美學(xué)運(yùn)動(dòng)接下來(lái)發(fā)生什么同一版本接收哲學(xué)后用代碼表達(dá)它——產(chǎn)出 90% 算法生成、10% 關(guān)鍵參數(shù)的 p5.js 草圖。因此哲學(xué)必須反復(fù)強(qiáng)調(diào)五個(gè)關(guān)鍵詞算法表達(dá)Algorithmic expression、涌現(xiàn)行為Emergent behavior、計(jì)算之美Computational beauty、種子化變化Seeded variation。如何生成算法哲學(xué)第一步為運(yùn)動(dòng)命名1~2 個(gè)詞。例如 Organic Turbulence有機(jī)湍流、Quantum Harmonics量子諧波、Emergent Stillness涌現(xiàn)的靜止。第二步寫(xiě)出 4~6 段完整但凝練的哲學(xué)宣言。宣言需要回答這個(gè)哲學(xué)如何通過(guò)以下維度顯現(xiàn)計(jì)算過(guò)程與數(shù)學(xué)關(guān)系噪聲函數(shù)與隨機(jī)模式粒子行為與場(chǎng)動(dòng)力學(xué)時(shí)間演化與系統(tǒng)狀態(tài)參數(shù)變化與涌現(xiàn)復(fù)雜度第三條關(guān)鍵準(zhǔn)則Skill 用了整整一節(jié)來(lái)強(qiáng)調(diào)避免冗余每個(gè)算法面向只出現(xiàn)一次不要重復(fù)敘述噪聲理論、粒子動(dòng)力學(xué)或數(shù)學(xué)原理除非是在補(bǔ)充新的深度反復(fù)強(qiáng)調(diào)工藝水準(zhǔn)哲學(xué)必須多次強(qiáng)調(diào)最終算法應(yīng)當(dāng)看起來(lái)「經(jīng)過(guò)無(wú)數(shù)小時(shí)打磨、被悉心雕琢、出自頂尖領(lǐng)域?qū)＜抑帧埂@是 Skill 明確要求重復(fù)出現(xiàn)的框架建議使用諸如 meticulously crafted algorithm精心雕琢的算法、the product of deep computational expertise深厚計(jì)算專業(yè)知識(shí)的產(chǎn)物、painstaking optimization煞費(fèi)苦心的優(yōu)化、master-level implementation大師級(jí)實(shí)現(xiàn)之類的措辭留下創(chuàng)作空間算法方向要具體但也要足夠精煉給實(shí)現(xiàn)者留出高層次解釋性選擇的空間。五個(gè)哲學(xué)示例SKILL.md 給出了五個(gè)經(jīng)過(guò)壓縮的示例完整哲學(xué)實(shí)際應(yīng)為 4~6 段。這五個(gè)示例同時(shí)也是算法的雛形值得逐一拆解運(yùn)動(dòng)名稱哲學(xué)Philosophy算法表達(dá)Algorithmic ExpressionOrganic Turbulence 有機(jī)湍流被自然法則約束的混沌秩序從無(wú)序中涌現(xiàn)多層 Perlin 噪聲驅(qū)動(dòng)的流場(chǎng)數(shù)千粒子沿矢量力運(yùn)動(dòng)軌跡累積成有機(jī)密度圖多倍頻噪聲制造湍流區(qū)與平靜區(qū)顏色由速度與密度決定——快粒子燃燒發(fā)亮慢粒子淡入陰影算法運(yùn)行直至平衡Quantum Harmonics 量子諧波離散實(shí)體表現(xiàn)出類波干涉圖樣粒子在網(wǎng)格上初始化各攜帶隨正弦波演化的相位值鄰近粒子的相位相互干涉——相長(zhǎng)干涉形成亮節(jié)點(diǎn)相消干涉形成空洞簡(jiǎn)諧運(yùn)動(dòng)生成復(fù)雜涌現(xiàn)曼陀羅Recursive Whispers 遞歸低語(yǔ)跨尺度的自相似性有限空間中的無(wú)限深度遞歸細(xì)分的分支結(jié)構(gòu)每根分支略微隨機(jī)化但受黃金比例約束L 系統(tǒng)或遞歸細(xì)分生成既數(shù)學(xué)又有機(jī)的樹(shù)狀形態(tài)細(xì)微噪聲擾動(dòng)打破完美對(duì)稱線寬隨遞歸層級(jí)遞減Field Dynamics 場(chǎng)動(dòng)力學(xué)通過(guò)物質(zhì)效應(yīng)讓不可見(jiàn)的力量可見(jiàn)由數(shù)學(xué)函數(shù)或噪聲構(gòu)造矢量場(chǎng)粒子從邊緣誕生、沿場(chǎng)線流動(dòng)到達(dá)平衡或邊界時(shí)消亡多個(gè)場(chǎng)可吸引、排斥或旋轉(zhuǎn)粒子畫(huà)面只展示軌跡——不可見(jiàn)力量的幽靈證據(jù)Stochastic Crystallization 隨機(jī)結(jié)晶隨機(jī)過(guò)程結(jié)晶為有序結(jié)構(gòu)隨機(jī)圓填充或 Voronoi 鑲嵌從隨機(jī)點(diǎn)出發(fā)經(jīng)松弛算法演化細(xì)胞相互推開(kāi)直至平衡顏色由細(xì)胞大小、鄰居數(shù)或到中心距離決定每個(gè)種子都產(chǎn)生獨(dú)一無(wú)二的晶體之美六大核心原則SKILL.md 用「ESSENTIAL PRINCIPLES」一節(jié)鎖定了哲學(xué)的基調(diào)算法哲學(xué)創(chuàng)作一個(gè)將要由代碼表達(dá)的計(jì)算世界觀過(guò)程重于產(chǎn)物始終強(qiáng)調(diào)美來(lái)自算法執(zhí)行過(guò)程每次運(yùn)行都是獨(dú)一無(wú)二的參數(shù)化表達(dá)思想通過(guò)數(shù)學(xué)關(guān)系、力、行為來(lái)傳達(dá)而非靜態(tài)構(gòu)圖藝術(shù)自由下一個(gè) Claude 將按算法方式詮釋哲學(xué)——要為實(shí)現(xiàn)留出創(chuàng)作余地純粹生成藝術(shù)目標(biāo)是「活的算法」而非「帶隨機(jī)性的靜態(tài)圖像」專家工藝反復(fù)強(qiáng)調(diào)最終算法必須顯得被精心雕琢、歷經(jīng)無(wú)數(shù)次迭代、出自計(jì)算美學(xué)頂級(jí)專家之手。哲學(xué)宣言最終應(yīng)以.md文件形式輸出篇幅 4~6 段充滿詩(shī)意但邏輯嚴(yán)謹(jǐn)且不重復(fù)相同論點(diǎn)。推斷概念種子Conceptual Seed在動(dòng)手寫(xiě)算法之前Skill 插入了一個(gè)關(guān)鍵步驟從原始請(qǐng)求中識(shí)別一條微妙的、概念性的線索。這條線索的定位非常特殊概念是嵌入算法內(nèi)部的、微妙的、小眾的引用subtle, niche reference embedded within the algorithm itself——不總是字面化的但始終是精巧的。熟悉該主題的人應(yīng)當(dāng)憑直覺(jué)感受到它其他人則只體驗(yàn)到一個(gè)大師級(jí)的生成作品。算法哲學(xué)提供的是計(jì)算語(yǔ)言而推斷出的概念提供的是靈魂——一種悄悄編織進(jìn)參數(shù)、行為和涌現(xiàn)模式中的「概念 DNA」。Skill 用了一個(gè)傳神的類比就像爵士樂(lè)手通過(guò)和聲即興引用另一首歌只有懂的人能捕捉到但所有人都能欣賞那份生成之美。這一步驟保證了作品有「安靜的深度」參考如此精煉以至于它提升作品深度卻不自我宣告。第二階段p5.js 實(shí)現(xiàn)?? STEP 0先讀模板再寫(xiě)任何 HTML這是全篇最重要的一條硬性紀(jì)律。在寫(xiě)任何 HTML 之前用 Read 工具讀取 templates/viewer.html研究其精確的結(jié)構(gòu)、樣式與 Anthropic 品牌標(biāo)識(shí)把該文件當(dāng)作字面起點(diǎn)LITERAL STARTING POINT而非靈感來(lái)源固定部分原樣保留頭部header、側(cè)邊欄結(jié)構(gòu)、Anthropic 配色/字體、種子控件、操作按鈕只替換可變部分文件注釋中標(biāo)注的算法、參數(shù)、參數(shù) UI 控件。同時(shí)明確列出應(yīng)避免的做法? 從零手寫(xiě) HTML? 自創(chuàng)自定義樣式或配色方案? 使用系統(tǒng)字體或深色主題? 改動(dòng)側(cè)邊欄結(jié)構(gòu)。以及必須遵循的實(shí)踐? 復(fù)制模板的精確 HTML 結(jié)構(gòu)? 保留 Anthropic 品牌標(biāo)識(shí)Poppins/Lora 字體、淺色系、漸變背景? 維持側(cè)邊欄布局Seed → Parameters → Colors? → Actions? 只替換 p5.js 算法與參數(shù)控件。從源碼看viewer.html 文件頭部的注釋直接寫(xiě)明了這套「保留 / 創(chuàng)造性編輯」的邊界即保留整體結(jié)構(gòu)、Anthropic 品牌標(biāo)識(shí)、種子導(dǎo)航區(qū)、自包含結(jié)構(gòu)創(chuàng)造性編輯 p5.js 算法、參數(shù)定義與 UI 控件。技術(shù)需求1. 種子隨機(jī)性Art Blocks 模式可復(fù)現(xiàn)性是整個(gè) Skill 的技術(shù)基石同一個(gè)種子必須永遠(yuǎn)產(chǎn)生相同的輸出。規(guī)范要求始終顯式使用種子// ALWAYS use a seed for reproducibility let seed 12345; // or hash from user input randomSeed(seed); noiseSeed(seed);在 generator_template.js 中這一邏輯被封裝為initializeSeed(seed)函數(shù)并注明調(diào)用后所有random()與noise()調(diào)用都會(huì)變成確定性的。也就是說(shuō)只要在setup()中先執(zhí)行種子初始化粒子的初始位置、噪聲場(chǎng)的取值、分支的角度——一切隨機(jī)量都會(huì)隨種子復(fù)現(xiàn)。2. 參數(shù)結(jié)構(gòu)追隨哲學(xué)設(shè)計(jì)參數(shù)時(shí)要問(wèn)的問(wèn)題是「這個(gè)系統(tǒng)有哪些可調(diào)節(jié)的品質(zhì)」而不是「我要哪種圖案類型」。參數(shù)對(duì)象的基本骨架如下let params { seed: 12345, // Always include seed for reproducibility // colors // Add parameters that control YOUR algorithm: // - Quantities (how many?) // - Scales (how big? how fast?) // - Probabilities (how likely?) // - Ratios (what proportions?) // - Angles (what direction?) // - Thresholds (when does behavior change?) };模板源碼進(jìn)一步揭示了參數(shù)對(duì)象的設(shè)計(jì)動(dòng)機(jī)generator_template.js 注釋說(shuō)明把所有可調(diào)參數(shù)集中在一個(gè)對(duì)象中可以方便地連接到 UI 控件、重置為默認(rèn)值、序列化保存配置。而 viewer.html 則用let defaultParams {...params};保存一份默認(rèn)參數(shù)快照供 Reset 按鈕恢復(fù)——這解釋了「一個(gè)參數(shù)對(duì)象」在工程上的實(shí)際收益。3. 核心算法讓哲學(xué)決定建造什么Skill 反復(fù)強(qiáng)調(diào)避免思考「該用哪種圖案」轉(zhuǎn)而思考「如何用代碼表達(dá)這個(gè)哲學(xué)」。文檔給出了三條哲學(xué)→算法映射線索若哲學(xué)關(guān)于有機(jī)涌現(xiàn)考慮隨時(shí)間累積/生長(zhǎng)的元素、受自然規(guī)則約束的隨機(jī)過(guò)程、反饋回路與相互作用若哲學(xué)關(guān)于數(shù)學(xué)之美考慮幾何關(guān)系與比例、三角函數(shù)與諧波、由精確計(jì)算產(chǎn)生意外圖案若哲學(xué)關(guān)于受控混沌考慮嚴(yán)格邊界內(nèi)的隨機(jī)變化、分岔與相變、從無(wú)序中涌現(xiàn)秩序。算法從哲學(xué)中流出而非從選項(xiàng)菜單中挑選。模板文件的generateFlowField()、draw()與Particle類均留空并標(biāo)注 fill this in正是為了強(qiáng)制實(shí)現(xiàn)者用自己的哲學(xué)去填空而不是照抄一個(gè)現(xiàn)成流場(chǎng)算法。4. Canvas 標(biāo)準(zhǔn)結(jié)構(gòu)function setup() { createCanvas(1200, 1200); // Initialize your system } function draw() { // Your generative algorithm // Can be static (noLoop) or animated }viewer.html 中的實(shí)際setup()還展示了模板約定createCanvas(1200, 1200)后通過(guò)canvas.parent(canvas-container)把畫(huà)布掛載到主區(qū)域并隱藏加載提示。工藝要求CRAFTSMANSHIPSkill 對(duì)「大師級(jí)」給出了可操作的定義算法必須讓人覺(jué)得經(jīng)過(guò)了無(wú)數(shù)次的迭代打磨每一個(gè)參數(shù)都被精心調(diào)校每一個(gè)圖案都帶著目的涌現(xiàn)。這不是隨機(jī)噪聲而是經(jīng)過(guò)深度專業(yè)打磨的受控混沌。五個(gè)可驗(yàn)證的標(biāo)準(zhǔn)平衡復(fù)雜但不視覺(jué)嘈雜有序但不僵硬色彩和諧深思熟慮的調(diào)色板而非隨機(jī) RGB 值構(gòu)圖即使在隨機(jī)中也保持視覺(jué)層次與流動(dòng)性能平滑執(zhí)行若為動(dòng)畫(huà)則針對(duì)實(shí)時(shí)渲染優(yōu)化可復(fù)現(xiàn)性同一種子始終產(chǎn)生完全一致的輸出。創(chuàng)建交互式 Artifact固定 vs 可變唯一的創(chuàng)作邊界viewer.html是全部作品的地基。Skill 用一節(jié)專門厘清哪些東西永遠(yuǎn)不動(dòng)、哪些東西可以自由發(fā)揮FIXED永遠(yuǎn)原樣包含布局結(jié)構(gòu)header、sidebar、主畫(huà)布區(qū)Anthropic 品牌標(biāo)識(shí)UI 顏色、字體、漸變側(cè)邊欄 Seed 區(qū)塊種子顯示、Prev/Next 按鈕、Random 按鈕、跳轉(zhuǎn)種子輸入框 Go 按鈕側(cè)邊欄 Actions 區(qū)塊Regenerate 按鈕、Reset 按鈕。VARIABLE每件作品按需定制整個(gè) p5.js 算法setup/draw/類參數(shù)對(duì)象定義這件作品需要什么側(cè)邊欄 Parameters 區(qū)塊控件數(shù)量、參數(shù)名、滑桿 min/max/step、控件類型滑桿、輸入框等Colors 區(qū)塊可選有些作品需要取色器有些用固定色有些是單色的——按需決定。每一件作品都必須擁有獨(dú)一無(wú)二的參數(shù)和算法。固定部分提供一致的 UX其余一切都表達(dá)這件作品獨(dú)有的視野。必備特性1. 參數(shù)控件數(shù)值參數(shù)使用滑桿粒子數(shù)、噪聲尺度、速度等調(diào)色板顏色使用取色器參數(shù)變化時(shí)實(shí)時(shí)更新Reset 按鈕恢復(fù)默認(rèn)值。從 viewer.html 可看到標(biāo)準(zhǔn)的控件 HTML 模式每個(gè)control-group包含一個(gè)label、一個(gè)input[typerange]帶 min/max/step/value/oninput和一個(gè)value-display數(shù)值回顯。模板默認(rèn)給出四個(gè)示例滑桿Particle Count1000~10000step 500默認(rèn) 5000、Flow Speed0.1~2.0step 0.1默認(rèn) 0.5、Noise Scale0.001~0.02step 0.001默認(rèn) 0.005、Trail Length2~20step 1默認(rèn) 8——它們本身就是一個(gè)流場(chǎng)粒子系統(tǒng)的最小參數(shù)集。2. 種子導(dǎo)航顯示當(dāng)前種子號(hào)Previous/Next 按鈕循環(huán)切換種子Random 按鈕生成隨機(jī)種子輸入框可跳轉(zhuǎn)到任意種子用戶要求時(shí)生成 100 個(gè)變體種子 1~100。viewer.html 中的種子控制函數(shù)實(shí)現(xiàn)了這套完整邏輯updateSeed()校驗(yàn)正整數(shù)輸入、previousSeed()用Math.max(1, params.seed - 1)保證種子最小為 1、nextSeed()遞增、randomSeedAndUpdate()在 1~999999 之間隨機(jī)取種。每次種子變化都會(huì)重新調(diào)用initializeSystem()完成系統(tǒng)重建。3. 單文件 Artifact 結(jié)構(gòu)!DOCTYPE html html head !-- p5.js from CDN - always available -- script srchttps://cdnjs.cloudflare.com/ajax/libs/p5.js/1.7.0/p5.min.js/script style /* All styling inline - clean, minimal */ /* Canvas on top, controls below */ /style /head body div idcanvas-container/div div idcontrols !-- All parameter controls -- /div script // ALL p5.js code inline here // Parameter objects, classes, functions // setup() and draw() // UI handlers // Everything self-contained /script /body /html這是一個(gè)單一 artifact除 p5.js CDN 外無(wú)任何外部文件、無(wú) import一切內(nèi)聯(lián)。4. 側(cè)邊欄構(gòu)建側(cè)邊欄四個(gè)區(qū)塊的骨架在模板中已經(jīng)固化SeedFIXED——種子顯示 Prev/Next/Random/Jump 按鈕ParametersVARIABLE——每個(gè)參數(shù)一個(gè)控件組div classcontrol-group labelParameter Name/label input typerange idparam min... max... step... value... oninputupdateParam(param, this.value) span classvalue-display idparam-value.../span /divColorsOPTIONAL/VARIABLE——作品需要可調(diào)色才加取色器固定色或單色則整段刪去ActionsFIXED——Regenerate 按鈕、Reset 按鈕、Download PNG 按鈕。硬性驗(yàn)收標(biāo)準(zhǔn)種子控件必須全部可用prev/next/random/jump/display所有參數(shù)必須有 UI 控件Regenerate、Reset、Download 按鈕必須生效保留 Anthropic 品牌標(biāo)識(shí)指 UI 樣式而非作品配色。使用 artifactHTML artifact 生成后立即可用零配置在 claude.ai作為交互式 artifact 展示立即運(yùn)行作為文件保存后在任意瀏覽器打開(kāi)——無(wú)需服務(wù)器分享直接發(fā)送這個(gè) HTML 文件——它完全自包含。變體與探索模板默認(rèn)內(nèi)置種子導(dǎo)航prev/next/random 按鈕用戶無(wú)需創(chuàng)建多個(gè)文件即可探索變體。若用戶需要高亮特定變體Skill 提供了兩種可選增強(qiáng)種子預(yù)設(shè)按鈕如 Variation 1: Seed 42、Variation 2: Seed 127Gallery Mode在同一個(gè) artifact 內(nèi)并排展示多個(gè)種子的縮略圖。Skill 用了一個(gè)精妙的比喻這就像從同一塊印版印制一系列版畫(huà)——算法保持一致但每個(gè)種子都揭示出該算法潛力的不同側(cè)面。交互性讓用戶通過(guò)探索種子空間自己發(fā)現(xiàn)最愛(ài)的那一版。創(chuàng)作流程全景Skill 把整個(gè)流程壓縮成一條鏈用戶請(qǐng)求 → 算法哲學(xué) → 實(shí)現(xiàn)每一步都有明確任務(wù)解讀用戶意圖——用戶尋求的是什么美學(xué)創(chuàng)作算法哲學(xué)4~6 段——描述計(jì)算路徑用代碼實(shí)現(xiàn)——構(gòu)建表達(dá)該哲學(xué)的算法設(shè)計(jì)合適參數(shù)——哪些品質(zhì)應(yīng)該可調(diào)構(gòu)建匹配的 UI 控件——為這些參數(shù)制作滑桿/輸入框。常量Anthropic 品牌標(biāo)識(shí)顏色、字體、布局、種子導(dǎo)航始終存在、自包含 HTML artifact。其余一切皆可變算法本身、參數(shù)、UI 控件、視覺(jué)結(jié)果。模板與源碼深度解析viewer.html唯一合法的起點(diǎn)viewer.html 是全套作品唯一允許的骨架來(lái)源。從源碼可以提煉出它的四層構(gòu)成品牌層:root變量定義 Anthropic 品牌色板——暗色#141413、淺色#faf9f5、中灰#b0aea5、淺灰#e8e6dc、橙#d97757、藍(lán)#6a9bcc、綠#788c5d。字體方面引入 Poppins正文無(wú)襯線 Lora標(biāo)題襯線正文區(qū)使用淺色線性漸變背景。這些 CSS 變量構(gòu)成所有作品的「品牌常量」viewer.html 中可見(jiàn)其完整定義。布局層flex 雙欄布局——左側(cè) 320px 側(cè)邊欄半透明磨砂背景、圓角、陰影、可滾動(dòng)右側(cè)主畫(huà)布區(qū)。#canvas-container限寬 1000px 并圓角包裹畫(huà)布移動(dòng)端max-width: 600px自動(dòng)切換為縱向堆疊viewer.html 中可見(jiàn)響應(yīng)式處理?？丶踊瑮U使用橙色圓形滑塊hover 時(shí)放大并加深按鈕分三級(jí)主橙 / 次藍(lán) / 三綠button-row讓多個(gè)按鈕等寬并排。交互層resetParameters()用defaultParams快照恢復(fù)所有滑桿、取色器與種子顯示再調(diào)用initializeSystem()重建系統(tǒng)窗口load事件觸發(fā)updateSeedDisplay()完成 UI 初始化。種子控制邏輯對(duì)非法輸入做了防御——updateSeed()中若輸入不是有效正整數(shù)則回退顯示當(dāng)前種子。generator_template.jsp5.js 最佳實(shí)踐清單generator_template.js 不是圖案菜單而是結(jié)構(gòu)與原則的參考實(shí)現(xiàn)。它明確聲明不要復(fù)制流場(chǎng)示例去構(gòu)建哲學(xué)要求的東西。其核心工程建議包括參數(shù)組織所有可調(diào)參數(shù)收斂到單一params對(duì)象便于連接 UI、重置、序列化種子初始化initializeSeed()同時(shí)調(diào)用randomSeed()與noiseSeed()保證random()與noise()全部確定性生命周期三模式靜態(tài)生成setup 中完成 noLoop()、動(dòng)畫(huà)生成逐幀更新、用戶觸發(fā)再生成默認(rèn)noLoop()參數(shù)變化時(shí)redraw()類結(jié)構(gòu)涉及多實(shí)體粒子、代理、細(xì)胞、節(jié)點(diǎn)時(shí)用類封裝且明確要求update()狀態(tài)與display()渲染分離性能大量元素時(shí)預(yù)計(jì)算、用空間哈希做簡(jiǎn)單碰撞檢測(cè)、減少 sqrt/三角等昂貴運(yùn)算動(dòng)畫(huà)目標(biāo) 60fps工具函數(shù)hexToRgb、colorFromPalette按索引取調(diào)色板色、mapRange、easeInOutCubic、wrapAround越界回繞常用模式fadeBackground(opacity)用帶透明度的背景矩形實(shí)現(xiàn)軌跡/淡出效果填充色即 Anthropic 淺色250, 249, 245getNoiseValue()封裝噪聲取值vectorFromAngle()從角度構(gòu)造向量導(dǎo)出exportImage()調(diào)用saveCanvas(generative-art- params.seed, png)文件名天然包含種子號(hào)便于按種子歸檔作品。模板的結(jié)尾提醒值得每一位實(shí)現(xiàn)者銘記這些是工具與原則不是配方。算法哲學(xué)應(yīng)該指導(dǎo)你創(chuàng)造什么這套結(jié)構(gòu)幫助你把它創(chuàng)造得更好。適用前提與邊界需要說(shuō)明幾點(diǎn)適用前提本文描述的工作流依賴瀏覽器端的 p5.js 1.7.0 CDN見(jiàn) viewer.htmlHTML 作品需要聯(lián)網(wǎng)加載 p5.js 與 Google FontsPoppins/Lora在 claude.ai 中作為 artifact 展示、在任意瀏覽器中打開(kāi)、或直接分享自包含 HTML 文件均可。倉(cāng)庫(kù)同時(shí)提供 LICENSE.txtApache 2.0說(shuō)明分發(fā)與使用的許可邊界。Skill 本身是演示與教育性質(zhì)的實(shí)現(xiàn)實(shí)際使用的效果會(huì)因 Agent 與運(yùn)行環(huán)境而異建議在依賴其產(chǎn)出物前先在自己的環(huán)境中充分測(cè)試。對(duì)希望深入研究的讀者本倉(cāng)庫(kù)中與本 Skill 直接相關(guān)的三個(gè)文件是最佳入口SKILL.md流程定義、viewer.html唯一合法的交互骨架、generator_template.jsp5.js 工程最佳實(shí)踐。把哲學(xué)當(dāng)作靈魂、模板當(dāng)作骨架、種子當(dāng)作指紋你就能從「畫(huà)一張圖」走向「創(chuàng)作一個(gè)每一次運(yùn)行都獨(dú)一無(wú)二的活的算法」。贊分享人工智能AI 技能AI 評(píng)測(cè)【免費(fèi)下載鏈接】skillsPublic repository for Agent Skills項(xiàng)目地址https://gitcode.com/GitHub_Trending/skills3/skills點(diǎn)擊查看免費(fèi)下載相關(guān)推薦algorithmic-art 技能實(shí)戰(zhàn)用 p5.js 將算法哲學(xué)轉(zhuǎn)化為可復(fù)現(xiàn)的生成藝術(shù)algorithmic art 技能實(shí)戰(zhàn)用 p5.js 將算法哲學(xué)轉(zhuǎn)化為可復(fù)現(xiàn)的生成藝術(shù) 本篇文章圍繞 agentic awesome skills 倉(cāng)庫(kù)中的AI 技能AI 插件如何用tag命令3分鐘上手macOS文件標(biāo)簽管理從安裝到基本操作如何用tag命令3分鐘上手macOS文件標(biāo)簽管理從安裝到基本操作 macOS的文件標(biāo)簽功能是組織文件的強(qiáng)大工具但很多用戶不知道如何高效利用。 tag命令 是WeChatMsg 全解析微信聊天記錄如何從加密數(shù)據(jù)庫(kù)變成 HTML、Word 和年度報(bào)告WeChatMsg 全解析微信聊天記錄如何從加密數(shù)據(jù)庫(kù)變成 HTML、Word 和年度報(bào)告 你電腦里的微信聊天記錄其實(shí)鎖在一個(gè)打不開(kāi)的加密數(shù)據(jù)庫(kù)里。WeCh創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考 從算法哲學(xué)到可復(fù)現(xiàn)生成藝術(shù)：algorithmic-art Skill 的 p5.js 完整實(shí)現(xiàn)指南
人工智能AI 技能AI 評(píng)測(cè)【免費(fèi)下載鏈接】skillsPublic repository for Agent Skills項(xiàng)目地址https://gitcode.com/GitHub_Trending/skills3/skills點(diǎn)擊查看免費(fèi)下載本文圍繞開(kāi)源倉(cāng)庫(kù)中algorithmic-art這一 Agent Skill 展開(kāi)系統(tǒng)講解如何通過(guò)「算法哲學(xué)創(chuàng)作 p5.js 生成藝術(shù)實(shí)現(xiàn)」兩階段流水線產(chǎn)出 90% 由算法生成、10% 由關(guān)鍵參數(shù)控制的交互式生成藝術(shù)品。讀完本文你將掌握種子隨機(jī)性Seeded Randomness、噪聲場(chǎng)、粒子系統(tǒng)與流場(chǎng)的建模思路以及如何基于 viewer.html 模板 構(gòu)建自包含、可實(shí)時(shí)調(diào)參、可復(fù)現(xiàn)的單個(gè) HTML 交互作品。algorithmic-art Skill 是什么algorithmic-art是倉(cāng)庫(kù)中面向「代碼生成藝術(shù)」場(chǎng)景的 Agent Skill其 SKILL.md 描述了一個(gè)明確的能力邊界當(dāng)用戶請(qǐng)求創(chuàng)作生成藝術(shù)、算法藝術(shù)、流場(chǎng)flow fields或粒子系統(tǒng)時(shí)Skill 會(huì)引導(dǎo) Claude 完成一次完整的創(chuàng)作閉環(huán)。它的產(chǎn)出物固定為三類文件.md文件記錄「算法哲學(xué)」Algorithmic Philosophy——一種計(jì)算美學(xué)流派的宣言.html文件一個(gè)可直接運(yùn)行的交互式查看器.js文件承載生成算法的核心邏輯。整個(gè)創(chuàng)作被拆分為兩個(gè)嚴(yán)格有序的階段算法哲學(xué)創(chuàng)作先以文字定義一個(gè)生成美學(xué)運(yùn)動(dòng)計(jì)算過(guò)程、涌現(xiàn)行為、數(shù)學(xué)之美、種子化變化p5.js 生成藝術(shù)表達(dá)再把這個(gè)哲學(xué)翻譯成可運(yùn)行代碼產(chǎn)出交互式 HTML 作品。這一設(shè)計(jì)把「思考」與「實(shí)現(xiàn)」解耦先明確計(jì)算世界觀再讓代碼去表達(dá)它從而避免生成千篇一律的「帶隨機(jī)數(shù)的靜態(tài)圖」。第一階段算法哲學(xué)創(chuàng)作關(guān)鍵理解Skill 強(qiáng)調(diào)一個(gè)核心心智模型用來(lái)界定輸入、創(chuàng)作物與下一步的關(guān)系收到什么用戶的輸入只是「地基」subtle input不應(yīng)約束創(chuàng)作自由度創(chuàng)作什么一個(gè)算法哲學(xué) / 生成美學(xué)運(yùn)動(dòng)接下來(lái)發(fā)生什么同一版本接收哲學(xué)后用代碼表達(dá)它——產(chǎn)出 90% 算法生成、10% 關(guān)鍵參數(shù)的 p5.js 草圖。因此哲學(xué)必須反復(fù)強(qiáng)調(diào)五個(gè)關(guān)鍵詞算法表達(dá)Algorithmic expression、涌現(xiàn)行為Emergent behavior、計(jì)算之美Computational beauty、種子化變化Seeded variation。如何生成算法哲學(xué)第一步為運(yùn)動(dòng)命名1~2 個(gè)詞。例如 Organic Turbulence有機(jī)湍流、Quantum Harmonics量子諧波、Emergent Stillness涌現(xiàn)的靜止。第二步寫(xiě)出 4~6 段完整但凝練的哲學(xué)宣言。宣言需要回答這個(gè)哲學(xué)如何通過(guò)以下維度顯現(xiàn)計(jì)算過(guò)程與數(shù)學(xué)關(guān)系噪聲函數(shù)與隨機(jī)模式粒子行為與場(chǎng)動(dòng)力學(xué)時(shí)間演化與系統(tǒng)狀態(tài)參數(shù)變化與涌現(xiàn)復(fù)雜度第三條關(guān)鍵準(zhǔn)則Skill 用了整整一節(jié)來(lái)強(qiáng)調(diào)避免冗余每個(gè)算法面向只出現(xiàn)一次不要重復(fù)敘述噪聲理論、粒子動(dòng)力學(xué)或數(shù)學(xué)原理除非是在補(bǔ)充新的深度反復(fù)強(qiáng)調(diào)工藝水準(zhǔn)哲學(xué)必須多次強(qiáng)調(diào)最終算法應(yīng)當(dāng)看起來(lái)「經(jīng)過(guò)無(wú)數(shù)小時(shí)打磨、被悉心雕琢、出自頂尖領(lǐng)域?qū)＜抑帧埂@是 Skill 明確要求重復(fù)出現(xiàn)的框架建議使用諸如 meticulously crafted algorithm精心雕琢的算法、the product of deep computational expertise深厚計(jì)算專業(yè)知識(shí)的產(chǎn)物、painstaking optimization煞費(fèi)苦心的優(yōu)化、master-level implementation大師級(jí)實(shí)現(xiàn)之類的措辭留下創(chuàng)作空間算法方向要具體但也要足夠精煉給實(shí)現(xiàn)者留出高層次解釋性選擇的空間。五個(gè)哲學(xué)示例SKILL.md 給出了五個(gè)經(jīng)過(guò)壓縮的示例完整哲學(xué)實(shí)際應(yīng)為 4~6 段。這五個(gè)示例同時(shí)也是算法的雛形值得逐一拆解運(yùn)動(dòng)名稱哲學(xué)Philosophy算法表達(dá)Algorithmic ExpressionOrganic Turbulence 有機(jī)湍流被自然法則約束的混沌秩序從無(wú)序中涌現(xiàn)多層 Perlin 噪聲驅(qū)動(dòng)的流場(chǎng)數(shù)千粒子沿矢量力運(yùn)動(dòng)軌跡累積成有機(jī)密度圖多倍頻噪聲制造湍流區(qū)與平靜區(qū)顏色由速度與密度決定——快粒子燃燒發(fā)亮慢粒子淡入陰影算法運(yùn)行直至平衡Quantum Harmonics 量子諧波離散實(shí)體表現(xiàn)出類波干涉圖樣粒子在網(wǎng)格上初始化各攜帶隨正弦波演化的相位值鄰近粒子的相位相互干涉——相長(zhǎng)干涉形成亮節(jié)點(diǎn)相消干涉形成空洞簡(jiǎn)諧運(yùn)動(dòng)生成復(fù)雜涌現(xiàn)曼陀羅Recursive Whispers 遞歸低語(yǔ)跨尺度的自相似性有限空間中的無(wú)限深度遞歸細(xì)分的分支結(jié)構(gòu)每根分支略微隨機(jī)化但受黃金比例約束L 系統(tǒng)或遞歸細(xì)分生成既數(shù)學(xué)又有機(jī)的樹(shù)狀形態(tài)細(xì)微噪聲擾動(dòng)打破完美對(duì)稱線寬隨遞歸層級(jí)遞減Field Dynamics 場(chǎng)動(dòng)力學(xué)通過(guò)物質(zhì)效應(yīng)讓不可見(jiàn)的力量可見(jiàn)由數(shù)學(xué)函數(shù)或噪聲構(gòu)造矢量場(chǎng)粒子從邊緣誕生、沿場(chǎng)線流動(dòng)到達(dá)平衡或邊界時(shí)消亡多個(gè)場(chǎng)可吸引、排斥或旋轉(zhuǎn)粒子畫(huà)面只展示軌跡——不可見(jiàn)力量的幽靈證據(jù)Stochastic Crystallization 隨機(jī)結(jié)晶隨機(jī)過(guò)程結(jié)晶為有序結(jié)構(gòu)隨機(jī)圓填充或 Voronoi 鑲嵌從隨機(jī)點(diǎn)出發(fā)經(jīng)松弛算法演化細(xì)胞相互推開(kāi)直至平衡顏色由細(xì)胞大小、鄰居數(shù)或到中心距離決定每個(gè)種子都產(chǎn)生獨(dú)一無(wú)二的晶體之美六大核心原則SKILL.md 用「ESSENTIAL PRINCIPLES」一節(jié)鎖定了哲學(xué)的基調(diào)算法哲學(xué)創(chuàng)作一個(gè)將要由代碼表達(dá)的計(jì)算世界觀過(guò)程重于產(chǎn)物始終強(qiáng)調(diào)美來(lái)自算法執(zhí)行過(guò)程每次運(yùn)行都是獨(dú)一無(wú)二的參數(shù)化表達(dá)思想通過(guò)數(shù)學(xué)關(guān)系、力、行為來(lái)傳達(dá)而非靜態(tài)構(gòu)圖藝術(shù)自由下一個(gè) Claude 將按算法方式詮釋哲學(xué)——要為實(shí)現(xiàn)留出創(chuàng)作余地純粹生成藝術(shù)目標(biāo)是「活的算法」而非「帶隨機(jī)性的靜態(tài)圖像」專家工藝反復(fù)強(qiáng)調(diào)最終算法必須顯得被精心雕琢、歷經(jīng)無(wú)數(shù)次迭代、出自計(jì)算美學(xué)頂級(jí)專家之手。哲學(xué)宣言最終應(yīng)以.md文件形式輸出篇幅 4~6 段充滿詩(shī)意但邏輯嚴(yán)謹(jǐn)且不重復(fù)相同論點(diǎn)。推斷概念種子Conceptual Seed在動(dòng)手寫(xiě)算法之前Skill 插入了一個(gè)關(guān)鍵步驟從原始請(qǐng)求中識(shí)別一條微妙的、概念性的線索。這條線索的定位非常特殊概念是嵌入算法內(nèi)部的、微妙的、小眾的引用subtle, niche reference embedded within the algorithm itself——不總是字面化的但始終是精巧的。熟悉該主題的人應(yīng)當(dāng)憑直覺(jué)感受到它其他人則只體驗(yàn)到一個(gè)大師級(jí)的生成作品。算法哲學(xué)提供的是計(jì)算語(yǔ)言而推斷出的概念提供的是靈魂——一種悄悄編織進(jìn)參數(shù)、行為和涌現(xiàn)模式中的「概念 DNA」。Skill 用了一個(gè)傳神的類比就像爵士樂(lè)手通過(guò)和聲即興引用另一首歌只有懂的人能捕捉到但所有人都能欣賞那份生成之美。這一步驟保證了作品有「安靜的深度」參考如此精煉以至于它提升作品深度卻不自我宣告。第二階段p5.js 實(shí)現(xiàn)?? STEP 0先讀模板再寫(xiě)任何 HTML這是全篇最重要的一條硬性紀(jì)律。在寫(xiě)任何 HTML 之前用 Read 工具讀取 templates/viewer.html研究其精確的結(jié)構(gòu)、樣式與 Anthropic 品牌標(biāo)識(shí)把該文件當(dāng)作字面起點(diǎn)LITERAL STARTING POINT而非靈感來(lái)源固定部分原樣保留頭部header、側(cè)邊欄結(jié)構(gòu)、Anthropic 配色/字體、種子控件、操作按鈕只替換可變部分文件注釋中標(biāo)注的算法、參數(shù)、參數(shù) UI 控件。同時(shí)明確列出應(yīng)避免的做法? 從零手寫(xiě) HTML? 自創(chuàng)自定義樣式或配色方案? 使用系統(tǒng)字體或深色主題? 改動(dòng)側(cè)邊欄結(jié)構(gòu)。以及必須遵循的實(shí)踐? 復(fù)制模板的精確 HTML 結(jié)構(gòu)? 保留 Anthropic 品牌標(biāo)識(shí)Poppins/Lora 字體、淺色系、漸變背景? 維持側(cè)邊欄布局Seed → Parameters → Colors? → Actions? 只替換 p5.js 算法與參數(shù)控件。從源碼看viewer.html 文件頭部的注釋直接寫(xiě)明了這套「保留 / 創(chuàng)造性編輯」的邊界即保留整體結(jié)構(gòu)、Anthropic 品牌標(biāo)識(shí)、種子導(dǎo)航區(qū)、自包含結(jié)構(gòu)創(chuàng)造性編輯 p5.js 算法、參數(shù)定義與 UI 控件。技術(shù)需求1. 種子隨機(jī)性Art Blocks 模式可復(fù)現(xiàn)性是整個(gè) Skill 的技術(shù)基石同一個(gè)種子必須永遠(yuǎn)產(chǎn)生相同的輸出。規(guī)范要求始終顯式使用種子// ALWAYS use a seed for reproducibility let seed 12345; // or hash from user input randomSeed(seed); noiseSeed(seed);在 generator_template.js 中這一邏輯被封裝為initializeSeed(seed)函數(shù)并注明調(diào)用后所有random()與noise()調(diào)用都會(huì)變成確定性的。也就是說(shuō)只要在setup()中先執(zhí)行種子初始化粒子的初始位置、噪聲場(chǎng)的取值、分支的角度——一切隨機(jī)量都會(huì)隨種子復(fù)現(xiàn)。2. 參數(shù)結(jié)構(gòu)追隨哲學(xué)設(shè)計(jì)參數(shù)時(shí)要問(wèn)的問(wèn)題是「這個(gè)系統(tǒng)有哪些可調(diào)節(jié)的品質(zhì)」而不是「我要哪種圖案類型」。參數(shù)對(duì)象的基本骨架如下let params { seed: 12345, // Always include seed for reproducibility // colors // Add parameters that control YOUR algorithm: // - Quantities (how many?) // - Scales (how big? how fast?) // - Probabilities (how likely?) // - Ratios (what proportions?) // - Angles (what direction?) // - Thresholds (when does behavior change?) };模板源碼進(jìn)一步揭示了參數(shù)對(duì)象的設(shè)計(jì)動(dòng)機(jī)generator_template.js 注釋說(shuō)明把所有可調(diào)參數(shù)集中在一個(gè)對(duì)象中可以方便地連接到 UI 控件、重置為默認(rèn)值、序列化保存配置。而 viewer.html 則用let defaultParams {...params};保存一份默認(rèn)參數(shù)快照供 Reset 按鈕恢復(fù)——這解釋了「一個(gè)參數(shù)對(duì)象」在工程上的實(shí)際收益。3. 核心算法讓哲學(xué)決定建造什么Skill 反復(fù)強(qiáng)調(diào)避免思考「該用哪種圖案」轉(zhuǎn)而思考「如何用代碼表達(dá)這個(gè)哲學(xué)」。文檔給出了三條哲學(xué)→算法映射線索若哲學(xué)關(guān)于有機(jī)涌現(xiàn)考慮隨時(shí)間累積/生長(zhǎng)的元素、受自然規(guī)則約束的隨機(jī)過(guò)程、反饋回路與相互作用若哲學(xué)關(guān)于數(shù)學(xué)之美考慮幾何關(guān)系與比例、三角函數(shù)與諧波、由精確計(jì)算產(chǎn)生意外圖案若哲學(xué)關(guān)于受控混沌考慮嚴(yán)格邊界內(nèi)的隨機(jī)變化、分岔與相變、從無(wú)序中涌現(xiàn)秩序。算法從哲學(xué)中流出而非從選項(xiàng)菜單中挑選。模板文件的generateFlowField()、draw()與Particle類均留空并標(biāo)注 fill this in正是為了強(qiáng)制實(shí)現(xiàn)者用自己的哲學(xué)去填空而不是照抄一個(gè)現(xiàn)成流場(chǎng)算法。4. Canvas 標(biāo)準(zhǔn)結(jié)構(gòu)function setup() { createCanvas(1200, 1200); // Initialize your system } function draw() { // Your generative algorithm // Can be static (noLoop) or animated }viewer.html 中的實(shí)際setup()還展示了模板約定createCanvas(1200, 1200)后通過(guò)canvas.parent(canvas-container)把畫(huà)布掛載到主區(qū)域并隱藏加載提示。工藝要求CRAFTSMANSHIPSkill 對(duì)「大師級(jí)」給出了可操作的定義算法必須讓人覺(jué)得經(jīng)過(guò)了無(wú)數(shù)次的迭代打磨每一個(gè)參數(shù)都被精心調(diào)校每一個(gè)圖案都帶著目的涌現(xiàn)。這不是隨機(jī)噪聲而是經(jīng)過(guò)深度專業(yè)打磨的受控混沌。五個(gè)可驗(yàn)證的標(biāo)準(zhǔn)平衡復(fù)雜但不視覺(jué)嘈雜有序但不僵硬色彩和諧深思熟慮的調(diào)色板而非隨機(jī) RGB 值構(gòu)圖即使在隨機(jī)中也保持視覺(jué)層次與流動(dòng)性能平滑執(zhí)行若為動(dòng)畫(huà)則針對(duì)實(shí)時(shí)渲染優(yōu)化可復(fù)現(xiàn)性同一種子始終產(chǎn)生完全一致的輸出。創(chuàng)建交互式 Artifact固定 vs 可變唯一的創(chuàng)作邊界viewer.html是全部作品的地基。Skill 用一節(jié)專門厘清哪些東西永遠(yuǎn)不動(dòng)、哪些東西可以自由發(fā)揮FIXED永遠(yuǎn)原樣包含布局結(jié)構(gòu)header、sidebar、主畫(huà)布區(qū)Anthropic 品牌標(biāo)識(shí)UI 顏色、字體、漸變側(cè)邊欄 Seed 區(qū)塊種子顯示、Prev/Next 按鈕、Random 按鈕、跳轉(zhuǎn)種子輸入框 Go 按鈕側(cè)邊欄 Actions 區(qū)塊Regenerate 按鈕、Reset 按鈕。VARIABLE每件作品按需定制整個(gè) p5.js 算法setup/draw/類參數(shù)對(duì)象定義這件作品需要什么側(cè)邊欄 Parameters 區(qū)塊控件數(shù)量、參數(shù)名、滑桿 min/max/step、控件類型滑桿、輸入框等Colors 區(qū)塊可選有些作品需要取色器有些用固定色有些是單色的——按需決定。每一件作品都必須擁有獨(dú)一無(wú)二的參數(shù)和算法。固定部分提供一致的 UX其余一切都表達(dá)這件作品獨(dú)有的視野。必備特性1. 參數(shù)控件數(shù)值參數(shù)使用滑桿粒子數(shù)、噪聲尺度、速度等調(diào)色板顏色使用取色器參數(shù)變化時(shí)實(shí)時(shí)更新Reset 按鈕恢復(fù)默認(rèn)值。從 viewer.html 可看到標(biāo)準(zhǔn)的控件 HTML 模式每個(gè)control-group包含一個(gè)label、一個(gè)input[typerange]帶 min/max/step/value/oninput和一個(gè)value-display數(shù)值回顯。模板默認(rèn)給出四個(gè)示例滑桿Particle Count1000~10000step 500默認(rèn) 5000、Flow Speed0.1~2.0step 0.1默認(rèn) 0.5、Noise Scale0.001~0.02step 0.001默認(rèn) 0.005、Trail Length2~20step 1默認(rèn) 8——它們本身就是一個(gè)流場(chǎng)粒子系統(tǒng)的最小參數(shù)集。2. 種子導(dǎo)航顯示當(dāng)前種子號(hào)Previous/Next 按鈕循環(huán)切換種子Random 按鈕生成隨機(jī)種子輸入框可跳轉(zhuǎn)到任意種子用戶要求時(shí)生成 100 個(gè)變體種子 1~100。viewer.html 中的種子控制函數(shù)實(shí)現(xiàn)了這套完整邏輯updateSeed()校驗(yàn)正整數(shù)輸入、previousSeed()用Math.max(1, params.seed - 1)保證種子最小為 1、nextSeed()遞增、randomSeedAndUpdate()在 1~999999 之間隨機(jī)取種。每次種子變化都會(huì)重新調(diào)用initializeSystem()完成系統(tǒng)重建。3. 單文件 Artifact 結(jié)構(gòu)!DOCTYPE html html head !-- p5.js from CDN - always available -- script srchttps://cdnjs.cloudflare.com/ajax/libs/p5.js/1.7.0/p5.min.js/script style /* All styling inline - clean, minimal */ /* Canvas on top, controls below */ /style /head body div idcanvas-container/div div idcontrols !-- All parameter controls -- /div script // ALL p5.js code inline here // Parameter objects, classes, functions // setup() and draw() // UI handlers // Everything self-contained /script /body /html這是一個(gè)單一 artifact除 p5.js CDN 外無(wú)任何外部文件、無(wú) import一切內(nèi)聯(lián)。4. 側(cè)邊欄構(gòu)建側(cè)邊欄四個(gè)區(qū)塊的骨架在模板中已經(jīng)固化SeedFIXED——種子顯示 Prev/Next/Random/Jump 按鈕ParametersVARIABLE——每個(gè)參數(shù)一個(gè)控件組div classcontrol-group labelParameter Name/label input typerange idparam min... max... step... value... oninputupdateParam(param, this.value) span classvalue-display idparam-value.../span /divColorsOPTIONAL/VARIABLE——作品需要可調(diào)色才加取色器固定色或單色則整段刪去ActionsFIXED——Regenerate 按鈕、Reset 按鈕、Download PNG 按鈕。硬性驗(yàn)收標(biāo)準(zhǔn)種子控件必須全部可用prev/next/random/jump/display所有參數(shù)必須有 UI 控件Regenerate、Reset、Download 按鈕必須生效保留 Anthropic 品牌標(biāo)識(shí)指 UI 樣式而非作品配色。使用 artifactHTML artifact 生成后立即可用零配置在 claude.ai作為交互式 artifact 展示立即運(yùn)行作為文件保存后在任意瀏覽器打開(kāi)——無(wú)需服務(wù)器分享直接發(fā)送這個(gè) HTML 文件——它完全自包含。變體與探索模板默認(rèn)內(nèi)置種子導(dǎo)航prev/next/random 按鈕用戶無(wú)需創(chuàng)建多個(gè)文件即可探索變體。若用戶需要高亮特定變體Skill 提供了兩種可選增強(qiáng)種子預(yù)設(shè)按鈕如 Variation 1: Seed 42、Variation 2: Seed 127Gallery Mode在同一個(gè) artifact 內(nèi)并排展示多個(gè)種子的縮略圖。Skill 用了一個(gè)精妙的比喻這就像從同一塊印版印制一系列版畫(huà)——算法保持一致但每個(gè)種子都揭示出該算法潛力的不同側(cè)面。交互性讓用戶通過(guò)探索種子空間自己發(fā)現(xiàn)最愛(ài)的那一版。創(chuàng)作流程全景Skill 把整個(gè)流程壓縮成一條鏈用戶請(qǐng)求 → 算法哲學(xué) → 實(shí)現(xiàn)每一步都有明確任務(wù)解讀用戶意圖——用戶尋求的是什么美學(xué)創(chuàng)作算法哲學(xué)4~6 段——描述計(jì)算路徑用代碼實(shí)現(xiàn)——構(gòu)建表達(dá)該哲學(xué)的算法設(shè)計(jì)合適參數(shù)——哪些品質(zhì)應(yīng)該可調(diào)構(gòu)建匹配的 UI 控件——為這些參數(shù)制作滑桿/輸入框。常量Anthropic 品牌標(biāo)識(shí)顏色、字體、布局、種子導(dǎo)航始終存在、自包含 HTML artifact。其余一切皆可變算法本身、參數(shù)、UI 控件、視覺(jué)結(jié)果。模板與源碼深度解析viewer.html唯一合法的起點(diǎn)viewer.html 是全套作品唯一允許的骨架來(lái)源。從源碼可以提煉出它的四層構(gòu)成品牌層:root變量定義 Anthropic 品牌色板——暗色#141413、淺色#faf9f5、中灰#b0aea5、淺灰#e8e6dc、橙#d97757、藍(lán)#6a9bcc、綠#788c5d。字體方面引入 Poppins正文無(wú)襯線 Lora標(biāo)題襯線正文區(qū)使用淺色線性漸變背景。這些 CSS 變量構(gòu)成所有作品的「品牌常量」viewer.html 中可見(jiàn)其完整定義。布局層flex 雙欄布局——左側(cè) 320px 側(cè)邊欄半透明磨砂背景、圓角、陰影、可滾動(dòng)右側(cè)主畫(huà)布區(qū)。#canvas-container限寬 1000px 并圓角包裹畫(huà)布移動(dòng)端max-width: 600px自動(dòng)切換為縱向堆疊viewer.html 中可見(jiàn)響應(yīng)式處理?？丶踊瑮U使用橙色圓形滑塊hover 時(shí)放大并加深按鈕分三級(jí)主橙 / 次藍(lán) / 三綠button-row讓多個(gè)按鈕等寬并排。交互層resetParameters()用defaultParams快照恢復(fù)所有滑桿、取色器與種子顯示再調(diào)用initializeSystem()重建系統(tǒng)窗口load事件觸發(fā)updateSeedDisplay()完成 UI 初始化。種子控制邏輯對(duì)非法輸入做了防御——updateSeed()中若輸入不是有效正整數(shù)則回退顯示當(dāng)前種子。generator_template.jsp5.js 最佳實(shí)踐清單generator_template.js 不是圖案菜單而是結(jié)構(gòu)與原則的參考實(shí)現(xiàn)。它明確聲明不要復(fù)制流場(chǎng)示例去構(gòu)建哲學(xué)要求的東西。其核心工程建議包括參數(shù)組織所有可調(diào)參數(shù)收斂到單一params對(duì)象便于連接 UI、重置、序列化種子初始化initializeSeed()同時(shí)調(diào)用randomSeed()與noiseSeed()保證random()與noise()全部確定性生命周期三模式靜態(tài)生成setup 中完成 noLoop()、動(dòng)畫(huà)生成逐幀更新、用戶觸發(fā)再生成默認(rèn)noLoop()參數(shù)變化時(shí)redraw()類結(jié)構(gòu)涉及多實(shí)體粒子、代理、細(xì)胞、節(jié)點(diǎn)時(shí)用類封裝且明確要求update()狀態(tài)與display()渲染分離性能大量元素時(shí)預(yù)計(jì)算、用空間哈希做簡(jiǎn)單碰撞檢測(cè)、減少 sqrt/三角等昂貴運(yùn)算動(dòng)畫(huà)目標(biāo) 60fps工具函數(shù)hexToRgb、colorFromPalette按索引取調(diào)色板色、mapRange、easeInOutCubic、wrapAround越界回繞常用模式fadeBackground(opacity)用帶透明度的背景矩形實(shí)現(xiàn)軌跡/淡出效果填充色即 Anthropic 淺色250, 249, 245getNoiseValue()封裝噪聲取值vectorFromAngle()從角度構(gòu)造向量導(dǎo)出exportImage()調(diào)用saveCanvas(generative-art- params.seed, png)文件名天然包含種子號(hào)便于按種子歸檔作品。模板的結(jié)尾提醒值得每一位實(shí)現(xiàn)者銘記這些是工具與原則不是配方。算法哲學(xué)應(yīng)該指導(dǎo)你創(chuàng)造什么這套結(jié)構(gòu)幫助你把它創(chuàng)造得更好。適用前提與邊界需要說(shuō)明幾點(diǎn)適用前提本文描述的工作流依賴瀏覽器端的 p5.js 1.7.0 CDN見(jiàn) viewer.htmlHTML 作品需要聯(lián)網(wǎng)加載 p5.js 與 Google FontsPoppins/Lora在 claude.ai 中作為 artifact 展示、在任意瀏覽器中打開(kāi)、或直接分享自包含 HTML 文件均可。倉(cāng)庫(kù)同時(shí)提供 LICENSE.txtApache 2.0說(shuō)明分發(fā)與使用的許可邊界。Skill 本身是演示與教育性質(zhì)的實(shí)現(xiàn)實(shí)際使用的效果會(huì)因 Agent 與運(yùn)行環(huán)境而異建議在依賴其產(chǎn)出物前先在自己的環(huán)境中充分測(cè)試。對(duì)希望深入研究的讀者本倉(cāng)庫(kù)中與本 Skill 直接相關(guān)的三個(gè)文件是最佳入口SKILL.md流程定義、viewer.html唯一合法的交互骨架、generator_template.jsp5.js 工程最佳實(shí)踐。把哲學(xué)當(dāng)作靈魂、模板當(dāng)作骨架、種子當(dāng)作指紋你就能從「畫(huà)一張圖」走向「創(chuàng)作一個(gè)每一次運(yùn)行都獨(dú)一無(wú)二的活的算法」。贊分享人工智能AI 技能AI 評(píng)測(cè)【免費(fèi)下載鏈接】skillsPublic repository for Agent Skills項(xiàng)目地址https://gitcode.com/GitHub_Trending/skills3/skills點(diǎn)擊查看免費(fèi)下載相關(guān)推薦algorithmic-art 技能實(shí)戰(zhàn)用 p5.js 將算法哲學(xué)轉(zhuǎn)化為可復(fù)現(xiàn)的生成藝術(shù)algorithmic art 技能實(shí)戰(zhàn)用 p5.js 將算法哲學(xué)轉(zhuǎn)化為可復(fù)現(xiàn)的生成藝術(shù) 本篇文章圍繞 agentic awesome skills 倉(cāng)庫(kù)中的AI 技能AI 插件如何用tag命令3分鐘上手macOS文件標(biāo)簽管理從安裝到基本操作如何用tag命令3分鐘上手macOS文件標(biāo)簽管理從安裝到基本操作 macOS的文件標(biāo)簽功能是組織文件的強(qiáng)大工具但很多用戶不知道如何高效利用。 tag命令 是WeChatMsg 全解析微信聊天記錄如何從加密數(shù)據(jù)庫(kù)變成 HTML、Word 和年度報(bào)告WeChatMsg 全解析微信聊天記錄如何從加密數(shù)據(jù)庫(kù)變成 HTML、Word 和年度報(bào)告 你電腦里的微信聊天記錄其實(shí)鎖在一個(gè)打不開(kāi)的加密數(shù)據(jù)庫(kù)里。WeCh創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考