iT邦幫忙

2021 iThome 鐵人賽

DAY 5
0
Modern Web

前端藝術 - 用P5.js做藝術系列 第 5

Day5 - 變數的基礎概念

只要是設定說 如果今天有一些變數是需要一起去做更換的 你會需要一個這樣的設定變數去做更改

否則會有很多太不確定的因素在裡面。

https://ithelp.ithome.com.tw/upload/images/20210920/20103744EBD9OcmECU.png

舉例來說 如果像這樣重複性的參數,我們可以用變數去把它放在一起

https://ithelp.ithome.com.tw/upload/images/20210920/201037449TMjKRuGQ0.png

這樣的做法可以讓圓形統一性,但我們也可以用R再多做一些他的參數設定,我們可以再做到一個更

複雜的解構概念

一些複雜的概念,可以讓變數透過一些變數的更動方式 可以去讓自己的原型去呈現出不一樣的顏色切換

https://ithelp.ithome.com.tw/upload/images/20210920/20103744GBA6LTuQD3.png

可以留下上一刻的動作

可以參數去製作一些動態的效果

https://ithelp.ithome.com.tw/upload/images/20210920/201037448I5o3itHI0.png

利用一些參數的變性 就可以 讓一顆球假裝在彈跳的樣子

如何利用一些 if else 以及 變數的判定 跟餘數 製造出 韻律感,重複,亂數

現在我們來試試看用這個教學來做一個排列方塊
https://ithelp.ithome.com.tw/upload/images/20210920/20103744NNVmQBoyS8.png

利用變數 以及畫面寬度 來去判定方塊排列是否要往下排列

https://ithelp.ithome.com.tw/upload/images/20210920/20103744uxAk7kAx7l.png

接下來利用一些random去做出一些顏色的切換

https://ithelp.ithome.com.tw/upload/images/20210920/20103744KpiHiWwVo4.png

甚至我們可以直接利用 + - X % 來去計算 frameCount 次數 來增加一些額外的變化

https://ithelp.ithome.com.tw/upload/images/20210920/20103744AKbrqZptNR.png


上一篇
Day4 - 幾何抽象
下一篇
Day6 - 變數的進階操作
系列文
前端藝術 - 用P5.js做藝術30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言