Skip to content

Commit

Permalink
Merge pull request #70 from florianwns/dev
Browse files Browse the repository at this point in the history 
Dev
  • Loading branch information
@florianwns
florianwns authored Apr 19, 2024
2 parents 4ba7526 + 8ac7874 commit 040e994
Show file tree
Hide file tree
Showing 6 changed files with 104 additions and 72 deletions.
4 changes: 3 additions & 1 deletion TODO.md
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,9 @@
# TODO-LIST

$ [ ] renommer strengthening_of_timbers en polygon_division_bars
* [ ] renommer strengthening_of_timbers en polygon_division_bars

* [ ] Ajouter les renforts en plus de la division des polygones

* [ ] pour le flattened mandala avec le bindu zome, pas de rotate sur le même crown_index

* [ ] Essayer de faire un zome bindu
Expand Down
1 change: 1 addition & 0 deletions i18n/en.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,7 @@ const I18N_EN = {
tooltip_copy_link: "Copy link",
tooltip_link_buymeacoffee: "Buy me a coffee ☕ if you love Z5omes 🙏",
tooltip_link_facebook: "Come and chat with 📢 with the 'Zome Network Building' community",
tooltip_link_youtube: "Visit the YouTube channel 🎥 to learn more about using z5omes",
tooltip_link_github: "Go to Github 🐈 if you have any questions",
tooltip_link_linkedin: "Visit my profile on Linkedin",
tooltip_export_2_format: "Exporter au format $1",
Expand Down
64 changes: 38 additions & 26 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/fa.min.css" rel="stylesheet">
<link href="css/flag-icons.css" rel="stylesheet">
<link href="css/custom.css?v=1.0.10" rel="stylesheet">
<link href="css/custom.css?v=1.0.10b01" rel="stylesheet">
</head>

<body class="bg-light">
Expand Down Expand Up @@ -390,7 +390,7 @@ <h2 id="#title" class="text-primary mb-0 ">
<span class="d-none d-sm-inline-block d-md-none">Z5omes</span>
</h2>
<span class="d-none d-sm-inline-block text-muted position-absolute end-0"
style="font-size: 10px; top:0px">v1.0.10</span>
style="font-size: 10px; top:0px">v1.0.10b01</span>
</a>

<a href="https://www.paypal.com/paypalme/z5omes"
Expand All @@ -405,6 +405,12 @@ <h2 id="#title" class="text-primary mb-0 ">
<i class="fa-brands fa-facebook"></i>
</a>

<a href="https://www.youtube.com/@Z5omes"
class="text-primary btn btn-sm fs-4 p-2"
data-bs-toggle="tooltip" :title="i18n('tooltip_link_youtube')">
<i class="fa-brands fa-youtube"></i>
</a>

<a href="https://github.com/florianwns/z5omes"
class="text-primary btn btn-sm fs-4 p-2"
data-bs-toggle="tooltip" :title="i18n('tooltip_link_github')">
Expand Down Expand Up @@ -850,7 +856,7 @@ <h5 class="text-secondary my-1 me-3" id="shortcuts-modal-title">

<btn class="btn btn-primary"
@click="strengthening_of_timbers_bitwise_flag = SVG_HORIZONTAL_BAR_BITWISE_FLAG"
:class="(strengthening_of_timbers_bitwise_flag === SVG_HORIZONTAL_BAR_BITWISE_FLAG) ? 'btn-primary' : 'btn-secondary'">
:class="(num_points_of_selected_crown === 3) ? 'btn-secondary disabled' : (strengthening_of_timbers_bitwise_flag === SVG_HORIZONTAL_BAR_BITWISE_FLAG) ? 'btn-primary' : 'btn-secondary'">
<svg class="svg_rhombus_icon" width="18" height="18"
viewBox="0 0 26 26">
<use href="#svg_horizontal_bar"></use>
Expand All @@ -869,7 +875,7 @@ <h5 class="text-secondary my-1 me-3" id="shortcuts-modal-title">
</btn>

<btn class="btn btn-primary position-relative"
:class="(![SVG_HORIZONTAL_BAR_BITWISE_FLAG, SVG_VERTICAL_BAR_BITWISE_FLAG, 0].includes(strengthening_of_timbers_bitwise_flag)) ? 'btn-primary' : 'btn-secondary'"
:class="(num_points_of_selected_crown !== 4) ? 'btn-secondary disabled' : (![SVG_HORIZONTAL_BAR_BITWISE_FLAG, SVG_VERTICAL_BAR_BITWISE_FLAG, 0].includes(strengthening_of_timbers_bitwise_flag)) ? 'btn-primary' : 'btn-secondary'"
data-bs-toggle="modal"
data-bs-target="#framework-customizer-modal"
for="btn-custom-rhombus">
Expand Down Expand Up @@ -1258,14 +1264,14 @@ <h5 class="text-secondary mt-4 mb-4 me-auto">
</h5>

<!-- ZIP Button -->
<!-- <div>-->
<!-- <span class="text-primary btn btn-sm fs-2 px-2 position-relative" data-bs-toggle="tooltip"-->
<!-- :title="i18n('tooltip_export_2_format', 'ZIP')"-->
<!-- @click="download_zip()">-->
<!-- <i class="fa-solid fa-file"></i>-->
<!-- <span class="fa-icon-file-type">ZIP</span>-->
<!-- </span>-->
<!-- </div>-->
<!-- <div>-->
<!-- <span class="text-primary btn btn-sm fs-2 px-2 position-relative" data-bs-toggle="tooltip"-->
<!-- :title="i18n('tooltip_export_2_format', 'ZIP')"-->
<!-- @click="download_zip()">-->
<!-- <i class="fa-solid fa-file"></i>-->
<!-- <span class="fa-icon-file-type">ZIP</span>-->
<!-- </span>-->
<!-- </div>-->
</div>

<div class="row">
Expand Down Expand Up @@ -1327,15 +1333,15 @@ <h5 class="text-secondary mt-4 mb-4 me-auto">
<script src="js/screenfull.min.js"></script>

<!-- i18n Dictionaries -->
<script src="i18n/es.js?v=1.0.10"></script>
<script src="i18n/en.js?v=1.0.10"></script>
<script src="i18n/it.js?v=1.0.10"></script>
<script src="i18n/fr.js?v=1.0.10"></script>
<script src="i18n/pl.js?v=1.0.10"></script>
<script src="i18n/sv.js?v=1.0.10"></script>
<script src="i18n/es.js?v=1.0.10b01"></script>
<script src="i18n/en.js?v=1.0.10b01"></script>
<script src="i18n/it.js?v=1.0.10b01"></script>
<script src="i18n/fr.js?v=1.0.10b01"></script>
<script src="i18n/pl.js?v=1.0.10b01"></script>
<script src="i18n/sv.js?v=1.0.10b01"></script>

<!-- Core JS -->
<script src="js/core.js?v=1.0.10"></script>
<script src="js/core.js?v=1.0.10b01"></script>

<!-- Alpine JS -->
<script defer src="js/alpine.min.js"></script>
Expand Down Expand Up @@ -2617,14 +2623,14 @@ <h5 class="text-secondary mt-4 mb-4 me-auto">
selected_crown: 1, // If -1, select all crowns
strengthening_of_timbers_by_crowns: [],
strengthening_of_timbers_bitwise_flag: 0,
num_points_of_selected_crown: 4,
crown_of_framework_timbers_is_valid: true,

is_computing: true,
suggested_height_ratio: null, // Value to magnetize the zome to the nearest cut
colors: [],
i18n_dictionary: {},


// Debouncers
__make_zome: null,

Expand Down Expand Up @@ -2693,7 +2699,7 @@ <h5 class="text-secondary mt-4 mb-4 me-auto">
});

