kopia lustrzana https://github.com/villares/sketch-a-day
Alexandre B A Villares
rodzic
6dc1289e91
commit
a7360a16eb
|
|
@ -14,6 +14,7 @@
|
|||
|
||||
367: [code](https://github.com/villares/sketch-a-day/tree/master/2018/s367) [[Py.Processing](https://villares.github.io/como-instalar-o-processing-modo-python/index-EN)]
|
||||
|
||||
|
||||
---
|
||||
|
||||
### s366
|
||||
|
|
|
|||
|
|
@ -3234,6 +3234,7 @@ Made this today, thinking about my new newsletter: [[sketch-mail](https://tinyle
|
|||
|
||||
[<b>2025</b>](README.md) \| [<b>2024</b>](2024.md) \| [<b>2023</b>](2023.md) \| [<b>2022</b>](2022.md) \| [<b>2021</b>](2021.md) \| [<b>2020</b>](2020.md) \| 2019 \| [<b>2018</b>](2018.md)
|
||||
|
||||
|
||||
---
|
||||
|
||||
<p xmlns:cc="http://creativecommons.org/ns#" xmlns:dct="http://purl.org/dc/terms/">The <a property="dct:title" rel="cc:attributionURL" href="https://abav.lugaralgum.com/sketch-a-day">sketch-a-day</a> project, images and code repository, by <a rel="cc:attributionURL dct:creator" property="cc:attributionName" href="https://abav.lugaralgum.com">Alexandre B A Villares</a> are licensed under <a href="http://creativecommons.org/licenses/by-nc-nd/4.0/?ref=chooser-v1" target="_blank" rel="license noopener noreferrer" style="display:inline-block;">Attribution-NonCommercial-NoDerivatives 4.0 International <img style="height:22px!important;margin-left:3px;vertical-align:text-bottom;" src="https://github.com/villares/sketch-a-day/assets/3694604/061f1e34-5559-4468-b476-e9cdf3fcc2ed"><img style="height:22px!important;margin-left:3px;vertical-align:text-bottom;" src="https://github.com/villares/sketch-a-day/assets/3694604/8515025d-fa94-4fa4-8531-41238ba125ad"><img style="height:22px!important;margin-left:3px;vertical-align:text-bottom;" src="https://github.com/villares/sketch-a-day/assets/3694604/2917f4d1-28d7-472b-927a-d7c6cb6c9f86"><img style="height:22px!important;margin-left:3px;vertical-align:text-bottom;" src="https://github.com/villares/sketch-a-day/assets/3694604/544bcc6a-ddb2-44c7-99a6-46b6997ca8c0"></a>, except if marked/attributed otherwise in a file or code section. Please contact for licensing questions.</p>
|
||||
|
|
|
|||
|
|
@ -3347,6 +3347,7 @@ Maybe this will be a game! Arrow hunter?
|
|||
|
||||
[<b>2025</b>](README.md) \| [<b>2024</b>](2024.md) \| [<b>2023</b>](2023.md) \| [<b>2022</b>](2022.md) \| [<b>2021</b>](2021.md) \| 2020 \| [<b>2019</b>](2019.md) \| [<b>2018</b>](2018.md)
|
||||
|
||||
|
||||
---
|
||||
|
||||
<p xmlns:cc="http://creativecommons.org/ns#" xmlns:dct="http://purl.org/dc/terms/">The <a property="dct:title" rel="cc:attributionURL" href="https://abav.lugaralgum.com/sketch-a-day">sketch-a-day</a> project, images and code repository, by <a rel="cc:attributionURL dct:creator" property="cc:attributionName" href="https://abav.lugaralgum.com">Alexandre B A Villares</a> are licensed under <a href="http://creativecommons.org/licenses/by-nc-nd/4.0/?ref=chooser-v1" target="_blank" rel="license noopener noreferrer" style="display:inline-block;">Attribution-NonCommercial-NoDerivatives 4.0 International <img style="height:22px!important;margin-left:3px;vertical-align:text-bottom;" src="https://github.com/villares/sketch-a-day/assets/3694604/061f1e34-5559-4468-b476-e9cdf3fcc2ed"><img style="height:22px!important;margin-left:3px;vertical-align:text-bottom;" src="https://github.com/villares/sketch-a-day/assets/3694604/8515025d-fa94-4fa4-8531-41238ba125ad"><img style="height:22px!important;margin-left:3px;vertical-align:text-bottom;" src="https://github.com/villares/sketch-a-day/assets/3694604/2917f4d1-28d7-472b-927a-d7c6cb6c9f86"><img style="height:22px!important;margin-left:3px;vertical-align:text-bottom;" src="https://github.com/villares/sketch-a-day/assets/3694604/544bcc6a-ddb2-44c7-99a6-46b6997ca8c0"></a>, except if marked/attributed otherwise in a file or code section. Please contact for licensing questions.</p>
|
||||
|
|
|
|||
|
|
@ -3026,6 +3026,7 @@ sketch_2021_02_14
|
|||
|
||||
[<b>2025</b>](README.md) \| [<b>2024</b>](2024.md) \| [<b>2023</b>](2023.md) \| [<b>2022</b>](2022.md) \| 2021 \| [<b>2020</b>](2020.md) \| [<b>2019</b>](2019.md) \| [<b>2018</b>](2018.md)
|
||||
|
||||
|
||||
---
|
||||
|
||||
<p xmlns:cc="http://creativecommons.org/ns#" xmlns:dct="http://purl.org/dc/terms/">The <a property="dct:title" rel="cc:attributionURL" href="https://abav.lugaralgum.com/sketch-a-day">sketch-a-day</a> project, images and code repository, by <a rel="cc:attributionURL dct:creator" property="cc:attributionName" href="https://abav.lugaralgum.com">Alexandre B A Villares</a> are licensed under <a href="http://creativecommons.org/licenses/by-nc-nd/4.0/?ref=chooser-v1" target="_blank" rel="license noopener noreferrer" style="display:inline-block;">Attribution-NonCommercial-NoDerivatives 4.0 International <img style="height:22px!important;margin-left:3px;vertical-align:text-bottom;" src="https://github.com/villares/sketch-a-day/assets/3694604/061f1e34-5559-4468-b476-e9cdf3fcc2ed"><img style="height:22px!important;margin-left:3px;vertical-align:text-bottom;" src="https://github.com/villares/sketch-a-day/assets/3694604/8515025d-fa94-4fa4-8531-41238ba125ad"><img style="height:22px!important;margin-left:3px;vertical-align:text-bottom;" src="https://github.com/villares/sketch-a-day/assets/3694604/2917f4d1-28d7-472b-927a-d7c6cb6c9f86"><img style="height:22px!important;margin-left:3px;vertical-align:text-bottom;" src="https://github.com/villares/sketch-a-day/assets/3694604/544bcc6a-ddb2-44c7-99a6-46b6997ca8c0"></a>, except if marked/attributed otherwise in a file or code section. Please contact for licensing questions.</p>
|
||||
|
|
|
|||
|
|
@ -15,6 +15,7 @@
|
|||
[sketch_2022_12_31](https://github.com/villares/sketch-a-day/tree/main/2022/sketch_2022_12_31) [[pyp5js](https://berinhard.github.io/pyp5js/)]
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### sketch_2022_12_30
|
||||
|
|
@ -23,6 +24,8 @@
|
|||
|
||||
[sketch_2022_12_30](https://github.com/villares/sketch-a-day/tree/main/2022/sketch_2022_12_30) [[py5](https://py5coding.org/)]
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### sketch_2022_12_29
|
||||
|
|
@ -31,6 +34,8 @@
|
|||
|
||||
[sketch_2022_12_29](https://github.com/villares/sketch-a-day/tree/main/2022/sketch_2022_12_29) [[py5](https://py5coding.org/)]
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### sketch_2022_12_28
|
||||
|
|
|
|||
|
|
@ -14,6 +14,8 @@
|
|||
|
||||
[sketch_2023_12_31](https://github.com/villares/sketch-a-day/tree/main/2023/sketch_2023_12_31) [[py5](https://py5coding.org/)]
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### sketch_2023_12_30
|
||||
|
|
|
|||
|
|
@ -12,6 +12,7 @@
|
|||
|
||||
[<b>2025</b>](README.md) \| 2024 \| [<b>2023</b>](2023.md) \| [<b>2022</b>](2022.md) \| [<b>2021</b>](2021.md) \| [<b>2020</b>](2020.md) \| [<b>2019</b>](2019.md) \| [<b>2018</b>](2018.md)
|
||||
|
||||
|
||||
---
|
||||
|
||||
### sketch_2024_12_31
|
||||
|
|
|
|||
|
|
@ -159,6 +159,8 @@ Broken! Maybe something in pymunk changed, I have to investigate!
|
|||
|
||||
[sketch_2025_04_29](https://github.com/villares/sketch-a-day/tree/main/2025/sketch_2025_04_29) [[py5](https://py5coding.org/)]
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### sketch_2025_04_28
|
||||
|
|
|
|||
|
|
@ -123,198 +123,183 @@
|
|||
</div>
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// Get DOM elements
|
||||
const yearsHr = document.querySelector('hr.years');
|
||||
const contentDiv = document.querySelector('.content');
|
||||
const controlsDiv = document.querySelector('.layout-controls');
|
||||
const toggleButton = document.getElementById('toggleLayout');
|
||||
const gridControls = document.getElementById('gridControls');
|
||||
const columnWidthInput = document.getElementById('columnWidth');
|
||||
|
||||
// Show the controls and insert after years HR
|
||||
if (yearsHr && controlsDiv) {
|
||||
controlsDiv.style.display = 'flex';
|
||||
// Insert controls after the years HR
|
||||
yearsHr.parentNode.insertBefore(controlsDiv, yearsHr.nextSibling);
|
||||
}
|
||||
|
||||
// Initialize
|
||||
let isGridLayout = false;
|
||||
let gridContainer = null;
|
||||
let originalStructure = null;
|
||||
|
||||
// Find the second HR (which marks the start of sketches)
|
||||
function findStartOfSketches() {
|
||||
const allHrs = contentDiv.querySelectorAll('hr');
|
||||
// Return the element after the second HR
|
||||
return allHrs.length >= 2 ? allHrs[1].nextElementSibling : null;
|
||||
}
|
||||
|
||||
// Find all sketch sections in the content
|
||||
function findSketchSections() {
|
||||
// Start from the element after the second HR
|
||||
let startElement = findStartOfSketches();
|
||||
if (!startElement) return [];
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// Get DOM elements
|
||||
const yearsHr = document.querySelector('hr.years');
|
||||
const contentDiv = document.querySelector('.content');
|
||||
const controlsDiv = document.querySelector('.layout-controls');
|
||||
const toggleButton = document.getElementById('toggleLayout');
|
||||
const gridControls = document.getElementById('gridControls');
|
||||
const columnWidthInput = document.getElementById('columnWidth');
|
||||
|
||||
// Initialize an array to store all sketch item groups
|
||||
const sketchSections = [];
|
||||
let currentSection = null;
|
||||
// Show the controls and insert after years HR
|
||||
if (yearsHr && controlsDiv) {
|
||||
controlsDiv.style.display = 'flex';
|
||||
// Insert controls after the years HR
|
||||
yearsHr.parentNode.insertBefore(controlsDiv, yearsHr.nextSibling);
|
||||
}
|
||||
|
||||
// Process all elements starting from the beginning of sketches
|
||||
let currentElement = startElement;
|
||||
// Initialize
|
||||
let isGridLayout = false;
|
||||
let sketchItems = [];
|
||||
let gridContainer = null;
|
||||
|
||||
while (currentElement) {
|
||||
// If it's an H3, start a new section
|
||||
if (currentElement.tagName === 'H3') {
|
||||
// If there's an existing section, finalize it
|
||||
if (currentSection) {
|
||||
sketchSections.push(currentSection);
|
||||
// Find the second HR (which marks the start of sketches)
|
||||
function findStartOfSketches() {
|
||||
const allHrs = contentDiv.querySelectorAll('hr');
|
||||
// Return the element after the second HR
|
||||
return allHrs.length >= 2 ? allHrs[1].nextElementSibling : null;
|
||||
}
|
||||
|
||||
// Find all sketch sections in the content
|
||||
function findSketchSections() {
|
||||
// Start from the element after the second HR
|
||||
let startElement = findStartOfSketches();
|
||||
if (!startElement) return [];
|
||||
|
||||
// Initialize an array to store all sketch item groups
|
||||
const sketchSections = [];
|
||||
let currentSection = null;
|
||||
|
||||
// Process all elements starting from the beginning of sketches
|
||||
let currentElement = startElement;
|
||||
|
||||
while (currentElement) {
|
||||
// If it's an H3, start a new section
|
||||
if (currentElement.tagName === 'H3') {
|
||||
// If there's an existing section, finalize it
|
||||
if (currentSection) {
|
||||
sketchSections.push(currentSection);
|
||||
}
|
||||
|
||||
// Start a new section
|
||||
currentSection = {
|
||||
title: currentElement,
|
||||
elements: [currentElement]
|
||||
};
|
||||
}
|
||||
// Otherwise, add to current section if there is one
|
||||
else if (currentSection) {
|
||||
currentSection.elements.push(currentElement);
|
||||
|
||||
// Stop collecting at the final HR followed by year navigation
|
||||
if (currentElement.tagName === 'HR' &&
|
||||
currentElement.nextElementSibling &&
|
||||
currentElement.nextElementSibling.tagName === 'P' &&
|
||||
currentElement.nextElementSibling.textContent.includes('2025 |')) {
|
||||
sketchSections.push(currentSection);
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
// Start a new section
|
||||
currentSection = {
|
||||
title: currentElement,
|
||||
elements: [currentElement]
|
||||
};
|
||||
}
|
||||
// Otherwise, add to current section if there is one
|
||||
else if (currentSection) {
|
||||
currentSection.elements.push(currentElement);
|
||||
|
||||
// Stop collecting at the final HR followed by year navigation
|
||||
if (currentElement.tagName === 'HR' &&
|
||||
currentElement.nextElementSibling &&
|
||||
currentElement.nextElementSibling.tagName === 'P' &&
|
||||
currentElement.nextElementSibling.textContent.includes('2025 |')) {
|
||||
sketchSections.push(currentSection);
|
||||
break;
|
||||
currentElement = currentElement.nextElementSibling;
|
||||
}
|
||||
|
||||
// Add the last section if it exists and wasn't added yet
|
||||
if (currentSection && !sketchSections.includes(currentSection)) {
|
||||
sketchSections.push(currentSection);
|
||||
}
|
||||
|
||||
return sketchSections;
|
||||
}
|
||||
|
||||
// Apply grid layout
|
||||
function applyGridLayout() {
|
||||
// Create grid container if it doesn't exist
|
||||
if (!gridContainer) {
|
||||
gridContainer = document.createElement('div');
|
||||
gridContainer.className = 'multi-column-grid-container';
|
||||
const startElement = findStartOfSketches();
|
||||
if (startElement) {
|
||||
startElement.parentNode.insertBefore(gridContainer, startElement);
|
||||
}
|
||||
}
|
||||
|
||||
currentElement = currentElement.nextElementSibling;
|
||||
}
|
||||
|
||||
// Add the last section if it exists and wasn't added yet
|
||||
if (currentSection && !sketchSections.includes(currentSection)) {
|
||||
sketchSections.push(currentSection);
|
||||
}
|
||||
|
||||
return sketchSections;
|
||||
}
|
||||
|
||||
// Store original structure before applying grid
|
||||
function storeOriginalStructure() {
|
||||
// Find and store all sketch sections
|
||||
const sketchSections = findSketchSections();
|
||||
originalStructure = sketchSections.map(section => {
|
||||
return {
|
||||
elements: section.elements.map(el => el.cloneNode(true))
|
||||
};
|
||||
});
|
||||
|
||||
// Store the insertion point as well
|
||||
originalStructure.insertPoint = findStartOfSketches();
|
||||
}
|
||||
|
||||
// Apply grid layout
|
||||
function applyGridLayout() {
|
||||
// Store the original structure first
|
||||
if (!originalStructure) {
|
||||
storeOriginalStructure();
|
||||
}
|
||||
|
||||
// Create grid container
|
||||
gridContainer = document.createElement('div');
|
||||
gridContainer.className = 'multi-column-grid-container';
|
||||
|
||||
// Find where to insert it (after the second HR)
|
||||
const insertPoint = findStartOfSketches();
|
||||
if (!insertPoint) return;
|
||||
|
||||
// Find all sketch sections
|
||||
const sketchSections = findSketchSections();
|
||||
|
||||
// Create sketch items and move elements
|
||||
sketchSections.forEach((section, index) => {
|
||||
// Create sketch item container
|
||||
const sketchItem = document.createElement('div');
|
||||
sketchItem.className = 'sketch-item';
|
||||
sketchItem.id = `sketch-item-${index}`;
|
||||
// Set column width based on input
|
||||
gridContainer.style.gridTemplateColumns = `repeat(auto-fill, minmax(${columnWidthInput.value}px, 1fr))`;
|
||||
|
||||
// Move all elements to the sketch item
|
||||
section.elements.forEach(element => {
|
||||
sketchItem.appendChild(element);
|
||||
// Find all sketch sections
|
||||
const sketchSections = findSketchSections();
|
||||
|
||||
// Create sketch items and move elements
|
||||
sketchSections.forEach((section, index) => {
|
||||
// Create sketch item container
|
||||
const sketchItem = document.createElement('div');
|
||||
sketchItem.className = 'sketch-item';
|
||||
sketchItem.id = `sketch-item-${index}`;
|
||||
|
||||
// Move all elements to the sketch item
|
||||
section.elements.forEach(element => {
|
||||
// Store original position
|
||||
if (!element.dataset.originalPosition) {
|
||||
const parent = element.parentNode;
|
||||
const nextSibling = element.nextSibling;
|
||||
element.dataset.originalParent = Array.from(document.querySelectorAll('*')).indexOf(parent);
|
||||
element.dataset.originalNextSibling = nextSibling ? Array.from(document.querySelectorAll('*')).indexOf(nextSibling) : 'none';
|
||||
}
|
||||
|
||||
// Move to grid item
|
||||
sketchItem.appendChild(element);
|
||||
});
|
||||
|
||||
// Add sketch item to grid container
|
||||
gridContainer.appendChild(sketchItem);
|
||||
});
|
||||
|
||||
// Add sketch item to grid container
|
||||
gridContainer.appendChild(sketchItem);
|
||||
});
|
||||
// Show the grid container
|
||||
gridContainer.style.display = 'grid';
|
||||
}
|
||||
|
||||
// Insert the grid container
|
||||
insertPoint.parentNode.insertBefore(gridContainer, insertPoint);
|
||||
|
||||
// Set column width and show the container
|
||||
gridContainer.style.gridTemplateColumns = `repeat(auto-fill, minmax(${columnWidthInput.value}px, 1fr))`;
|
||||
gridContainer.style.display = 'grid';
|
||||
}
|
||||
|
||||
// Remove grid layout and restore original structure
|
||||
function removeGridLayout() {
|
||||
if (!gridContainer || !originalStructure) return;
|
||||
|
||||
// Remove the grid container
|
||||
gridContainer.remove();
|
||||
gridContainer = null;
|
||||
|
||||
// Find the insertion point
|
||||
const insertPoint = findStartOfSketches();
|
||||
if (!insertPoint || !insertPoint.parentNode) return;
|
||||
|
||||
// Re-insert all elements in their original order
|
||||
const parent = insertPoint.parentNode;
|
||||
let currentInsertPoint = insertPoint;
|
||||
|
||||
originalStructure.forEach(section => {
|
||||
section.elements.forEach(element => {
|
||||
// Clone the stored element to avoid reference issues
|
||||
const newElement = element.cloneNode(true);
|
||||
parent.insertBefore(newElement, currentInsertPoint);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// Toggle between layouts
|
||||
toggleButton.addEventListener('click', function() {
|
||||
isGridLayout = !isGridLayout;
|
||||
|
||||
if (isGridLayout) {
|
||||
applyGridLayout();
|
||||
gridControls.style.display = 'inline-flex';
|
||||
toggleButton.textContent = 'Single Column';
|
||||
} else {
|
||||
removeGridLayout();
|
||||
gridControls.style.display = 'none';
|
||||
toggleButton.textContent = 'Grid Layout';
|
||||
// Remove grid layout and restore original structure
|
||||
function removeGridLayout() {
|
||||
if (!gridContainer) return;
|
||||
|
||||
// Force page reload to restore the original structure
|
||||
// This is a simpler way to guarantee the layout is properly restored
|
||||
location.reload();
|
||||
// Get all elements in grid container
|
||||
const elements = Array.from(gridContainer.querySelectorAll('*[data-original-position]'));
|
||||
|
||||
// Restore each element to its original position
|
||||
elements.forEach(element => {
|
||||
const parent = document.querySelectorAll('*')[parseInt(element.dataset.originalParent)];
|
||||
const nextSiblingIndex = element.dataset.originalNextSibling;
|
||||
const nextSibling = nextSiblingIndex !== 'none' ? document.querySelectorAll('*')[parseInt(nextSiblingIndex)] : null;
|
||||
|
||||
if (parent) {
|
||||
parent.insertBefore(element, nextSibling || null);
|
||||
}
|
||||
});
|
||||
|
||||
// Remove the grid container
|
||||
gridContainer.parentNode.removeChild(gridContainer);
|
||||
gridContainer = null;
|
||||
}
|
||||
|
||||
// Toggle between layouts
|
||||
toggleButton.addEventListener('click', function() {
|
||||
isGridLayout = !isGridLayout;
|
||||
|
||||
if (isGridLayout) {
|
||||
applyGridLayout();
|
||||
gridControls.style.display = 'inline-flex';
|
||||
toggleButton.textContent = 'Single Column';
|
||||
} else {
|
||||
removeGridLayout();
|
||||
gridControls.style.display = 'none';
|
||||
toggleButton.textContent = 'Grid Layout';
|
||||
}
|
||||
});
|
||||
|
||||
// Update grid layout when column width changes
|
||||
columnWidthInput.addEventListener('input', function() {
|
||||
if (isGridLayout && gridContainer) {
|
||||
gridContainer.style.gridTemplateColumns = `repeat(auto-fill, minmax(${this.value}px, 1fr))`;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Update grid layout when column width changes
|
||||
columnWidthInput.addEventListener('input', function() {
|
||||
if (isGridLayout && gridContainer) {
|
||||
gridContainer.style.gridTemplateColumns = `repeat(auto-fill, minmax(${this.value}px, 1fr))`;
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<!-- outros scripts gerais abav.lugaralgum.com -->
|
||||
<script src="../assets/scripts.js"></script>
|
||||
<!-- script src="../assets/scripts.js"></script -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
Ładowanie…
Reference in New Issue