{"id":3334,"date":"2025-09-08T11:57:22","date_gmt":"2025-09-08T11:57:22","guid":{"rendered":"https:\/\/neverstopdreaming.jooswolfangel.ch\/?page_id=3334"},"modified":"2025-11-21T10:52:45","modified_gmt":"2025-11-21T10:52:45","slug":"process","status":"publish","type":"page","link":"https:\/\/neverstopdreaming.jooswolfangel.ch\/?page_id=3334","title":{"rendered":"process"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"3334\" class=\"elementor elementor-3334\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-57b57de e-con-full e-flex e-con e-parent\" data-id=\"57b57de\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-beafa4e elementor-widget__width-inherit elementor-widget elementor-widget-html\" data-id=\"beafa4e\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div id=\"sketch-container\"><\/div>\n\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/p5@1.11.7\/lib\/p5.js\"><\/script>\n<script>\nlet paths = [];\nlet numLines = 3;\nlet totalPoints = 1200;\nlet drawLength = 6;\nlet animationSpeed = 1.5;\nlet canvas;\n\nlet words = [\"Tr\u00e4umen\",\"Inspiration\",\"Mut\",\"Humor\",\"Staunen\",\"Zweifel\",\"Neugier\",\"Erkenntnis\",\"Machen\"];\nlet wordPositions = [];\nlet wordIndices = [];\nlet textFadeIn = 60;\n\nlet strokeW, diameterFactor, chaosWidthFactor, chaosHeightFactor;\nlet marginLeftFactor, marginRightFactor;\n\nfunction setup() {\n  const container = document.getElementById('sketch-container');\n  const w = container.offsetWidth;\n  const h = getResponsiveHeight(w);\n\n  canvas = createCanvas(w, h);\n  canvas.parent(container);\n\n  textFont(\"Agrandir\");\n  textStyle(BOLD);\n  textAlign(CENTER, CENTER);\n\n  setDeviceParams();\n  strokeWeight(strokeW);\n  generateAllPaths();\n}\n\nfunction windowResized() {\n  const container = document.getElementById('sketch-container');\n  const w = container.offsetWidth;\n  const h = getResponsiveHeight(w);\n\n  resizeCanvas(w, h);\n  drawLength = 6;\n\n  setDeviceParams();\n  strokeWeight(strokeW);\n  generateAllPaths();\n}\n\n\/\/ Desktop \/ Tablet \/ Mobile Parameter setzen\nfunction setDeviceParams() {\n  if (window.innerWidth < 600) { \/\/ Mobile\n    strokeW = 1;\n    diameterFactor = 0.5;\n    chaosWidthFactor = 0.85;\n    chaosHeightFactor = 0.85;\n    marginLeftFactor = 0.1;\n    marginRightFactor = 0.03;\n  } else if (window.innerWidth < 1150) { \/\/ Tablet\n    strokeW = 1.5;\n    diameterFactor = 0.99;\n    chaosWidthFactor = 0.6;\n    chaosHeightFactor = 0.7;\n  marginLeftFactor = 0.08;  \/\/ Tr\u00e4umen etwas weiter vom linken Rand\n  marginRightFactor = 0.07; \/\/ Machen etwas weiter vom rechten Rand\n  } else { \/\/ Desktop\n    strokeW = 2;\n    diameterFactor = 1.1;\n    chaosWidthFactor = 0.4;\n    chaosHeightFactor = 0.4;\n    marginLeftFactor = 0.05;\n    marginRightFactor = 0.05;\n  }\n\n  strokeWeight(strokeW);\n}\n\n\/\/ H\u00f6he \u00fcber feste Aspect-Ratio\nfunction getResponsiveHeight(containerWidth){\n  return containerWidth; \/\/ quadratisch f\u00fcr alle Ger\u00e4te\n}\n\nfunction draw() {\n  clear();\n  const colors = [color(0,0,0,30), color(0,0,0,50), color(0,0,0,255)];\n\n  for(let i=0;i<numLines;i++){\n    noFill();\n    stroke(colors[i]);\n    beginShape();\n    const path = paths[i];\n    const len = min(drawLength,path.length);\n    for(let j=0;j<len;j++){\n      curveVertex(path[j].x,path[j].y);\n    }\n    endShape();\n  }\n\n  let lastVisiblePos = null;\n\n  for(let i=0;i<words.length;i++){\n    if(drawLength>=wordIndices[i]){\n      const appearProgress = constrain(drawLength-wordIndices[i],0,textFadeIn);\n      const alpha = map(appearProgress,0,textFadeIn,0,255);\n      const pos = wordPositions[i].copy();\n\n      \/\/ erster und letzter Kreis verschieben nach Device-Rand\n      if(i === 0){\n        pos.x = max(pos.x, width * marginLeftFactor);\n      }\n      if(i === words.length-1){\n        pos.x = min(pos.x, width - width * marginRightFactor);\n      }\n\n      \/\/ sanfte Kreis-Animation\n      let diameter = 130 * diameterFactor * map(appearProgress,0,textFadeIn,0,1);\n      if(lastVisiblePos!==null){\n        let d = dist(pos.x,pos.y,lastVisiblePos.x,lastVisiblePos.y);\n        let minDistance = diameter * 0.85; \/\/ ca. 15% \u00dcberlappung\n        if(d < minDistance){\n          let angle = atan2(pos.y-lastVisiblePos.y, pos.x-lastVisiblePos.x);\n          pos.x = lastVisiblePos.x + cos(angle)*minDistance;\n          pos.y = lastVisiblePos.y + sin(angle)*minDistance;\n        }\n      }\n\n        fill(160, 70, 255, alpha * 0.55);\n      noStroke();\n      ellipse(pos.x,pos.y,diameter,diameter);\n\n      \/\/ dynamische Schriftgr\u00f6\u00dfe\n      let fontSize = 24 * diameterFactor;\n      if(window.innerWidth < 600) fontSize *= 1.2;\n      textSize(fontSize);\n      fill(255,alpha);\n      text(words[i],pos.x,pos.y);\n\n      lastVisiblePos = pos;\n    }\n  }\n\n  if(drawLength<totalPoints){\n    drawLength += animationSpeed;\n  }\n}\n\nfunction generateAllPaths(){\n  paths = [];\n  for(let i=0;i<numLines;i++){\n    paths.push(generateOrganicPath(i*1500));\n  }\n\n  wordPositions=[];\n  wordIndices=[];\n  const path = paths[2];\n\n  \/\/ Initiale Positionen bestimmen mit einmaliger Streuung\n  wordIndices.push(int(totalPoints*0.08));\n  wordPositions.push(addSpread(path[wordIndices[wordIndices.length-1]]));\n  for(let i=0;i<7;i++){\n    const index=int(map(i,0,6,totalPoints*0.25,totalPoints*0.78));\n    wordIndices.push(index);\n    wordPositions.push(addSpread(path[index]));\n  }\n  wordIndices.push(int(totalPoints*0.89));\n  wordPositions.push(addSpread(path[wordIndices[wordIndices.length-1]]));\n}\n\n\/\/ Funktion f\u00fcr einmalige Streuung im Chaos-Kn\u00e4uel\nfunction addSpread(pos){\n  let newPos = pos.copy();\n  const centerX = width\/2;\n  const centerY = height\/2;\n  const maxRadiusX = width * chaosWidthFactor \/ 2 * 0.85;\n  const maxRadiusY = height * chaosHeightFactor \/ 2 * 0.85;\n\n  let vecX = newPos.x - centerX;\n  let vecY = newPos.y - centerY;\n  let lenVec = sqrt(vecX*vecX + vecY*vecY);\n  if(lenVec > 0){\n    vecX \/= lenVec;\n    vecY \/= lenVec;\n    let spreadFactor = random(0.6, 0.9);\n    newPos.x += vecX * maxRadiusX * 0.2 * spreadFactor;\n    newPos.y += vecY * maxRadiusY * 0.2 * spreadFactor;\n  }\n  return newPos;\n}\n\nfunction generateOrganicPath(noiseOffset){\n  const points=[];\n  const startX=0;\n  const endX=width;\n  const centerX=width\/2;\n  const centerY=height\/2;\n  const chaosWidth = width * chaosWidthFactor;\n  const chaosHeight = height * chaosHeightFactor;\n\n  for(let i=0;i<totalPoints;i++){\n    const t=i\/(totalPoints-1);\n    let x,y;\n\n    if(t<0.25){\n      x=lerp(startX,centerX-chaosWidth\/2,t\/0.2);\n      y=centerY+noise(noiseOffset+i*0.01)*100-50;\n    } else if(t<0.75){\n      x=centerX+noise(noiseOffset+i*0.1)*chaosWidth-chaosWidth\/2;\n      y=centerY+noise(noiseOffset+200+i*0.1)*chaosHeight-chaosHeight\/2;\n    } else{\n      let exitT;\n      if(window.innerWidth < 600){\n        exitT = map(t,0.75,1,0,1.0);\n      } else {\n        exitT = map(t,0.75,1,0,1.4);\n      }\n      x = lerp(centerX + chaosWidth\/2 - 150, endX, exitT);\n      y = centerY + noise(noiseOffset + 400 + i*0.01)*100 - 50;\n    }\n\n    points.push(createVector(x,y));\n  }\n\n  return points;\n}\n<\/script>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-3be2920 e-flex e-con-boxed e-con e-parent\" data-id=\"3be2920\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-f9c2c9b elementor-widget elementor-widget-text-editor\" data-id=\"f9c2c9b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p style=\"font-weight: 600; text-align: center;\">Kreativit\u00e4t ist die Chance, der vorgefundenen Welt neue Dimensionen hinzuzuf\u00fcgen. Sie l\u00e4sst uns L\u00f6sungen finden und neue M\u00f6glichkeiten austesten.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b139640 elementor-widget elementor-widget-text-editor\" data-id=\"b139640\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p style=\"text-align: center;\">Wolf Singer<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-542664d9 e-flex e-con-boxed e-con e-parent\" data-id=\"542664d9\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-2b97afd7 e-con-full elementor-hidden-mobile e-flex e-con e-child\" data-id=\"2b97afd7\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-7879e19 e-con-full e-flex e-con e-child\" data-id=\"7879e19\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-2b612c27 elementor-widget elementor-widget-text-editor\" data-id=\"2b612c27\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<div>Tr\u00e4umen, Neugier, Mut, Inspiration, Staunen, Zweifel, Erkenntnis, Humor und Machen sind Phasen in kreativen Prozessen. Egal, wo du gerade stehst: Ich begleite dich auf <em>den verschlungenen Wegen vom Tr\u00e4umen ins Machen. <\/em><\/div><div>\u00a0<\/div><div>Dazu geh\u00f6rt es, neugierig zu sein, Zweifel zuzulassen, ins Staunen zu kommen, Chaos auszuhalten, Ziele neu zu definieren und schliesslich ins Machen zu kommen. So k\u00f6nnen Tr\u00e4ume, W\u00fcnsche, Ideen oder Visionen Schritt f\u00fcr Schritt Wirklichkeit werden.\u00a0<p>Empathie, Offenheit, Wertsch\u00e4tzung und echtes Interesse bilden die Basis meiner \u00e4sthetisch orientierten Beratung und Kreativit\u00e4tscoachings.<\/p><\/div>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Kreativit\u00e4t ist die Chance, der vorgefundenen Welt neue Dimensionen hinzuzuf\u00fcgen. Sie l\u00e4sst uns L\u00f6sungen finden und neue M\u00f6glichkeiten austesten. Wolf Singer Tr\u00e4umen, Neugier, Mut, Inspiration, Staunen, Zweifel, Erkenntnis, Humor und Machen sind Phasen in kreativen Prozessen. Egal, wo du gerade stehst: Ich begleite dich auf den verschlungenen Wegen vom Tr\u00e4umen ins Machen. \u00a0Dazu geh\u00f6rt es, [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":20,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-3334","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/neverstopdreaming.jooswolfangel.ch\/index.php?rest_route=\/wp\/v2\/pages\/3334","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/neverstopdreaming.jooswolfangel.ch\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/neverstopdreaming.jooswolfangel.ch\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/neverstopdreaming.jooswolfangel.ch\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/neverstopdreaming.jooswolfangel.ch\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=3334"}],"version-history":[{"count":0,"href":"https:\/\/neverstopdreaming.jooswolfangel.ch\/index.php?rest_route=\/wp\/v2\/pages\/3334\/revisions"}],"wp:attachment":[{"href":"https:\/\/neverstopdreaming.jooswolfangel.ch\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3334"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}