Creative Coding 作品變化概念，有或沒有的差別，隨機性，色彩模式的調整...等

<html lang="en"><head><style> .article-container { width: 100%; font-family: Microsoft JhengHei,Helvetica Neue,Helvetica,Arial,sans-serif; } ul, ol { margin: 12px auto; max-width: 740px; color: #535150; line-height: 1.8; padding-left: 0px; } .graf--img { display: table; justify-content: center; align-items: center; text-align: center; color: gray; font-size: 14px; letter-spacing: 0px; margin: 10px auto 50px; width: 100%; position: relative; clear: both; } .graf--img.center img { width: 100%; max-width: 740px; margin: 10px auto 0px; display: block; margin: 0 auto; } .graf--img.full img { width: 100%; } .captionTheme__wrapper { width: 100%; font-style: normal; line-height: 22px; font-size: 16px; max-width: 600px; margin-top: 8px; display: inline-block; } .graf--img.full { max-width: 100%; margin: 40px 0px; display: block; margin: 0 auto; align-items: center; } .graf--figure { text-align: center; color: gray; font-style: italic; font-size: 15px; margin: 28px auto; box-sizing: border-box; } .graf--figure iframe { width: 100%; max-width: 740px; margin: 0 auto; } .graf--p { font-size: 16px; line-height: 1.8; font-family: "Microsoft JhengHei fixed", "Helvetica Neue" ,"Microsoft JhengHei", Helvetica, "Segoe UI", Tahoma, Arial, sans-serif; letter-spacing: 1px; font-weight: 400; max-width: 740px; color: #535150; text-align: left; } .graf--p > a { color: #00B3C6 !important; text-decoration: none !important; } .graf--li > a { color: #00B3C6 !important; text-decoration: none !important; } .graf--quotesSpecial > a { color: #00B3C6 !important; text-decoration: none !important; } .graf--blockquote > a { color: #00B3C6 !important; text-decoration: none !important; } a.graf--mention { color: #535150 !important; text-decoration: underline !important; font-weight: 700; } .graf--h2 { font-size: 24px; padding: 0; max-width: 740px; text-align: left; letter-spacing: 1px; font-weight: 700; margin-top: 34px; } .graf--h3 { font-size: 18px; padding: 0; max-width: 740px; text-align: left; letter-spacing: 1px; font-weight: 700; margin-top: 28px; } .graf--li { font-size: 16px; padding: 0px 0px 0px 4px; font-weight: 400; letter-spacing: 0px; list-style-position: outside; text-align:left; margin-left: 24px; } .graf--hr { width: 100%; margin: 0px auto; transform: translateY(-50%); position: relative; padding: 0px; text-align: left; max-width: 740px; margin: 0 auto; } .graf--hr hr { height: 0; } .graf--blockquote { padding: 10px 0px 10px 16px; font-size: 16px; color: #7A7574; letter-spacing: 1px; margin: 28px 0px; border-left: 4px solid #DDD9D8; width: 100%; max-width: 740px; text-align: left; } .graf--quotesSpecial { display: table; color: #7A7574; position: relative; padding: 31.5px 40px; text-align: center; letter-spacing: 0px; position: relative; margin: 29px auto; font-family: "Microsoft JhengHei fixed", "Helvetica Neue", "Microsoft JhengHei", Helvetica, "Segoe UI", Tahoma, Arial, sans-serif; font-size: 16px; -webkit-box-ordinal-group: 1; -webkit-box-flex: 0; } .embed-wrapper { max-width: 740px; border: 1px solid #DDD9D8; display: block; padding: 12px; border-radius: 8px; margin: 12px 0px; text-decoration: none !important; } .embed-title { font-size: 16px; font-weight: 700; color: #535150; margin-bottom: 8px; text-align: left; line-height: 1.5; text-decoration: none !important; } .embed-description { width: 100%; font-size: 14px; color: #7A7574; line-height: 1.5; max-height: 150px; text-align: left; overflow: hidden; padding: 12px 0px; } .embed-url > a { width: 100%; font-size: 14px; color: #141413 !important; text-decoration: none !important; line-height: 1.5; text-align: left; } .embed-thumbnail-wrapper { padding-left: 12px; } .embed-thumbnail { width:100px; border-radius: 8px; } pre { background: #F6F6F6; border-radius: 8px; padding: 16px; font-size: 16px; color: #535150; line-height: 180%; text-align: left; } .lexical__textBold { font-weight: bold; } .lexical__textItalic { font-style: italic; } .lexical__textUnderline { text-decoration: underline; } .lexical__textStrikethrough { text-decoration: line-through; } .lexical__textUnderlineStrikethrough { text-decoration: underline line-through; } .lexical__textSubscript { font-size: 0.8em; vertical-align: sub; } .lexical__textSuperscript { font-size: 0.8em; vertical-align: super; } .lexical__textCode { background-color: rgb(240, 242, 245); padding: 1px 0.25rem; font-family: Menlo, Consolas, Monaco, monospace; font-size: 94%; } </style></head><body><div class="article-container"><h2 class="graf--h2" dir="ltr">有 V.S. 沒有</h2><ul class="lexical__ul"><li value="1" class="graf--li">有顏色 沒有顏色 (fill & noFill)</li><li value="2" class="graf--li">有框線 沒有框線 (stroke & noStroke)</li><li value="3" class="graf--li">有陰影 沒有陰影 </li></ul><h2 class="graf--h2" dir="ltr">不同模式切換</h2><ul class="lexical__ul"><li value="1" class="graf--li">mode 1 ~ 3，每個 mode 做不同事，例如：mode 代表 3 種不同色系，或 3 種不同形狀等。</li></ul> <h2 class="graf--h2" dir="ltr">色彩模式 colorMode</h2>RGB v.s. HSB <h2 class="graf--h2" dir="ltr">混合模式 <a href="https://p5js.org/zh-Hans/reference/#/p5/blendMode" target="_blank" rel="noreferrer noopener">blendMode</a></h2><code spellcheck="false" style="white-space: pre-wrap;">SCREEN</code>、<code spellcheck="false" style="white-space: pre-wrap;">MULTIPLY</code>...等 ​ <h2 class="graf--h2" dir="ltr">數值變化</h2><ul class="lexical__ul"><li value="1" class="graf--li">形狀數值大小</li></ul> <h2 class="graf--h2" dir="ltr">隨機</h2><ul class="lexical__ul"><li value="1" class="graf--li">random</li><li value="2" class="graf--li">noise</li></ul></div></body></html>

創作

人面犬（じんめんけん），即有著一張人臉的狗，不僅如此，其面孔還是一張中年男子的臉，並且會說著人話。跑起來的速度能夠跟一台車並行，最快時速約莫100公里，任何被牠追的人除了要能克服這張臉之外，還要能跑得比牠快……

時雨の町的沙龍

有張人臉的狗「人面犬」──日本恐怖都市傳說

你要記得，你們不能分開，但是絕對不能在一起，這是命運，要勇敢接受，知道嗎？
這是奶奶的遺言，只說給我聽的。
「奶奶跟你說了什麼？」
「……沒什麼。」
沒什麼……
這是命運，我要勇敢接受。

 
叮咚～～
室外的冷風在自動門開啟的一瞬間刮了進來，便利商店裡稀落的人都縮了縮脖子。
葉冬海

蒔舞的沙龍

[示見之眼] 深夜一點零六分的偶遇 01

密閉的房間裡，僅有落地窗旁的燭台泛著微弱光亮，其餘的簡單擺設，皆為暗色。物與物之間的輪廓，難以辨別。
「醒醒吧！」
不知沉默了多久，對面的那個男人，重新開口了，嘴角都快咧到眼角旁。
「『人類』能受到恩賜，是因為愚昧與無知，難以撼動『祂們』的地位。」

xheep games的沙龍

序章｜當玫瑰花在末日盛開時

身為一個經常在行天宮發呆兼寫作的人……欸對，我都會坐在廟前一排階梯打限動跟文章，待在行天宮很容易文思泉涌。也包含，我對行天宮的籤詩運作，不敢說真理，但和祂們相處久，抽的籤詩多，對照的現實也多，自然就發現了神明的弔詭之處。



會寫這篇，是來自昨天遇到一位女孩，我認為她的頻率反映了時下人，尤其想要以

以行動支持創作者！付費即可解鎖

自我成長

長年在 IG 限動分享對生命的探索過程，伴隨知名度漸長，驚覺這般自我揭露容易將自己曝露於危險，真心的書寫應該給對我真心的讀者。

來《方格子》，想給訂閱制讀者原創且獨家的內容，包含於各地經歷的新冒險、我的情慾探索，及我的小說創作、寫作及演說技藝的分享。自我挖掘是一生的事，我會持續記錄我接下來的冒險，真實且野蠻。

高瑞希的冒險宇宙

關於行天宮的上上籤，不等於你好運

不知道有沒有人注意到，我從4/1之後在方格子上一直都還沒發過新的文章跟貼文...（這應該算是我很少見的方格子安靜期，之前就算有喊著要休息，也都是差不多５－７天就會現身）。總之最近在慢慢整頓自己 :3 回歸的第一篇就在村長家吧!!! 日前看到劉奕酉的<a href="https://www.facebook.com/yiyou.liu/posts/pfbid0kQHuV3XYNuMcdHfR8VZtrKFnsZR7n79w55gCxj3W7hgg8xuVLMc3xxH1F1D9cBBxl" target="_blank" rel="noreferrer noopener">臉書貼文</a>分享 Gary Vee 新書重點整理與心得，我覺得很有意思，大家可以參考看看，也可直接進劉奕酉老師的部落格閱讀：<a href="https://thinking-to-win.com/day-trading-attention/" target="_blank" rel="noreferrer noopener">https://thinking-to-win.com/day-trading-attention/</a> 畢竟沒有取得授權，所以我不會把整篇貼上來。 簡單來說，在社群媒體的經營上， Gary Vee 的想法是鼓勵「量產內容＋快速測試」的做法，不要執著於每一則內容的完美，而是要「持續出擊」加上「學習調整」的即時性。 而主要劉奕酉老師思考的是：怎樣的內容不只是曝光，而是能帶動信任感與轉換力？ ▶以下三段我直接引用原文： ♦️如果「注意力」是一種資產，我認為那不是快進快出的一次性操作，而是一種可以累積的信任貨幣。正如我在許多地方談到，知識變現其實是信任變現；對於知識工作者來說，追求信任的累積或許是更舒適的做法。 Gary 講的是「如何短期引發關注」但我關心的是「怎麼讓人持續記得你，並在關鍵時刻選擇你」 這不是單靠流量，而是靠觀點的厚度、語言的一致性、內容的深度去累積。這樣的注意力，不只是「看過」而已，而是讓人「信任你」。 ---------------- ♦️社群行銷的難題是：平台節奏太快、更新頻率太高，容易讓創作者陷入永無止境的輸出焦慮。但如果我們先定義「我想要他人記得我什麼」而非「我今天要丟什麼內容出來」，我們可以反過來設計出一套長期可持續的節奏。 比方說，每週一次深度內容、每月一場互動，以及每季一次主題企劃（更像是策展式的內容串）的做法。這就像投資組合，不是天天追漲殺跌，而是建立一個有週期、有節奏的內容「資產池」。 ---------------- ♦️內容的最終目的不是曝光，而是建立「你在別人腦中」的定位，或者說有一席之地。 當他想到某個議題時，第一個浮現的是你；當他需要某個服務時，第一個信任的是你；當他看到某句話、某個問題時會想「這句話劉奕酉好像說過。」 這不是靠「今天發什麼」累積的，而是靠「不斷重複」同一個核心概念或訊息所建立的。 ---------------- 最後這段「建立你在別人腦中的定位」 &amp;「不斷重複核心概念」 這點，Threads 的 <a href="https://www.threads.net/@tobie_talks" target="_blank" rel="noreferrer noopener">Tobie 偷偷</a> 做的挺成功！ 甚至有人稱某種 Threads 文體為「偷偷體」 就是因為她日復一日的建立形象 &amp; 發文闡述她的核心概念 ---------------- 如果你不知道怎麼「建立你在別人腦中的定位」 其實可以做的一種方式就是：不斷分享、討論你喜歡的東西＆議題 例如我在脆上、IG上會不斷分享我喜歡的西洋音樂、泰勒絲、女性議題 有共鳴的人就會來跟我討論、粉絲會記得我喜歡泰勒絲 某種程度就是建立了我的形象（嗎） 歡迎繼續討論你覺得在品牌經營上，社媒的困難點 or 想法 or 想嘗試的東西！

商業

Moonrogu的歡樂鳥窩是個Moonrogu主觀觀點的集中地，你可以在這看到奇幻小說、創作觀點、平台生態觀察，以及不定時的討論互動。


Moonrogu的歡樂鳥窩

【社群經營】與其跟「注意力」競爭，不如做到「讓人記住」

局勢那麼亂，生活不容易， 在咖啡廳花點時間喝杯咖啡， 畫一張畫完自己會開心的圖， 對我而言是很好的休息。

大家好，我是照夜白。
是個以畫畫當成人生志業的繪師。

平時喜歡畫些原創作品或二創作品在網路上和粉絲交流，
如果透過VOCUS方格子，能和喜歡我的作品的粉絲有更進一步的互動，
我會非常的高興！！

我會持續的投入在我的創作事業之中！
也由衷的希望大家能繼續給我支持鼓勵，這對我非常的重要！謝謝大家！

照夜白的世界

《無題》

睡不著的夜

軟體開發

隨機不重疊的圓形 | p5.js

Creative Coding 資源彙整

今年，vocus 的 iOS 工程師 YC 帶著技術交流（以及讓更多人認識 vocus）的使命，參與了今年的 try! Swift Tokyo 研討會，這系列的文章，我們將會分享研討會當中的精彩學習，還有那些網路上看不到的研討會體驗細節（讚嘆主辦方的用心）！

方格子 vocus 官方沙龍

vocus tech｜iOS 工程師前進東京！參加 try! Swift Tokyo 研討會的學習與啟發（上）

本章介紹了 CSS 中的顏色和背景屬性，包括文本顏色的設置方法、背景顏色和背景圖片的應用、背景重複和位置的配置，以及線性漸變和徑向漸變的使用。這些知識將幫助你更靈活地設計和美化網頁。

Michael楊

CSS入門-Day4：顏色與背景

這篇文章主要介紹了繪圖軟體中的色彩模式，包括RGB和CMYK的概念和用法。對於網路上使用和印刷的影像處理有很好的指導意義。

小貝的多媒體學習日記．Beibei's diary

明明預覽沒問題，印出來顏色卻變很奇怪!? 快速瞭解色彩模式：RGB與CMYK的重要性

Youna's Devlog

[Lua] 註解 & Print & 變數型態

畫的沙龍

插畫練習

十月的花盛開

<什麼顏色>

雞蛋布丁的沙龍

粉彩風上色

黑白光線／原創設計繪畫

Chen You的沙龍

這是一篇解除色色的文章

【用風﻿格公式法，讓作品源源不絕產出】

《創作者事業研究室》沙龍

《無題》

照夜白電腦繪圖作品
使用軟體：Photoshop

音樂藝文

職場

10天快速學習系列

日後將分享關於我的經驗(日常、工作、技術)，並期待未來能創造屬於我的宇宙。

設計

🖥️電繪、平面設計、攝影、動畫🌟
歡迎來到我的方格子帳號！我是一名影片相關從業人員，累計將近4年工作經驗。
在這裡我會分享有關設計、影片的概念，希望幫助到剛開始學習的朋友。
與其他的創作者不同的是，我會分享一些比較細微的內容，如果有興趣，歡迎訂閱和留言，讓我們一起成長！
我的理念是學以致用，期待可以持續成長。

學習

Lua 筆記

這裡會放一些我寫過的 Leetcode 解題和學習新技術的筆記

圖文插畫

文化生活

<div class="draft-block draft--p left">春末夏初，陽光正好的五月初，我認識了莫蘭廸色（Miranda),謝謝妳，十月。</div>

