<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Peter Teoh</title>
    <description>The latest articles on DEV Community by Peter Teoh (@tthtlc).</description>
    <link>https://dev.to/tthtlc</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F292312%2F3e49b15e-e558-4319-aa53-1da2aaa2efb8.png</url>
      <title>DEV Community: Peter Teoh</title>
      <link>https://dev.to/tthtlc</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/tthtlc"/>
    <language>en</language>
    <item>
      <title>Difference between filesystem and database at the low level</title>
      <dc:creator>Peter Teoh</dc:creator>
      <pubDate>Wed, 20 Aug 2025 08:17:48 +0000</pubDate>
      <link>https://dev.to/tthtlc/difference-between-filesystem-and-database-at-the-low-level-3220</link>
      <guid>https://dev.to/tthtlc/difference-between-filesystem-and-database-at-the-low-level-3220</guid>
      <description>&lt;p&gt;"At low level" here means at the CPU and storage devices' block level.   &lt;/p&gt;

&lt;p&gt;Filesystems and databases are more similar than people think: both are storage managers that try to provide &lt;strong&gt;consistency, durability, and concurrency&lt;/strong&gt; over bytes/records. Below we described how database' ACID properties (Atomicity, Consistency, Isolation and Durability) mapped to filesystem internals.&lt;/p&gt;




&lt;h2&gt;
  
  
  1. &lt;strong&gt;Atomicity&lt;/strong&gt;
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Database view:&lt;/strong&gt; A transaction is “all or nothing.” Either all SQL operations commit, or none.&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Filesystem equivalent:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;code&gt;rename(2)&lt;/code&gt; in POSIX is atomic: the new filename is guaranteed to either point to the new inode or the old one, never half-written.&lt;/li&gt;
&lt;li&gt;Journaling filesystems (ext4, NTFS, XFS, btrfs) implement &lt;strong&gt;write-ahead logs&lt;/strong&gt; or copy-on-write (COW). Example:&lt;/li&gt;
&lt;li&gt;ext4’s &lt;code&gt;fs/jbd2/&lt;/code&gt; journaling code logs metadata blocks first, then marks them committed.&lt;/li&gt;
&lt;li&gt;If crash occurs, replay ensures either the old inode/blocks are visible or the fully new ones—never a mix.&lt;/li&gt;
&lt;li&gt;Code path: in Linux ext4, see &lt;a href="https://elixir.bootlin.com/linux/latest/source/fs/ext4/namei.c" rel="noopener noreferrer"&gt;&lt;code&gt;fs/ext4/namei.c: ext4_rename()&lt;/code&gt;&lt;/a&gt; → calls journaling routines in [&lt;code&gt;fs/jbd2/transaction.c&lt;/code&gt;] for atomic commit.&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;

&lt;/ul&gt;




&lt;h2&gt;
  
  
  2. &lt;strong&gt;Consistency&lt;/strong&gt;
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Database view:&lt;/strong&gt; A transaction moves the DB from one valid state to another (constraints preserved).&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Filesystem equivalent:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Journaling or COW ensures metadata integrity: block allocation bitmaps, inodes, directory entries are always in a self-consistent state after crash recovery.&lt;/li&gt;
&lt;li&gt;Example: ext4 journals metadata operations in &lt;code&gt;struct handle_s&lt;/code&gt; (see &lt;code&gt;fs/jbd2/transaction.c&lt;/code&gt;) and replays them fully or not at all.&lt;/li&gt;
&lt;li&gt;Constraints in FS: free block counters match actual free blocks, no directory entry points to garbage, reference counts are accurate. Similar to DB enforcing primary key/foreign key rules.&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;

&lt;/ul&gt;




&lt;h2&gt;
  
  
  3. &lt;strong&gt;Isolation&lt;/strong&gt;
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Database view:&lt;/strong&gt; Concurrent transactions don’t interfere (enforced by locks, MVCC).&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Filesystem equivalent:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Locks:&lt;/strong&gt; VFS provides inode-level locks (&lt;code&gt;struct inode-&amp;gt;i_rwsem&lt;/code&gt;, &lt;code&gt;struct file_lock&lt;/code&gt;) to serialize writers and coordinate readers.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Concurrent isolation:&lt;/strong&gt; A file write + rename from one process is isolated from another process reading—Linux uses lock ordering in &lt;code&gt;fs/read_write.c&lt;/code&gt; and journaling barriers.&lt;/li&gt;
&lt;li&gt;Ext4’s journal transaction handles are per-thread, isolating concurrent FS operations until commit.&lt;/li&gt;
&lt;li&gt;Isolation is weaker than DB MVCC: FS usually provides &lt;em&gt;serializability for metadata&lt;/em&gt; but not full snapshot isolation for data blocks. (e.g., readers can see partially written data unless &lt;code&gt;O_DIRECT&lt;/code&gt; or &lt;code&gt;O_SYNC&lt;/code&gt; is used).&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;

