Different Ways to Draw the Same Structure Using Isomorphism

GraphsIsomorphism

About Project:

This project explores isomorphism as a form of aesthetic expression. By using mathematical constraints while allowing for the rearrangement of results, the drawing process becomes both structured and free. The aim is to see how isomorphism can produce visual forms that merge precision with expression.

The interactive isomorphism graphs allow for the manual rearrangement of nodes, generating new shapes while maintaining a consistent mathematical structure. Mathematical beauty follows rules, but natural beauty—while also following rules—finds its appeal in imperfections. This project explores composition by combining human unpredictability and mathematical principles. Even when the shapes are freely rearranged, the underlying rules remain consistent.

Overview:

Starting with isomorphism as a fundamental concept, this project uses D3.js, a JavaScript library for data visualization, to apply mathematical methods—such as the Fibonacci, the golden ratio, and trigonometric functions—to create isomorphic structures. These structures form the foundation for mathematical drawings that can be reshaped manually, combining the logical constraints of mathematics with the unpredictable nature of personal irrational preferences. They all originate from the same underlying mathematical structure, which captures the essence of isomorphism.

 

Share:
X
Facebook
LinkedIn

User Guide:

Select the Graph Type:

  • Press the number buttons (001 to 012) to switch between graph layouts. Each number corresponds to a unique graph type based on various mathematical algorithms.

Rearrange the Graph Shape:

  • Drag the nodes (dots) to manually rearrange the graph shape. The edges (lines) connecting the nodes will be adjusted as you move them.

 

This work is licensed under CC BY-NC-SA 4.0

 

สมสัณฐาน

"สมสัณฐาน" เป็นชื่อไทย ที่มีที่มาจากภาษาบาลี ผมจำไม่ได้ว่าเคยได้ยินใครใช้คำนี้ในชีวิตประจำวันบ้าง แต่ถ้าเรียกเป็นภาษาอังกฤษว่า Isomorphism อาจจะพอเข้าใจได้ง่ายขึ้น

โดยก่อนหน้าภาษาอังกฤษ ขอย้อนกลับไปที่ภาษากรีก

  • " ἴσος (iso)" หมายถึง "เท่ากัน"
  • "μορφή (morphē)" หมายถึง "รูปร่าง"

ในความหมายง่าย ๆ ของคำว่า Isomorphism หมายถึงสองสิ่งขึ้นไปที่อาจดูแตกต่างกัน แต่มีโครงสร้างพื้นฐานที่เหมือนกัน

ในทางคณิตศาสตร์ สมสัณฐาน (Isomorphism) หมายถึงสถานการณ์ที่สองโครงสร้าง เช่น เซต กลุ่ม หรือกราฟ ที่รูปร่างต่างกัน สามารถจับคู่กันได้โดยโครงสร้างของพวกมันยังคงเหมือนเดิมทุกประการ ตัวอย่างเช่น ไดอะแกรมสองรูปที่แสดงการเชื่อมต่อเดียวกันระหว่างจุดต่างๆ หากปรับไดอะแกรมหนึ่งให้ตรงกับอีกไดอะแกรมหนึ่งได้โดยไม่เปลี่ยนแปลงโครงสร้างของการเชื่อมต่อ ไดอะแกรมทั้งสองจะถือว่าเป็นสมสัณฐานครับ

สเก็ตช์นี้เป็นบันทึกการทดลองที่ประยุกต์การใช้สมการคณิตศาสตร์พื้นฐาน (คนอื่นเขาคิดมานานแล้ว ผมแค่หยิบมาใช้ครับ) ร่วมกับกติกาของ Isomorphism เพื่อสร้างกราฟแบบต่าง ๆ โดยที่ยังสามารถขยับจัดวางใหม่ได้โดยการเลื่อนจุด (node) ที่เป็นข้อต่อของโครงสร้าง เป็นการฝึกการสร้างองค์ประกอบของรูปร่าง ด้วยวิธีทำงานที่ผสมผสานระหว่างความมีเหตุผลของคณิตศาสตร์กับความไร้เหตุผลของมนุษย์ครับ

หลายครั้งที่ผมใช้คณิตศาสตร์ในการสร้างหรือตรวจทานการสร้างรูปร่าง/รูปทรงต่าง ๆ ในงานออกแบบ แล้วพบว่าความลงตัวขององค์ประกอบที่ถูกสร้างขึ้นมานั้นมักจะมีเหตุผลกว่าความรู้สึกส่วนตัวเสมอ (ก็แน่นอน) ความงามจากคณิตศาสตร์นั้นมีเหตุผลรองรับ ลงตัวแบบที่เราเถียงอะไรด้วยไม่ได้ แต่ความงามในธรรมชาติเองก็มีเสน่ห์ในความเหน่อที่ไม่สมบูรณ์แบบ ผมจึงอยากลองทดสอบการทำงานที่ผสมผสานความไร้สาระของมนุษย์ร่วมกับหลักการทางคณิตศาสตร์ โดยในงานชิ้นนี้เราสามารถแทรกแซงรูปร่างของกราฟต่าง ๆ ได้ตามใจ แต่กฎของกราฟก็ยังคงกำหนดว่า ไม่ว่าจะปรับเปลี่ยนรูปร่างอย่างไร กติกาของรูปร่างเหล่านั้นก็ยังคงมาจากโครงสร้างทางคณิตศาสตร์เดียวกัน ซึ่งเป็นแนวคิดพื้นฐานของสมสัณฐาน (Isomorphism)

ขอบคุณครับ

Saranont Limpananont

2024.08.14

*This program was made using D3.js, a JavaScript library for data visualization, and the Web Audio API, a tool for audio processing in web applications.


Appendix A: Isomorphism

Isomorphism is a concept from mathematics that refers to finding a relationship between two things that are the same. The word comes from Greek, where "iso" means "equal" and "morphe" means "shape." Isomorphism implies that two distinct entities can have the same structure, even if they look different.

In mathematics, isomorphism refers to a situation where two structures, such as sets, groups, or graphs, can be matched up while maintaining their structure. If you can map every part of one structure to the other, and the relationships between the parts stay the same, then the two structures are considered isomorphic.

For example, consider two distinct diagrams representing the same connections between points. When one diagram is adjusted to match the other without changing the connections, The two diagrams are regarded as isomorphic. Though they may appear different, their underlying structure remains identical.

Image courtesy of Saranont Limpananont