From 6f4e3f368939b8e40a135bb64422106629ce107d Mon Sep 17 00:00:00 2001 From: Naveduran Date: Fri, 25 Oct 2024 14:23:40 -0500 Subject: [PATCH] Allow to add an angle for each layer --- constants.js | 68 ++++++----- sketch.js | 320 --------------------------------------------------- 2 files changed, 41 insertions(+), 347 deletions(-) delete mode 100644 sketch.js diff --git a/constants.js b/constants.js index 5f3f1e9..13beb0f 100644 --- a/constants.js +++ b/constants.js @@ -36,6 +36,7 @@ const initialConfig = { strokeWidth: 1, angle: 0 }, + { name:'Circle 1', strokeWidth: 0, @@ -182,11 +183,24 @@ const initialConfig = { ] } +// The default layer when a new layer adding is required +const oneLayer = { + name:'Three gray circles', + strokeColor: null, + fillColor: 'hsla(0, 6%, 48%, 0.48)', + figureName: 'circle', + total: 3, + radius: 30, + distance: 90, + visibility: 0, + angle: 0 +} + // Contains the figures name with its correspondent function const figures = { - 'line': function lines(layer){ + 'line': function liness(layer){ for (line=0; line < layer.total; line++){ - let angle = (360 /layer.total)*line; + let angle = (360 /layer.total) * line + layer.angle; try { polarLine(angle, layer.radius, layer.distance); } catch (error) { @@ -194,36 +208,36 @@ const figures = { } } }, - 'circle': function circles(layer){ - try { - polarEllipses(layer.total, layer.radius, layer.radius, layer.distance); - } catch (error) { - console.error(error); + 'circle': function circless(layer){ + for (circle=0; circle < layer.total; circle++){ + let angle = (360 /layer.total) * circle + layer.angle; + try { + polarEllipse(angle, layer.radius, layer.radius, layer.distance) + } catch (error) { + console.error(error); + } } + }, - 'triangle': function triangle(layer){ - try { - polarTriangles(layer.total, layer.radius, layer.distance); - } catch (error) { - console.error(error); + 'triangle': function triangless(layer){ + for (circle=0; circle < layer.total; circle++){ + let angle = (360 /layer.total) * circle + layer.angle; + try { + polarTriangle(angle, layer.radius, layer.distance) + } catch (error) { + console.error(error); + } } }, - 'square': function square(layer){ - try { - polarPolygons(layer.total, 4, layer.radius, layer.distance) - } catch (error) { - console.error(error); + 'square': function squaress(layer){ + for (circle=0; circle < layer.total; circle++){ + let angle = (360 /layer.total) * circle + layer.angle; + try { + polarPolygon(4, angle, layer.radius, layer.distance) + } catch (error) { + console.error(error); + } } } } -const oneLayer = { - name:'Lines', - strokeColor: null, - fillColor: 'hsla(0, 6%, 48%, 0.48)', - figureName: 'circle', - total: 3, - radius: 30, - distance: 90, - visibility: 0 -} diff --git a/sketch.js b/sketch.js deleted file mode 100644 index 2eefc6b..0000000 --- a/sketch.js +++ /dev/null @@ -1,320 +0,0 @@ -// This functions allows to create mandalas and play with them easily based on a configuration. It uses p5 and p5.polar libraries to do it. - -let history = [initialConfig]; -let currentIndex = 0; -let backgroundInput; -let languageInput; - -// Resize the canvas when the browser's size changes. -function windowResized() { - if (windowHeight > windowWidth){ // phone - resizeCanvas(windowWidth - 18, windowWidth - 18); - } else { // desktop - resizeCanvas(windowHeight - 18, windowHeight - 18); - } -} - -// Use the rgb values of the color picker to set the mandala background -function updateCanvasColor(e) { - let newConfig = structuredClone(history[currentIndex]); - - backgroundInput.value = e.target.value; - newConfig.background = e.target.value; - saveOnHistory(newConfig); -} - -// Runs once, Creates the space to draw -function setup() { - //Set mandala canvas - let canva = document.getElementById('myCanvas'); - createCanvas(width, width, P2D, canva); - windowResized(); - frameRate(1); - - // Allow changing the background color of the canvas - backgroundInput = document.querySelector("#backgroundColorInput"); - backgroundInput.addEventListener("input", updateCanvasColor, false); - backgroundInput.value = history[currentIndex].background; - - // Allow change page language - languageInput = document.querySelector("#pageLanguage"); - languageInput.addEventListener("change", updateLanguage, false); - - // Set dark background if the user theme is dark - if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) { - backgroundColor = "#000000"; - } - setupHtmlLayers(); -} - -// Iterates trough configuration to draw each layer of the mandala -function draw() { - background(history[currentIndex].background); - setCenter(width/2, height/2); - history[currentIndex].layers.forEach((layerConfig) => { - if (layerConfig.visibility) { - drawMandalaLayer(layerConfig); - } - }) - backgroundInput.value = history[currentIndex].background; -} - -function setupHtmlLayers() { - let layersHtml = document.getElementById("layers"); - let layersConfig = history[currentIndex].layers; - let totalLayers = layersConfig.length; - - for (let index = 0; index < totalLayers; index++) { - layersHtml.appendChild( - drawHtmlLayer(layersConfig[index], index, totalLayers)); - } -} - -function drawHtmlLayer(layerConfig, layerId, totalLayers){ - const preferredLanguage = localStorage.getItem('language') || 'en'; - let upButtonHtml = ` - ` - let downButtonHtml = ` - ` - - let visibilityButtonOn = `` - - let visibilityButtonOff = `` - - let fillColorInput = `` - - let layerStructure = ` -
- ${layerId > 0 ? upButtonHtml : ''} - ${layerId < totalLayers -1 ? downButtonHtml : ''} - ${layerConfig.visibility ? visibilityButtonOn : visibilityButtonOff} - -
-
-
- - - - ${layerConfig.figureName !== 'line' ? fillColorInput : ''} -
-
- - -

