{"id":458,"date":"2017-09-17T11:02:41","date_gmt":"2017-09-17T11:02:41","guid":{"rendered":"https:\/\/sfat.info.ro\/wordpress\/?p=458"},"modified":"2018-03-13T16:34:02","modified_gmt":"2018-03-13T16:34:02","slug":"genereaz-e-mandala-nume","status":"publish","type":"post","link":"https:\/\/sfat.info.ro\/wordpress\/?p=458","title":{"rendered":"Genereaz\u0103 e-mandala numelui"},"content":{"rendered":"<p><style type='text\/css'>\n    .mandala-wrap {\n      max-width: 1170px;\n      margin: 0 auto;\n      text-align: center;\n    }\n    canvas#mandalaCanvas {\n      margin-top: 50px;\n      margin-bottom: 30px;\n      width: 600px;\n      max-width: 100%;\n    }\n    .mandala-download {\n      padding: 5px 10px;\n      background-color: #000;\n      color: #fff;\n      border-radius: 4px;\n      text-decoration: none;\n      display: none;\n      cursor: pointer;\n    }\n    .name-form .name-form-elem {\n      display: inline-block;\n      width: auto;\n    }\n  <\/style><div class=\"mandala-wrap\">\n<h2>e-Mandala unui nume<\/h2>\n\t\t<center><small>Un proiect realizat de Vlad T. Popescu<br>\n\tAplica\u021bie realizat\u0103 de Bran Andrei Petru<\/small><\/center><br>\n    <p>Introdu numele pentru care doresti sa vizualizezi mandala (maxim 12 caractere). \n\t<br>Pot fi introduse \u0219i numere, ca s\u0103 putem afi\u0219a \u0219i mandala unei combina\u021bii de genul \"SG1\".<br>\n\tImaginea generat\u0103 poate fi desc\u0103rcat\u0103 cu click dreapta, <br>sau ap\u0103s\u00e2nd butonul \"Descarc\u0103 imaginea\" de sub ea.<\/p>\n    <div class=\"name-form\">\n      <input class=\"name-form-elem\" type=\"text\" name=\"name\" id=\"name\" maxlength=\"12\" onkeypress=\"return onlyAlphabets(event,this);\" \/>\n      <button class=\"name-form-elem\" type=\"submit\" id=\"generate\">Genereaza<\/button>\n    <\/div>\n    <div>\n      <canvas id=\"mandalaCanvas\" width=\"1000\" height=\"1000\"><\/canvas>\n    <\/div>\n    <button class=\"mandala-download\" id=\"download\">Descarca Imaginea<\/button>\n  <\/div><script>\n  function onlyAlphabets(e, t) {\n    try {\n      if (window.event) {\n        var charCode = window.event.keyCode;\n      }\n      else if (e) {\n        var charCode = e.which;\n      }\n      else { return true; }\n      if ((charCode > 64 && charCode < 91) || (charCode > 96 && charCode < 123) || (charCode >= 48 && charCode <= 57))\n        return true;\n      else\n        return false;\n    }\n    catch (err) {\n      alert(err.Description);\n    }\n  }\n\n  \/\/Set the number of days each month has and the month names\n  var nameInput = document.getElementById('name'),\n      generateBtn = document.getElementById('generate'),\n      letterAssociation = {\n        'a': '1',\n        'b': '2',\n        'c': '3',\n        'd': '4',\n        'e': '5',\n        'f': '6',\n        'g': '7',\n        'h': '8',\n        'i': '9',\n        'j': '1',\n        'k': '2',\n        'l': '3',\n        'm': '4',\n        'n': '5',\n        'o': '6',\n        'p': '7',\n        'q': '8',\n        'r': '9',\n        's': '1',\n        't': '2',\n        'u': '3',\n        'v': '4',\n        'w': '5',\n        'x': '6',\n        'y': '7',\n        'z': '8',\n\n\t  'A': '1',\n      'B': '2',\n      'C': '3',\n      'D': '4',\n      'E': '5',\n      'F': '6',\n      'G': '7',\n      'H': '8',\n      'I': '9',\n      'J': '1',\n      'K': '2',\n      'L': '3',\n      'M': '4',\n      'N': '5',\n      'O': '6',\n      'P': '7',\n      'Q': '8',\n      'R': '9',\n      'S': '1',\n      'T': '2',\n      'U': '3',\n      'V': '4',\n      'W': '5',\n      'X': '6',\n      'Y': '7',\n      'Z': '8',\n\t\n        '0': '0',\n        '1': '1',\n        '2': '2',\n        '3': '3',\n        '4': '4',\n        '5': '5',\n        '6': '6',\n        '7': '7',\n        '8': '8',\n        '9': '9'\n      };\n\n  \/*\n  *** BEGIN CANVAS GENERATOR\n  *\/\n\n  generateBtn.onclick = function() {\n    var days = 12,\n        segmentDepth = 498,\n        segmentHeight = segmentDepth \/ 12,\n        nameVal = nameInput.value;\n\n    if(nameVal) {\n      var mandalaNumbers = [];\n\n      var nameArray = nameVal.split(''),\n          zerosLength = days - nameArray.length\n          zerosArray = [],\n          nameArrayVal = [];\n      for (var i = 0; i < zerosLength; i++) {\n        zerosArray.push('0');\n      }\n      for (var i = 0; i < nameArray.length; i++) {\n      var letter_assoc = nameArray[i];\n        nameArrayVal.push(letterAssociation[letter_assoc]);\n      }\n\n      var first12 = zerosArray.concat(nameArrayVal, zerosArray, nameArrayVal);\n\n      if(first12.length == 24) {\n        mandalaNumbers.push(first12);\n        \/\/ start drawing our chart\n        for (var i = 0; i < days; i++) {\n          var prevValues = mandalaNumbers[i-1],\n              newValues = [],\n              centervalues = [];\n          if(i > 0 && i < 11) {\n            for (var v = 0; v < prevValues.length; v++) {\n              var firstValue = Number(prevValues[0]),\n                  lastValue = Number(prevValues[prevValues.length-1]),\n                  nextValue = Number(prevValues[v+1]),\n                  prevValue = Number(prevValues[v-1]),\n                  currentValue = Number(prevValues[v]),\n                  pushValue = prevValue + currentValue;\n              if(v == 0) {\n                pushValue = firstValue + lastValue;\n              }\n\n              if(pushValue >= 10) {\n                pushValue = Array.from(pushValue.toString()).map(Number);\n                pushValue = pushValue[0] + pushValue[1];\n              }\n              newValues.push(pushValue.toString());\n            }\n            mandalaNumbers.push(newValues);\n          } else if(i == 11) {\n         centerValue = Number(mandalaNumbers[10][22]) + Number(mandalaNumbers[10][23]);\n            if(centerValue >= 10) {\n              centerValue = Array.from(centerValue.toString()).map(Number);\n              centerValue = centerValue[0] + centerValue[1];\n            }\n            mandalaNumbers.push([centerValue.toString()]);\n          }\n          var radius = segmentDepth - (i * segmentHeight);\n          drawSegments(radius, segmentDepth, i, mandalaNumbers);\n        }\n        drawLines();\n      }\n    }\n\n  }\n\n  function drawSegments(radius, segmentDepth, canvasNo, mandalaNumbers) {\n    var canvas = document.getElementById('mandalaCanvas'),\n        context = canvas.getContext('2d'),\n        x = canvas.width \/ 2,\n        y = canvas.height \/ 2,\n        segments = (canvasNo == 11 ? 1 : 24),\n        angleFills = mandalaNumbers[canvasNo];\n\n    \/\/ size of a pie : it is an angle in radians\n    var pieAngle = 2 * Math.PI \/ segments;\n\n    for (var i = 0; i < segments; i++) {\n      var sAngle = i*pieAngle - (Math.PI\/2),\n          eAngle = (i+1)*pieAngle - (Math.PI\/2),\n          colorNo = (angleFills ? angleFills[i] : ''),\n          defColor = '#fff';\n\n      if(canvasNo > 0 && canvasNo != 11) {\n        var decale = (canvasNo \/ 2) * pieAngle;\n        sAngle = sAngle - decale;\n        eAngle = eAngle - decale;\n      }\n\n      context.beginPath();\n      context.moveTo(x, y);\n\n      if(canvasNo == 11) {\n        context.arc(x, y, radius, 0, 2 * Math.PI, false);\n      } else {\n        context.arc(x, y, radius, sAngle, eAngle, false);\n      }\n\n    if (colorNo == 1) {\n      defColor = '#FF0000';\n    } else if (colorNo == 2) {\n      defColor = '#0000ff';\n    } else if (colorNo == 3) {\n      defColor = '#00cc00';\n    } else if (colorNo == 4) {\n      defColor = '#FFFF00';\n    } else if (colorNo == 5) {\n      defColor = '#bfddff';\n    } else if (colorNo == 6) {\n      defColor = '#00eeee';\n    } else if (colorNo == 7) {\n      defColor = '#ff1493';\n    } else if (colorNo == 8) {\n      defColor = '#ff911f';\n    } else if (colorNo == 9) {\n      defColor = '#9400d3';\n    }\n\n      context.fillStyle = defColor;\n      context.lineWidth = 1;\n      context.strokeStyle = '#000';\n\n      context.closePath();\n\n      if(canvasNo == 11) {\n        context.stroke();\n        context.fill();\n      } else {\n        context.fill();\n        context.stroke();\n      }\n\n    }\n\n    \/\/display the download link\n    document.getElementById('download').style.display = 'inline-block';\n  }\n\n  function drawLines() {\n    var canvas = document.getElementById('mandalaCanvas'),\n        context = canvas.getContext('2d');\n\n    \/\/draw the lines\n    var canvasLines = {\n      'line0' : {\n        'startPosition' : [459, 489],\n        'points': { 0:[421, 478], 1:[424, 467], 2:[385, 453], 3:[392, 437], 4:[357, 417], 5:[368, 398], 6:[336, 374], 7:[354, 352], 8:[325, 322], 9:[349, 301], 10:[325, 268], 11:[355, 247], 12:[336, 212], 13:[373, 193], 14:[356, 155], 15:[404, 139], 16:[392, 100], 17:[447, 88], 18:[441, 48], 19:[500, 43], 20:[500, 0] },\n      },\n      'line1' : {\n        'startPosition' : [541, 489],\n        'points': { 0:[579, 478], 1:[576, 467], 2:[615, 453], 3:[608, 437], 4:[643, 417], 5:[632, 398], 6:[664, 374], 7:[646, 352], 8:[675, 322], 9:[651, 301], 10:[675, 268], 11:[645, 247], 12:[664, 212], 13:[627, 193], 14:[644, 155], 15:[596, 139], 16:[608, 100], 17:[553, 88], 18:[559, 48], 19:[500, 43], 20:[500, 0] },\n      },\n      'line2' : {\n        'startPosition' : [459, 511],\n        'points': { 0:[421, 522], 1:[424, 533], 2:[385, 547], 3:[392, 563], 4:[357, 583], 5:[368, 602], 6:[336, 626], 7:[354, 648], 8:[325, 678], 9:[349, 699], 10:[325, 732], 11:[355, 753], 12:[336, 788], 13:[373, 807], 14:[356, 845], 15:[404, 861], 16:[392, 900], 17:[447, 912], 18:[441, 952], 19:[500, 957], 20:[500, 1000] },\n      },\n      'line3' : {\n        'startPosition' : [541, 511],\n        'points': { 0:[579, 522], 1:[576, 533], 2:[615, 547], 3:[608, 563], 4:[643, 583], 5:[632, 602], 6:[664, 626], 7:[646, 648], 8:[675, 678], 9:[651, 699], 10:[675, 732], 11:[645, 753], 12:[664, 788], 13:[627, 807], 14:[644, 845], 15:[596, 861], 16:[608, 900], 17:[553, 912], 18:[559, 952], 19:[500, 957], 20:[500, 1000] },\n      }\n    }\n\n    for (var s = 0; s < 4; s++) {\n      var startPosition = canvasLines['line'+s].startPosition,\n          points = canvasLines['line'+s].points;\n      context.beginPath();\n      context.lineWidth = 4;\n      context.strokeStyle = '#000';\n      context.moveTo(startPosition[0],startPosition[1]);\n      for (var point in points) {\n        context.lineTo(points[point][0],points[point][1]);\n      }\n      context.stroke();\n      context.closePath();\n    }\n\n  }\n\n  function reverseString(str) {\n    var splitString = str.split('');\n    var reverseArray = splitString.reverse();\n    var joinArray = reverseArray.join('');\n    return joinArray;\n  }\n\n  function downloadCanvas(link, canvasId, filename) {\n    link.href = document.getElementById(canvasId).toDataURL();\n    link.download = filename;\n  }\n\n  document.getElementById('download').addEventListener('click', function() {\n    downloadCanvas(this, 'mandalaCanvas', 'mandala-zi-nastere.png');\n  }, false);\n\n\n  var canvas = document.getElementById('mandalaCanvas'),\n      context = canvas.getContext('2d');\n  context.translate(canvas.width , 0);\n  context.rotate(Math.PI \/ 2);\n\n  <\/script><br \/>\n<center><a href=\"https:\/\/sfat.info.ro\/wordpress\/?p=623\" target=\"_blank\"><strong>Aici g\u0103si\u021bi mai multe despre numerele \u0219i culorile e-mandalei<\/strong><br \/>\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/sfat.info.ro\/wordpress\/wp-content\/uploads\/2018\/01\/mandala-150x150.png\" alt=\"\" width=\"150\" height=\"150\" class=\"aligncenter size-thumbnail wp-image-690\" srcset=\"https:\/\/sfat.info.ro\/wordpress\/wp-content\/uploads\/2018\/01\/mandala-150x150.png 150w, https:\/\/sfat.info.ro\/wordpress\/wp-content\/uploads\/2018\/01\/mandala-300x300.png 300w, https:\/\/sfat.info.ro\/wordpress\/wp-content\/uploads\/2018\/01\/mandala-768x768.png 768w, https:\/\/sfat.info.ro\/wordpress\/wp-content\/uploads\/2018\/01\/mandala.png 1000w\" sizes=\"auto, (max-width: 150px) 100vw, 150px\" \/><\/a><\/center><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Aici g\u0103si\u021bi mai multe despre numerele \u0219i culorile e-mandalei<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[28],"tags":[27],"class_list":["post-458","post","type-post","status-publish","format-standard","hentry","category-e-mandala","tag-e-mandala","has_thumb"],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/p9kw6W-7o","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/sfat.info.ro\/wordpress\/index.php?rest_route=\/wp\/v2\/posts\/458","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sfat.info.ro\/wordpress\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sfat.info.ro\/wordpress\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sfat.info.ro\/wordpress\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sfat.info.ro\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=458"}],"version-history":[{"count":5,"href":"https:\/\/sfat.info.ro\/wordpress\/index.php?rest_route=\/wp\/v2\/posts\/458\/revisions"}],"predecessor-version":[{"id":1048,"href":"https:\/\/sfat.info.ro\/wordpress\/index.php?rest_route=\/wp\/v2\/posts\/458\/revisions\/1048"}],"wp:attachment":[{"href":"https:\/\/sfat.info.ro\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=458"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sfat.info.ro\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=458"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sfat.info.ro\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=458"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}