&lt;/ul&gt;




&lt;h2&gt;
  
  
  4. &lt;strong&gt;Durability&lt;/strong&gt;
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Database view:&lt;/strong&gt; Once commit is acknowledged, data survives power loss.&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Filesystem equivalent:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Journaling (ext4/NTFS) or COW (btrfs, ZFS) ensures committed changes are persisted.&lt;/li&gt;
&lt;li&gt;In Linux ext4: &lt;code&gt;jbd2_journal_commit_transaction()&lt;/code&gt; flushes journal blocks with &lt;code&gt;blkdev_issue_flush()&lt;/code&gt; before reporting success.&lt;/li&gt;
&lt;li&gt;ZFS and btrfs use &lt;strong&gt;copy-on-write B-trees&lt;/strong&gt;: old blocks stay untouched until new blocks + metadata are fsync’d. After crash, replay ensures new committed tree root is used.&lt;/li&gt;
&lt;li&gt;Applications rely on &lt;code&gt;fsync(2)&lt;/code&gt; or &lt;code&gt;fdatasync(2)&lt;/code&gt; to push buffers to disk—similar to DB &lt;code&gt;COMMIT&lt;/code&gt;.&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;

&lt;/ul&gt;




&lt;h2&gt;
  
  
  5. &lt;strong&gt;Mapping Table&lt;/strong&gt;
&lt;/h2&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;&lt;strong&gt;ACID Property&lt;/strong&gt;&lt;/th&gt;
&lt;th&gt;&lt;strong&gt;Database&lt;/strong&gt;&lt;/th&gt;
&lt;th&gt;&lt;strong&gt;Filesystem Equivalent&lt;/strong&gt;&lt;/th&gt;
&lt;th&gt;&lt;strong&gt;Source Code (Linux/Ext4)&lt;/strong&gt;&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;Atomicity&lt;/td&gt;
&lt;td&gt;Transaction commit/rollback&lt;/td&gt;
&lt;td&gt;
&lt;code&gt;rename(2)&lt;/code&gt;, journaling of inode/dir updates&lt;/td&gt;
&lt;td&gt;&lt;code&gt;fs/ext4/namei.c:ext4_rename()&lt;/code&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Consistency&lt;/td&gt;
&lt;td&gt;Constraints preserved&lt;/td&gt;
&lt;td&gt;Journaling replays to keep block/inode maps valid&lt;/td&gt;
&lt;td&gt;&lt;code&gt;fs/jbd2/transaction.c&lt;/code&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Isolation&lt;/td&gt;
&lt;td&gt;Locks/MVCC&lt;/td&gt;
&lt;td&gt;Inode/file locks, per-handle journaling isolation&lt;/td&gt;
&lt;td&gt;
&lt;code&gt;fs/inode.c&lt;/code&gt;, &lt;code&gt;include/linux/fs.h&lt;/code&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Durability&lt;/td&gt;
&lt;td&gt;WAL + fsync&lt;/td&gt;
&lt;td&gt;Journal flush (&lt;code&gt;jbd2_journal_commit_transaction&lt;/code&gt;) or COW flush&lt;/td&gt;
&lt;td&gt;&lt;code&gt;fs/jbd2/commit.c&lt;/code&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;




