{"id":1573,"date":"2026-04-24T15:08:48","date_gmt":"2026-04-24T13:08:48","guid":{"rendered":"https:\/\/www.ellipsis.pink\/phl\/?page_id=1573"},"modified":"2026-04-24T15:32:03","modified_gmt":"2026-04-24T13:32:03","slug":"generative-art-sketches","status":"publish","type":"page","link":"https:\/\/www.ellipsis.pink\/phl\/?page_id=1573","title":{"rendered":"generative art: sketches"},"content":{"rendered":"\n<div class=\"wp-block-essential-blocks-advanced-heading  root-eb-advance-heading-b4857\"><div class=\"eb-parent-wrapper eb-parent-eb-advance-heading-b4857 \"><div class=\"eb-advance-heading-wrapper eb-advance-heading-b4857 button-1 waviy\" data-id=\"eb-advance-heading-b4857\"><h2 class=\"eb-ah-title\"><span class=\"first-title\">generative art: sketches<\/span><\/h2><\/div><\/div><\/div>\n\n\n\n<p><strong>Generative Sketches<\/strong>\u00a0presents my first experiments in comparing hand-drawn sketches with coded reinterpretations of them. The original drawings have a particular \u201calive\u201d quality, produced through intuitive marks, bodily rhythm, and small irregularities of the hand. In the generative sketches, this sense of aliveness is approached differently: through animation, repetition, multiplication, and variation within programming code. The works explore the tension between human irregularity and computational structure, asking how a hand-drawn logic that lives in the eye, hand, and sense of balance can be translated into a system\u00a0<\/p>\n\n\n\n<div style=\"height:55px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>The images on the left are the original inspiration  &#8211; on the right the same concept but created with  code<\/p>\n\n\n\n<p><\/p>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-group has-global-padding is-layout-constrained wp-block-group-is-layout-constrained\">\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-block-essential-blocks-image-comparison  root-eb-image-comparison-rw0ld\"><div class=\"eb-parent-wrapper eb-parent-eb-image-comparison-rw0ld \"><div class=\"eb-image-comparison-wrapper eb-image-comparison-rw0ld eb-image-comparison-align-center eb-label-horizontal-center\" data-left-image=\"https:\/\/www.ellipsis.pink\/phl\/wp-content\/uploads\/2026\/04\/doodle-1-800.jpg\" data-right-image=\"https:\/\/www.ellipsis.pink\/phl\/wp-content\/uploads\/2026\/04\/doodle-generative-800.jpg\" data-vertical-mode=\"false\" data-hover=\"true\" data-show-label=\"false\" data-slider-position=\"50\" data-line-width=\"4\" data-handle=\"false\"><div data-testid=\"container\"><img decoding=\"async\" alt=\"Left Image\" src=\"https:\/\/www.ellipsis.pink\/phl\/wp-content\/uploads\/2026\/04\/doodle-1-800.jpg\" data-testid=\"left-image\"\/><img decoding=\"async\" alt=\"Right Image\" src=\"https:\/\/www.ellipsis.pink\/phl\/wp-content\/uploads\/2026\/04\/doodle-generative-800.jpg\" data-testid=\"right-image\"\/><\/div><\/div><\/div><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"345\" height=\"800\" src=\"https:\/\/www.ellipsis.pink\/phl\/wp-content\/uploads\/2026\/04\/doodle-generative-chatgpt-made1.jpg\" alt=\"\" class=\"wp-image-1603\" style=\"aspect-ratio:0.35214285714285715;object-fit:cover;width:auto;height:410px\" srcset=\"https:\/\/www.ellipsis.pink\/phl\/wp-content\/uploads\/2026\/04\/doodle-generative-chatgpt-made1.jpg 345w, https:\/\/www.ellipsis.pink\/phl\/wp-content\/uploads\/2026\/04\/doodle-generative-chatgpt-made1-129x300.jpg 129w\" sizes=\"auto, (max-width: 345px) 100vw, 345px\" \/><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:230px\">\n<figure class=\"wp-block-video\"><video height=\"1662\" style=\"aspect-ratio: 906 \/ 1662;\" width=\"906\" controls loop src=\"https:\/\/www.ellipsis.pink\/phl\/wp-content\/uploads\/2026\/04\/ellipse-with-sound-video.mp4\"><\/video><\/figure>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<div style=\"height:65px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-group has-global-padding is-content-justification-right is-layout-constrained wp-container-core-group-is-layout-f1f2ed93 wp-block-group-is-layout-constrained\">\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"539\" src=\"http:\/\/www.ellipsis.pink\/phl\/wp-content\/uploads\/2026\/04\/multiple-ellipse-figures-1024x539.jpg\" alt=\"\" class=\"wp-image-1625\" srcset=\"https:\/\/www.ellipsis.pink\/phl\/wp-content\/uploads\/2026\/04\/multiple-ellipse-figures-1024x539.jpg 1024w, https:\/\/www.ellipsis.pink\/phl\/wp-content\/uploads\/2026\/04\/multiple-ellipse-figures-300x158.jpg 300w, https:\/\/www.ellipsis.pink\/phl\/wp-content\/uploads\/2026\/04\/multiple-ellipse-figures-768x405.jpg 768w, https:\/\/www.ellipsis.pink\/phl\/wp-content\/uploads\/2026\/04\/multiple-ellipse-figures.jpg 1139w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-group has-global-padding is-layout-constrained wp-container-core-group-is-layout-bea02a06 wp-block-group-is-layout-constrained\">\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"410\" height=\"589\" src=\"http:\/\/www.ellipsis.pink\/phl\/wp-content\/uploads\/2026\/04\/ellipse-drawing.jpg\" alt=\"\" class=\"wp-image-1591\" style=\"width:auto;height:589px\" srcset=\"https:\/\/www.ellipsis.pink\/phl\/wp-content\/uploads\/2026\/04\/ellipse-drawing.jpg 410w, https:\/\/www.ellipsis.pink\/phl\/wp-content\/uploads\/2026\/04\/ellipse-drawing-209x300.jpg 209w\" sizes=\"auto, (max-width: 410px) 100vw, 410px\" \/><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-block-gutenbergp5-p5js gutenbergp5-align-center\"><iframe srcdoc=\"\n        <!DOCTYPE html&gt;\n        <html&gt;\n            <body style=&quot;padding: 0; margin: 0;&quot;&gt;<\/body&gt;\n            <script src=&quot;https:\/\/www.ellipsis.pink\/phl\/wp-content\/plugins\/easy-p5-js-block\/\/assets\/js\/p5.min.js&quot;&gt;<\/script&gt;\n            <script&gt;\n                \/\/ Continuous asynchronous ellipse animation\n\/\/ p5.js version\n\/\/ Canvas: 595 x 842 px\n\nlet baseW = 500.0;\nlet baseH = 900.0;\n\n\/\/ x, y, w, h, strokeMin, strokeMax, rotation\nlet ellipseData = [\n  \/\/ upper area\n  [165,  85, 130,  55, 1.5, 3.5, -0.10],\n  [290,  70, 105,  65, 2.0, 4.5,  0.12],\n  [150, 145, 165,  45, 1.5, 3.5, -0.18],\n  [270, 160, 200, 105, 1.0, 2.5,  0.08],\n  [420, 140,  85,  55, 1.5, 3.5,  0.05],\n\n  \/\/ upper-middle cluster\n  [150, 245, 160,  80, 1.5, 3.5,  0.10],\n  [290, 255, 210,  70, 1.0, 2.5, -0.08],\n  [370, 280,  95,  45, 1.5, 3.5,  0.18],\n  [410, 300, 110, 175, 2.0, 4.5, -0.22],\n  [ 92, 310, 125,  60, 2.5, 5.5, -0.10],\n\n  \/\/ orange ellipses - bottom of top part\n  [250, 330, 120,  42, 1.4, 3.2,  0.10],\n  [345, 348, 150,  50, 1.5, 3.4, -0.20],\n  [140, 365, 115,  44, 1.4, 3.0,  0.28],\n\n  \/\/ extra red ellipses - middle section\n  [205, 350, 155,  52, 1.4, 3.2, -0.28],\n  [315, 360, 145,  48, 1.5, 3.4,  0.24],\n  [185, 475, 170,  58, 1.5, 3.5, -0.16],\n  [300, 525, 185,  62, 1.6, 3.6,  0.20],\n\n  \/\/ central area\n  [260, 390, 220,  75, 1.5, 3.5,  0.05],\n  [230, 420, 190, 120, 1.0, 2.5, -0.18],\n  [340, 430, 220,  70, 1.0, 2.5, -0.04],\n  [405, 410, 130,  95, 3.0, 6.5,  0.20],\n  [100, 430, 140,  80, 1.5, 3.5,  0.10],\n  [120, 500, 170,  90, 1.0, 2.5,  0.06],\n\n  \/\/ orange ellipses - top of bottom part\n  [105, 560, 135,  48, 1.5, 3.2, -0.18],\n  [260, 610, 160,  52, 1.5, 3.4,  0.22],\n  [365, 615, 125,  46, 1.4, 3.1, -0.14],\n\n  \/\/ lower-middle area\n  [180, 575, 220,  70, 1.5, 3.5,  0.04],\n  [315, 590, 210,  70, 1.0, 2.5,  0.10],\n  [110, 670, 140, 190, 2.0, 4.5, -0.32],\n  [275, 690, 200,  80, 2.0, 4.5,  0.14],\n  [390, 665, 135,  80, 1.5, 3.5, -0.26],\n  [195, 740, 120,  70, 2.0, 4.5, -0.20],\n\n  \/\/ bottom area\n  [250, 780, 220,  70, 1.5, 3.5,  0.05],\n  [330, 830, 135,  55, 2.5, 5.5,  0.16],\n  [395, 760, 115,  75, 1.0, 2.5,  0.16],\n  [410, 830, 140,  80, 1.0, 2.5,  0.18]\n];\n\nlet ellipseColors = [];\nlet ellipseAlpha = [];\n\nlet cycleProgress = [];\nlet cycleSpeed = [];\nlet startAngles = [];\n\nlet colRed;\nlet colBlue;\nlet colOrange;\nlet colGreen;\n\nfunction setup() {\n  createCanvas(417, 589);\n  smooth();\n\n  colRed = color(&quot;#CB2D58&quot;);\n  colBlue = color(&quot;#186593&quot;);\n  colOrange = color(&quot;#EA4909&quot;);\n  colGreen = color(&quot;#6EEA09&quot;);\n\n  ellipseColors = [\n    \/\/ upper area\n    colRed, colRed, colBlue, colRed, colGreen,\n\n    \/\/ upper-middle cluster\n    colRed, colRed, colOrange, colGreen, colBlue,\n\n    \/\/ orange - bottom of top part\n    colOrange, colOrange, colOrange,\n\n    \/\/ extra reds\n    colRed, colRed, colRed, colRed,\n\n    \/\/ central\n    colRed, colBlue, colGreen, colOrange, colBlue, colBlue,\n\n    \/\/ orange - top of bottom part\n    colOrange, colOrange, colOrange,\n\n    \/\/ lower-middle\n    colRed, colOrange, colBlue, colRed, colGreen, colOrange,\n\n    \/\/ bottom\n    colRed, colBlue, colGreen, colGreen\n  ];\n\n  ellipseAlpha = [\n    \/\/ upper area\n    255, 255, 255, 120, 255,\n\n    \/\/ upper-middle cluster\n    255, 255, 255, 255, 255,\n\n    \/\/ orange - bottom of top part\n    255, 255, 255,\n\n    \/\/ extra reds\n    255, 255, 255, 255,\n\n    \/\/ central\n    255, 255, 255, 255, 255, 255,\n\n    \/\/ orange - top of bottom part\n    255, 255, 255,\n\n    \/\/ lower-middle\n    255, 255, 255, 255, 255, 255,\n\n    \/\/ bottom\n    255, 255, 255, 255\n  ];\n\n  for (let i = 0; i < ellipseData.length; i++) {\n    cycleProgress[i] = random(1);\n    cycleSpeed[i] = random(0.004, 0.012);\n    startAngles[i] = random(TWO_PI);\n  }\n}\n\nfunction draw() {\n background(&quot;#FAF6ED&quot;);\n\n  let sx = width \/ baseW;\n  let sy = height \/ baseH;\n  let sStroke = min(sx, sy);\n\n  for (let i = 0; i < ellipseData.length; i++) {\n    let amount;\n\n    if (cycleProgress[i] < 0.5) {\n      amount = map(cycleProgress[i], 0.0, 0.5, 0.0, 1.0);\n    } else {\n      amount = map(cycleProgress[i], 0.5, 1.0, 1.0, 0.0);\n    }\n\n    variedEllipseAnimated(\n      ellipseData[i][0] * sx,\n      ellipseData[i][1] * sy,\n      ellipseData[i][2] * sx,\n      ellipseData[i][3] * sy,\n      ellipseData[i][4] * sStroke,\n      ellipseData[i][5] * sStroke,\n      ellipseData[i][6],\n      ellipseColors[i],\n      ellipseAlpha[i],\n      amount,\n      startAngles[i]\n    );\n\n    cycleProgress[i] += cycleSpeed[i];\n\n    if (cycleProgress[i] &gt;= 1.0) {\n      cycleProgress[i] = 0.0;\n      startAngles[i] = random(TWO_PI);\n      cycleSpeed[i] = random(0.004, 0.012);\n    }\n  }\n}\n\n\/\/ Draw part of a rotated ellipse using many short line segments\n\/\/ with thin -&gt; thick -&gt; thin stroke variation\nfunction variedEllipseAnimated(cx, cy, w, h, swMin, swMax, rot, c, alphaVal, amount, startA) {\n  if (amount <= 0.001) return;\n\n  let step = 0.04;\n  let endA = startA + amount * TWO_PI;\n\n  stroke(red(c), green(c), blue(c), alphaVal);\n  noFill();\n\n  for (let a = startA; a < endA; a += step) {\n    let nextA = min(a + step, endA);\n\n    let lx1 = cos(a) * w \/ 2.0;\n    let ly1 = sin(a) * h \/ 2.0;\n\n    let lx2 = cos(nextA) * w \/ 2.0;\n    let ly2 = sin(nextA) * h \/ 2.0;\n\n    let x1 = cx + cos(rot) * lx1 - sin(rot) * ly1;\n    let y1 = cy + sin(rot) * lx1 + cos(rot) * ly1;\n\n    let x2 = cx + cos(rot) * lx2 - sin(rot) * ly2;\n    let y2 = cy + sin(rot) * lx2 + cos(rot) * ly2;\n\n    let wrappedA = ((a % TWO_PI) + TWO_PI) % TWO_PI;\n    let t = wrappedA \/ TWO_PI;\n\n    let sw;\n\n    if (t < 0.5) {\n      sw = lerp(swMin, swMax, t * 2.0);\n    } else {\n      sw = lerp(swMax, swMin, (t - 0.5) * 2.0);\n    }\n\n    strokeWeight(sw);\n    line(x1, y1, x2, y2);\n  }\n}\n            <\/script&gt;\n        <\/html&gt;\" sandbox=\"allow-scripts allow-same-origin\" scrolling=\"no\" style=\"overflow:hidden;\" width=\"\" height=\"\" class=\"\" title=\"p5.js canvas\"><\/iframe><\/div>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Generative Sketches\u00a0presents my first experiments in comparing hand-drawn sketches with coded reinterpretations of them. The original drawings have a particular \u201calive\u201d quality, produced through intuitive marks, bodily rhythm, and small irregularities of the hand. In the generative sketches, this sense of aliveness is approached differently: through animation, repetition, multiplication, and variation within programming code. The [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"single-pages-no-submenu","meta":{"_eb_attr":"","footnotes":""},"class_list":["post-1573","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.ellipsis.pink\/phl\/index.php?rest_route=\/wp\/v2\/pages\/1573","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.ellipsis.pink\/phl\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.ellipsis.pink\/phl\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.ellipsis.pink\/phl\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.ellipsis.pink\/phl\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1573"}],"version-history":[{"count":43,"href":"https:\/\/www.ellipsis.pink\/phl\/index.php?rest_route=\/wp\/v2\/pages\/1573\/revisions"}],"predecessor-version":[{"id":1627,"href":"https:\/\/www.ellipsis.pink\/phl\/index.php?rest_route=\/wp\/v2\/pages\/1573\/revisions\/1627"}],"wp:attachment":[{"href":"https:\/\/www.ellipsis.pink\/phl\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1573"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}