教學

網頁與互動藝術相關的程式,包含p5.js, socket.io, vue.js. 等等,整理在【老闆 來點寇汀吧】Youtube頻道上的直播,將創作的過程完全不藏私公開!

最新文章

【p5.js創作教學】Dreamy Bird 夢幻鳥

本篇記錄創作<夢幻鳥>這件作品的過程,利用p5.js在短短的時間內創作出繽紛多彩、眼睛跟著滑鼠游標轉的夢幻鳥,看著他不斷地動,好像趴著在看水族館裡的魚一樣,心情也會跟著雀躍起來唷!

【Canvas創作教學】畫個偵測敵人的動態雷達圖網頁

本次創作直播內容透過 Canvas 物件,將網頁當作畫布,繪製不同的圖形,完成模擬偵測敵人的雷達機介面;運用三角函數概念,以及模組化程式,簡單製作出動態的網頁,詳細的步驟解釋,無論有沒有基礎,都能輕鬆跟著說明完成,剩下的就由你自行發揮囉!

【p5.js創作教學】CreativeCoding 花火大會(直播筆記)

為響應日本的一群Creative Coder在Processing Community Day的社群串聯,扮起虛擬的花火大會,我們也來利用p5.js,結合粒子系統、漸變顏色甚至是聲控模組,一起在夜空中創作出絢麗的煙火吧!

Vue.js入門:英文2000字互動遊戲網頁

你多久沒鍛鍊英文了呢?這次直播使用HTML(Pug)CSS(Sass)以及Javascript(Vue.js)來完成一個練習2000字英文單字的小互動遊戲網頁,難度適中,尤其適合剛開始學習Vue.js的新手,無論是跟著步驟逐步操作,或是聽老闆的影片都能快速完成。

Vue.js入門:製作iOS風格的動態月曆與待辦清單網頁

手機裡的動態月曆.只消一指就可以增加或是刪除行程,有想過要怎麼在網頁上實現嗎?老闆利用簡單的動態網頁範例和步驟解說,帶你一步步踏進Vue.js的世界。

Vue.js入門:完成懷舊的井字圈叉遊戲動態網頁

小時候都玩過圈圈叉叉的遊戲,隨手畫個井字就可以與玩伴鬥智,這次我們要利用Pug、Sass及Vue.js製作出這款動態小遊戲網頁啦!

利用Pug(HTML)、Sass(CSS)及Vue.js製作動態時間軸年表(直播筆記)

不論個人或是品牌,都需要讓網站造訪者快速暸解你的歷史發展,時間軸年表是一個常見且好用的表示方法。利用Pug(HTML)、Sass(CSS)及Vue.js製作出一個屬於你的動態時間軸年表吧!

用D3.js製作視覺化的日常作息方塊圖(直播筆記)

D3.js工具可以把大筆的資料視覺化呈現於網頁上,本篇文章利用淺顯易懂的解說,一步步寫出如同Google日曆般的日常生活作息方塊圖。

【p5.js創作教學】Quantum Unstable 量子不穩定 – 發光糾纏的量子系統

利用p5.js製作出變形的同心圓動態,沒有特別的創作點子時就隨意調整、利用不同的變數增加變化,終究會等到那個靈光一閃,增加許多畫龍點睛的細節,打造出科技HUD風格的量子系統作品《量子不穩定Quantum Unstable》

用Vue.js做快速換色與整理的便利貼牆吧!(下)(直播筆記)

需要發想靈感、紀錄個人代辦清單,或和他人討論嗎?製作一個能夠自由編輯、增刪、變色、拖曳編排的便利貼牆網頁,多個願望一次滿足。下集將便利貼牆美化、功能變得更完善,更連結firebase即時資料庫,再多張便利貼也不怕。

用Vue.js做快速換色與整理的便利貼牆吧!(上)(直播筆記)

需要發想靈感、紀錄個人代辦清單,或和他人討論嗎?製作一個能夠自由編輯、增刪、變色、拖曳編排的便利貼牆網頁,多個願望一次滿足。上集我們使用Pug、Sass及Vue.js刻出便利貼的基本功能。

使用Vue.js建立一個sass色票卡視覺化網頁(直播筆記)

寫網頁的時候,單看sass變數的程式碼,會不知道色碼是不是合適的嗎?老闆帶你一小時就能利用Vue.js快速建立好視覺化色票卡小工具。文章會從一開始雛型的設計稿發想,一步步教你如何完成工具。

【p5.js創作教學】Aqua Planet 水色星球 – 來製作發光碰撞的行星吧!(直播筆記)

利用p5.js程式一步步創作出會發光的水色星球粒子,並且增加弧形軌跡、連線、外圍刻度尺規等細節,讓整件作品完整且耐人尋味。

【p5.js創作教學】來畫一個瘋狂的龍捲風吧!(直播筆記)

身為台灣人可能沒親眼看過龍捲風,但也大概它知道長甚麼樣子,威力又有多強大。今天我們要利用p5.js來完成瘋狂的龍捲風捲起乳牛與房屋的一張動態圖片。

用p5.js玩創作,讓小機器人動起來!哲宇的互動藝術體驗(直播筆記)

Creative Coding並沒有你想像中的複雜,本篇文章將循序漸進地帶領你用p5.js慢慢畫出會動的機器人,並使用時間參數及亂數大量複製,加上與滑鼠的互動,成為一幅可愛的互動藝術作品。再加碼收錄老闆於直播時的Q&A,邀請你一同進入互動藝術創作程式的世界。

來用可怕的三角函數做網頁吧! -Part 2科幻時鐘(直播筆記)

上一篇中,老闆利用三角函數幫 DOM 做 CSS 的絕對定位,這次我們雖然也是使用三角函數,但是改使用 canvas 在網頁上繪圖,製作科幻效果的時鐘。

來用可怕的三角函數做網頁吧! – Part 1 衛星繞月球(直播筆記)

跟貓借一隻手:召喚效率小幫手-變數(互動藝術創作分享教學)

JS及網頁的模板好夥伴:Canvas sketch入門

讓我們來快速寫個漂浮感的輪播吧!動態網頁程式教學(直播筆記)

圖形繪製與色彩:從點線面開始的世界(互動藝術創作分享教學)

【p5.js創作教學】電波電路Wave Circuit – 來做個逼哩逼哩送訊號的電路吧!(直播筆記)

基礎JS物件導向教學(直播筆記)

【p5.js 創作教學】 色散海葵(直播筆記)

來做SVG動畫讓蔥油餅翻滾吧! (下):讓場景中的元件動起來(直播筆記)

來做SVG動畫讓蔥油餅翻滾吧! (上):發想素材、將素材引入網頁(直播筆記)

資料視覺化的動態長條圖製作(下):Vue/ D3(直播筆記)

資料視覺化的動態長條圖製作(上):jQuery(直播筆記)

p5.js 快速上手:互動網頁教學

讓我們來做個互動天氣地圖吧!(直播筆記)

用 Socket.io 做一個即時聊天室吧!(直播筆記)

老闆的網頁實驗室#2-實作 Canvas 遮罩動畫

老闆的網頁實驗室 #1 — 實作CSS拆字動畫

PHP Code Snippets Powered By : XYZScripts.com