&lt;h2&gt;
  
  
  6. &lt;strong&gt;Key Difference&lt;/strong&gt;
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;Databases implement &lt;em&gt;logical consistency&lt;/em&gt; (foreign keys, uniqueness).&lt;/li&gt;
&lt;li&gt;Filesystems implement &lt;em&gt;structural consistency&lt;/em&gt; (inodes, block bitmaps).&lt;/li&gt;
&lt;li&gt;DB durability guarantees apply &lt;strong&gt;once commit returns&lt;/strong&gt;, FS durability only applies &lt;strong&gt;once app calls fsync&lt;/strong&gt;. Many apps forget fsync—leading to “committed but lost” anomalies.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Database ACID properties maps fairly well onto modern journaling or COW filesystems.   Filesystem is a &lt;em&gt;weaker transactional database&lt;/em&gt; specialized for file/inode structures. The kernel code shows the same primitives: &lt;strong&gt;logging, locking, atomic renames, and recovery replays&lt;/strong&gt;.&lt;/p&gt;

</description>
    </item>
    <item>
      <title>New ChatGPT creation: wavy lines.</title>
      <dc:creator>Peter Teoh</dc:creator>
      <pubDate>Fri, 06 Dec 2024 02:41:35 +0000</pubDate>
      <link>https://dev.to/tthtlc/new-chatgpt-creation-wavy-lines-1ai8</link>
      <guid>https://dev.to/tthtlc/new-chatgpt-creation-wavy-lines-1ai8</guid>
      <description>&lt;p&gt;My latest creation via ChatGPT:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://tthtlc.github.io/wavylines2.html" rel="noopener noreferrer"&gt;https://tthtlc.github.io/wavylines2.html&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fxcfa95qfmkp7vr597sbn.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fxcfa95qfmkp7vr597sbn.png" alt="Image description" width="800" height="634"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fj4crqnqwx00yghkk1rnw.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fj4crqnqwx00yghkk1rnw.png" alt="Image description" width="800" height="634"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://tthtlc.github.io/wavylines.html" rel="noopener noreferrer"&gt;https://tthtlc.github.io/wavylines.html&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ffwxdl96pko0g7sop5egd.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ffwxdl96pko0g7sop5egd.png" alt="Image description" width="800" height="718"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fqpveiobm31y6tr79nvzb.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fqpveiobm31y6tr79nvzb.png" alt="Image description" width="800" height="330"&gt;&lt;/a&gt;&lt;/p&gt;

</description>
    </item>
    <item>
      <title>Drawing lines on the circle</title>
      <dc:creator>Peter Teoh</dc:creator>
      <pubDate>Wed, 04 Dec 2024 04:37:41 +0000</pubDate>
      <link>https://dev.to/tthtlc/drawing-lines-on-the-circle-1cd3</link>
      <guid>https://dev.to/tthtlc/drawing-lines-on-the-circle-1cd3</guid>
      <description>&lt;p&gt;Take your imagination to the next level so so many variations:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://hackgptdeveloper.github.io/2024/12/04/heart5.html" rel="noopener noreferrer"&gt;https://hackgptdeveloper.github.io/2024/12/04/heart5.html&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fbn14sj2uqk7o4ph2gxew.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fbn14sj2uqk7o4ph2gxew.png" alt="Image description" width="599" height="596"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fzc7346mm4w7z3eezvrf1.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fzc7346mm4w7z3eezvrf1.png" alt="Image description" width="605" height="602"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F0444ofc5kvsjui3l08qg.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F0444ofc5kvsjui3l08qg.png" alt="Image description" width="605" height="602"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Foibsgshz9mu4zkjlrrt0.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Foibsgshz9mu4zkjlrrt0.png" alt="Image description" width="605" height="602"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fxlmepcxcus9ooalf4tm3.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fxlmepcxcus9ooalf4tm3.png" alt="Image description" width="599" height="596"&gt;&lt;/a&gt;&lt;/p&gt;

</description>
    </item>
    <item>
      <title>Lines joing two curves</title>
      <dc:creator>Peter Teoh</dc:creator>
      <pubDate>Tue, 03 Dec 2024 01:12:14 +0000</pubDate>
      <link>https://dev.to/tthtlc/lines-joing-two-curves-5a9p</link>
      <guid>https://dev.to/tthtlc/lines-joing-two-curves-5a9p</guid>
      <description>&lt;p&gt;Here are lines joining two curves in space:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://hackgptdeveloper.github.io/2024/12/03/flower-in-motion-v2.html" rel="noopener noreferrer"&gt;https://hackgptdeveloper.github.io/2024/12/03/flower-in-motion-v2.html&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://hackgptdeveloper.github.io/2024/12/02/flower-in-motion.html" rel="noopener noreferrer"&gt;https://hackgptdeveloper.github.io/2024/12/02/flower-in-motion.html&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ftc4l4dk2dinofxsh93ll.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ftc4l4dk2dinofxsh93ll.png" alt="Image description" width="432" height="423"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fnadsske0l28jceq6608v.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fnadsske0l28jceq6608v.png" alt="Image description" width="432" height="423"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F1u4kth9qwn0m2ruazxuh.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F1u4kth9qwn0m2ruazxuh.png" alt="Image description" width="432" height="423"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fkxqt5hxslrjiuq56hruk.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fkxqt5hxslrjiuq56hruk.png" alt="Image description" width="432" height="423"&gt;&lt;/a&gt;&lt;/p&gt;

