דילוג לתוכן
  • חוקי הפורום
  • פופולרי
  • לא נפתר
  • משתמשים
  • חיפוש גוגל בפורום
  • צור קשר
עיצובים
  • Light
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor

  • ברירת מחדל (ללא עיצוב (ברירת מחדל))
  • ללא עיצוב (ברירת מחדל)
כיווץ
מתמחים טופ
  1. דף הבית
  2. כללי - עזרה הדדית
  3. להורדה | מחולל מנדלות איכותי ופשוט

להורדה | מחולל מנדלות איכותי ופשוט

מתוזמן נעוץ נעול הועבר כללי - עזרה הדדית
108 פוסטים 19 כותבים 3.3k צפיות 19 עוקבים
  • מהישן לחדש
  • מהחדש לישן
  • הכי הרבה הצבעות
תגובה
  • תגובה כנושא
התחברו כדי לפרסם תגובה
נושא זה נמחק. רק משתמשים עם הרשאות מתאימות יוכלו לצפות בו.
  • ר רפאל vnkl

    @חטח לא ממש בקלות, הייתי צריך לגרום לו להבין מה בדיוק אני רוצה ואיך דברים יקרו, אבל בסוף הוא יצר את הגירסה הזאת במלואה.

    ישראל 142י מנותק
    ישראל 142י מנותק
    ישראל 142
    מדריכים
    כתב נערך לאחרונה על ידי ישראל 142
    #11

    @רפאל-vnkl כתב בלהורדה | מחולל מנדלות איכותי ופשוט:

    @חטח לא ממש בקלות, הייתי צריך לגרום לו להבין מה בדיוק אני רוצה ואיך דברים יקרו, אבל בסוף הוא יצר את הגירסה הזאת במלואה.

    אני הייתי ממליץ להוסיף שיהיה אפשרות לרקע שקוף (במקום לבן). או שיהיה אפשר גם לבחור צבע רקע

    טכנאי מחשבים

    ר תגובה 1 תגובה אחרונה
    2
    • ר רפאל vnkl

      יצרתי עם ChatGPT מחולל מנדלות מדהים שעובד מעולה.
      הוא דומה ליוצר המנדלות של יויו, אך הוא אופליין.
      להורדת הגירסה החדשה קרדיט @רנדומלי
      יוצר המנדלות.zip

      להורדת הגירסה הישנה:
      יוצר המנדלות.zip

      בהנאה!

      נ מנותק
      נ מנותק
      נחמן פלח
      כתב נערך לאחרונה על ידי
      #12

      @רפאל-vnkl כתב בלהורדה | מחולל מנדלות איכותי ופשוט:

      יצרתי עם ChatGPT מחולל מנדלות מדהים שעובד מעולה.
      הוא דומה ליוצר המנדלות של יויו, אך הוא אופליין.
      יוצר המנדלות.zip
      בהנאה!

      לי זה לא עובד בטלפון

      היי

      תגובה 1 תגובה אחרונה
      0
      • נ מנותק
        נ מנותק
        נחמן פלח
        כתב נערך לאחרונה על ידי
        #13

        יוצר המנדלות.zip
        עובד גם בטלפון

        היי

        תגובה 1 תגובה אחרונה
        1
        • ישראל 142י ישראל 142

          @רפאל-vnkl כתב בלהורדה | מחולל מנדלות איכותי ופשוט:

          @חטח לא ממש בקלות, הייתי צריך לגרום לו להבין מה בדיוק אני רוצה ואיך דברים יקרו, אבל בסוף הוא יצר את הגירסה הזאת במלואה.

          אני הייתי ממליץ להוסיף שיהיה אפשרות לרקע שקוף (במקום לבן). או שיהיה אפשר גם לבחור צבע רקע

          ר מנותק
          ר מנותק
          רפאל vnkl
          כתב נערך לאחרונה על ידי
          #14

          @ישראל-142 כתב בלהורדה | מחולל מנדלות איכותי ופשוט:

          אני הייתי ממליץ להוסיף שיהיה אפשרות לרקע שקוף (במקום לבן). או שיהיה אפשר גם לבחור צבע רקע

          הייתי שמח אבל GPT לא מצליח לעשות את זה, בקושי את הקובץ המקורי הוא הצליח. ואני לא כ"כ מבין ב JS

          👈אם יש כאן מישהו שמבין ב JS אשמח מאוד אם תוסיפו את מה ש @ישראל-142 אמר

          ר תגובה 1 תגובה אחרונה
          1
          • ר רפאל vnkl

            @ישראל-142 כתב בלהורדה | מחולל מנדלות איכותי ופשוט:

            אני הייתי ממליץ להוסיף שיהיה אפשרות לרקע שקוף (במקום לבן). או שיהיה אפשר גם לבחור צבע רקע

            הייתי שמח אבל GPT לא מצליח לעשות את זה, בקושי את הקובץ המקורי הוא הצליח. ואני לא כ"כ מבין ב JS

            👈אם יש כאן מישהו שמבין ב JS אשמח מאוד אם תוסיפו את מה ש @ישראל-142 אמר

            ר מנותק
            ר מנותק
            רנדומלי
            כתב נערך לאחרונה על ידי רנדומלי
            #15

            @רפאל-vnkl
            יוצר המנדלות.zip

            הוספתי תיבת בחירה לרקע שקוף, בדרך גם תיקנתי את התיבה של הפקדים - שתהיה מימין לשמאל.
            זה רלוונטי רק לתמונה שיורדת בלחיצה על שמור - לא רואים את השינוי במחולל עצמו.


            עריכה: אני רואה שבאתר לא שמים לב להבדל, אבל אם תורידו את התמונות תראו שהראשון בעל רקע לבן והשני בעל רקע שקוף.

            לבן.png

            שקוף.png

            ר תגובה 1 תגובה אחרונה
            1
            • ר רנדומלי

              @רפאל-vnkl
              יוצר המנדלות.zip

              הוספתי תיבת בחירה לרקע שקוף, בדרך גם תיקנתי את התיבה של הפקדים - שתהיה מימין לשמאל.
              זה רלוונטי רק לתמונה שיורדת בלחיצה על שמור - לא רואים את השינוי במחולל עצמו.


              עריכה: אני רואה שבאתר לא שמים לב להבדל, אבל אם תורידו את התמונות תראו שהראשון בעל רקע לבן והשני בעל רקע שקוף.

              לבן.png

              שקוף.png

              ר מנותק
              ר מנותק
              רפאל vnkl
              כתב נערך לאחרונה על ידי
              #16

              @רנדומלי תודה רבה, עידכנתי בפוסט למעלה 👆

              אגב, אתה מבין ב JS? אם כן תוכל להוסיף גם צבע רקע?

              ר תגובה 1 תגובה אחרונה
              0
              • ר רפאל vnkl

                @רנדומלי תודה רבה, עידכנתי בפוסט למעלה 👆

                אגב, אתה מבין ב JS? אם כן תוכל להוסיף גם צבע רקע?

                ר מנותק
                ר מנותק
                רנדומלי
                כתב נערך לאחרונה על ידי
                #17

                @רפאל-vnkl
                זה ייקח לי קצת זמן.
                אם אף אחד לא יקדים אותי בעז"ה במוצ"ש אני אשב על זה.

                תגובה 1 תגובה אחרונה
                0
                • ר רפאל vnkl

                  יצרתי עם ChatGPT מחולל מנדלות מדהים שעובד מעולה.
                  הוא דומה ליוצר המנדלות של יויו, אך הוא אופליין.
                  להורדת הגירסה החדשה קרדיט @רנדומלי
                  יוצר המנדלות.zip

                  להורדת הגירסה הישנה:
                  יוצר המנדלות.zip

                  בהנאה!

                  יוסף אלחנןי מחובר
                  יוסף אלחנןי מחובר
                  יוסף אלחנן
                  מדריכים
                  כתב נערך לאחרונה על ידי יוסף אלחנן
                  #18

                  @רפאל-vnkl תקשיב, זה מטורף!
                  טוב לדקות של שיעמום...
                  mandala.png

                  @ישראל-142 הצבעים בהשראת הפרופיל שלך...
                  😄

                  המלצה לשיפור, אם אפשר לעשות שיהיה אפשרות לביטול פעולה אחרונה (קונטרול Z)

                  הייתה לי תזוזה לא נכונה והייתי צריך להתחיל מהתחלה... 😢

                  חטחח תגובה 1 תגובה אחרונה
                  5
                  • יוסף אלחנןי יוסף אלחנן

                    @רפאל-vnkl תקשיב, זה מטורף!
                    טוב לדקות של שיעמום...
                    mandala.png

                    @ישראל-142 הצבעים בהשראת הפרופיל שלך...
                    😄

                    המלצה לשיפור, אם אפשר לעשות שיהיה אפשרות לביטול פעולה אחרונה (קונטרול Z)

                    הייתה לי תזוזה לא נכונה והייתי צריך להתחיל מהתחלה... 😢

                    חטחח מנותק
                    חטחח מנותק
                    חטח
                    כתב נערך לאחרונה על ידי
                    #19

                    @יוסף-אלחנן מדהים!
                    בטח לקח לך שעות!

                    לי כבר נמאס מזה...

                    יוסף אלחנןי תגובה 1 תגובה אחרונה
                    0
                    • חטחח חטח

                      @יוסף-אלחנן מדהים!
                      בטח לקח לך שעות!

                      לי כבר נמאס מזה...

                      יוסף אלחנןי מחובר
                      יוסף אלחנןי מחובר
                      יוסף אלחנן
                      מדריכים
                      כתב נערך לאחרונה על ידי
                      #20

                      @חטח כתב בלהורדה | מחולל מנדלות איכותי ופשוט:

                      בטח לקח לך שעות!

                      ממש לא!

                      זה כל כך קל...

                      mandala (1).png

                      חטחח תגובה 1 תגובה אחרונה
                      0
                      • יוסף אלחנןי יוסף אלחנן

                        @חטח כתב בלהורדה | מחולל מנדלות איכותי ופשוט:

                        בטח לקח לך שעות!

                        ממש לא!

                        זה כל כך קל...

                        mandala (1).png

                        חטחח מנותק
                        חטחח מנותק
                        חטח
                        כתב נערך לאחרונה על ידי
                        #21

                        @יוסף-אלחנן כתב בלהורדה | מחולל מנדלות איכותי ופשוט:

                        @חטח כתב בלהורדה | מחולל מנדלות איכותי ופשוט:

                        בטח לקח לך שעות!

                        ממש לא!

                        זה כל כך קל...

                        mandala (1).png

                        כשאתה עושה משהו קטן

                        כמו זה
                        mandala (13).png
                        mandala (15).png

                        אז זה קל, אבל מה שאתה עשית לוקח זמן...

                        יוסף אלחנןי תגובה 1 תגובה אחרונה
                        0
                        • ר רפאל vnkl

                          יצרתי עם ChatGPT מחולל מנדלות מדהים שעובד מעולה.
                          הוא דומה ליוצר המנדלות של יויו, אך הוא אופליין.
                          להורדת הגירסה החדשה קרדיט @רנדומלי
                          יוצר המנדלות.zip

                          להורדת הגירסה הישנה:
                          יוצר המנדלות.zip

                          בהנאה!

                          למה מה קרהל מנותק
                          למה מה קרהל מנותק
                          למה מה קרה
                          מדריכים
                          כתב נערך לאחרונה על ידי
                          #22

                          @רפאל-vnkl
                          וואהו ממש יפה וכייף
                          אהבתי לגמרי
                          ba935254-f0c3-4ded-b894-81166e52289b-image.png

                          ר תגובה 1 תגובה אחרונה
                          3
                          • חטחח חטח

                            @יוסף-אלחנן כתב בלהורדה | מחולל מנדלות איכותי ופשוט:

                            @חטח כתב בלהורדה | מחולל מנדלות איכותי ופשוט:

                            בטח לקח לך שעות!

                            ממש לא!

                            זה כל כך קל...

                            mandala (1).png

                            כשאתה עושה משהו קטן

                            כמו זה
                            mandala (13).png
                            mandala (15).png

                            אז זה קל, אבל מה שאתה עשית לוקח זמן...

                            יוסף אלחנןי מחובר
                            יוסף אלחנןי מחובר
                            יוסף אלחנן
                            מדריכים
                            כתב נערך לאחרונה על ידי
                            #23

                            @חטח כתב בלהורדה | מחולל מנדלות איכותי ופשוט:

                            אבל מה שאתה עשית לוקח זמן...

                            לקח לי אולי שלוש דקות...

                            תגובה 1 תגובה אחרונה
                            0
                            • למה מה קרהל למה מה קרה

                              @רפאל-vnkl
                              וואהו ממש יפה וכייף
                              אהבתי לגמרי
                              ba935254-f0c3-4ded-b894-81166e52289b-image.png

                              ר מנותק
                              ר מנותק
                              רפאל vnkl
                              כתב נערך לאחרונה על ידי
                              #24

                              @למה-מה-קרה בכיף
                              אגב אתה מבין ב JS? ()
                              אם כן אשמח אם תוסיף את מה ש @יוסף-אלחנן אמר פה ומה ש @ישראל-142 אמר פה.
                              תודה רבה!

                              למה מה קרהל 2 תגובות תגובה אחרונה
                              0
                              • ר רפאל vnkl

                                @למה-מה-קרה בכיף
                                אגב אתה מבין ב JS? ()
                                אם כן אשמח אם תוסיף את מה ש @יוסף-אלחנן אמר פה ומה ש @ישראל-142 אמר פה.
                                תודה רבה!

                                למה מה קרהל מנותק
                                למה מה קרהל מנותק
                                למה מה קרה
                                מדריכים
                                כתב נערך לאחרונה על ידי
                                #25

                                @רפאל-vnkl
                                בהחלט רעיון
                                מקווה בהמשך לעשות את זה בלי נדר.

                                תגובה 1 תגובה אחרונה
                                1
                                • ר רפאל vnkl

                                  @למה-מה-קרה בכיף
                                  אגב אתה מבין ב JS? ()
                                  אם כן אשמח אם תוסיף את מה ש @יוסף-אלחנן אמר פה ומה ש @ישראל-142 אמר פה.
                                  תודה רבה!

                                  למה מה קרהל מנותק
                                  למה מה קרהל מנותק
                                  למה מה קרה
                                  מדריכים
                                  כתב נערך לאחרונה על ידי למה מה קרה
                                  #26

                                  @רפאל-vnkl
                                  זה מה שיצא לי בינתיים
                                  הלך לי בזריזות בעזרת המודלים
                                  יוצר-המנדלות.zip

                                  חטחח ר 2 תגובות תגובה אחרונה
                                  3
                                  • למה מה קרהל למה מה קרה

                                    @רפאל-vnkl
                                    זה מה שיצא לי בינתיים
                                    הלך לי בזריזות בעזרת המודלים
                                    יוצר-המנדלות.zip

                                    חטחח מנותק
                                    חטחח מנותק
                                    חטח
                                    כתב נערך לאחרונה על ידי
                                    #27
                                    פוסט זה נמחק!
                                    תגובה 1 תגובה אחרונה
                                    1
                                    • למה מה קרהל למה מה קרה

                                      @רפאל-vnkl
                                      זה מה שיצא לי בינתיים
                                      הלך לי בזריזות בעזרת המודלים
                                      יוצר-המנדלות.zip

                                      ר מנותק
                                      ר מנותק
                                      רפאל vnkl
                                      כתב נערך לאחרונה על ידי
                                      #28

                                      @למה-מה-קרה אחלה!
                                      אבל לא עדיף לעשות בחירת צבע רגילה, ולא מתוך רשימה מצומצמת?

                                      נ תגובה 1 תגובה אחרונה
                                      0
                                      • ר רפאל vnkl

                                        @למה-מה-קרה אחלה!
                                        אבל לא עדיף לעשות בחירת צבע רגילה, ולא מתוך רשימה מצומצמת?

                                        נ מנותק
                                        נ מנותק
                                        נחמן פלח
                                        כתב נערך לאחרונה על ידי נחמן פלח
                                        #29

                                        @רפאל-vnkl כתב בלהורדה | מחולל מנדלות איכותי ופשוט:

                                        @למה-מה-קרה אחלה!
                                        אבל לא עדיף לעשות בחירת צבע רגילה, ולא מתוך רשימה מצומצמת?

                                        עובד על זה...

                                        <!DOCTYPE html>
                                        <html lang="he">
                                        <head>
                                        <meta charset="UTF-8">
                                        <meta name="viewport" content="width=device-width, initial-scale=1.0">
                                        <title>יוצר מנדלות</title>
                                        <style>
                                          body {
                                            margin: 0;
                                            display: flex;
                                            justify-content: center;
                                            align-items: center;
                                            flex-wrap: wrap;
                                            height: 100vh;
                                            background-color: #f4f4f4;
                                            font-family: Arial, sans-serif;
                                            gap: 20px;
                                          }
                                          .canvas-container {
                                            position: relative;
                                            width: 90%;
                                            max-width: 500px;
                                            height: auto;
                                            aspect-ratio: 1;
                                          }
                                          canvas {
                                            width: 100%;
                                            height: 100%;
                                            background-color: transparent;
                                            border-radius: 50%;
                                            touch-action: none;
                                            cursor: crosshair;
                                          }
                                          #controls {
                                            display: flex;
                                            flex-direction: column;
                                            gap: 10px;
                                            background-color: #333;
                                            color: white;
                                            padding: 20px;
                                            border-radius: 10px;
                                            max-width: 500px;
                                            width: 90%;
                                          }
                                          label {
                                            margin-bottom: 5px;
                                          }
                                          input[type="color"], input[type="range"], button, select {
                                            width: 100%;
                                            margin-top: 5px;
                                          }
                                          button {
                                            padding: 10px;
                                            border: none;
                                            border-radius: 5px;
                                            background-color: #555;
                                            color: white;
                                            cursor: pointer;
                                          }
                                          button:hover {
                                            background-color: #777;
                                          }
                                        </style>
                                        </head>
                                        <body>
                                        <div class="canvas-container">
                                          <canvas id="mandalaCanvas"></canvas>
                                        </div>
                                        <div id="controls" dir="rtl">
                                          <label>צבע קו: <input type="color" id="colorPicker" value="#000000"></label>
                                          <label>צבע רקע: <input type="color" id="backgroundPicker" value="#ffffff"></label>
                                          <label>חלקים: <input type="range" id="sectors" min="4" max="32" value="16"></label>
                                          <label>עובי הקו: <input type="range" id="lineWidth" min="1" max="10" value="2"></label>
                                          <label><input type="checkbox" id="mirror" checked> סימטריה</label>
                                          <label><input type="checkbox" id="transparentBackground" checked> רקע שקוף</label>
                                          <button id="clearCanvas">ניקוי</button>
                                          <button id="undo">ביטול פעולה</button>
                                          <button id="saveImage">שמור</button>
                                        </div>
                                        
                                        <script>
                                          const canvas = document.getElementById('mandalaCanvas');
                                          const ctx = canvas.getContext('2d');
                                          const colorPicker = document.getElementById('colorPicker');
                                          const backgroundPicker = document.getElementById('backgroundPicker');
                                          const sectorsInput = document.getElementById('sectors');
                                          const lineWidthInput = document.getElementById('lineWidth');
                                          const mirrorCheckbox = document.getElementById('mirror');
                                          const transparentBackgroundCheckbox = document.getElementById('transparentBackground');
                                          const clearCanvasButton = document.getElementById('clearCanvas');
                                          const saveImageButton = document.getElementById('saveImage');
                                          const undoButton = document.getElementById('undo');
                                          let isDrawing = false;
                                          let previousX, previousY;
                                          let drawings = [];
                                          let centerX, centerY;
                                        
                                          // Adjust canvas size to match container
                                          function resizeCanvas() {
                                            canvas.width = canvas.offsetWidth;
                                            canvas.height = canvas.offsetHeight;
                                            centerX = canvas.width / 2;
                                            centerY = canvas.height / 2;
                                            initializeCanvas();
                                          }
                                        
                                          window.addEventListener('resize', resizeCanvas);
                                        
                                          function initializeCanvas() {
                                            if (transparentBackgroundCheckbox.checked) {
                                              ctx.clearRect(0, 0, canvas.width, canvas.height);
                                            } else {
                                              ctx.fillStyle = backgroundPicker.value;
                                              ctx.fillRect(0, 0, canvas.width, canvas.height);
                                            }
                                            drawGuidelines(sectorsInput.value);
                                          }
                                        
                                          function drawGuidelines(sectors) {
                                            const angleStep = (2 * Math.PI) / sectors;
                                        
                                            ctx.save();
                                            ctx.strokeStyle = "#ddd";
                                            ctx.lineWidth = 1;
                                            ctx.translate(centerX, centerY);
                                        
                                            for (let i = 0; i < sectors; i++) {
                                              ctx.beginPath();
                                              ctx.moveTo(0, 0);
                                              ctx.lineTo(canvas.width / 2, 0);
                                              ctx.stroke();
                                              ctx.rotate(angleStep);
                                            }
                                        
                                            ctx.restore();
                                          }
                                        
                                          function drawLine(x1, y1, x2, y2, color, lineWidth, sectors, mirror) {
                                            ctx.save();
                                            ctx.translate(centerX, centerY);
                                            const angleStep = (2 * Math.PI) / sectors;
                                        
                                            for (let i = 0; i < sectors; i++) {
                                              ctx.strokeStyle = color;
                                              ctx.lineWidth = lineWidth;
                                              ctx.beginPath();
                                              ctx.moveTo(x1 - centerX, y1 - centerY);
                                              ctx.lineTo(x2 - centerX, y2 - centerY);
                                              ctx.stroke();
                                        
                                              if (mirror) {
                                                ctx.beginPath();
                                                ctx.moveTo(-(x1 - centerX), y1 - centerY);
                                                ctx.lineTo(-(x2 - centerX), y2 - centerY);
                                                ctx.stroke();
                                              }
                                              ctx.rotate(angleStep);
                                            }
                                            ctx.restore();
                                          }
                                        
                                          function saveState() {
                                            drawings.push(ctx.getImageData(0, 0, canvas.width, canvas.height));
                                          }
                                        
                                          function undo() {
                                            if (drawings.length > 0) {
                                              const previousState = drawings.pop();
                                              ctx.putImageData(previousState, 0, 0);
                                            }
                                          }
                                        
                                          function getPos(e) {
                                            const rect = canvas.getBoundingClientRect();
                                            if (e.touches) {
                                              return {
                                                x: e.touches[0].clientX - rect.left,
                                                y: e.touches[0].clientY - rect.top
                                              };
                                            } else {
                                              return {
                                                x: e.clientX - rect.left,
                                                y: e.clientY - rect.top
                                              };
                                            }
                                          }
                                        
                                          canvas.addEventListener('pointerdown', (e) => {
                                            isDrawing = true;
                                            const pos = getPos(e);
                                            previousX = pos.x;
                                            previousY = pos.y;
                                            saveState();
                                          });
                                        
                                          canvas.addEventListener('pointermove', (e) => {
                                            if (!isDrawing) return;
                                            const pos = getPos(e);
                                            const color = colorPicker.value;
                                            const lineWidth = lineWidthInput.value;
                                            const sectors = sectorsInput.value;
                                            const mirror = mirrorCheckbox.checked;
                                            drawLine(previousX, previousY, pos.x, pos.y, color, lineWidth, sectors, mirror);
                                            previousX = pos.x;
                                            previousY = pos.y;
                                          });
                                        
                                          canvas.addEventListener('pointerup', () => {
                                            isDrawing = false;
                                          });
                                        
                                          clearCanvasButton.addEventListener('click', () => {
                                            drawings = [];
                                            initializeCanvas();
                                          });
                                        
                                          saveImageButton.addEventListener('click', () => {
                                            const link = document.createElement('a');
                                            link.download = 'mandala.png';
                                            link.href = canvas.toDataURL();
                                            link.click();
                                          });
                                        
                                          sectorsInput.addEventListener('input', () => {
                                            initializeCanvas();
                                          });
                                        
                                          backgroundPicker.addEventListener('input', () => {
                                            initializeCanvas();
                                          });
                                        
                                          transparentBackgroundCheckbox.addEventListener('change', () => {
                                            initializeCanvas();
                                          });
                                        
                                          undoButton.addEventListener('click', () => {
                                            undo();
                                          });
                                        
                                          resizeCanvas();
                                        </script>
                                        </body>
                                        </html>
                                        

                                        זה הקוד.... עובד גם בטלפון

                                        היי

                                        נ עם ישראל חייע 2 תגובות תגובה אחרונה
                                        1
                                        • נ נחמן פלח

                                          @רפאל-vnkl כתב בלהורדה | מחולל מנדלות איכותי ופשוט:

                                          @למה-מה-קרה אחלה!
                                          אבל לא עדיף לעשות בחירת צבע רגילה, ולא מתוך רשימה מצומצמת?

                                          עובד על זה...

                                          <!DOCTYPE html>
                                          <html lang="he">
                                          <head>
                                          <meta charset="UTF-8">
                                          <meta name="viewport" content="width=device-width, initial-scale=1.0">
                                          <title>יוצר מנדלות</title>
                                          <style>
                                            body {
                                              margin: 0;
                                              display: flex;
                                              justify-content: center;
                                              align-items: center;
                                              flex-wrap: wrap;
                                              height: 100vh;
                                              background-color: #f4f4f4;
                                              font-family: Arial, sans-serif;
                                              gap: 20px;
                                            }
                                            .canvas-container {
                                              position: relative;
                                              width: 90%;
                                              max-width: 500px;
                                              height: auto;
                                              aspect-ratio: 1;
                                            }
                                            canvas {
                                              width: 100%;
                                              height: 100%;
                                              background-color: transparent;
                                              border-radius: 50%;
                                              touch-action: none;
                                              cursor: crosshair;
                                            }
                                            #controls {
                                              display: flex;
                                              flex-direction: column;
                                              gap: 10px;
                                              background-color: #333;
                                              color: white;
                                              padding: 20px;
                                              border-radius: 10px;
                                              max-width: 500px;
                                              width: 90%;
                                            }
                                            label {
                                              margin-bottom: 5px;
                                            }
                                            input[type="color"], input[type="range"], button, select {
                                              width: 100%;
                                              margin-top: 5px;
                                            }
                                            button {
                                              padding: 10px;
                                              border: none;
                                              border-radius: 5px;
                                              background-color: #555;
                                              color: white;
                                              cursor: pointer;
                                            }
                                            button:hover {
                                              background-color: #777;
                                            }
                                          </style>
                                          </head>
                                          <body>
                                          <div class="canvas-container">
                                            <canvas id="mandalaCanvas"></canvas>
                                          </div>
                                          <div id="controls" dir="rtl">
                                            <label>צבע קו: <input type="color" id="colorPicker" value="#000000"></label>
                                            <label>צבע רקע: <input type="color" id="backgroundPicker" value="#ffffff"></label>
                                            <label>חלקים: <input type="range" id="sectors" min="4" max="32" value="16"></label>
                                            <label>עובי הקו: <input type="range" id="lineWidth" min="1" max="10" value="2"></label>
                                            <label><input type="checkbox" id="mirror" checked> סימטריה</label>
                                            <label><input type="checkbox" id="transparentBackground" checked> רקע שקוף</label>
                                            <button id="clearCanvas">ניקוי</button>
                                            <button id="undo">ביטול פעולה</button>
                                            <button id="saveImage">שמור</button>
                                          </div>
                                          
                                          <script>
                                            const canvas = document.getElementById('mandalaCanvas');
                                            const ctx = canvas.getContext('2d');
                                            const colorPicker = document.getElementById('colorPicker');
                                            const backgroundPicker = document.getElementById('backgroundPicker');
                                            const sectorsInput = document.getElementById('sectors');
                                            const lineWidthInput = document.getElementById('lineWidth');
                                            const mirrorCheckbox = document.getElementById('mirror');
                                            const transparentBackgroundCheckbox = document.getElementById('transparentBackground');
                                            const clearCanvasButton = document.getElementById('clearCanvas');
                                            const saveImageButton = document.getElementById('saveImage');
                                            const undoButton = document.getElementById('undo');
                                            let isDrawing = false;
                                            let previousX, previousY;
                                            let drawings = [];
                                            let centerX, centerY;
                                          
                                            // Adjust canvas size to match container
                                            function resizeCanvas() {
                                              canvas.width = canvas.offsetWidth;
                                              canvas.height = canvas.offsetHeight;
                                              centerX = canvas.width / 2;
                                              centerY = canvas.height / 2;
                                              initializeCanvas();
                                            }
                                          
                                            window.addEventListener('resize', resizeCanvas);
                                          
                                            function initializeCanvas() {
                                              if (transparentBackgroundCheckbox.checked) {
                                                ctx.clearRect(0, 0, canvas.width, canvas.height);
                                              } else {
                                                ctx.fillStyle = backgroundPicker.value;
                                                ctx.fillRect(0, 0, canvas.width, canvas.height);
                                              }
                                              drawGuidelines(sectorsInput.value);
                                            }
                                          
                                            function drawGuidelines(sectors) {
                                              const angleStep = (2 * Math.PI) / sectors;
                                          
                                              ctx.save();
                                              ctx.strokeStyle = "#ddd";
                                              ctx.lineWidth = 1;
                                              ctx.translate(centerX, centerY);
                                          
                                              for (let i = 0; i < sectors; i++) {
                                                ctx.beginPath();
                                                ctx.moveTo(0, 0);
                                                ctx.lineTo(canvas.width / 2, 0);
                                                ctx.stroke();
                                                ctx.rotate(angleStep);
                                              }
                                          
                                              ctx.restore();
                                            }
                                          
                                            function drawLine(x1, y1, x2, y2, color, lineWidth, sectors, mirror) {
                                              ctx.save();
                                              ctx.translate(centerX, centerY);
                                              const angleStep = (2 * Math.PI) / sectors;
                                          
                                              for (let i = 0; i < sectors; i++) {
                                                ctx.strokeStyle = color;
                                                ctx.lineWidth = lineWidth;
                                                ctx.beginPath();
                                                ctx.moveTo(x1 - centerX, y1 - centerY);
                                                ctx.lineTo(x2 - centerX, y2 - centerY);
                                                ctx.stroke();
                                          
                                                if (mirror) {
                                                  ctx.beginPath();
                                                  ctx.moveTo(-(x1 - centerX), y1 - centerY);
                                                  ctx.lineTo(-(x2 - centerX), y2 - centerY);
                                                  ctx.stroke();
                                                }
                                                ctx.rotate(angleStep);
                                              }
                                              ctx.restore();
                                            }
                                          
                                            function saveState() {
                                              drawings.push(ctx.getImageData(0, 0, canvas.width, canvas.height));
                                            }
                                          
                                            function undo() {
                                              if (drawings.length > 0) {
                                                const previousState = drawings.pop();
                                                ctx.putImageData(previousState, 0, 0);
                                              }
                                            }
                                          
                                            function getPos(e) {
                                              const rect = canvas.getBoundingClientRect();
                                              if (e.touches) {
                                                return {
                                                  x: e.touches[0].clientX - rect.left,
                                                  y: e.touches[0].clientY - rect.top
                                                };
                                              } else {
                                                return {
                                                  x: e.clientX - rect.left,
                                                  y: e.clientY - rect.top
                                                };
                                              }
                                            }
                                          
                                            canvas.addEventListener('pointerdown', (e) => {
                                              isDrawing = true;
                                              const pos = getPos(e);
                                              previousX = pos.x;
                                              previousY = pos.y;
                                              saveState();
                                            });
                                          
                                            canvas.addEventListener('pointermove', (e) => {
                                              if (!isDrawing) return;
                                              const pos = getPos(e);
                                              const color = colorPicker.value;
                                              const lineWidth = lineWidthInput.value;
                                              const sectors = sectorsInput.value;
                                              const mirror = mirrorCheckbox.checked;
                                              drawLine(previousX, previousY, pos.x, pos.y, color, lineWidth, sectors, mirror);
                                              previousX = pos.x;
                                              previousY = pos.y;
                                            });
                                          
                                            canvas.addEventListener('pointerup', () => {
                                              isDrawing = false;
                                            });
                                          
                                            clearCanvasButton.addEventListener('click', () => {
                                              drawings = [];
                                              initializeCanvas();
                                            });
                                          
                                            saveImageButton.addEventListener('click', () => {
                                              const link = document.createElement('a');
                                              link.download = 'mandala.png';
                                              link.href = canvas.toDataURL();
                                              link.click();
                                            });
                                          
                                            sectorsInput.addEventListener('input', () => {
                                              initializeCanvas();
                                            });
                                          
                                            backgroundPicker.addEventListener('input', () => {
                                              initializeCanvas();
                                            });
                                          
                                            transparentBackgroundCheckbox.addEventListener('change', () => {
                                              initializeCanvas();
                                            });
                                          
                                            undoButton.addEventListener('click', () => {
                                              undo();
                                            });
                                          
                                            resizeCanvas();
                                          </script>
                                          </body>
                                          </html>
                                          

                                          זה הקוד.... עובד גם בטלפון

                                          נ מנותק
                                          נ מנותק
                                          נחמן פלח
                                          כתב נערך לאחרונה על ידי
                                          #30

                                          @נחמן-פלח כתב בלהורדה | מחולל מנדלות איכותי ופשוט:

                                          @רפאל-vnkl כתב בלהורדה | מחולל מנדלות איכותי ופשוט:

                                          @למה-מה-קרה אחלה!
                                          אבל לא עדיף לעשות בחירת צבע רגילה, ולא מתוך רשימה מצומצמת?

                                          עובד על זה...

                                          <!DOCTYPE html>
                                          <html lang="he">
                                          <head>
                                          <meta charset="UTF-8">
                                          <meta name="viewport" content="width=device-width, initial-scale=1.0">
                                          <title>יוצר מנדלות</title>
                                          <style>
                                            body {
                                              margin: 0;
                                              display: flex;
                                              justify-content: center;
                                              align-items: center;
                                              flex-wrap: wrap;
                                              height: 100vh;
                                              background-color: #f4f4f4;
                                              font-family: Arial, sans-serif;
                                              gap: 20px;
                                            }
                                            .canvas-container {
                                              position: relative;
                                              width: 90%;
                                              max-width: 500px;
                                              height: auto;
                                              aspect-ratio: 1;
                                            }
                                            canvas {
                                              width: 100%;
                                              height: 100%;
                                              background-color: transparent;
                                              border-radius: 50%;
                                              touch-action: none;
                                              cursor: crosshair;
                                            }
                                            #controls {
                                              display: flex;
                                              flex-direction: column;
                                              gap: 10px;
                                              background-color: #333;
                                              color: white;
                                              padding: 20px;
                                              border-radius: 10px;
                                              max-width: 500px;
                                              width: 90%;
                                            }
                                            label {
                                              margin-bottom: 5px;
                                            }
                                            input[type="color"], input[type="range"], button, select {
                                              width: 100%;
                                              margin-top: 5px;
                                            }
                                            button {
                                              padding: 10px;
                                              border: none;
                                              border-radius: 5px;
                                              background-color: #555;
                                              color: white;
                                              cursor: pointer;
                                            }
                                            button:hover {
                                              background-color: #777;
                                            }
                                          </style>
                                          </head>
                                          <body>
                                          <div class="canvas-container">
                                            <canvas id="mandalaCanvas"></canvas>
                                          </div>
                                          <div id="controls" dir="rtl">
                                            <label>צבע קו: <input type="color" id="colorPicker" value="#000000"></label>
                                            <label>צבע רקע: <input type="color" id="backgroundPicker" value="#ffffff"></label>
                                            <label>חלקים: <input type="range" id="sectors" min="4" max="32" value="16"></label>
                                            <label>עובי הקו: <input type="range" id="lineWidth" min="1" max="10" value="2"></label>
                                            <label><input type="checkbox" id="mirror" checked> סימטריה</label>
                                            <label><input type="checkbox" id="transparentBackground" checked> רקע שקוף</label>
                                            <button id="clearCanvas">ניקוי</button>
                                            <button id="undo">ביטול פעולה</button>
                                            <button id="saveImage">שמור</button>
                                          </div>
                                          
                                          <script>
                                            const canvas = document.getElementById('mandalaCanvas');
                                            const ctx = canvas.getContext('2d');
                                            const colorPicker = document.getElementById('colorPicker');
                                            const backgroundPicker = document.getElementById('backgroundPicker');
                                            const sectorsInput = document.getElementById('sectors');
                                            const lineWidthInput = document.getElementById('lineWidth');
                                            const mirrorCheckbox = document.getElementById('mirror');
                                            const transparentBackgroundCheckbox = document.getElementById('transparentBackground');
                                            const clearCanvasButton = document.getElementById('clearCanvas');
                                            const saveImageButton = document.getElementById('saveImage');
                                            const undoButton = document.getElementById('undo');
                                            let isDrawing = false;
                                            let previousX, previousY;
                                            let drawings = [];
                                            let centerX, centerY;
                                          
                                            // Adjust canvas size to match container
                                            function resizeCanvas() {
                                              canvas.width = canvas.offsetWidth;
                                              canvas.height = canvas.offsetHeight;
                                              centerX = canvas.width / 2;
                                              centerY = canvas.height / 2;
                                              initializeCanvas();
                                            }
                                          
                                            window.addEventListener('resize', resizeCanvas);
                                          
                                            function initializeCanvas() {
                                              if (transparentBackgroundCheckbox.checked) {
                                                ctx.clearRect(0, 0, canvas.width, canvas.height);
                                              } else {
                                                ctx.fillStyle = backgroundPicker.value;
                                                ctx.fillRect(0, 0, canvas.width, canvas.height);
                                              }
                                              drawGuidelines(sectorsInput.value);
                                            }
                                          
                                            function drawGuidelines(sectors) {
                                              const angleStep = (2 * Math.PI) / sectors;
                                          
                                              ctx.save();
                                              ctx.strokeStyle = "#ddd";
                                              ctx.lineWidth = 1;
                                              ctx.translate(centerX, centerY);
                                          
                                              for (let i = 0; i < sectors; i++) {
                                                ctx.beginPath();
                                                ctx.moveTo(0, 0);
                                                ctx.lineTo(canvas.width / 2, 0);
                                                ctx.stroke();
                                                ctx.rotate(angleStep);
                                              }
                                          
                                              ctx.restore();
                                            }
                                          
                                            function drawLine(x1, y1, x2, y2, color, lineWidth, sectors, mirror) {
                                              ctx.save();
                                              ctx.translate(centerX, centerY);
                                              const angleStep = (2 * Math.PI) / sectors;
                                          
                                              for (let i = 0; i < sectors; i++) {
                                                ctx.strokeStyle = color;
                                                ctx.lineWidth = lineWidth;
                                                ctx.beginPath();
                                                ctx.moveTo(x1 - centerX, y1 - centerY);
                                                ctx.lineTo(x2 - centerX, y2 - centerY);
                                                ctx.stroke();
                                          
                                                if (mirror) {
                                                  ctx.beginPath();
                                                  ctx.moveTo(-(x1 - centerX), y1 - centerY);
                                                  ctx.lineTo(-(x2 - centerX), y2 - centerY);
                                                  ctx.stroke();
                                                }
                                                ctx.rotate(angleStep);
                                              }
                                              ctx.restore();
                                            }
                                          
                                            function saveState() {
                                              drawings.push(ctx.getImageData(0, 0, canvas.width, canvas.height));
                                            }
                                          
                                            function undo() {
                                              if (drawings.length > 0) {
                                                const previousState = drawings.pop();
                                                ctx.putImageData(previousState, 0, 0);
                                              }
                                            }
                                          
                                            function getPos(e) {
                                              const rect = canvas.getBoundingClientRect();
                                              if (e.touches) {
                                                return {
                                                  x: e.touches[0].clientX - rect.left,
                                                  y: e.touches[0].clientY - rect.top
                                                };
                                              } else {
                                                return {
                                                  x: e.clientX - rect.left,
                                                  y: e.clientY - rect.top
                                                };
                                              }
                                            }
                                          
                                            canvas.addEventListener('pointerdown', (e) => {
                                              isDrawing = true;
                                              const pos = getPos(e);
                                              previousX = pos.x;
                                              previousY = pos.y;
                                              saveState();
                                            });
                                          
                                            canvas.addEventListener('pointermove', (e) => {
                                              if (!isDrawing) return;
                                              const pos = getPos(e);
                                              const color = colorPicker.value;
                                              const lineWidth = lineWidthInput.value;
                                              const sectors = sectorsInput.value;
                                              const mirror = mirrorCheckbox.checked;
                                              drawLine(previousX, previousY, pos.x, pos.y, color, lineWidth, sectors, mirror);
                                              previousX = pos.x;
                                              previousY = pos.y;
                                            });
                                          
                                            canvas.addEventListener('pointerup', () => {
                                              isDrawing = false;
                                            });
                                          
                                            clearCanvasButton.addEventListener('click', () => {
                                              drawings = [];
                                              initializeCanvas();
                                            });
                                          
                                            saveImageButton.addEventListener('click', () => {
                                              const link = document.createElement('a');
                                              link.download = 'mandala.png';
                                              link.href = canvas.toDataURL();
                                              link.click();
                                            });
                                          
                                            sectorsInput.addEventListener('input', () => {
                                              initializeCanvas();
                                            });
                                          
                                            backgroundPicker.addEventListener('input', () => {
                                              initializeCanvas();
                                            });
                                          
                                            transparentBackgroundCheckbox.addEventListener('change', () => {
                                              initializeCanvas();
                                            });
                                          
                                            undoButton.addEventListener('click', () => {
                                              undo();
                                            });
                                          
                                            resizeCanvas();
                                          </script>
                                          </body>
                                          </html>
                                          

                                          זה הקוד.... עובד גם בטלפון

                                          ������.zip

                                          היי

                                          ר תגובה 1 תגובה אחרונה
                                          0

                                          • התחברות

                                          • אין לך חשבון עדיין? הרשמה

                                          • התחברו או הירשמו כדי לחפש.
                                          • פוסט ראשון
                                            פוסט אחרון
                                          0
                                          • חוקי הפורום
                                          • פופולרי
                                          • לא נפתר
                                          • משתמשים
                                          • חיפוש גוגל בפורום
                                          • צור קשר