/Mandala

2024 ITP Spring Show project Mandala by Jiaqi Yi and Tammana Jain. SCROLL DOWN to see everything.

Primary LanguageJavaScriptMIT LicenseMIT

Instructions

  • Uses microphone for instruction;
  • Press "A" to trigger a random transition (without microphone);
  • Press "S" to save the image;

Click here:

Spring Show Version

Introduction

2024 ITP Spring Show Project by Tammana Jain & Jiaqi Yi

Course Project of The Nature of Code by Daniel Shiffman

Check Our Sites

Images

circle,spherical,aligned,beautiful---circle,4 (1) circle,sized---moon circle,standard,expand,large,spread---circle,4 (1) grid_chessboard---triangle_arrow random,standard---cube,square,cubic

Our Idea of This Project

Tammy: I think it would be great to have those wonderful patterns in the screens and reactive to minds! Jiaqi: Yes, and we can have smooth transition between all shapes!

If You Want to Create a Pattern (guide of reading the source code):

  • Core Concept: pattern = arrangement + fractals
  • arrangement handles "x,y,a,d" for every fractal: coordinate of the center points; angle of rotation; diameter.
  • fractals handles the exact shape of everything, pay attention to the .shape, which has the format of [[[x1,y1,x2,y2,angle]/*line 1/,[x1,y1,x2,y2,angle]/*line 2/]/*shape 1/,[]/*shape 2/]
  • remember x1,y1,x2,y2 are factors to "d"(diameter), so usually x1,y1,x2,y2 ∈ [-0.5, 0.5]. And we're using radian, so generally angle ∈ [-PI, PI].
  • If you find it hard to understand, consider plan B ↓↓↓

A. Do It Yourself

  • Go to presetArrangementTest(or presetFractalTest), copy it, and name it into something you like! This function returns an instance of the arrangement or fractal.
  • Modify the function with the guide above;
  • in .name, give it a value like ["alpha","beta"], which is the keyword you're going to call;
  • Declaire an variable globally to hold the object returned by the function you just created;
  • If it is an arrangement, put it into "pasAll". If it is a fractal, put into "pfsAll";
  • If you find the code hard to read, consider plan B ↓↓↓

B. Give Us Some Inspirations!

  • Post your idea in the comments! It can be textual description, draft, image...WHATEVER YOU LIKE! We appreciate all contributions!