- -
-
- - - -
-
- - - -
- -
` - - let newLayer = document.createElement('div'); - newLayer.setAttribute("class", "layer"); - newLayer.setAttribute("id", layerId); - newLayer.innerHTML = layerStructure; - return newLayer; -} - -// Use the received layer configuration to draw the described figures with its respective border and fill color -function drawMandalaLayer(layer){ - strokeWeight(layer.strokeWidth * 2) - if (layer.strokeColor){ - stroke(layer.strokeColor); - } else { - noStroke(); - } - - if (layer.fillColor){ - fill(layer.fillColor); - } else { - noFill(); - } - - drawFigures(layer.figureName, layer); -} - -// Run the function that creates each figure -function drawFigures(figureName, layer) { - figures[figureName](layer); -} - -// Update the history when the color of an input changes -function onChangeColor(color, input) { - // BUG: it is triggered too much times - let figureId = input.id.slice(input.id.indexOf("-") + 1); - let newConfig = structuredClone(history[currentIndex]); - - newConfig.layers[figureId][input.name] = color; - saveOnHistory(newConfig); - input.setAttribute('style',`background-color:${color}`); -} - -// Update the history when an attribute of a layer changes -function onChangeDefault(figureId, attribute, value) { - let newConfig = structuredClone(history[currentIndex]); - newConfig.layers[figureId][attribute] = value; - saveOnHistory(newConfig); -} - -// Apply the configuration of the previous index in the history of changes -function undo() { - if (currentIndex > 0) { - currentIndex -= 1; - draw(); - drawHtmlAgain(); - } -} - -// Apply the configuration of the next index in the history of changes -function redo() { - if (history.length > currentIndex) { - currentIndex += 1; - draw(); - drawHtmlAgain(); - } -} - -// Save a new configuration in the history and update manndala and html -function saveOnHistory(newConfig) { - if (history.length - currentIndex > 1) { // after an undo - let newHistory = history.slice(0, currentIndex); - history = newHistory; - currentIndex = newHistory.length - 1; - } - history[currentIndex + 1] = newConfig; - currentIndex += 1; - draw(); - drawHtmlAgain(); -} - -// Replace the old html layers with new ones -function drawHtmlAgain(){ - let oldLayers = document.getElementById("layers"); - let newLayers = document.createElement('div'); - newLayers.setAttribute("class", "layers"); - newLayers.setAttribute("id", "layers"); - oldLayers.replaceWith(newLayers); - setupHtmlLayers(); -} - -// Remove all layers except one -function cleanAll() { - let newConfig = structuredClone(history[currentIndex]); - newConfig.layers = []; - saveOnHistory(newConfig); -} - -// Remove a layer based on it's position -function removeLayer(layerId) { - let newConfig = structuredClone(history[currentIndex]); - let layers = newConfig.layers; - if (layerId == 0) { - layers.shift(); - } else if (layerId + 1== layers.length){ - layers.pop(); - } else { - layers.splice(layerId, 1); - } - newConfig.layers = layers; - saveOnHistory(newConfig); -} - -// Save current layers and reassign them to change the order -function moveLayer(layerId, direction){ - let newConfig = structuredClone(history[currentIndex]); - let layers = newConfig.layers; - let item = layers[layerId]; - - if (direction == 'down') { - let nextItem = layers[layerId + 1]; - layers[layerId] = nextItem; - layers[layerId + 1] = item; - } else if (direction == 'up') { - let previousItem = layers[layerId - 1]; - layers[layerId - 1] = item; - layers[layerId] = previousItem; - } - saveOnHistory(newConfig); -} - -// Creates a new layer and save it in the history -function createNewLayer(){ - let newConfig = structuredClone(history[currentIndex]); - newConfig.layers.push(oneLayer); - saveOnHistory(newConfig); -} - -// Download an image as jpg -function downloadAsImage(){ - saveCanvas(`mandala`, 'jpg'); // 'jpg, png, webp' -} - -// Write json in local storage -function saveInLocalStorage() { - let json = JSON.stringify(history[currentIndex]); - localStorage.setItem("mandala", json); -} - -// Load configuration from local storage -function getFromLocalStorage() { - let newConfig = JSON.parse(localStorage.getItem("mandala")); - saveOnHistory(newConfig); -} - -// Cambiar lenguaje y guardar la preferencia en el localstorage -function updateLanguage(e) { - let newLanguage = e.target.value.toLowerCase(); - localStorage.setItem('language', newLanguage); - updateContent(newLanguage); -} - -// Function to update content based on selected language -function updateContent(newLanguage) { - let langData = languages[newLanguage] - document.querySelectorAll('[data-i18n]').forEach(element => { - const key = element.getAttribute('data-i18n'); - if (element.localName == 'label'){ - element.innerHTML = langData[key]; - } else if (element.localName == 'alt'){ - element.title = langData[key]; - } else { - element.alt = langData[key]; - } - }); -}