</description>
    </item>
    <item>
      <title>Another new (generalized) formula for graphics</title>
      <dc:creator>Peter Teoh</dc:creator>
      <pubDate>Tue, 03 Dec 2024 00:37:23 +0000</pubDate>
      <link>https://dev.to/tthtlc/another-new-generalized-formula-for-graphics-g4g</link>
      <guid>https://dev.to/tthtlc/another-new-generalized-formula-for-graphics-g4g</guid>
      <description>&lt;p&gt;Have fun playing with the new graphics:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://hackgptdeveloper.github.io/2024/12/02/hypotrochoid-v4-explore.html" rel="noopener noreferrer"&gt;https://hackgptdeveloper.github.io/2024/12/02/hypotrochoid-v4-explore.html&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F4tytkeypn571cmire6tu.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F4tytkeypn571cmire6tu.png" alt="Image description" width="800" height="714"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fqj1r3hoc2j43sagt3nzp.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fqj1r3hoc2j43sagt3nzp.png" alt="Image description" width="800" height="818"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F1r9kutf3h7hi35qxf1f8.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F1r9kutf3h7hi35qxf1f8.png" alt="Image description" width="800" height="832"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F3s3fqjkss1du4fwb1t08.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F3s3fqjkss1du4fwb1t08.png" alt="Image description" width="800" height="844"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://hackgptdeveloper.github.io/2024/12/02/hypotrochoid-v4-explore.html" rel="noopener noreferrer"&gt;https://hackgptdeveloper.github.io/2024/12/02/hypotrochoid-v4-explore.html&lt;/a&gt;&lt;/p&gt;

</description>
    </item>
    <item>
      <title>Great fun playing with hypotrochoid</title>
      <dc:creator>Peter Teoh</dc:creator>
      <pubDate>Sun, 01 Dec 2024 16:09:26 +0000</pubDate>
      <link>https://dev.to/tthtlc/great-fun-playing-19he</link>
      <guid>https://dev.to/tthtlc/great-fun-playing-19he</guid>
      <description>&lt;p&gt;Introducing a simple formula for experimentation:&lt;/p&gt;

&lt;p&gt;x = (R - r) * Math.cos(f1*t) * (1 + Math.cos(f2*t)) + d * Math.cos(((R - r) / r) * t);&lt;/p&gt;

&lt;p&gt;y = (R - r) * Math.sin(f1*t) * (1 + Math.cos(f2*t)) - d * Math.sin(((R - r) / r) * t);&lt;/p&gt;

&lt;p&gt;where R, r, d, f1, f2 are different tunable parameter.   The path of (x,y) as t varies will generate the graphics as shown in the following writeup:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://hackgptdeveloper.github.io/2024/12/01/hypotrochoid-v3-explore.html" rel="noopener noreferrer"&gt;https://hackgptdeveloper.github.io/2024/12/01/hypotrochoid-v3-explore.html&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;For example: &lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fenn23s3xjp0p2wikocea.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fenn23s3xjp0p2wikocea.png" alt="Image description" width="446" height="478"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fk3u1uo1juf9nf6mcttis.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fk3u1uo1juf9nf6mcttis.png" alt="Image description" width="800" height="790"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fzx8bihrpd92ifdd9d38j.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fzx8bihrpd92ifdd9d38j.png" alt="Image description" width="698" height="727"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fqykl6ppesezkgu214bh0.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fqykl6ppesezkgu214bh0.png" alt="Image description" width="418" height="444"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F1fo473az27lk70aiihu6.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F1fo473az27lk70aiihu6.png" alt="Image description" width="320" height="243"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fsiwjvt1g2swo6efr1mmy.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fsiwjvt1g2swo6efr1mmy.png" alt="Image description" width="485" height="525"&gt;&lt;/a&gt;&lt;/p&gt;

