Fibonacci clock and javascript
利用javascript嘗試著撰寫費波納契時鐘
p5 editor https://editor.p5js.org/
//這裡放只執行一次的程式碼
function setup() {
createCanvas(400, 400);
}
//下面是無窮迴圈
function draw() {
background(220);
}
費氏時鐘，應用費氏數列(1.1.2.3.5.8.13....)以及黃金比例為基礎觀念做設計
其中：
小時：紅+藍
分 ：綠+藍
createCanvas(640, 400); 因為寬高比為8:5，所以維持這比例，取一個640,400的畫布大小
定義物件：
var Andrew = {
one: 'empty',
onedown: 'empty',
twobox: 'empty',
threebox: 'empty',
fivebox: 'empty'
//最後一個屬性結尾不可以有逗號
}
2022/9/12號的進度
//建立一個名字叫Andrew的物件，裡面有5個屬性，分別代表費氏數列的五個數值(one,onesown,twobox,threebox,fivebox)
var Andrew = {
one: 'empty',
onedown: 'empty',
twobox: 'empty',
threebox: 'empty',
fivebox: 'empty'
//最後一個屬性結尾不可以有逗號
}
function setup() {
createCanvas(640, 400);
//調整畫布大小
background(0);
//初始背景為黑色
}
function draw() {
}
2022/9/19
畫四條線
stroke(0);
//我畫的線條顏色是黑色，但是stroke不是畫線的指令
strokeWeight(5);//線條寬度是5
line(240,0,240,400);
line(160,0,160,160);
line(0,160,240,160);
line(160,80,240,80);
寫函數(未完成)
//寫一個取得時間的函數
function gettime() {
var hr = hour();
//從網路取的現在的"時"，24小時制
var mn = int(minute()/5);
//從網路取的現在的"分"，再12等分，最後取整數
//console.log(hr);
//console.log(mn);
if(hr >= 12){
hr = hr -12;
}
//把24小時制轉成12小時制，例如12點就是0點
// 17點就是5點
}
2022/9/26 進度新增
//建立一個名字叫Andrew的物件，裡面有5個屬性，分別代表費氏數列的五個數值(one,onedown,twobox,threebox,fivebox)
var Andrew = {
one: 'empty',
onedown: 'empty',
twobox: 'empty',
threebox: 'empty',
fivebox: 'empty'
//最後一個屬性結尾不可以有逗號
}
function setup() {
createCanvas(640, 400);
//調整畫布大小
background(0);
//初始背景為黑色，不能使用到白、紅、綠、藍色當背景
//因為我們是黑心生活科技教室跟子弟兵，所以要黑色
}
function draw() {
stroke(0);
//我畫的線條顏色是黑色，但是stroke不是畫線的指令
strokeWeight(5);//線條寬度是5
line(240,0,240,400);
line(160,0,160,160);
line(0,160,240,160);
line(160,80,240,80);
}
//寫一個取得時間的函數
function gettime() {
var hr = hour();
//從網路取的現在的"時"，24小時制
var mn = int(minute()/5);
//從網路取的現在的"分"，再12等分，最後取整數
//console.log(hr);
//console.log(mn);
if(hr >= 12){
hr = hr -12;
}
//把24小時制轉成12小時制，例如12點就是0點
// 17點就是5點
//我們有五個標籤，用標籤來判斷顯示顏色，如果標籤名稱是
//hr:該標籤就會顯示紅色；mn:就顯示綠色
//both:就顯示藍色，代表分跟小時共用
//先判斷小時，之後輪到分的時候再排除
if(hr>=5) {
Andrew.fivebox = 'hr';
hr = hr -5;
//這樣寫的目的是要做下一輪的判斷
//因為我們的標籤有五個，分別代表數字5.3.2.1.1
}
if(hr>=3) {
Andrew.threebox = 'hr';
hr = hr -3;
//判斷threebox這個標籤是hr,mn還是both
}
if(hr>=2) {
Andrew.twobox = 'hr';
hr = hr -2;
//判斷twobox這個標籤是hr,mn還是both
}
if(hr>=1) {
Andrew.one = 'hr';
hr = hr -1;
//判斷one這個標籤是hr,mn還是both
}
if(mn >= 5) {
if(Andrew.fivebox == 'hr'){
Andrew.fivebox = 'both';
} else {
Andrew.fivebox = 'mn';
}
mn = mn-5;
}
}
上週完成了使用小時判斷，1.1.2.3.5這五個標籤，什麼時候被小時(hr)使用
接下來這週就是要基於已經判斷完的結果再加上用分鐘(分鐘/5)來判斷1.1.2.3.5這五個標籤，有沒有同時要被使用
if(mn >= 3) {
if(Andrew.threebox == 'hr'){
Andrew.threebox = 'both';
} else {
Andrew.threebox = 'mn';
}
mn = mn-3;
}
if(mn >= 2) {
if(Andrew.twobox == 'hr'){
Andrew.twobox = 'both';
} else {
Andrew.twobox = 'mn';
}
mn = mn-2;
}
if(mn >= 1) {
Andrew.onedown = 'mn';
//mn = mn-1;
}
完整程式碼
同學如果自己撰寫程式失敗，那就...可以複製老師的程式碼修改，記得把物件名稱改為自己的，老師的物件名稱是Andrew，換成自己的
//建立一個名字叫Andrew的物件，裡面有5個屬性，分別代表費氏數列的五個數值(one,onedown,twobox,threebox,fivebox)
var Andrew = {
one: 'empty',
onedown: 'empty',
twobox: 'empty',
threebox: 'empty',
fivebox: 'empty'
//最後一個屬性結尾不可以有逗號
}
function setup() {
createCanvas(640, 400);
//調整畫布大小
background(0);
//初始背景為黑色，不能使用到白、紅、綠、藍色當背景
//因為我們是黑心生活科技教室跟子弟兵，所以要黑色
}
function draw() {
clearField();
gettime();
showTime();
frameRate(20);
stroke(0);
//我畫的線條顏色是黑色，但是stroke不是畫線的指令
strokeWeight(5);//線條寬度是5
line(240,0,240,400);
line(160,0,160,160);
line(0,160,240,160);
line(160,80,240,80);
}
//寫一個取得時間的函數
function gettime() {
var hr = hour();
//從網路取的現在的"時"，24小時制
var mn = int(minute()/5);
//從網路取的現在的"分"，再12等分，最後取整數
//console.log(hr);
//console.log(mn);
if(hr >= 12){
hr = hr -12;
}
//把24小時制轉成12小時制，例如12點就是0點
// 17點就是5點
//我們有五個標籤，用標籤來判斷顯示顏色，如果標籤名稱是
//hr:該標籤就會顯示紅色；mn:就顯示綠色
//both:就顯示藍色，代表分跟小時共用
//先判斷小時，之後輪到分的時候再排除
if(hr>=5) {
Andrew.fivebox = 'hr';
hr = hr -5;
//這樣寫的目的是要做下一輪的判斷
//因為我們的標籤有五個，分別代表數字5.3.2.1.1
//判斷fivebox這個標籤是hr,mn還是both
}
if(hr>=3) {
Andrew.threebox = 'hr';
hr = hr -3;
//判斷threebox這個標籤是hr,mn還是both
}
if(hr>=2) {
Andrew.twobox = 'hr';
hr = hr -2;
//判斷twobox這個標籤是hr,mn還是both
}
if(hr>=1) {
Andrew.one = 'hr';
hr = hr -1;
//判斷one這個標籤是hr,mn還是both
}
//接下來要做交叉判斷，前面是第一輪的判斷而已
//也就是先幫五個標籤判斷有沒有被使用
//接下來下一輪的判斷是用"分"
//在用分判斷的這一輪，那個標籤如果已經被hr使用了
//mn也需要用，就把標籤名稱改成both
if(mn >= 5) {
if(Andrew.fivebox == 'hr'){
Andrew.fivebox = 'both';
} else {
Andrew.fivebox = 'mn';
}
mn = mn-5;
}
if(mn >= 3) {
if(Andrew.threebox == 'hr'){
Andrew.threebox = 'both';
} else {
Andrew.threebox = 'mn';
}
mn = mn-3;
}
if(mn >= 2) {
if(Andrew.twobox == 'hr'){
Andrew.twobox = 'both';
} else {
Andrew.twobox = 'mn';
}
mn = mn-2;
}
if(mn >= 1) {
Andrew.onedown = 'mn';
//mn = mn-1;
}
}
//每次執行一定要清除標籤上的值，否則會有之前被使用過的資訊，那顯示的顏色就會錯誤
function clearField() {
Andrew.one = 'empty';
Andrew.onedown = 'empty';
Andrew.twobox = 'empty';
Andrew.threebox = 'empty';
Andrew.fivebox = 'empty';
}
//這隻程式是有回傳值的，如果回傳值是hr就紅色、mn就綠色、both就藍色
function getColor(request) {
if (request == 'hr') {
return color(255, 0, 0);
} else if (request == 'mn') {
return color(0, 255, 0);
} else if (request == 'both') {
return color(0, 0, 255);
} else {
return color(255, 255, 255);
}
}
function showTime() {
noStroke();
fill(getColor(Andrew.one));
rect(161, 0, 239, 79);
fill(getColor(Andrew.onedown));
rect(161, 81, 239, 159);
fill(getColor(Andrew.twobox));
rect(0, 0, 159, 159);
fill(getColor(Andrew.threebox));
rect(0, 161, 239, 400);
fill(getColor(Andrew.fivebox));
rect(241, 0, 640, 400);
}