CodePen Embed - Pentaplexity fractal

Live

This Pen is owned by Ivan Tsyganov on CodePen.

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.

{"__browser":{"country":"US","device":"unknown_device","mobile":false,"name":"unknown browser","platform":"unknown_platform","version":"0"},"__constants":{},"__CPDATA":{"domain_iframe":"https://cdpn.io","environment":"production","host":"codepen.io","iframe_allow":"accelerometer *; ambient-light-sensor *; camera *; display-capture *; encrypted-media *; geolocation *; gyroscope *; microphone *; midi *; payment *; vr *; web-share *; serial *; xr-spatial-tracking *","iframe_sandbox":"allow-downloads allow-forms allow-modals allow-pointer-lock allow-popups-to-escape-sandbox allow-popups allow-presentation allow-same-origin allow-scripts allow-top-navigation-by-user-activation"},"__graphql":{"data":{"errors":[{"message":"Cannot return null for non-nullable field Query.sessionUser"}],"data":null},"url":"https://codepen.io/graphql","api":"cprails"},"__pay_stripe_public_key":"pk_live_2GndomDfiklqpSNQn8FrGuwZSMIMzha7DkLJqlYe7IR0ihKAlKdiHg68JJc5eVPt68rzAjzAAVXcUwjySHRCsgjQQ00gtRBUFNH","__pay_braintree_env":"production","__boomboom":{"serve_url":"https://cdpn.io/cpe/boomboom","store_url":"https://codepen.io/cpe/boomboom/store"},"__pageType":"embed","__item":"{\"editor_settings\":{\"auto_run\":true,\"autocomplete\":false,\"code_folding\":true,\"css_pre_processor\":\"none\",\"css_prefix\":\"neither\",\"css_starter\":\"neither\",\"emmet_active\":true,\"font_size\":14,\"font_type\":\"system\",\"format_on_save\":false,\"html_pre_processor\":\"none\",\"indent_with\":\"spaces\",\"js_pre_processor\":\"none\",\"key_bindings\":\"normal\",\"line_numbers\":true,\"line_wrapping\":true,\"match_brackets\":true,\"snippets\":{\"markupSnippets\":{},\"stylesheetSnippets\":{}},\"tab_size\":2,\"theme\":\"twilight\",\"id\":\"GRBEQOx\",\"auto_save\":true},\"hashid\":\"GRBEQOx\",\"itemType\":\"pen\",\"resources\":[],\"tags\":[],\"id\":65712985,\"user_id\":9252248,\"html\":\"\\n<canvas id='drawing' width = 600 height=600>\\n</canvas> \",\"css\":\"#drawing{\\n  border: 1px solid black\\n}\",\"js\":\"function rad(degrees)\\n{\\n  return (Math.PI / 180) * degrees\\n}\\n\\nlet canvas = document.getElementById('drawing')\\nlet ctx = canvas.getContext('2d')\\n\\nlet t = 1;\\nfunction pixel(x, y, color)\\n{\\n  ctx.fillRect(x, y, 1, 1)\\n}\\n\\nfunction elIn(el, iter)\\n{\\n  for (let i in iter) if (iter[i] == el) return true\\n  return false\\n}\\nfunction inRule(el, iter)\\n{\\n  for (let i in iter) if (i == el) return true\\n  return false\\n}\\n\\nfunction lg (iter, base, rule)\\n{\\n  if (iter == 0 ) return base\\n  let s = ''\\n  let cur = base;\\n  for (let k = 0; k < iter; k++)\\n    { s = ''\\n      for (let i in cur) \\n        {\\n          if (inRule(cur[i], rule))\\n            {\\n              s += rule[cur[i]]\\n            }\\n          else s += cur[i]\\n        }\\n      cur = s;\\n    }\\n  return cur;\\n}\\nlet angle = 0\\nlet x = 300, y =300\\nlet base_angle = 90\\nlet distance = 50\\nfunction forward(distance)\\n{ ctx.beginPath()\\n  ctx.moveTo(x, y)\\n  let x_destination = distance\\n  let y_destination = 0;\\n  let x_rotated = x_destination * Math.cos(rad(angle)) - y_destination * Math.sin(rad(angle))\\n  let y_rotated = x_destination  * Math.sin(rad(angle)) + y_destination * Math.cos(rad(angle)) \\n  x_rotated += x\\n  y_rotated += y\\n  ctx.strokeStyle = distColor(x_rotated, y_rotated)\\n  ctx.lineTo(x_rotated, y_rotated)\\n  ctx.stroke()\\n ctx.closePath()\\n  x = x_rotated\\n  y = y_rotated\\n  x_max = Math.max(x_max, x)\\n  x_min = Math.min(x_min, x)\\n  y_max = Math.max(y_max, y)\\n  y_min = Math.min(y_min, y)\\n  \\n}\\n\\nfunction right()\\n{\\n angle += base_angle \\n}\\nfunction left()\\n{\\n  angle -= base_angle\\n}\\nfunction draw_lg (s_lg)\\n{ ctx.lineWidth=3\\n  ctx.beginPath()\\n  ctx.moveTo(x, y)\\n  for (let i of s_lg)\\n    {\\n      if (i == 'F') forward(distance)\\n      if (i == '+') left()\\n      if (i == '-') right()\\n    }\\n   ctx.stroke()\\n   ctx.closePath()\\n   angle = 0\\n}\\n\\nx_max = 0\\nx_min = 1000\\ny_max = 0\\ny_min = 1000\\n\\nfunction distColor(x, y)\\n{ \\n  let r = (x - 300) * (x - 300) + (y -300) *(y-300)\\n  if (x > 300)\\n  return `rgb(${100},50,${200 * Math.sqrt(r)/300})`\\n  else \\n     return `rgb(${200 *Math.sqrt(r)/300},50,${100})`\\n     //`rgb(${200 * Math.sqrt(r)/300},100,${200 * Math.sqrt(r)/300})`\\n}\\n let x_start = 100\\n let y_start = 450\\nfunction draw(iter)\\n{ \\n  x_max = 0\\n  x_min = 1000\\n  y_max = 0\\n  y_min = 1000\\n  let  s_lg = lg(iter, axiom, rules)\\n  //distance = 20 * 580.6888370749682/length[iter] \\n  distance =  358.8854381999805 / Math.pow(coeff, iter)\\n  x = x_start\\n  y = y_start\\n  //draw_lg(s_lg)\\n  ctx.fillStyle = \\\"rgba(255, 255, 255, 0.8)\\\";\\n  ctx.fillRect(0, 0, canvas.width,     canvas.height);\\n  //console.log(distance)\\n  //center_x = 300 - (x_max + x_min)/2\\n  //center_y = 300 - (y_max + y_min)/2\\n  // 20.55728090000997 126.13395122000176\\n //console.log(center_x, center_y)\\n  x = x_start+20.55728090000997\\n  y = y_start+126.13395122000176\\n  draw_lg(s_lg)\\n  angle = 0\\n}\\nlet coeff = 2.618033988749895;\\ndistance = 358.8854381999805;\\n//length =[32.36067977499789,84.72135954999578,221.80339887498943,580.6888370749682]\\n//for (let i = 0;i<3;i++) console.log(length[i+1]/length[i])\\naxiom = \\\"F++F++F++F++F\\\"\\nrules = {\\\"F\\\":\\\"F++F++F+++++F-F++F\\\"}\\niterations = 3 \\nbase_angle = 36\\ndistance = 20\\n\\n/*s = lg(3, axiom, rules)\\nconsole.log(s)\\nx_start = 100\\ny_start = 450\\nx = x_start\\ny = y_start\\ndraw_lg(s)\\nctx.clearRect(0,0,600,600)\\n\\ncenter_x = 300 - (x_max + x_min)/2\\ncenter_y = 300 - (y_max + y_min)/2\\n\\n\\nx = x_start+center_x\\ny = y_start+center_y\\ndraw_lg(s)\\n*/\\n/*ctx.clearRect(0,0, 600,600)\\nctx.translate(-center_x, -center_y)\\nx = x_start\\ny = y_start\\ndraw_lg(s)\\n*/\\n\\n//draw(5)\\n\\niter = 0\\nlet timerId = setInterval(() => {draw(iter); iter+=1; if (iter>5) iter =0;}, 3000);\\n\",\"html_pre_processor\":\"none\",\"css_pre_processor\":\"none\",\"js_pre_processor\":\"none\",\"html_classes\":\"\",\"css_starter\":\"neither\",\"js_library\":null,\"created_at\":\"2023-01-13T16:51:19.252Z\",\"updated_at\":\"2023-01-14T17:35:46.334Z\",\"title\":\"Pentaplexity fractal\",\"description\":\"\",\"slug_hash\":\"GRBEQOx\",\"head\":\"\",\"private\":false,\"has_animation\":true,\"team_id\":0,\"css_prefix\":\"neither\",\"template\":true,\"parent_id\":65708796,\"comments_count\":0,\"custom_screenshot_filename\":null,\"loves_count\":0,\"pick\":false,\"popularity_score\":0,\"views_count\":0,\"pick_visible_at\":null,\"cpid\":\"0185ac0a-fc54-74c7-97f0-27d656c6ccf3\",\"is_new_editor_pen\":false,\"protected\":false,\"access\":\"Public\",\"pen_hash\":null}","__processorsMap":{"autoprefixer":"autoprefixer-10","babel":"babel-7","coffeescript":"coffeescript-2","format-1":"format-1","flutter":"flutter-1","haml":"haml-4","less":"less-3","lint-1":"lint-1","livescript":"livescript-1","markdown":"markdown-11","postcss":"postcss-7","pug":"pug-2","sass":"sass-1","scss":"sass-1","sass-ruby-3":"sass-ruby-3","sass-ruby-compass-3":"sass-ruby-compass-3","slim":"slim-3","stylus":"stylus-0","typescript":"typescript-4","vue":"vue-2","vue3":"vue-3"},"__favicon_mask_icon":"https://cpwebassets.codepen.io/assets/favicon/logo-pin-b4b4269c16397ad2f0f7a01bcdf513a1994f4c94b8af2f191c09eb0d601762b1.svg","__favicon_shortcut_icon":"https://cpwebassets.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico","__path_to_iframe_console_runner":"https://cpwebassets.codepen.io/assets/editor/iframe/iframeConsoleRunner-6d8bf8b4b479137260842506acbb12717dace0823c023e08b96360e60b0840d9.js","__path_to_iframe_refresh_css":"https://cpwebassets.codepen.io/assets/editor/iframe/iframeRefreshCSS-44fe83e49b63affec96918c9af88c0d80b209a862cf87ac46bc933074b8c557d.js","__path_to_iframe_runtime_errors":"https://cpwebassets.codepen.io/assets/editor/iframe/iframeRuntimeErrors-4f205f2c14e769b448bcf477de2938c681660d5038bc464e3700256713ebe261.js","__path_to_processor_worker":"https://cpwebassets.codepen.io/assets/packs/router.js","__path_to_stop_execution_on_timeout":"https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-2c7831bb44f98c1391d6a4ffda0e1fd302503391ca806e7fcc7b9b87197aec26.js","__pen_normalize_css_url":"https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css","__pen_prefix_free_url":"https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js","__pen_reset_css_url":"https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"}