</description>
    </item>
    <item>
      <title>two new creation for you today</title>
      <dc:creator>Peter Teoh</dc:creator>
      <pubDate>Fri, 29 Nov 2024 03:45:55 +0000</pubDate>
      <link>https://dev.to/tthtlc/two-new-creation-for-you-today-3j2l</link>
      <guid>https://dev.to/tthtlc/two-new-creation-for-you-today-3j2l</guid>
      <description>&lt;p&gt;First is this:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://hackgptdeveloper.github.io/2024/11/28/simple-petal-line.html" rel="noopener noreferrer"&gt;https://hackgptdeveloper.github.io/2024/11/28/simple-petal-line.html&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fbm3eif5ml3j8siheplqu.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fbm3eif5ml3j8siheplqu.png" alt="Image description" width="605" height="728"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fhtsdu5rvkzg5e45xngly.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fhtsdu5rvkzg5e45xngly.png" alt="Image description" width="605" height="728"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fb56l7hgkrv3pfkp46dsj.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fb56l7hgkrv3pfkp46dsj.png" alt="Image description" width="605" height="728"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F1y1obxmmmchz8zudmozh.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F1y1obxmmmchz8zudmozh.png" alt="Image description" width="605" height="728"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Next creation is a slight modification:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://hackgptdeveloper.github.io/2024/11/28/simple-petal-line-color.html" rel="noopener noreferrer"&gt;https://hackgptdeveloper.github.io/2024/11/28/simple-petal-line-color.html&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fc5adhgxpnuh5lo7i94sj.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fc5adhgxpnuh5lo7i94sj.png" alt="Image description" width="605" height="728"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F3v9fgeyiytveeh1azm95.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F3v9fgeyiytveeh1azm95.png" alt="Image description" width="605" height="728"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F5afxtxndi3ohqyuhed27.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F5afxtxndi3ohqyuhed27.png" alt="Image description" width="605" height="728"&gt;&lt;/a&gt;&lt;/p&gt;

</description>
    </item>
    <item>
      <title>Hypotrochoid adding to hypotrochoid</title>
      <dc:creator>Peter Teoh</dc:creator>
      <pubDate>Wed, 06 Nov 2024 05:39:58 +0000</pubDate>
      <link>https://dev.to/tthtlc/hypotrochoid-adding-to-hypotrochoid-54j</link>
      <guid>https://dev.to/tthtlc/hypotrochoid-adding-to-hypotrochoid-54j</guid>
      <description>&lt;p&gt;Adding hypotrochoid to hypotrochoid you get other variations:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://tthtlc.github.io/double_hypotrochoid_explore.html" rel="noopener noreferrer"&gt;https://tthtlc.github.io/double_hypotrochoid_explore.html&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fwf5h9qtgnvfe4cyzhxul.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fwf5h9qtgnvfe4cyzhxul.png" alt="Image description" width="633" height="835"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;and this:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fczxcydtv7sq93goggof3.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fczxcydtv7sq93goggof3.png" alt="Image description" width="682" height="852"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;and this:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F4143a5qmk3s3jc8ge8l2.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F4143a5qmk3s3jc8ge8l2.png" alt="Image description" width="628" height="850"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Now start adding epicycloid to simple sine waves projected from polar coordinates to the cartesian coordinates:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://tthtlc.github.io/petal_add_epicycloid_explore.html" rel="noopener noreferrer"&gt;https://tthtlc.github.io/petal_add_epicycloid_explore.html&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fdjiwrlzz91hmq5q19zqm.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fdjiwrlzz91hmq5q19zqm.png" alt="Image description" width="800" height="740"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;and this:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fpf0rwvqgmcz9ek1rpkzm.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fpf0rwvqgmcz9ek1rpkzm.png" alt="Image description" width="800" height="787"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;and this:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fgiwir37fvzi4lzzy7v4a.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fgiwir37fvzi4lzzy7v4a.png" alt="Image description" width="800" height="812"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;and this:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fxzm9enh1vpecnmkj8u0z.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fxzm9enh1vpecnmkj8u0z.png" alt="Image description" width="800" height="865"&gt;&lt;/a&gt;&lt;/p&gt;

