source for lucas.co
replace some conditionals with algorithms
data.js | 33 ++++++
favicon.ico | Bin 0 -> 198 bytes
favicon.xcf | Bin 0 -> 1322 bytes
index.html | 4 +-
info.js | 33 ------
main.js | 369 ++++++++++++++++++++++++------------------------------------
6 files changed, 181 insertions(+), 258 deletions(-)
diff --git a/data.js b/data.js
new file mode 100644
index 0000000..bf52bcd
--- /dev/null
+++ b/data.js
@@ -0,0 +1,33 @@
+export const data = {
+ "tabs": {
+ "0": {
+ "label": "Sculpture",
+ "body": "X.",
+ "image": []
+ },
+
+ "1": {
+ "label": "Drawing",
+ "body": "X.",
+ "image": []
+ },
+
+ "2": {
+ "label": "Programming",
+ "body": "X.",
+ "image": ["/images/drawing.png"]
+ },
+
+ "3": {
+ "label": "Design",
+ "body": "X.",
+ "image": []
+ },
+
+ "4": {
+ "label": "Info",
+ "body": "Lucas Galante\n\nadmin@lucas.co/\n\n",
+ "image": []
+ }
+ }
+};
diff --git a/favicon.ico b/favicon.ico
new file mode 100644
index 0000000..c99419a
Binary files /dev/null and b/favicon.ico differ
diff --git a/favicon.xcf b/favicon.xcf
new file mode 100644
index 0000000..03d0065
Binary files /dev/null and b/favicon.xcf differ
diff --git a/index.html b/index.html
index e3c6fd5..f82a2d1 100644
--- a/index.html
+++ b/index.html
@@ -15,8 +15,8 @@
<div id="description"></div>
</div>
-<a id="files" href="files.html">Files</a>
+<!-- <a id="files" href="files.html">Files</a> --!>
</body>
-</html>
\ No newline at end of file
+</html>
diff --git a/info.js b/info.js
deleted file mode 100644
index 8597d43..0000000
--- a/info.js
+++ /dev/null
@@ -1,33 +0,0 @@
-export const data = {
- "tabs": {
- "tab_0": {
- "title": "Morphogen",
- "body": "Computer program for design through evolution and growth based exploration.",
- "image": []
- },
-
- "tab_1": {
- "title": "Moldtek",
- "body": "Computer based mold designing tools for objects with very complex geometry.",
- "image": []
- },
-
- "tab_2": {
- "title": "Drawing",
- "body": "Some pencil drawings",
- "image": ["/images/drawing.png"]
- },
-
- "tab_3": {
- "title": "Spoon",
- "body": "A wax carving intended for ceramic slip casting",
- "image": []
- },
-
- "tab_4": {
- "title": "Info",
- "body": "Lucas Galante\n\nadmin@lucas.co/\n\n",
- "image": []
- }
- }
-};
\ No newline at end of file
diff --git a/main.js b/main.js
index 34d9bf8..37a5cf5 100644
--- a/main.js
+++ b/main.js
@@ -1,260 +1,183 @@
-import { data } from "./info.js";
+import { data } from "./data.js"
-console.log(data);
+console.log(data)
-let tab_ct = Object.keys(data.tabs).length;
+const clr_bg_on = "#3f3131"
+const clr_bg_off = "#ffffff"
+const clr_txt_on = "#ffffff"
+const clr_txt_off = "#000000"
+const side_ct = 4
+const tab_ct = Object.keys(data.tabs).length
+let ct_arr = [0, 0, 0, 0]
+let sel_idx = 0
+let tab_arr = []
+let win_h = window.innerHeight
+let win_w = window.innerWidth
-console.log(tab_ct)
-let tab_idx = 0;
+// side clockwise, starting at top: 0, 1, 2, 3
-const bg_on = "#3f3131";
-const bg_off = "#ffffff";
-const txt_on = "#ffffff";
-const txt_off = "#000000";
-
-let tab_arr = [];
-let ct_arr = [0, 0, 0, 0];
-let w_start = 0;
-
-loadPage();
+loadPage()
function loadPage() {
- window.addEventListener(
- "resize",
- function() {check_h()}
- );
- tab_init();
- tab_set(0);
+ //window.addEventListener("resize", function() {check_h()})
+ tab_init()
+ tab_format()
+ //tab_set(sel_idx)
}
-function tab_init() {
+//function check_h() {
+// let win_w = window.innerWidth
+// if(window_innerWidth != win_w) {
+// win_w = window.innerWidth
+// tab_format()
+// }
+//}
- for(let i = 0; i < tab_ct; i++) {
- let tab = document.createElement("div");
- let side = i;
+function img_get(i) {
+ let images = document.getElementsByTagName("img")
- if (side >= 4)
- side = (3 - (i % 4)) % 4;
-
- tab.side = side;
- tab.side = ct_arr[idx];
- ct_arr[idx] += 1;
-
- tab.id = "tab_" + String(i);
-
- tab.addEventListener(
- "click",
- function() { set_tab(i) }
- );
- tab.addEventListener(
- "mouseenter",
- function() { enter_tab(tab.id) }
- );
- tab.addEventListener(
- "mouseleave",
- function() { leave_tab(tab.id) }
- );
+ for(const img of img_arr)
+ img.remove()
- tab_arr.push(tab);
- body.append(tab);
+ let box = document.getElementById("box")
+ let urls = data.tabs["tab_" + i].img
+ let n = 0
+ for(let url of urls) {
+ let img = document.createElement("img")
+ img.src=url
+ img.id = "img_" + n
+ box.append(img)
+ n += 1
}
+}
- for(let i = 0; i < tab_ct; i++) {
- let tab = tab_arr[i];
- let side = tab.side;
-
- let label = data.tab_arr[tab.idx].label;
-
- // vertical labels
- if(pos == 1 || pos == 3) {
- let new_label = "";
- for(const letter of label) {
- new_label += letter + "\n";
- }
- label = new_label;
- }
-
- tab.innerText = label;
+function img_format() {
+ let images = document.getElementsByTagName("img")
+ let n_images = images.length
+ let img_w = box_w * 0.4
+ let img_h = box_h * 0.4
+ for(img of images) {
+ img.style.width = img_w + "px"
+ img.style.height = img_h + "px"
+ img.style.left = 20 + "px"
+ img.style.top = (img_h - 20) + "px"
}
}
-function set_tab(idx) {
+function tab_init() {
for(let i = 0; i < tab_ct; i++) {
- let tab_id = "tab_" + String(i);
-
- if(i == idx) {
- let tab = document.getElementById(tab_id);
- tab.style.backgroundColor = bg_on;
- tab.style.color = txt_on;
- active_tab = i;
- images(i);
- }
-
- else {
- let tab = document.getElementById(tab_id);
- tab.style.backgroundColor = bg_off;
- tab.style.color = txt_off;
+ const tab = document.createElement("div")
+ tab.idx = i
+ let side = i
+ if (side >= side_ct) {
+ side %= side_ct
+ side = (side_ct - 1) - side
+ side %= side_ct
}
+ tab.side = side
+ //tab.id = "tab_" + String(i)
+ tab.addEventListener("click", function() {tab_set(i)})
+ tab.addEventListener("mouseenter", function() {tab_enter(tab.idx)})
+ tab.addEventListener("mouseleave", function() {tab_exit(tab.idx)})
+ ct_arr[side] += 1
+ tab.id = "tab"
+ tab_arr.push(tab)
+ body.append(tab)
}
- tab_idx = idx;
- let tab_id = "tab_" + idx;
- const description = document.getElementById("description");
-
- (description.innerText = data.tabs[tab_id]["body"])
-
- sizing();
-}
-
-function tab_enter(tab_id) {
- let tab = document.getElementById(tab_id);
- tab.style.backgroundColor = bg_on;
- tab.style.color = txt_on;
-}
-
-function tab_exit(tab_idx) {
- if (tab_idx != tab+ active_tab) {
- let tab = document.getElementById(tab_id);
- tab.style.backgroundColor = bg_off;
- tab.style.color = txt_off;
- }
-}
-
-function images(i) {
- let images = document.getElementsByTagName("img");
-
- for(const img of images)
- img.remove();
-
- let box = document.getElementById("box");
- let urls = data.tabs["tab_" + i].image;
- let n = 0;
- for(let url of urls) {
- let image = document.createElement("img");
- image.src=url;
- image.id = "image_" + n;
- box.append(image);
- n += 1;
- }
-}
-
-function check_h() {
- let window_w = window.innerWidth;
-
- if(window_w != w_start) {
- w_start = window_w;
- sizing()
+ for(let i = 0; i < tab_ct; i++) {
+ const tab = tab_arr[i]
+ let label = data.tabs[String(i)].label
+ // vertical labels
+ //if(tab.side == 1 || tab.side == 3) {
+ // let new_label = ""
+ // for(const letter of label)
+ // new_label += letter + "\n"
+ // label = new_label
+ //}
+ tab.innerText = label
}
}
-function sizing() {
- let window_w = window.innerWidth;
- let window_h = window.innerHeight;
-
- let font_size = window_h * 0.014;
+function tab_format() {
+ const type_size = win_h * 0.014
// box
- let box = document.getElementById("box");
-
- let box_w = window_w * 0.6;
- let box_h = window_h * 0.5;
-
- let box_left = window_w / 2 - box_w / 2;
- let box_top = window_h / 2 - box_h / 2;
-
- box.style.width = box_w + "px";
- box.style.height = box_h + "px";
+ const box = document.getElementById("box")
+ const box_h = win_h * 0.5
+ const box_w = win_w * 0.6
+ const box_x = win_w / 2 - box_w / 2
+ const box_y = win_h / 2 - box_h / 2
+ box.style.height = box_h + "px"
+ box.style.width = box_w + "px"
+ box.style.left = box_x + "px"
+ box.style.top = box_y + "px"
+ box.style.fontSize = type_size + "px"
+ box.style.backgroundColor = "#202020"
- box.style.left = box_left + "px";
- box.style.top = box_top + "px";
-
- box.style.fontSize = font_size + "px";
-
- // image
- let images = document.getElementsByTagName("img");
- let n_images = images.length;
-
- let img_w = box_w * 0.4;
- let img_h = box_h * 0.4;
-
- for(img of images) {
- img.style.width = img_w + "px";
- img.style.height = img_h + "px";
-
- img.style.left = 20 + "px";
- img.style.top = (img_h - 20) + "px";
- }
-
// tab
- let tab_w;
- let tab_h;
-
- let dim_1 = window_h * 0.03;
-
- const border_radius = 45;
-
- for(let i = 0; i < n_tabs; i++) {
- let tab = tabs[i];
- let pos = tab.pos;
- let idx = tab.idx;
- let count = counts[pos];
-
- tab.style.fontSize = font_size + "px";
-
- if(pos == 0) {
- tab_w = box_w / count;
- tab_h = dim_1;
-
- tab.style.left = box_left + "px";
- tab.style.top = (box_top - tab_h) + "px";
-
- tab.style.borderTopLeftRadius = border_radius + "px";
- tab.style.borderTopRightRadius = border_radius + "px";
- }
-
- if(pos == 1) {
- tab_w = dim_1;
- tab_h = box_h / count;
-
- tab.style.left = (box_left + box_w - tab_w / 2 + tab_w / 2) + "px";
- tab.style.top = (box_top + tab_h / 2 - tab_h / 2 + tab_h * idx) + "px";
-
- tab.style.borderTopRightRadius = border_radius + "px";
- tab.style.borderBottomRightRadius = border_radius + "px";
+ for (const tab of tab_arr) {
+ const style = tab.style
+
+ let height = win_h / 25
+ let width = win_h / 2
+ if (tab.side % 2 == 0) width *= win_w / win_h
+
+ let left = Math.sin(tab.side / side_ct * Math.PI * 2) * win_w / 4
+ left += (win_w / 2 - width / 2)
+
+ let top = Math.cos((tab.side + 2) / side_ct * Math.PI * 2) * win_h / 4
+ top += (win_h / 2 - height / 2)
+
+ tab.style.transform = "rotate(" + String(360 / side_ct * tab.side) + "deg)"
+ tab.style.transformOrigin = "center"
+ tab.style.backgroundColor = clr_bg_on
+ tab.style.fontSize = type_size + "px"
+ tab.style.left = String(left) + "px"
+ tab.style.top = String(top) + "px"
+ tab.style.height = String(height) + "px"
+ tab.style.width = String(width) + "px"
+ tab.style.borderTopLeftRadius = "20px"
+ tab.style.borderTopRightRadius = "20px"
+
+ }
+}
- tab.style.lineHeight = font_size + "px";
+function tab_enter(tab_idx) {
+ const tab = tab_arr[tab_idx]
+ for (const tab of tab_arr) {
+ if (tab_idx == tab.idx) {
+ tab.style.backgroundColor = clr_bg_on
+ tab.style.color = clr_txt_on
}
-
- if(pos == 2) {
- tab_w = box_w / count
- tab_h = dim_1;
-
- tab.style.top = (box_top + box_h) + "px";
- tab.style.left = (box_left + tab_w * idx) + "px";
-
- tab.style.borderBottomRightRadius = border_radius + "px";
- tab.style.borderBottomLeftRadius = border_radius + "px";
+ else {
+ tab.style.backgroundColor = clr_bg_off
+ tab.style.color = clr_txt_off
}
+ }
+}
- if(pos == 3) {
- tab_w = dim_1;
- tab_h = box_h / count;
+function tab_exit(idx) {
+ const tab = tab_arr[idx]
+ tab.style.backgroundColor = clr_bg_off
+ tab.style.color = clr_txt_off
+}
- tab.style.top = (box_top + tab_h / 2 - tab_h / 2 + tab_h * idx) + "px";
- tab.style.left = (box_left - tab_w / 2 - tab_w / 2) + "px";
-
- tab.style.borderBottomLeftRadius = border_radius + "px";
- tab.style.borderTopLeftRadius = border_radius + "px";
- tab.style.lineHeight = font_size + "px";
+function tab_sel(sel_idx) {
+ for (const tab of tab_arr) {
+ const style = tab.style
+ if(tab.idx == sel_idx) {
+ style.backgroundColor = clr_bg_on
+ style.color = clr_txt_on
+ //images(i)
+ }
+ else {
+ style.backgroundColor = clr_bg_off
+ style.color = clr_txt_off
}
-
- tab.style.width = tab_w + "px";
- tab.style.height = tab_h + "px";
-
- // files
- let files_box = document.getElementById("files");
- files_box.style.fontSize = font_size + "px";
}
+ //const description = document.getElementById("description")
+ //(description.innerText = data.tabs[tab_id]["body"])
}