Home

Daily Sketch 2 - Symmetry

17 February 2023

It's kind of sad to find an old piece of code but after running it didn't give the same result as the original one. Most of my creative coding is CSS-based and rendered in the browser. Browsers and hardware change overtime, I realized that those works of mine are only viewable for a certain period of time.

Sometimes I think the code is part of the artwork if it's short enough for readability and utilizes some specific features that's worth to share. So code sharing should be fine with that willingness in mind. They won't last long in the browser after all.

What I find helpful is to take and keep the screenshots or share them in the wild so I can look back somewhere in the future. The code itself is less important compared to the idea behind the work.

---

As I was browsing through some old screenshots, one of them from last year caught my eye. Apparently more combinations could be made there, but somehow I moved on to something else at that time.

The idea is not new yet simple, creating a symmetrical structure by evenly dividing a circle with the given shape that rotates around it. The major part is the shape generation, which uses the @shape function that I wrote about before.

New explorations

There are so many results that I haven't seen before. Just changing the shape function will emerge something interesting.

clip-path: @shape(
  points: 200;
  frame: 20;
  scale: .5;
  x: (1 + sin(t)) * cos(t);
  y: -sin(t);
);
clip-path: @shape(
  points: 100;
  scale: .5 .9;
  x: (1 + sin(t)) * cos(t);
  y: -sin(t);
  frame: 18;
);
clip-path: @shape(
  points: 80;
  scale: .009;
  frame: 2000;
  r: 50*abs.sin(2t) - 90;
);
clip-path: @shape(
  points: 360;
  frame: 170;
  scale: .4;
  x: sin(t) + tan.sin(4t) +
     tan.sin(t);
  y: cos(9t) + tan.cos(3t) +
     tan.cos(8t);
);
clip-path: @shape(
  points: 120;
  scale: .225;
  x: sin(t) + tan.sin(4t) +
     tan.sin(t);
  y: cos(9t) + tan.cos(3t) +
     tan.cos(8t);
);
clip-path: @shape(
  points: 360;
  scale: .4;
  x: sin(t) + tan.cos(t) +
     tan.sin(t);
  y: cos(17t) + tan.cos(t) +
     tan.cos(t);
  frame: 50;
);
clip-path: @shape(
  points: 360;
  frame: 38;
  scale: 1.18;
  r: abs.sin.tan(sin(1.5t)*1.14);
);
clip-path: @shape(
  points: 200;
  scale: .5;
  r: cos(5t)^2 + sin(5t) + .4;
  frame: 40;
);
clip-path: @shape(
  points: 360;
  scale: .8;
  x: sin(t) + tan.sin(4t) +
     tan.sin(t);
  y: cos(9t) + tan.cos(3t) +
     tan.cos(8t);
  frame: 260;
);

Complete source code

There's the complete source code for the first one:

<css-doodle>
  @grid: 12x1 / 280px auto 1 / #1b2242;
  @seed: 1676602917230;
  @place: @plot(r: .5; dir: auto -90);
  @size: 50%;
  :container { filter: drop-shadow(0 -1px 0 #fff) }
  clip-path: @shape(rotate: 30);
  background: @doodle(
    background: radial-gradient(
      @m6.@P(#f2cc67,#f38264,#f40034,#5f051f,#75baa8)
    );
    clip-path: @shape(
      points: 200;
      frame: 20;
      scale: .5;
      x: (1 + sin(t)) * cos(t);
      y: -sin(t);
    );
  );
</css-doodle>

It's probably easier to create these patterns with GUI tools, however, I'd prefer tweaking code to dragging controls. It's slower but the excitement may last longer.