</description>
    </item>
    <item>
      <title>Epicycloid adding to Epicycloid</title>
      <dc:creator>Peter Teoh</dc:creator>
      <pubDate>Wed, 06 Nov 2024 02:39:21 +0000</pubDate>
      <link>https://dev.to/tthtlc/epicycloid-adding-to-epicycloid-54lk</link>
      <guid>https://dev.to/tthtlc/epicycloid-adding-to-epicycloid-54lk</guid>
      <description>&lt;p&gt;Attempting to draw an epicycloid here:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://en.wikipedia.org/wiki/Epicycloid" rel="noopener noreferrer"&gt;https://en.wikipedia.org/wiki/Epicycloid&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;I get:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fzyu4zdapfuxskmf401n4.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fzyu4zdapfuxskmf401n4.png" alt="Image description" width="708" height="950"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://tthtlc.github.io/epicycloid_explore_savepng.html" rel="noopener noreferrer"&gt;https://tthtlc.github.io/epicycloid_explore_savepng.html&lt;/a&gt;&lt;br&gt;
(R=160, r=40)&lt;/p&gt;

&lt;p&gt;Now what happened if you combine this R,r=(160,40) with another epicyloid by adding them together?&lt;/p&gt;

&lt;p&gt;The result is amazing:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F3iw6ce3q1j2ts5ip21c8.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F3iw6ce3q1j2ts5ip21c8.png" alt="Image description" width="800" height="791"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://tthtlc.github.io/epicycloid_add_epicycloid_explore.html" rel="noopener noreferrer"&gt;https://tthtlc.github.io/epicycloid_add_epicycloid_explore.html&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;The formula used:&lt;/p&gt;

&lt;p&gt;x = (200) * Math.cos(t) - 96 * Math.cos(5 * t)) + (R + r) * Math.cos(t) - d * Math.cos((R + r) / r * t);&lt;br&gt;
y = (200) * Math.sin(t) - 96 * Math.sin(5 * t) + (R + r) * Math.sin(t) - d * Math.sin((R + r) / r * t);&lt;/p&gt;

</description>
    </item>
    <item>
      <title>Direct addition of two hyptotrochoid</title>
      <dc:creator>Peter Teoh</dc:creator>
      <pubDate>Tue, 22 Oct 2024 05:56:31 +0000</pubDate>
      <link>https://dev.to/tthtlc/direct-addition-of-two-hyptotrochoid-5d3g</link>
      <guid>https://dev.to/tthtlc/direct-addition-of-two-hyptotrochoid-5d3g</guid>
      <description>&lt;p&gt;Another day of exploration with Hyptotrochoid:   what happen if you add two hyptotrochoid on top of another?&lt;/p&gt;

&lt;p&gt;You get this - and you can also change all the parameters yourself to start exploring:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://tthtlc.github.io/double_hypotrochoid_explore.html" rel="noopener noreferrer"&gt;https://tthtlc.github.io/double_hypotrochoid_explore.html&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fwhosrohjwsszpul1rhk4.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fwhosrohjwsszpul1rhk4.png" alt="Image description" width="675" height="803"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;and this:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fwjyx1s04a3cmszyc2cyd.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fwjyx1s04a3cmszyc2cyd.png" alt="Image description" width="535" height="823"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;and this:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ftqepp6d4taz8ckvwzlys.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ftqepp6d4taz8ckvwzlys.png" alt="Image description" width="594" height="822"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;and this:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F992qxn6r0s97plhitn3e.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F992qxn6r0s97plhitn3e.png" alt="Image description" width="563" height="832"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;and this:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fnqjhkpzkxgbib30ogk86.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fnqjhkpzkxgbib30ogk86.png" alt="Image description" width="526" height="786"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;and this:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fbxmpptsz3ck6p6wlqcm8.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fbxmpptsz3ck6p6wlqcm8.png" alt="Image description" width="557" height="812"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;and this:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fbmnucdxeevw5hck4fvut.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fbmnucdxeevw5hck4fvut.png" alt="Image description" width="683" height="857"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;and you start changing the color as well.   Start exploring!!!&lt;/p&gt;