寫詩抒情 

平凡無奇的女子，有著好多好多的話想說，但怎麼說都說不好，也不好說 ......

投資理財

閱讀書評

啟發隨想

協助創作者從吸引粉絲到變現專業

【照夜白原創作品】

互動藝術

主要放程式學習筆記，分享 Creative Coding 相關內容、作品

阿榮 | 前端 ~ 互動藝術程式

面試題

前端

IG：codeitaday

Creative Coding 作品變化概念

<h2 class="lexical__h2" dir="ltr">有 V.S. 沒有</h2><ul class="lexical__ul"><li value="1" class="lexical__listItem">有顏色 沒有顏色 (fill &amp; noFill)</li><li value="2" class="lexical__listItem">有框線 沒有框線 (stroke &amp; noStroke)</li><li value="3" class="lexical__listItem">有陰影 沒有陰影 </li></ul><h2 class="lexical__h2" dir="ltr">不同模式切換</h2><ul class="lexical__ul"><li value="1" class="lexical__listItem">mode 1 ~ 3，每個 mode 做不同事，例如：mode 代表 3 種不同色系，或 3 種不同形狀等。</li></ul> <h2 class="lexical__h2" dir="ltr">色彩模式 colorMode</h2><div class="ad-placeholder" style="min-height: 124px;"></div>RGB v.s. HSB<div class="ad-placeholder" style="min-height: 124px;"></div> <h2 class="lexical__h2" dir="ltr">混合模式 <a href="https://p5js.org/zh-Hans/reference/#/p5/blendMode" target="_blank" rel="noreferrer noopener">blendMode</a></h2><code spellcheck="false" style="white-space: pre-wrap;">SCREEN</code>、<code spellcheck="false" style="white-space: pre-wrap;">MULTIPLY</code>...等 ​ <h2 class="lexical__h2" dir="ltr">數值變化</h2><ul class="lexical__ul"><li value="1" class="lexical__listItem">形狀數值大小</li></ul> <h2 class="lexical__h2" dir="ltr">隨機</h2><ul class="lexical__ul"><li value="1" class="lexical__listItem">random</li><li value="2" class="lexical__listItem">noise</li></ul>

高瑞希的地球流浪日記

行天宮

籤詩

神明

下下籤

挑戰

寫作

女孩

經驗

人生

創巢書店

讀墨電子書《平台寫作倖存手札》

談寫作：迷航新手讀這個就對了

Facebook專頁《照夜白》

Instagram《照夜白（Artist）》

X（Twitter）《照夜白》

YouTube《照夜白》

PIXIV《照夜白》

YT頻道連結

科技

有 V.S. 沒有

不同模式切換

色彩模式 colorMode

混合模式 blendMode

數值變化

隨機