// Selected crown listener
_.forEach(["num_crowns", "params.strengthening_of_timbers_by_crowns_str"], key => {
_.forEach(["num_crowns", "params.height_ratio", "params.strengthening_of_timbers_by_crowns_str"], key => {
this.$watch(key, (value) => {
this.init_strengthening_of_timbers();
this.update_strengthening_of_timbers();
Expand Down Expand Up @@ -2772,6 +2778,7 @@ <h5 class="text-secondary mt-4 mb-4 me-auto">
const bitwise_flags = str_to_numbers(this.params.strengthening_of_timbers_by_crowns_str);
this.strengthening_of_timbers_by_crowns = bitwise_flags_to_boolean_matrix(bitwise_flags);
this.strengthening_of_timbers_bitwise_flag = bitwise_flags[this.selected_crown - 1] || 0;
this.num_points_of_selected_crown = ZOME.num_points_per_crown[this.selected_crown - 1] || 4;
},

init_strengthening_of_timbers() {
Expand Down Expand Up @@ -3220,8 +3227,11 @@ <h5 class="text-secondary mt-4 mb-4 me-auto">
// Loop over the faces of the framework to build timbers
// Divide zome faces and build framework timbers
const strengthening_of_timbers_bitwise_flags = str_to_numbers(this.params.strengthening_of_timbers_by_crowns_str);
for (let crown_index = 0; crown_index < zome_faces_3D.length; crown_index++) {
const num_points_per_crown = new Array(num_crowns);
for (let crown_index = 0; crown_index < num_crowns; crown_index++) {
const face = zome_faces_3D[crown_index];
num_points_per_crown[crown_index] = face.num_points;

face.compute_framework(
strengthening_of_timbers_bitwise_flags[crown_index] || 0,
ASSEMBLY_METHOD,
Expand Down Expand Up @@ -3418,15 +3428,13 @@ <h5 class="text-secondary mt-4 mb-4 me-auto">
);
});

// Reset selected crown index
this.num_crowns = num_crowns;

// Save Zome and dispatch it
ZOME = new Zome({
num_spirals: N,
num_crowns: num_crowns,
assembly_method: ASSEMBLY_METHOD,
num_points_per_crown: num_points_per_crown,

assembly_method: ASSEMBLY_METHOD,
rotation_angles: rotation_angles,
rotated_colors: rotated_colors,

Expand All @@ -3449,6 +3457,10 @@ <h5 class="text-secondary mt-4 mb-4 me-auto">
vanishing_lines: vanishing_lines,
});

// Reset selected crown index
this.num_crowns = num_crowns;
this.update_strengthening_of_timbers();

// Dispatch zome
this.$dispatch('zome-is-made');

Expand Down
107 changes: 62 additions & 45 deletions js/core.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
// ------------------------------------
// ========== Constants ==========
// ------------------------------------
const DEBUG = true;
const DEBUG = false;

const TAU = 2 * Math.PI; // 360° in rad
const TAU_Q = Math.PI / 2; // 90° in rad
Expand Down Expand Up @@ -167,11 +167,11 @@ function swap_axes(points, axes_order = "XYZ") {
const axis_indexes = new Array(3);
for (let i = 0; i < 3; i++) {
const axis_char = axes_order[i];
const axis_index = axis_char == "X"
const axis_index = axis_char === "X"
? 0
: axis_char == "Y"
: axis_char === "Y"
? 1
: axis_char == "Z"
: axis_char === "Z"
? 2
: -1;

Expand Down Expand Up @@ -557,7 +557,7 @@ function bitwise_flag_to_boolean_array(bitwise_flag) {
const boolean_arr = [];
for (let j = 0; bitwise_flag > 0; j++) {
const pow_2 = Math.pow(2, j);
const is_checked = (bitwise_flag & pow_2) == pow_2;
const is_checked = (bitwise_flag & pow_2) === pow_2;
boolean_arr.push(is_checked);
if (is_checked) {
bitwise_flag -= pow_2;
Expand Down Expand Up @@ -1193,8 +1193,7 @@ class Base3DGeometry {
}

clone() {
const cloned_obj = _.clone(this);
return cloned_obj;
return _.clone(this);
}

compute_boundaries() {
Expand Down Expand Up @@ -1633,11 +1632,60 @@ class Polygon3D extends Base3DGeometry {
// Split polygon in multiple polygons
// depends on the bitwise flag (based on FRAMEWORK_CUSTOMIZER_SVG_IDS)

// Check polygon point number
if (this.num_points < 3 || this.num_points > 5) {
console.error("Split function is only implemented for polygons with 3,4 or 5 points");
}

// if 0 or not a rhombus return [this]
if (this.num_points != 4 || strengthening_of_timbers_bitwise_flag === 0) {
if (strengthening_of_timbers_bitwise_flag === 0
|| (
this.num_points != 4
&& ![SVG_HORIZONTAL_BAR_BITWISE_FLAG, SVG_VERTICAL_BAR_BITWISE_FLAG].includes(strengthening_of_timbers_bitwise_flag)
)
) {
return [this];
}

// Use basic method, old school
let midpoint;
if (strengthening_of_timbers_bitwise_flag === SVG_HORIZONTAL_BAR_BITWISE_FLAG)
switch (this.num_points) {
case 3:
return [this];
case 4:
return [
Polygon3D.copy(this, [this.points[0], this.points[1], this.points[3]]),
Polygon3D.copy(this, [this.points[1], this.points[2], this.points[3]])
];
case 5:
return [
Polygon3D.copy(this, [this.points[0], this.points[1], this.points[4]]),
Polygon3D.copy(this, [this.points[1], this.points[2], this.points[3], this.points[4]])
];
}
else if (strengthening_of_timbers_bitwise_flag === SVG_VERTICAL_BAR_BITWISE_FLAG) {
switch (this.num_points) {
case 3:
midpoint = get_midpoint(this.points[1], this.points[2]);
return [
Polygon3D.copy(this, [this.points[0], this.points[1], midpoint]),
Polygon3D.copy(this, [midpoint, this.points[2], this.points[0]]),
];
case 4:
return [
Polygon3D.copy(this, [this.points[0], this.points[1], this.points[2]]),
Polygon3D.copy(this, [this.points[2], this.points[3], this.points[0]]),
];
case 5:
midpoint = get_midpoint(this.points[2], this.points[3]);
return [
Polygon3D.copy(this, [this.points[0], this.points[1], this.points[2], midpoint]),
Polygon3D.copy(this, [midpoint, this.points[3], this.points[4], this.points[0]]),
];
}
}

// Create a graph like this one to find sub polygons
// With a counterclockwise spiral pattern
//
Expand Down Expand Up @@ -1776,11 +1824,10 @@ class Polygon3D extends Base3DGeometry {
for (let i = 0; i < num_nodes; i++) {
// Take the first neighbor and remove it from the list
const start_node = ALPHABET[i];
const end_node = start_node;
for (let j = 0; j < graph[start_node].neighbors.length; j++) {
const neighbor = graph[start_node].neighbors.shift();
const explored_path = [start_node];
const exploration_worked = explore_smallest_convex_path(explored_path, start_node, neighbor, end_node)
const exploration_worked = explore_smallest_convex_path(explored_path, start_node, neighbor, start_node)
if (neighbor && exploration_worked) {
paths.push(explored_path);
}
Expand Down Expand Up @@ -1808,40 +1855,6 @@ class Polygon3D extends Base3DGeometry {
}
return parts;
}

divide(horizontally = true) {
// Divide polygon into two parts horizontally or vertically
if (this.num_points < 3 || this.num_points > 5) {
console.error("Divide function is only implemented for polygons with 3,4 or 5 points");
}

let parts = []
switch (this.num_points) {
case 3:
parts.push(Polygon3D.copy(this));
break;
case 4:
if (horizontally) {
parts.push(Polygon3D.copy(this, [this.points[0], this.points[1], this.points[3]]));
parts.push(Polygon3D.copy(this, [this.points[1], this.points[2], this.points[3]]));
} else {
parts.push(Polygon3D.copy(this, [this.points[0], this.points[1], this.points[2]]));
parts.push(Polygon3D.copy(this, [this.points[2], this.points[3], this.points[0]]));
}
break;
case 5:
if (horizontally) {
parts.push(Polygon3D.copy(this, [this.points[0], this.points[1], this.points[4]]));
parts.push(Polygon3D.copy(this, [this.points[1], this.points[2], this.points[3], this.points[4]]));
} else {
const midpoint = get_midpoint(this.points[2], this.points[3]);
parts.push(Polygon3D.copy(this, [this.points[0], this.points[1], this.points[2], midpoint]));
parts.push(Polygon3D.copy(this, [midpoint, this.points[3], this.points[4], this.points[0]]));
}
break;
}
return parts;
}
}

class TrapezoidalPrism extends Base3DGeometry {
Expand Down Expand Up @@ -1902,7 +1915,8 @@ class TrapezoidalPrism extends Base3DGeometry {

compute_mesh_points() {
// Compute triangle and edges points of all polygons for 3D visualization
this._mesh_points = [], this._edge_points = [];
this._mesh_points = [];
this._edge_points = [];
for (let i = 0; i < this.children.length; i++) {
const item = this.children[i];
this._mesh_points.push(...item.mesh_points);
Expand Down Expand Up @@ -2063,6 +2077,8 @@ class Zome {
{
num_spirals = null,
num_crowns = null,
num_points_per_crown= null,

assembly_method = null,
rotation_angles = null,
rotated_colors = null,
Expand All @@ -2088,6 +2104,7 @@ class Zome {
) {
this.num_spirals = num_spirals || 0;
this.num_crowns = num_crowns || 0;
this.num_points_per_crown = num_points_per_crown || [];
this.assembly_method = assembly_method || 0;
this.rotation_angles = rotation_angles || [];
this.rotated_colors = rotated_colors || [];
Expand Down
Binary file added ressources/gif z5omes/z5omes v1.0.10 demo.gif
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
0 ressources/gif z5omes/v1.0.9b04.gif → ...rces/gif z5omes/z5omes v1.0.9b04 demo.gif
View file
File renamed without changes

0 comments on commit 040e994

Please sign in to comment.