</description>
    </item>
    <item>
      <title>Mathematical art from Vortex parametric equation</title>
      <dc:creator>Peter Teoh</dc:creator>
      <pubDate>Fri, 18 Oct 2024 02:21:21 +0000</pubDate>
      <link>https://dev.to/tthtlc/mathematical-art-from-vortex-parametric-equation-4icj</link>
      <guid>https://dev.to/tthtlc/mathematical-art-from-vortex-parametric-equation-4icj</guid>
      <description>&lt;p&gt;With some inspiration from Pinterest (I lossed the original link already) I implemented this Javascript that draw the following parametric curves.   And to my surprise, every single one values of the parameters (aaaa,bbbb,cccc) generate a different design:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;function x(t) {
return Math.cos(t)+1/3*(Math.cos(aaaa*t)+Math.sin(bbbb*t));
}
function y(t) {
return Math.sin(t)+1/3*(Math.sin(aaaa*t)+Math.cos((bbbb-cccc)*t));
}

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;a href="https://tthtlc.github.io/vortex_explore.html" rel="noopener noreferrer"&gt;https://tthtlc.github.io/vortex_explore.html&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;and here are the different design:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Frn2mglsg1q1oih712bdb.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Frn2mglsg1q1oih712bdb.png" alt="Image description" width="800" height="493"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F9v4i15e0oh3lmjxglvfw.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F9v4i15e0oh3lmjxglvfw.png" alt="Image description" width="800" height="484"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Frhslm1sc3rkz7orlyyow.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Frhslm1sc3rkz7orlyyow.png" alt="Image description" width="800" height="487"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F1x5kcg3yt1bhguwzbw5a.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F1x5kcg3yt1bhguwzbw5a.png" alt="Image description" width="800" height="473"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fz9ykatjmj7nzx26y572v.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fz9ykatjmj7nzx26y572v.png" alt="Image description" width="800" height="520"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ft11rwv8cpo48ffl8he25.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ft11rwv8cpo48ffl8he25.png" alt="Image description" width="800" height="502"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F9ie0y4ksk1ngdym0ny16.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F9ie0y4ksk1ngdym0ny16.png" alt="Image description" width="800" height="531"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fbrdpoma5q1zfedb0x5n6.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fbrdpoma5q1zfedb0x5n6.png" alt="Image description" width="800" height="512"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fwwpqcsf1cmgkh5uiid27.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fwwpqcsf1cmgkh5uiid27.png" alt="Image description" width="800" height="502"&gt;&lt;/a&gt;&lt;/p&gt;

</description>
      <category>mathematics</category>
      <category>arts</category>
      <category>javascript</category>
      <category>webdev</category>
    </item>
    <item>
      <title>My First Post: Hello Everyone!!!</title>
      <dc:creator>Peter Teoh</dc:creator>
      <pubDate>Sat, 05 Oct 2024 03:42:37 +0000</pubDate>
      <link>https://dev.to/tthtlc/my-first-post-hello-everyone-5eg4</link>
      <guid>https://dev.to/tthtlc/my-first-post-hello-everyone-5eg4</guid>
      <description>&lt;p&gt;Hello everyone!&lt;/p&gt;

&lt;p&gt;As my first post, I would like to introduce everyone to the world of symmetry and beauty in mathematically created art.&lt;/p&gt;

&lt;p&gt;First I got my motivation from Pinterest:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fqookglz2jtqowadvq110.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fqookglz2jtqowadvq110.png" alt="Image description" width="800" height="352"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;So I asked myself is it possible to create it with mathematical formula, perhaps just using compass and rulers, or just combining sinusoidal curves, or using polar coordinates (like those of drawing hypotrochoid etc).&lt;/p&gt;

&lt;p&gt;There are hundreds of creations here, and it is still a work in progress.&lt;/p&gt;

&lt;p&gt;But enjoy and provide feedback if possible.&lt;/p&gt;

&lt;p&gt;&lt;a href="http://www.artdeveloper.art/" rel="noopener noreferrer"&gt;http://www.artdeveloper.art/&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;which is mirrored in:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://tthtlc.github.io/" rel="noopener noreferrer"&gt;https://tthtlc.github.io/&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;and I do provide writeup on how the drawings can be achieved here:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://tthtlc.wordpress.com/" rel="noopener noreferrer"&gt;https://tthtlc.wordpress.com/&lt;/a&gt;&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>javascript</category>
    </item>
  </channel>
</rss>
