Category: Project-06-Abstract-Clock

Project 6 – Abstract Clock

Before we had clocks, we looked to the skies and celestial bodies above to tell time and orientation. For this project, I’ve plotted a night sky with 12 different constellations that appear as the day progresses, with meteor showers occuring every 5 minutes.

Basic Features:
– Stars that twinkle randomly
– Background color based on time of day (lightens as day progresses)
– 12 different constellations (accurate to Northern Hemisphere in August)
– Every hour a new constellation appears
– Meteor showers or ‘shooting stars’ that occur every 5 minutes to indicate the passing of 5 minutes

(Please note that in order to import the star data without using a csv (due to difficulties circumventing CORS policy) the first 495 lines of code are all star + constellation information.)

sketch
// Name: Tsz Wing Clover Chau
// Section: E 
// email: ctchau@andrew.cmu.edu
// Project-06



let data = [   //first constellation
            [[[-81.30973247,    45.89753673, "L"],   
              [-69.80657573,    27.25487531, "L"],
              [-83.5701992,     13.59553656, "L"],
              [-102.9353214,    33.81097102, "M"],
              [-81.30973247,    45.89753673, "L"]],
 
             [[-81.30973247,    45.89753673, "L"],
              [-83.21194136,    57.57386131, "M"],
              [-78.00737768,    70.19871847, "M"],
              [-65.52047168,    90.38733495, "M"]],
 
             [[-81.30973247,    45.89753673, "L"],
              [-79.00179591,    58.28543518, "S"],
              [-72.71622665,    66.82432172, "M"],
              [-56.23603836,    80.84899719, "M"]],
 
             [[-69.80657573,    27.25487531, "L"],
              [-63.09108408,    24.45143041, "M"],
              [-59.33124834,    12.51803871, "S"],
              [-53.67504909,    9.38172277 , "S"]],
 
             [[-69.80657573,    27.25487531, "L"],
              [-70.35891151,     20.90153254, "M"],
              [-70.22649991,     18.78294683, "S"],
              [-58.83910175,     0.068773112, "S"],
              [-51.8212866,     -0.549147718, "S"]],

             [[-83.5701992,     13.59553656, "L"],
              [-80.88006024,     5.718673925, "S"],
              [-80.74322899,     2.504256586, "M"],
              [-74.12860005,    -9.286504731, "M"],
              [-63.76642979,    -8.872286463, "M"]]],

             // second constellation
            [[[39.01312993,   70.78430398,   "L"],
              [47.35506114,   71.00498999,   "L"],
              [49.34123524,   60.19137546,   "L"],
              [43.77750399,   57.0099355 ,   "M"],
              [42.04897812,   50.0771234 ,   "L"],
              [40.28349003,   44.51583592,   "M"],
              [43.01999656,   36.48286513,   "M"]],
 
             [[43.77750399,   57.0099355 ,   "M"],
              [39.01312993,   70.78430398,   "L"],
              [33.53041101,   86.12662728,   "M"],
              [30.9148731 ,   97.89654786,   "M"],
              [41.18456465,   84.69474518,   "M"],
              [50.58589777,   91.84811645,   "M"],
              [51.67570523,   92.99241428,   "M"],
              [53.03796456,   104.6533541,   "S"],
              [55.49003134,   104.2719215,   "S"]],
                 
             [[85.42531527,   58.66254473,   "S"],
              [82.46534439,   59.53708159,   "M"],
              [58.44921701,   58.7298168 ,   "M"],
              [65.24369563,   67.20609705,   "M"],
              [71.43272565,   81.13141461,   "M"],
              [68.6072989 ,   83.14957657,   "S"]],
                 
             [[49.34123524,   60.19137546,   "L"],
              [58.44921701,   58.7298168 ,   "M"]],
                 
             [[41.18456465,   84.69474518,   "M"],
              [47.35506114,   71.00498999,   "L"]],
                 
             [[85.42531527,   58.66254473,   "S"],
              [82.46534439,   59.53708159,   "M"],
              [58.44921701,   58.7298168 ,   "M"],
              [65.24369563,   67.20609705,   "M"],
              [71.43272565,   81.13141461,   "M"],
              [68.6072989 ,   83.14957657,   "S"]]],
 
             // third constellation
            [[[1.458598798,   66.23616304,  "L"],
              [2.352193916,   60.74930789,  "S"],
              [4.368337719,   56.17211655,  "S"],
              [9.653903905,   52.95718454,  "S"],
              [16.19118114,   51.23449244,  "L"],
              [15.10294121,   47.50814724,  "M"],
              [8.564096444,   49.46980066,  "S"],
              [9.653903905,   52.95718454,  "S"]]],
            
             // fourth constellation
            [[[-6.590790179,   -83.80630313, "L"],
              [-0.615323792,   -77.31080679, "L"],
              [-5.71200542,    -76.35517899, "L"],
              [-8.064704903,   -69.53493942, "L"],
              [-13.86042784,   -71.60960823, "S"],
              [-17.56801424,   -70.75267342, "L"],
              [-21.50545029,   -72.71002812, "S"],
              [-20.14209587,   -76.22259689, "L"],
              [-6.590790179,   -83.80630313, "L"]],

             [[-13.86042784,   -71.60960823, "S"],
              [-20.14209587,   -76.22259689, "L"]],

             [[-5.71200542,    -76.35517899, "L"],
              [-6.590790179,   -83.80630313, "L"]],

             [[-5.71200542,    -76.35517899, "L"],
              [-6.590790179,   -83.80630313, "L"]],
             
             [[-8.064704903,   -69.53493942, "L"],
              [-3.082627727,   -63.36904156, "S"]],
 
             [[-17.56801424,   -70.75267342, "L"],
              [-20.38617647,   -63.6192995,  "S"],
              [-21.99497748,   -62.36800982, "S"],
              [-25.96335333,   -57.61310903, "S"]],
 
             [[-6.590790179,   -83.80630313, "L"],
              [-5.114574435,   -87.96959846, "M"]],
 
             [[-21.50545029,   -72.71002812, "S"],
              [-31.81704138,   -67.75307637, "S"],
              [-39.34651974,   -70.82585414, "S"],
              [-41.38721948,   -71.52954371, "S"],
              [-40.9202775,    -83.68265947, "S"],
              [-41.1347843,    -84.75519348, "S"],
              [-39.40063134,   -97.38439895, "S"],
              [-27.41782088,   -102.2813735, "S"],
              [-27.72946212,   -102.9794499, "S"]],
 
             
             [[-39.34651974,   -70.82585414, "S"],
              [-28.01323318,   -94.69202961, "S"]],
 
             [[-20.38617647,   -63.6192995,  "S"],
              [-18.02660164,   -62.86852569, "S"]]],
            
             //fifth constellation
            [[[51.68313157, -74.59487497,    "S"],
              [51.85688208, -71.58319946,    "S"],
              [49.91857688, -50.48883666,    "M"],
              [54.8517741 , -41.53970748,    "M"],
              [66.68054428, -49.44026667,    "M"],
              [64.1863709 , -65.64553098,    "M"]],

           
             [[49.91857688, -50.48883666,    "M"],
              [66.68054428, -49.44026667,    "M"]]],

              // sixth constellation
              [[[-28.25049035,    21.90763427, "L"],
              [-29.05237454 ,  -8.933976793, "M"],
              [-30.05337011,   -21.79845264, "L"],
              [-32.01340999 ,  -24.46854673, "S"],
              [-38.51780667 ,  -32.31873544, "S"],
              [-23.73184394 ,  -30.50911015, "S"],
              [-15.83268968,   -18.49868084, "M"],
              [-28.47445623,   -20.35135353, "M"],
              [-6.246178612,    7.80368656 , "L"],
              [-7.700470381,    9.046871459, "S"],
              [-28.25049035,    21.90763427, "L"]],
 
             [[-28.25049035,    21.90763427, "L"],
              [-27.20862688,    15.00847228, "L"],
              [-23.75429763,    7.316898561, "M"],
              [-19.5234676,    -1.520496344, "M"]],
 
 
             [[-42.86022433,    9.735155491, "M"],
              [-35.20115034,    10.69366795, "M"],
              [-27.20862688,    15.00847228, "L"],
              [-18.11568352,    17.26722891, "M"],
              [-13.08553401,    23.52012366, "M"],
              [-10.87867391,    24.49114211, "M"]],
 
             [[-15.83268968,   -18.49868084, "M"],
              [-14.51018108 ,  -17.07162404, "S"]],
 
             [[-23.73184394 ,  -30.50911015, "S"],
              [-19.20732445 ,  -40.8800735,  "S"],
              [-17.88320838 ,  -42.11591516, "S"]],
 
             [[-8.005402526,    6.677783255, "S"],
              [-10.13992754,    6.396307428, "S"],
              [-11.87569514,    1.963063164, "S"]]],

             //seventh constellation
            [[[60.54101784,   2.275816369, "L"],
              [48.47102481,    6.48703491 , "M"],
              [37.83395909,    9.664913466, "M"],
              [37.21603826,    18.80131432, "M"],
              [44.145579  ,    20.34611639, "M"],
              [49.35376885,    12.40142   , "S"],
              [60.54101784,    2.275816369, "L"]],

             [[49.35376885,   12.40142   , "S"],
              [49.08894564,    10.94489233, "S"]],

             [[56.89016285,   -7.804902645, "S"],
              [60.54101784,    2.275816369, "L"],
              [66.91639149,    4.836863903, "M"]]],

            //eigth constellation
            [[[61.03712532,   -23.51897245, "M"],
              [76.2399394 ,   -17.85197365, "M"],
              [87.20224289,   -16.41843998, "M"],
              [98.36940576,   -2.089490027, "M"],
              [108.4602156,   -5.991269825, "M"],
              [109.69881  ,   20.01815869 , "S"],
              [119.3328342,   23.67244373 , "S"]],
             
             [[65.55982628,  -32.94580699,  "M"],
              [75.53156455,  -30.43924983,  "M"],
              [98.62336421,  -31.35454998,  "L"],
              [108.4602156,  -5.991269825,  "M"],
              [116.0938088,   1.248421898,  "S"]],
             
             [[88.35446325,   6.729849457,  "M"],
              [98.36940576,  -2.089490027,  "M"]],

             [[76.2399394 ,   -17.85197365, "M"],
              [75.53156455,  -30.43924983,  "M"]],

             [[87.20224289,   -16.41843998, "M"],
              [98.62336421,  -31.35454998,  "L"]]],
            
            //ninth constellation
            [[[-27.97036149,    97.86651501, "S"],
              [-18.94048898,    94.12007854, "S"],
              [-9.09408544 ,    98.29879614, "S"],
              [-10.59327567,    108.0279711, "S"],
              [-16.74127398,    119.7956241, "S"]]],

            //tenth constellation
            [[[5.319571808 ,     15.27986704, "S"],
              [2.225986467 ,     5.831577348, "S"],
              [8.997290938 ,     6.071090008, "S"],
              [11.07069217 ,     5.894303006, "M"],
              [15.10868883 ,     0.099613614, "S"],
              [12.50228334 ,    -7.032641486, "M"],
              [8.481085936 ,    -5.839664643, "S"],
              [4.56767671  ,    -4.368466998, "M"],
              [2.171312707 ,    -2.838674937, "S"],
              [-0.355196297,    -3.244706657, "S"]],
                 
              [[2.171312707, -2.838674937,  "S"],
               [1.709621983, -1.653668745,  "S"]],
                
              [[26.18888289, 16.05781367 ,  "S"],
               [22.33741325, 17.38990091 ,  "S"],
               [19.76011401, 18.25865346 ,  "S"],
               [18.39717201, 13.36557494 ,  "S"],
               [17.32571053, 9.224521115 ,  "M"],
               [19.39550622, 1.749250539 ,  "M"],
               [24.48804677, -8.578746279,  "M"],
               [26.93450093, -10.89496905,  "M"],
               [27.19512669, -16.68665272,  "M"],
               [25.66033052, -20.2774966 ,  "M"]],
                
              [[12.50228334, -7.032641486,  "M"],
               [13.73443018, -18.42818892,  "S"],
               [24.48804677, -8.578746279,  "M"]],
                 
              [[15.10868883, 0.099613614,   "S"],
               [19.39550622, 1.749250539,   "M"]],
                   
              [[11.07069217, 5.894303006,   "M"],
               [17.32571053, 9.224521115,   "M"]]],

            // eleventh constellation
            [[[12.6209419,     -76.17543312, "M"],
              [14.31490933,    -68.88084874, "M"],
              [12.81336171,    -67.87981699, "M"],
              [14.8154252 ,    -63.08916507, "M"],
              [6.204943095,    -29.96074626, "M"],
              [8.275577271,    -20.3704406,  "L"],
              [19.03382074,    -23.72757948, "M"],
              [28.02080187,    -31.100746,   "M"],
              [34.45008626,    -37.57453788, "M"]],
 
             [[6.204943095,    -29.96074626, "M"],
              [5.314500086,    -32.52363291, "S"],
              [1.666573231,    -47.94643484, "M"]],   
 
             [[-14.81981548,   -29.73185186, "S"],
              [-4.719413958,   -39.09939645, "M"],
              [7.351003499,    -51.95056182, "S"],
              [8.924053384,    -55.20391499, "M"],
              [14.03646551,    -51.87905955, "S"],
              [17.70651702,    -55.28452075, "L"]],
 
             [[17.70651702,    -55.28452075, "L"],
              [28.15534601,    -47.71694618, "L"],
              [33.53711124,    -39.03884973, "M"],
              [34.45008626,    -37.57453788, "M"]],
           
 
             [[6.204943095,    -29.96074626, "M"],
              [1.144487844,    -32.23404872, "S"],
              [-0.129682563,   -32.90009235, "S"],
              [0.941778916,    -34.00051224, "S"]],
 
 
             [[19.03382074,    -23.72757948, "M"],
              [19.93153171,    -22.45340907, "S"]]], 
            
            // twelth constellation
            [[[-44.13070076,  -47.56894476, "S"],
              [-45.54745045,  -50.83836714, "M"],
              [-49.22571716,  -54.74951485, "S"],
              [-48.61759037,  -55.6182674 , "S"],
              [-57.2778691 ,  -66.24946712, "S"],
              [-60.10329585,  -68.26762909, "S"],
              [-65.55710623,  -64.4554043 , "S"],
              [-72.68365623,  -58.95743272, "S"],
              [-73.28305034,  -57.26823116, "S"],
              [-75.51715563,  -53.29043393, "S"],
              [-78.73208764,  -46.15219506, "M"],
              [-76.00756899,  -47.35098326, "S"],
              [-68.43340714,  -49.53059819, "S"],
              [-62.71191797,  -51.98266497, "S"],
              [-44.13070076,  -47.56894476, "S"]]],

            // single stars

            [[[104.9886578 ,     52.44117013 ,   "M"],
              [106.1322829 ,     32.59591081 ,   "M"],
              [113.6667542 ,     47.59758141 ,   "M"],
              [5.11024982  ,    -88.47011433 ,   "M"],
              [88.41769489 ,    -64.89519854 ,   "M"],
              [11.27889721 ,    -30.50408545 ,   "M"],
              [-3.37534974 ,     67.12602697 ,   "M"],
              [35.62895531 ,    -68.60804233 ,   "M"],
              [40.36506015 ,    -59.2406066  ,   "M"],
              [43.70513643 ,    -69.07280707 ,   "M"],
              [42.7175803  ,    -63.12573704 ,   "M"],
              [42.13375365 ,    -35.96420913 ,   "M"],
              [39.80992995 ,    -25.98964281 ,   "M"],
              [34.84245066 ,    -13.29661451 ,   "M"],
              [35.94287055 ,     -9.676812218,   "M"],
              [37.47766673 ,    -12.74640456 ,   "M"],
              [42.60330677 ,    -17.49558517 ,   "M"],
              [41.27916704 ,    -23.18270057 ,   "M"],
              [-19.04817726,    -88.46549279 ,   "S"],
              [-21.80293192,    -88.17308867 ,   "S"],
              [-22.75709275,    -89.55816084 ,   "S"],
              [-23.0636038 ,    -92.31056828 ,   "S"],
              [-22.43683664,    -94.61454593 ,   "S"],
              [-20.48514261,    -97.60750188 ,   "S"],
              [-15.55931565,   -100.4457165  ,   "S"],
              [-16.74127398,    119.7956241  ,   "S"],
              [-10.59327567,    108.0279711  ,   "S"],
              [-27.97036149,     97.86651501 ,   "S"],
              [-18.94048898,     94.12007854 ,   "S"],
              [-13.27280304,     86.72326807 ,   "S"],
              [-9.09408544 ,     98.29879614 ,   "S"],
              [-42.27589132,     -9.540592057,   "S"],
              [-41.9227937 ,    -11.52676616 ,   "S"],
              [-41.9227937 ,    -15.76393756 ,   "S"],
              [-43.79845795,     -8.625985361,   "S"],
              [-43.22467432,    -10.47974785 ,   "S"],
              [-13.72874433,     9.44562888  ,   "S"],
              [-14.54971549,     8.530832444 ,   "S"],
              [33.94988529 ,    13.19588964  ,   "S"],
              [69.46108546 ,    23.60510962  ,   "S"],
              [79.9786976  ,    12.72308656  ,   "S"],
              [78.64087004 ,    34.91748725  ,   "S"],
              [-47.60015863,   -30.24429763  ,   "S"],
              [-52.49938807,   -35.14352707  ,   "S"],
              [-57.26620591,   -18.76862507  ,   "S"],
              [-58.76687078,   -15.63488371  ,   "S"],
              [-54.57383658,   -12.85423997  ,   "S"],
              [-53.60281813,   -13.03078878  ,   "S"],
              [30.93918652 ,   -55.61717811  ,   "S"],
              [32.58373868 ,   -57.97675294  ,   "S"],
              [33.97803289 ,   -60.2648255   ,   "S"],
              [31.22519559 ,   -62.6959026   ,   "S"],
              [38.07330037 ,   -58.95429872  ,   "S"],
              [39.8021085  ,   -61.02328683  ,   "S"],
              [43.94435199 ,   -54.39176988  ,   "S"],
              [-8.005445306,   -105.0033915  ,   "S"],
              [-2.356766173,   -104.9318892  ,   "S"],
              [30.67780305 ,    -85.10779604 ,   "S"],
              [32.46048329 ,    -84.07571801 ,   "S"],
              [41.77341897 ,    -87.2819446  ,   "S"],
              [44.06113402 ,    -90.49632903 ,   "S"],
              [47.24656004 ,    -81.49026093 ,   "S"],
              [50.3451108  ,    -83.54630863 ,   "S"],
              [51.67719804 ,    -82.88026501 ,   "S"],
              [52.33248013 ,    -98.81150986 ,   "S"],
              [58.84812426 ,    -95.04691547 ,   "S"],
              [53.56322507 ,    -95.84327739 ,   "S"],
              [58.64277685 ,    -86.21382367 ,   "S"],
              [73.95741511 ,    -83.33540582 ,   "S"],
              [59.67565503 ,    -74.68175023 ,   "S"],
              [70.24547773 ,    -69.81673594 ,   "S"],
              [44.55936066 ,    -74.0157066  ,   "S"],
              [55.68343334 ,    -24.77410426 ,   "S"],
              [60.08082279 ,    -32.78235823 ,   "S"],
              [40.16744129 ,    -22.02126697 ,   "S"],
              [-28.65268571,    -34.7891396  ,   "S"],
              [-13.20466495,    -40.96834791 ,   "S"],
              [-9.497139968,    -45.60275414 ,   "S"],
              [-6.407535816,    -46.57377258 ,   "S"],
              [-7.96784617 ,    -54.24914286 ,   "S"],
              [-0.560136995,    -24.5197572  ,   "S"],
              [-10.68766986,    -14.29161588 ,   "S"],
              [-10.16641833,    -11.42473247 ,   "S"],
              [-4.606402005,    -10.72973043 ,   "S"],
              [-0.725973947,    -11.97494241 ,   "S"],
              [-25.80629245,    -24.41817625 ,   "S"],
              [-71.25040192,    -77.43958597 ,   "S"],
              [-64.2745821 ,    -77.98540056 ,   "S"],
              [-59.91294378,    -81.310256   ,   "S"],
              [-62.24452988,    -41.89702708 ,   "S"],
              [-71.38093073,    -34.2612911  ,   "S"],
              [69.51227912 ,      5.467669522,   "S"],
              [70.549062   ,      2.393072019,   "S"],
              [107.9486287 ,     57.55384711 ,   "S"],
              [80.51445449 ,     78.84416438 ,   "S"],
              [83.27260918 ,     86.91681224 ,   "S"],
              [83.47442537 ,     68.88789869 ,   "S"],
              [100.1578976 ,     62.90068486 ,   "S"],
              [64.64441402 ,    109.6664684  ,   "S"],
              [49.1146577  ,     98.60492271 ,   "S"],
              [11.49177673 ,     72.23870395 ,   "S"],
              [15.26641233 ,     54.31944387 ,   "S"],
              [-6.152714418,     52.61545832 ,   "S"],
              [-17.60771933,     30.85955337 ,   "S"],
              [-15.24825692,     22.06359599 ,   "S"],
              [-22.66330689,     22.15187039 ,   "S"],
              [-22.66330689,     20.65120552 ,   "S"],
              [-33.0796866 ,     19.01812904 ,   "S"],
              [-32.63831458,     22.68151682 ,   "S"],
              [-38.37615086,     19.76846147 ,   "S"],
              [-36.56652557,     17.91469898 ,   "S"],
              [-37.096172  ,     28.11039269 ,   "S"],
              [-36.21342795,     33.09789653 ,   "S"],
              [-41.37748061,     15.39887846 ,   "S"],
              [-38.50856246,     18.1795222  ,   "S"],
              [-26.84551443,    -11.1849741  ,   "S"],
              [-53.76052441,     21.78456178 ,   "S"],
              [-80.19844615,     27.63723148 ,   "S"],
              [-36.86304668,      7.09621255 ,   "S"],
              [-33.02311009,      4.756940835,   "S"],
              [-31.52244522,      6.390017315,   "S"],
              [-20.17918426,     -5.571164473,   "S"],
              [-17.48175884,     -9.226660678,   "S"],
              [-26.47267039,     -6.22969016 ,   "S"],
              [-24.87874372,    -11.90844128 ,   "S"],
              [-25.13676322,    -12.61213084 ,   "S"],
              [-50.85272315,     26.86216427 ,   "S"],
              [-48.56412749,     28.44238509 ,   "S"],
              [-54.06765516,     39.77638269 ,   "S"],
              [-48.67310823,     36.77941217 ,   "S"],
              [-48.45514674,     34.32734538 ,   "S"],
              [-43.71448429,     37.92371    ,   "S"],
              [-43.60550354,     35.85307583 ,   "S"],
              [-41.31690787,     40.70271903 ,   "S"],
              [-41.31690787,     38.46861373 ,   "S"],
              [-38.75586034,     40.53924791 ,   "S"],
              [-53.3639135 ,     50.0685607  ,   "S"],
              [-47.5289726 ,     66.29329569 ,   "S"],
              [-41.48054119,     69.01781434 ,   "S"],
              [-46.54814588,     73.81296717 ,   "S"],
              [-58.31806646,     73.21357306 ,   "S"],
              [-19.90235346,     76.59197619 ,   "S"],
              [-67.85380515,     80.87790581 ,   "S"],
              [-85.70244993,     56.09141573 ,   "S"],
              [-87.95576721,     69.31483029 ,   "S"],
              [-94.77501688,     71.50884975 ,   "S"],
              [-95.24939946,     56.0321179  ,   "S"],
              [-50.36555387,     98.81623761 ,   "S"],
              [-45.91821713,    105.3389982  ,   "S"],
              [-43.30911291,     98.40115285 ,   "S"],
              [-34.65060103,     66.54015533 ,   "S"],
              [35.35434846 ,     33.92570089 ,   "S"],
              [41.26219059 ,     29.41076463 ,   "S"],
              [30.45760312 ,    124.6731233  ,   "S"],
              [15.20672482 ,    111.9510896  ,   "S"],
              [6.102884206 ,    112.6124797  ,   "S"],
              [1.356437388 ,    122.2998998  ,   "S"],
              [-33.24663947,    117.5951965  ,   "S"],
              [-42.97148247,    113.9780293  ,   "S"],
              [-44.75041717,    112.4955837  ,   "S"],
              [-35.97433934,    122.1611289  ,   "S"],
              [-33.36523512,    122.5762136  ,   "S"],
              [-99.20350628,     67.5572706  ,   "S"],
              [-98.72912369,     59.25557535 ,   "S"],
              [-56.51147925,     49.43528664 ,   "S"],
              [-57.9610908 ,     47.85962192 ,   "S"],
              [9.815890457 ,    -91.30950062 ,   "S"]]]
  
            ];

let starDim = [7, 5, 3];

var bgColor;

var meteorShower = false;
let meteorStart = [];
let meteorEnd = [];
let shootOffset = [];
let shootWeight = [];

var shootCount_start = 0;
var shootCount_end = 0;

var n = 200;
var nMeteors;

function setup() {
    ellipseMode(CENTER);
    createCanvas(480, 480);
    frameRate(10);

    // each constellation
    for (var i = 0; i < data.length; i++){ 
        //lines within constellation
        for (var j = 0; j < data[i].length; j++){ 
            // indiv stars within constellation
            for (var k = 0; k < data[i][j].length; k++){ 
                star = data[i][j][k];
                star[0] = map(star[0], -113, 120, 0, width);
                star[1] = map(star[1], -113, 120, 0, height);

                var r;
                var star = data[i][j][k];

                if (star[2] == "L"){
                    r = starDim[0];
                } else if (star[2] == "M"){
                    r = starDim[1];
                } else {
                    r = starDim[2];
                }
                star[3] = r;
            }
        }
    }
}

function initiateMeteorShower(){
    meteorStart = [];
    meteorEnd = [];
    shootOffset = [];
    //meteor steup
    nMeteors = int(random(0, 10))
    for (var i = 0; i<nMeteors; i++){
        var start;
        var end;
        var dirX;
        var dirY;

        //var pathRand = random(0,2)

        if (int(random(0,2)) == 0){
            start = [0, random(0, height)];
            end = [width, random(0, height)];

        } else {
            start = [random(0, width), 0];
            end = [random(0, width), height];

        }
        meteorStart.push(start);
        meteorEnd.push(end);
        shootOffset.push(random(2, 15));
        shootWeight.push(random(1,4));
    }
}



function draw() {
    var curTime = (hour()*3600) + (minute()*60) + second();
    bgColor = map(curTime, 0, 86400, 0, 255);

    background(bgColor);

    //every 10 minutes initiate meteor shower
    if (minute() %5 == 0){
        if (!meteorShower){
            initiateMeteorShower();
        }
        meteorShower = true;
    } else {
        meteorShower = false;
    }
    
    if (meteorShower){
        for (var i = 0; i<nMeteors; i++){
            shootingStar(meteorStart[i], meteorEnd[i], 
                         shootOffset[i], shootWeight[i]);
        //noLoop();
        }
    }
    

    //go through each constellation, draw lines between each pt
    for (var i = 0; i < data.length; i++){ // each constelation
        //lines within constellation
        for (var j = 0; j < data[i].length; j++){
            if (i < hour()%12){
                drawConstellation(data[i][j]);
            }
            // indiv stars within constellation
            for (var k = 0; k < data[i][j].length; k++){ 
                drawStars(data[i][j][k]);
                twinkle(data[i][j][k]);
            }
        }
    }

    


}


function drawStars(star){
    var r = star[3];
    push();
    noStroke();
    var c = (bgColor+200) %255
    fill(c)
    circle(star[0], star[1], star[3]*1.5);
    pop();
}

function twinkle(star){
    //constraining star size
    if ((star[2] == "L" & star[3] >= starDim[0]) || 
        (star[2] == "M" && star[3] >= starDim[1]) || 
        (star[2] == "S" && star[3] >= starDim[2])){
        star[3] -= random(0.8, 0.8);
    } else {
        star[3] += random(-0.8, 0.8);
    }
    star[3] = abs(star[3]);
}

function drawConstellation(constellation){
    var c = (bgColor+200) %255
    stroke(c);
    beginShape(LINES);
    for (var i = 1; i < constellation.length; i++){
        vertex(constellation[i-1][0], constellation[i-1][1]);
        vertex(constellation[i][0], constellation[i][1]);
    }
    endShape();
}


function shootingStar(curStar, nextStar, offset, shootWeight){
    var dx = (nextStar[0] - curStar[0])/n;
    var dy = (nextStar[1] - curStar[1])/n;


    if (shootCount_end < n){
        shootCount_end ++;
    }
    if (shootCount_end > offset){
        shootCount_start ++;
        
    }

    if (shootCount_start == n){
        shootCount_end = shootCount_end % n;
        shootCount_start = shootCount_start % n;
        meteorShower = false;
    }

    push();
    strokeWeight(shootWeight);
    var c = (bgColor+200) %255
    stroke(c, c, c, 180);
    line(curStar[0] + (shootCount_start*dx), 
         curStar[1] + (shootCount_start*dy), 
         curStar[0] + (shootCount_end*dx), 
         curStar[1] + (shootCount_end*dy));
    fill(c, c, c, 200);
    circle(curStar[0]+ (shootCount_end*dx), curStar[1]+ 
          (shootCount_end*dy), 5);
    pop();

}
``

project 6: abstract clock

I chose to make a clock that signifies time visually with the symbols of the 12 constellations. I entertained the idea of a similar 12 hour system, but rather than using numbers, it aligned with what people see in the sky over the course of a year. I also switched what moved (the counters rotate over time vs a traditional clock where the hands do) just for fun.

astral clock
// isis berymon section D

function setup() {
    createCanvas(480, 480);
    background(55, 56, 87); //dark blue
}

function draw() {
    var h = hour();
    var m = minute();
    var s = second();
    push();
    translate(240, 240);
    if(h > 11){ //12 hour clock
        h = h-12;
    }
    rotate(radians((m+1)/-2+(-30*h))); //moves ccw every minute
    background(55, 56, 87); //dark blue
    clock();
    pop();
    if(s%2==0) { //pointer blinks every second
        noStroke();
        fill(240, 222, 91); // pale gold
        triangle(240, 30, 250, 0, 230, 0);
    }
}

function clock(){
    var angle = 0;
    stroke(240, 222, 91) //pale gold
    noFill();
    circle(0, 0, 480);
    for(var i = 0; i < 12; i++) { //12 spokes
        push();
        angle +=30;
        rotate(radians(angle));
        line(0, 0, 240, 0);
        pop();
    }
    //aries symbol
    push();
    rotate(radians(-315)); //center in between spokes
    beginShape();
    vertex(-10, -200);
    vertex(-20, -210);
    vertex(-10, -210);
    vertex(0, -200);
    vertex(0, -180);
    vertex(0, -200);
    vertex(10, -210);
    vertex(20, -210);
    vertex(10, -200);
    endShape();
    pop();
    //taurus
    push();
    rotate(radians(-285));
    circle(0, -190, 20);
    beginShape();
    vertex(-15, -210);
    vertex(-10, -210);
    vertex(0, -200);
    vertex(10, -210);
    vertex(15, -210);
    endShape();
    pop();
    //gemini
    push();
    rotate(radians(-255));
    beginShape(LINES);
    vertex(-10, -210);
    vertex(10, -210);
    vertex(-10, -190);
    vertex(10, -190);
    vertex(-4, -210);
    vertex(-4, -190);
    vertex(4, -210);
    vertex(4, -190);
    endShape();
    pop();
    //cancer
    push();
    rotate(radians(-225));
    circle(-10, -195, 10);
    circle( 10, -185, 10);
    line(-10, -200, 10, -200);
    line(10, -180, -10, -180);
    pop();
    //leo
    push();
    rotate(radians(-195));
    circle(-10, -190, 10);
    beginShape();
    vertex(-5, -190);
    vertex(-8, -210);
    vertex(5, -210);
    vertex(0, -185);
    vertex(10, -195);
    endShape();
    pop();
    //virgo
    push();
    rotate(radians(-165));
    beginShape();
    vertex(-20, -210);
    vertex(-15, -205);
    vertex(-15, -190);
    vertex(-15, -205);
    vertex(-10, -210);
    vertex(-5, -205);
    vertex(-5, -190);
    vertex(-5, -205);
    vertex(0, -210);
    vertex(5, -205);
    vertex(5, -190);
    endShape();
    beginShape();
    vertex(5, -200);
    vertex(10,-195);
    vertex(0, -185);
    endShape();
    pop();
    //libra
    push();
    rotate(radians(-135));
    line(-10, -190, 10, -190);
    beginShape();
    vertex(-10, -195);
    vertex(-2, -195);
    vertex(-8, -205);
    vertex(0, -210);
    vertex(8, -205);
    vertex(2, -195);
    vertex(10, -195);
    endShape();
    pop();
    //scorpio
    push();
    rotate(radians(-105));
    beginShape();
    vertex(-20, -210);
    vertex(-15, -205);
    vertex(-15, -190);
    vertex(-15, -205);
    vertex(-10, -210);
    vertex(-5, -205);
    vertex(-5, -190);
    vertex(-5, -205);
    vertex(0, -210);
    vertex(5, -205);
    vertex(5, -190);
    vertex(10, -190);
    endShape();
    pop();
    //sagittarius <3
    push();
    rotate(radians(-75));
    line(-10, -190, 10, -210);
    line(-5, -205, 5, -195);
    line(0, -208, 10, -210);
    line(10, -210, 10, -200);
    pop();
    //capricorn
    push();
    rotate(radians(-45));
    beginShape();
    vertex(-15, -210);
    vertex(-10, -205);
    vertex(-10, -190);
    vertex(-10, -205);
    vertex(0, -210);
    vertex(5, -205);
    vertex(5, -190);
    vertex(10, -190);
    vertex(7, -195);
    vertex(0, -190);
    endShape();
    pop();
    //aquarius
    push();
    rotate(radians(-15));
    beginShape();
    vertex(-10, -200);
    vertex(-5, -210);
    vertex(0, -200);
    vertex(5, -210);
    vertex(10, -200);
    endShape();
    beginShape();
    vertex(-10, -190);
    vertex(-5, -200);
    vertex(0, -190);
    vertex(5, -200);
    vertex(10, -190);
    endShape();
    pop();
    //pisces
    push();
    rotate(radians(15));
    line(-10, -210, 0, -200);
    line(0, -200, -10, -190);
    line(5, -200, 15, -190);
    line(5, -200, 15, -210);
    line(-5, -200, 10, -200);
    pop();
}

Project 06 – Abstract Clock

Explanation for this abstract clock:

  1. The sun/moon is the HOUR HAND
  2. The duck is the MINUTE HAND
  3. The clouds’ circle is the SECOND HAND
Clock diagram

/*
 * Andrew J Wang
 * ajw2@andrew.cmu.edu
 * Section A
 * Project-05
 *
 * This program draws clock
 */

//set randam numbers for the wavy lines of reflection of the sun
var rando = 0;
//set sin values for waving reed
var drR=0;

function setup() {
    createCanvas(480,480);
    background(255);
}

function draw() {
//get dates for hours, minutes, seconds,and miliseconds
var dt = new Date();
//get location for ducks (MINUTES)
var dx=480-dt.getMinutes()*8-dt.getSeconds()*8/60;
//get location for the sun (HOURS)
var dy=(18-dt.getHours()-dt.getMinutes()*1/60-dt.getSeconds()*1/3600)*300/12;

//background
background(80,50,180);

//create reflection of the sun
if (dy>-125 & dy<425)
{
    sunReflection (dy);
    push();
    //hiding the additional parts above sea level
    fill (80,50,180);
    rect(100,200,280,100);
    pop();
}

//show moon between 6PM to 6AM
if (dy<62)
{
    moon (300+dy,125);
}

else if (dy>238)
{
    moon ((dy-300),125);
}

//create moutains and their reflections
moutain(-50,300,150,100);
moutainReflection(-50,300,150,75);

moutain(50,300,110,50);
moutainReflection(50,300,110,37.5);

moutain(350,300,250,50);
moutainReflection(350,300,250,37.5);

//gradiant sky and sea
gradiantScreen (0,300);
gradiantScreenReverse (300,600);

//draw horizon
stroke(255);
strokeWeight(1);
line (0,300,width,300);

//set sun between 6AM to 6PM
if (dy>-125 & dy<425)
{
    sun(dy,125);
}

//creating lands
land2(-100,480,500,50);
land(-200,480,400,75);

//creating clouds (SECONDS)
clouds();

//creating ducks
duck(dx,350);
duck(dx+480,350);
duck(dx-480,350);

//creating reeds
reed2();
reed();

}

//gradiant sky
function gradiantScreen (y1,y2)
{       
    //for loop changing alpha values for small rectangles
    for (var k=0; k<(y2-y1); k++)
    {   
        noStroke();
        fill (255,220,220,150/(y2-y1)*k);
        rect (0,y1+k,width,1);
    }
}

//gradiant sea but the same as gradiant sky but in reverse
function gradiantScreenReverse (y1,y2)
{
    for (var k=0; k<(y2-y1); k++)
    {   
        noStroke();
        fill (255,220,220,180/(y2-y1)*k);
        rect (0,y2-k,width,1);
    }
}

//creating sun
function sun (y,r)
{       
    fill(255,255,180);
    //outline of the sun
    strokeWeight(5);
    stroke(255,255,230,50);
    var angle = acos((300-y)/(r/2));
    //make arc if parts of the sun is below horizon
    if (300-y<=r/2)
    {
        arc (width/2,y,r,r,-(Math.PI/2-angle)+Math.PI ,2*Math.PI + (Math.PI/2-angle),OPEN);
    }
    //dont make arc if it is not
    else
    {
        circle(width/2,y,r);
    }
}
//creating moon same as sun but having a different arc/circle for the missing piece
function moon (y,r)
{
    fill(255,255,180);
    strokeWeight(0);
    stroke(255,255,230,50);
    var anglem1 = acos((300-y)/(r/2));
    var anglem2 = acos((300-y+20/Math.sqrt(2))/(r/2-20));
    if (Math.abs(300-y)<r/2)
    {
        arc (width/2,y,r,r,-(Math.PI/2-anglem1)+Math.PI ,2*Math.PI + (Math.PI/2-anglem1),OPEN);
        //the missing piece
        if (300-y+20/Math.sqrt(2)<=(r/2-20))
        {   
            push();
            fill(80,50,180);
            arc (width/2+20/Math.sqrt(2),y-20/Math.sqrt(2),r-40,r-40,-(Math.PI/2-anglem2)+Math.PI ,2*Math.PI + (Math.PI/2-anglem2),OPEN);
            pop();
        }
        else
        {
            push();
            fill(80,50,180);
            circle(width/2+20/Math.sqrt(2),y-20/Math.sqrt(2),r-40);
            pop();
        }
    }
    else
    {
        circle(width/2,y,r);
        push();
        fill(80,50,180);
        //the missing piece
        circle(width/2+20/Math.sqrt(2),y-20/Math.sqrt(2),r-40);
        pop();
    }

}

//mountain reflection using bezier
function moutainReflection(mx,y,w,h)
{   
    fill(0,0,255);
    strokeWeight(0);
    bezier(mx,y,mx,y+h,mx+w,y+h*2,mx+w,y);
}

//mountaini using benzier
function moutain(mx,y,w,h)
{   
    fill(0,0,255);
    stroke(255,255,230,50);
    strokeWeight(2);
    bezier(mx,y,mx,y-h,mx+w,y-h*2,mx+w,y);
}

//making clouds
function clouds()
{
    fill(255,255,255,75);
    //getting seconds and milliseconds
    var dt = new Date();
    var x=dt.getSeconds()*8+dt.getMilliseconds()*0.008;;
    var y=480;
    push()
    translate (0,30);
    //original moving clouds
    rect(-50+x,120,200,30,15);
    rect(-70+x,155,150,20,10);
    rect(-100+x,100,150,16,8);
    //clones to make the animation look smooth
    rect(-50+x+y,120,200,30,15);
    rect(-70+x+y,155,150,20,10);
    rect(-100+x+y,100,150,16,8);

    rect(-50+x-y,120,200,30,15);
    rect(-70+x-y,155,150,20,10);
    rect(-100+x-y,100,150,16,8);
    //original moving clouds
    rect(200+x,20,250,30,15);
    rect(350+x,50,150,20,10);
    //clones to make the animation look smooth
    rect(200+x-2*y,20,250,30,15);
    rect(350+x-2*y,50,150,20,10);

    rect(200+x-y,20,250,30,15);
    rect(350+x-y,50,150,20,10);

    //seconds indicator circles
    fill(255);
    circle(0+x,120,20);
    circle(0+x-y,120,20);
    circle(0+x+y,120,20);

    pop();
}

//create reflection of the sun using noice function to make it expand
function sunReflection (y)
{   
    rando+=0.01;
    push()
    fill (255,255,255,180);
    strokeWeight(0);
    stroke (255,255,255,180);
    rectMode(CENTER);
    rect(width/2,300+(300-y)/2,noise(rando)*50+125,4,2);
    rect(width/2,300+(300-y)/2+8,noise(rando*2)*50+75,4,2);
    rect(width/2,300+(300-y)/2-8,noise(rando-1)*50+75,4,2);
    rect(width/2,300+(300-y)/2+16,noise(rando-0.5)*50+40,4,2);
    rect(width/2,300+(300-y)/2-16,noise(rando+0.5)*50+40,4,2);
    pop()
}
//land darker
function land(mx,y,w,h)
{
    fill(30,30,130);
    noStroke();
    bezier(mx,y,mx,y-h*2,mx+w,y-h,mx+w,y);
}
//land lighter
function land2(mx,y,w,h)
{
    fill(75,75,190);
    noStroke();
    bezier(mx,y,mx,y-h*2,mx+w,y-h,mx+w,y);
}
//duck
function duck(x,y)
{   


    fill(30,30,130,180);
    triangle (x-5,y,x-10,y+5,x-5,y+5);
    triangle (x+5,y+5,x+5,y+10,x+35,y+10);
    arc (x,y,10,10,Math.PI,2*Math.PI);
    rect (x-5,y,10,10);
    arc (x+15,y+10,40,25,0,PI,OPEN);
}
//reed
function reed()
{   
    //moving based on sin function
    var dr = Math.sin(Math.PI*drR);
    drR+=0.002;
    push();
    translate(100,500);
    rotate(dr/20);

    fill(180,120,30);
    rect(-0,-200,10,80,5);
    rect(3,-120,4,120);

    fill(190,130,60);
    rect(-40,-190,10,80,5);
    rect(-37,-110,4,120);

    fill(210,110,80);
    rect(-20,-160,10,80,5);
    rect(-17,-80,4,120);
    pop();

}
//second types of reed (blue)
function reed2()
{   
    
    var dr = Math.sin(Math.PI*drR);
    drR+=0.002;
    push();
    translate(50,500);
    rotate(-dr/20);

    fill(50,60,100);
    rect(-0,-200,10,80,5);
    rect(3,-120,4,120);

    fill(30,70,100);
    rect(-40,-190,10,80,5);
    rect(-37,-110,4,120);
    pop();
}

Project 06 – Abstract clock

For my abstract clock, I wanted to deconstruct the clock in hours, minutes and seconds, so I created three separate motions of the clock to illustrate the time in 24 hours.

sketch
//Angela Yang
//Section C

function setup() {
  createCanvas(450, 440);
  angleMode(DEGREES);
}

function draw() {
  //Default side bar
  background(0);
  push();
  translate(225, 285);
  rotate(-90);

  //Clock face
  fill("white");
  ellipse(0, -12, 5, 5);
  ellipse(0, 12, 5, 5);
  stroke("white");
  strokeWeight(3);
  line(-18, -5, -18, 3);

  let hours = hour();
  let minutes = minute();
  let seconds = second();

  stroke(255, 100, 150);
  noFill();
  strokeWeight(5);
  let end = map(seconds, 0, 60, 0, 360);
  arc(0, 0, 100, 100, 0, end);

  stroke("#0BDA51");
  let end2 = map(minutes, 0, 60, 0, 360);
  arc(0, 0, 80, 80, 0, end2);

  stroke("yellow");
  let end3 = map(hours, 0, 24, 0, 360);
  arc(0, 0, 60, 60, 0, end3);
  pop();

  fill(255);
  noStroke();
  text(hours + ":" + minutes + ":" + seconds, 390, 20);

  // stroke()
  push();
  translate(112.5, 112.5);
  noFill();
  stroke(255);
  ellipse(0, 0, 70);
  noStroke();

  rotate(-90);
  
  //Hour clock on the left corner 
  for (let i = 0; i < 12; i++) {
    if (i == hours % 12) {
      fill("yellow");
      ellipse(50, 0, 15);
    } else {
      fill(255);
      ellipse(50, 0, 10);
    }
    rotate(360 / 12);
  }
  pop();

  push();
    translate(225 + 112.5, 112.5);
    rotate(-90);
    noFill();
    stroke(255);
    ellipse(0, 0, 110);
    noStroke();
    rotate(-90);
  
  //Minute clock on the right corner 
  for (let i = 0; i < 60; i++) {
    if (i == minutes % 60) {
      fill("#0BDA51"); //Draws the indicator circle 
      ellipse(70, 0, 8);
    } else {
      fill(255);
      ellipse(70, 0, 4);
    }
    rotate(360 / 60);
  }
  pop();
  
  //Second clock in the middle 
  push();
   translate(225, 112.5 + 170);
   noFill();
   stroke(255);
   ellipse(0, 0, 160);
   noStroke();
   rotate(-90);

  for (let i = 0; i < 60; i++) {
    if (i == seconds % 60) {
      fill(255, 100, 150);
      ellipse(100, 0, 10);
    } else {
      fill(255);
      ellipse(100, 0, 6);
    }
    rotate(360 / 60);
  }
  pop();

}

Project-06-Abstract-Clock

For this project, I used driving as the way of demonstrating time, which the driver will drive endlessly during day and night.

-The position of the car represents every second within a minute, moving from left to right (0-59).

-The position of the Tree represents every minute within an hour, moving from left to right (0-59).

-The Sun and light clouds demonstrate it’s the first 12 hours, while the Moon and the dark clouds demonstrate the 13th-24th hours.

-The amount of day bars (light blue) demonstrates how many hours it’s into the first 12 hours, while the amount of night bars (dark gray) demonstrates how many hours it’s into the 13th to 24th hours. All bars appear from left to right.

-The day bars are background of the sky in the nights, while the night bars are background of the sky in the day.

-The clouds are just dynamic decorations.

sketchDownload
/* Jiayi Chen
   jiayiche    Section A */
var h  //hours
var s  //seconds
var m  //minutes
var dayColor
var nightColor
var boxColor=[]
var cloudAndStarX=[]
var cloudAndStarY=[]
var cloudAndStarL=[]
var cloudAndStarH=[]
function setup() {
    createCanvas(480, 480);
    h = hour();
    s = second();
    m = minute();
    dayColor= color(135,206,250);
    nightColor= color(112,128,144);
    for(var i=0; i<12;i++){
        if(h < 12){
            boxColor[i]=nightColor;   //color of the day
        }else if(h>11){
        boxColor[i]=dayColor; //color of the night
        }
    }

    for(var i=0; i<17;i++){
        cloudAndStarX[i]=random(0,width-240);
        cloudAndStarY[i]=random(0,140);
        cloudAndStarL[i]=random(30,120)
        cloudAndStarH[i]=random(30,100)
    }
}

function draw() {
    //The Sky that represent hours
    //change the number of box to represent hours in night tmie
    h = hour();
    s = second();
    m = minute();
    background('gray');
    push();
    if (h < 12){ 
        for (var i=0; i<h;i++){
            boxColor[i]=dayColor
        }  
    //change the number of box to represent hours in night tmie
    }else if(h >= 12){
        for (var i=0; i<(h-12);i++){
            boxColor[i]=nightColor;
        }

    }

    for (var i=0; i<12;i++){  //Background sky colors changing base on day or night
        fill(boxColor[i])
        rect(i*width/12,0,width/12,height/2);
    }
    pop();

    //grass
    push();
    fill(0,255,127);
    rect(0,240,width,70)
    rect(0,height-65,width,65)
    pop();
    //road
    for (var i=0; i<5;i++){ 
        rect(i*100,350,50,25);
    }

    //The Car represent seconds
    car(s/60*width,360);


    //The Tree Represent minutes
    tree(m/60*width,200);


    //clouds and sun
    push();
    if(h<12){
        fill(255,69,0)   // the colors and shape for sun
        circle(60,60,50)
        for (var i=0; i<5;i++){
            fill(255,255,255,100) //clouds in day
            rect(cloudAndStarX[i]+s/60*width/4,cloudAndStarY[i],cloudAndStarL[i],cloudAndStarH[i]);   
        }
    //Clouds and a full moon 
    }else if(h>11){
        fill(246, 241, 213)   // the colors and shape for moon
        circle(width-50,60,50)
        for (var i=0; i<5;i++){
            fill(0,0,0,150) // clouds in night
            rect(cloudAndStarX[i]+s/60*width/4,cloudAndStarY[i],cloudAndStarL[i],cloudAndStarH[i]);   
        }
    }
    pop();

}


function car(cx,cy){
    //car body
    push();
    fill('red')
    rect(cx,cy,100,40);//main body
    rect(cx+25,cy-30,40,30);//middle
    triangle(cx+65,cy,cx+65,cy-30,cx+95,cy);//right
    triangle(cx+5,cy,cx+25,cy-30,cx+25,cy);//left

    //Weels
    fill('gray') //outer weels
    circle(cx+25,cy+40,25);
    circle(cx+75,cy+40,25);
    fill('ivory')//inner weels
    circle(cx+25,cy+40,17);
    circle(cx+75,cy+40,17);

    //windows
    fill('azure');
    rect(cx+28,cy-27,34,24);
    triangle(cx+68,cy-3,cx+68,cy-27,cx+92,cy-3);
    triangle(cx+10,cy-3,cx+22,cy-25,cx+22,cy-3);

    //lights
    fill('gold');//back lights and sub lights
    rect(cx+80,cy+20,20,5);
    rect(cx,cy+3,10,15);
    fill('yellow');//front light
    rect(cx+90,cy+5,10,12);
    pop();
}


function tree(tx,ty){
    push();
    push();
    fill('green');//leaves
    rect(tx-30,ty,90,50);
    rect(tx-15,ty-30,60,30);
    pop();
    fill(139,69,19);//tree log
    rect(tx,ty+20,30,80);
    pop();
}

Project 06 – Abstract Clock

Big circles with no fills and rotation angles of small circles represent seconds.
-The top of the canvas displays the first 30 seconds,
-and the bottom displays the second 30 seconds.

The size of the small rotating circles represents minutes.
-The size of the main circle corresponds to the minutes.
-The greater the current minutes, the greater the size of the circles.

The fill color of the upper biggest circle represents hours.
-Each different hour represents a different fill color.

The stroke colors of the upper big circles represent day and night.
-During the day, the strokes are in the color of light yellow.
-During the night, the strokes are in the color blue.

P6

sketch
//Xinyi Du 
//15104 Section B
//xinyidu@andrew.cmu.edu
//Project-05

/*
Big circles with no fills and rotation angles of small circles represent seconds. 
Top of the canvas displays the first 30 seconds, 
and the bottom displays the second 30 seconds.

The size of the small rotating circles represent minutes.
The size of the main cirle correspond to the minutes. 
The greater the current minutes, the greater the size of the circles. 

The filled color of the upper biggest circle represent hours.
Each different hour represent a different filled color.

The strokes of the upper big circles represent day and night.
During the day, the strokes are in color of light yellow.
During the night, the strokes are in color if blue.
*/

function setup() {
    createCanvas(480, 450);
    frameRate(15);
}

function draw() {
    background(50);
    //set hour, minute, and second
    var hourN = hour();
    var minuteN = minute();
    var secondN = second();

    //To present seconds & hours:
    //draw the number of circles with no fill according to the seconds
    for (var s = 0; s<secondN; s++) {
        //if seconds less than 30, draw the circles on the top half of the canvas
        if (s < 30) { 
            //if during the day, stroke color light yellow
            if (hourN <= 18 & hourN >= 6) {
                var r = 255;
                var g = 243;
                var b = 178;
                stroke(r, g, b);
            //if during the night, stroke color blue
            } else {
                var r = 80;
                var g = 131;
                var b = 220;
                stroke(r, g, b);
            }
            //fill color represent hour
            Hcolor(hourN);
            //each circle with different diameter represent one second
            circle(width/2, -60, 650-(s*15));
        } 
        //if seconds more than 30, draw the circles on the bottom half of the canvas
        if (s >= 30) {
            //stroke color for the bottom half circles: gradually darkening white
            stroke(255-(s-30)*6);
            noFill();
            //each circle with different diameter represent one second
            circle(width/2, height+60, 650-((s-30)*15));
        } 
    }

    
    //To present seconds & minutes:
    for (var s = 0; s<secondN; s++) {
        stroke(255);
        //if seconds less than 30, rotate along the outermost stroke of the top half circles
        if (s < 30) {
            push();
            //tranlate the origin
            translate(width/2, -60);
            //polar coordinates
            var angle = 47+(secondN/60)*180;
            var x = (650/2) * cos(radians(angle));
            var y = (650/2) * sin(radians(angle));
            // fill the main circle that represent minutes with day color
            fill(r, g, b);
            stroke(r, g, b);
            //drew the smaller circles that rotate along the strokes of different circles
            //the size of the main cirle correspond to the minutes
            circle(x, y, minuteN);
            fill(100);
            //other smaller circles
            var x1 = (650/2-30) * cos(radians(angle-40));
            var y1 = (650/2-30) * sin(radians(angle-40));
            circle(x1, y1, minuteN-minuteN/3);
            var x2 = (650/2-60) * cos(radians(angle-20));
            var y2 = (650/2-60) * sin(radians(angle-20));
            circle(x2, y2, minuteN-minuteN/(2/3));
            var x3 = (650/2-90) * cos(radians(angle-70));
            var y3 = (650/2-90) * sin(radians(angle-70));
            circle(x3, y3, minuteN-minuteN/2);
            var x4 = (650/2-120) * cos(radians(angle-50));
            var y4 = (650/2-120) * sin(radians(angle-50));
            circle(x4, y4, minuteN-minuteN/1.5);
            pop();
        }
        //if seconds more than 30, rotate along the outermost stroke of the bottom half circles
        if (s >= 30) {
            push();
            //tranlate the origin
            translate(width/2, height+60);
            //polar coordinates
            var angle = 180+47+((secondN-30)/60)*180;
            var x = (650/2) * cos(radians(angle));
            var y = (650/2) * sin(radians(angle));
            // fill the main circle that represent minutes with day color
            fill(r, g, b);
            stroke(255);
            //drew the smaller circles that rotate along the strokes of different circles
            //the size of the main cirle correspond to the minutes
            circle(x, y, minuteN);
            fill(100);
            //other smaller circles
            var x1 = (650/2-30) * cos(radians(angle-40));
            var y1 = (650/2-30) * sin(radians(angle-40));
            circle(x1, y1, minuteN-minuteN/3);
            var x2 = (650/2-60) * cos(radians(angle-20));
            var y2 = (650/2-60) * sin(radians(angle-20));
            circle(x2, y2, minuteN-minuteN/(2/3));
            var x3 = (650/2-90) * cos(radians(angle-70));
            var y3 = (650/2-90) * sin(radians(angle-70));
            circle(x3, y3, minuteN-minuteN/2);
            var x4 = (650/2-120) * cos(radians(angle-50));
            var y4 = (650/2-120) * sin(radians(angle-50));
            circle(x4, y4, minuteN-minuteN/1.5);
            pop();
        }

    }

    //legend showing the color that respond to each hour
    for (i=0; i<24; i=i+1) {
            Hcolor(i)
            noStroke();
            circle(width-20, 12+i*18.5, 12, 12);      
    }
    for (i=23; i>=0; i=i-1) {
            Hcolor(i)
            noStroke();
            circle(20, height-12-i*18.5, 12, 12);   
    }
}

//To present hours:
//Fill each different hour with a different color:
function Hcolor(h) {
    if (h == 0) {
        fill(6, 24, 51);
    } else if (h == 1) {
        fill(10, 33, 62);
    } else if (h == 2) {
        fill(19, 54, 103);
    } else if (h == 3) {
        fill(22, 59, 98);
    } else if (h == 4) {
        fill(24, 64, 106);
    } else if (h == 5) {
        fill(28, 69, 101);
    } else if (h == 6) {
        fill(36, 83, 118);
    } else if (h == 7) {
        fill(57, 125, 155);
    } else if (h == 8) {
        fill(116, 186, 191);
    } else if (h == 9) {
        fill(190, 223, 198);
    } else if (h == 10) {
        fill(218, 223, 148);
    } else if (h == 11) {
        fill(240, 212, 124);
    } else if (h == 12) {
        fill(245, 194, 121);
    } else if (h == 13) {
        fill(242, 182, 107);
    } else if (h == 14) {
        fill(240, 167, 103);
    } else if (h == 15) {
        fill(229, 147, 89);
    } else if (h == 16) {
        fill(226, 124, 124);
    } else if (h == 17) {
        fill(199, 109, 136);
    } else if (h == 18) {
        fill(124, 68, 130);
    } else if (h == 19) {
        fill(72, 41, 121);
    } else if (h == 20) {
        fill(44, 28, 107);
    } else if (h == 21) {
        fill(33, 39, 97);
    } else if (h == 22) {
        fill(16, 24, 75);
    } else if (h == 23) {
        fill(6, 14, 60);
    } 
}

Project 06: Clock

sketch

//Name: Hari Vardhan Sampath
//Section: E
//eMail address: harivars@andrew.cmu.edu
//Project-06

function setup() {
    createCanvas(450, 300);
}

function draw() {
    var s = map(second(), 0, 60, 0 , width); //runs from left to right
    var m = map(minute(), 0, 60, 0 , width); //runs from left to right
    var h = map(hour(), 0, 24, height , 0); //runs from bottom to top
    var cR;
    var cG;
    var cB;
    // color caliberation for the background w.r.t. hour
    if (hour() > 0 & hour() < 6) {
        cR = 0;
        cG = 50;
        cB = 100;
    }
    else if (hour() > 6 & hour() < 15) {
        cR = 50;
        cG = 150;
        cB = 250;
    }
    else if (hour() > 15 & hour() < 19) {
        cR = 50;
        cG = 150;
        cB = 250;
    }
    else if (hour() > 19 & hour() < 24) {
        cR = 0;
        cG = 25;
        cB = 51;
    }
    background(cR, cG, cB); // cliberated background

    // grid for second
    for (var xS = 0; xS <= width; xS += width/60) {
        stroke('rgba(10, 10, 10, 0.9)');
        strokeWeight(1);
        line(xS, 200, xS, height);
    }
    // grid for minute
    for (var xM = 0; xM <= width; xM += width/60) {
        stroke('rgba(10, 10, 10, 0.9)');
        strokeWeight(4);
        line(xM, 100, xM, 200);
    }
    // grid for hour
    for (var xH = 0; xH <= width; xH += height/24) {
        stroke('rgba(10, 10, 10, 0.9)');
        strokeWeight(10);
        line(width/2, xH, width - height/2, xH);
    }
    // second runs along the horizontal grid left to right
    push();
    stroke(cR, cG, cB);
    strokeWeight(2);
    line(s, 200, s, height);
    pop();
    // minuit runs along the horizontal grid from left to right
    push();
    stroke(cR, cG, cB);
    strokeWeight(3);
    line(m, 100, m, 200);
    pop();
    // hour runs along the vertical grid from bottom to top 
    push();
    stroke(cR, cG, cB);
    strokeWeight(9);
    line(width/2, h, width - height/2, h);
    pop();
}

Project 06

This is my duck clock

the amount of ducks corresponds to the 24 hours and they spin once a minute and blink once a second

sketch
//Evette LaComb 
//elacomb@andrew.cmu.edu
// Section D 
// Project 06 - Duck Clock 

    //Concept: grid of 5 x 5, 24 ducks, every hour a new duck swims onto screen. 
    //each duck rotates once a minute.
    //need a function to draw the ducks
    //need a loop for the ducks- where do they enter from, where do they go each hour
    //need a transformation to roate each duck around its center axis- part of function
// b for bubbles in water:
var b = [];
//angle of roatation:
var angleR = 0;
var direction = 1;
//starting array for x position of ducks; 
var stx = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
//starting array for y position of ducks;
var sty = [200, 280, 200, 120, 280, 200, 120, 120, 280, 200, 120, 360, 40, 280, 40, 200, 360, 40, 280, 360, 360, 120, 40, 360];
//end position array for position of ducks;
var endx = [200, 120, 280, 200, 200, 120, 280, 120, 280, 40, 360, 200, 280, 40, 360, 360, 120, 200, 360, 40, 280, 40, 120, 360];
var speed = 1;

function setup() {
    createCanvas(400, 400);
    // object and Array for water texture: 
    for (i = 0; i < 1000; i ++) {
        b[i] = new Object();
        b[i].c = random(255);
        b[i].x = random(5, width-5);
        b[i].y = random(5, height-5);
        //speed that water moves: 
        b[i].dx = random(-0.1, 0.1);
        b[i].dy = random(-0.1, 0.1);
    }  
    frameRate(60);
}

function draw() {
    background("lightblue");
    var h = hour();
    //loops to create water texture
    for (i = 0; i <= 24; i ++) {
        bubble(b[i]);
        update_bubble(b[i]);
    }
    //loops t ocreate ducks corresponding to arrays 
    for (i = 0; i <= hour() - 1; i ++){
        duck(stx[i], sty[i]);
        stx[i] += speed;
        if(stx[i] >= endx[i]){ stx[i] = endx[i]};
    }
    //beach details:
    push();
    rotate(radians(-45));
    fill(255, 255, 255, 60);
    ellipse(0, 0, 320, 150);
    fill(200, 190, 160)
    ellipse(0, 0, 300, 130)
    pop();
    stroke(0);
    strokeWeight(2);
    //text('Current hour:\n' + h, 5, 50);
}


function duck(stx, sty){
//duck stuff: 
    //draw duck at coordinate x, y
    push();
    translate(stx, sty);
    //rotate the duck; 
    rotate(radians(angleR));
    angleR += 0.007;
    //cosmetics for duck:
    noStroke();
    fill("lightBlue");
    ellipse(0, 0, 80, 70);
    fill(230);
    ellipse(0, 0, 70, 60);
    fill(230);
    triangle(10, 30, 10, -30, 45, 0)
    fill("orange");
    ellipse(-25, 0, 30);
    fill("white");
    //stuff to make ducks blink according to seconds 
    ellipse(-10, 0, 40);
    var s = second();
    if (s % 2 == 0){
        fill("black");
    }else{
        fill("white");
    }
    ellipse(-15, 17, 5);
    ellipse(-15, -17, 5);
    pop();

}

function bubble(b){
//cosmetics of water texture:
    noFill();
    strokeWeight(10);
    stroke(255, 255, 255, 20)
    ellipse(b.x, b.y, 70, 70);
}

function update_bubble(b){
//tecnical stuff for water texture:
    //water movement:
    b.x += b.dx;
    b.y += b.dy;
    //if reach edge of screen change direction: 
    if ( b.x >= width || b.x < 0){
        b.dx = -b.dx;
    }

    if (b.y >= height || b.y < 0){
        b.dy = -b.dy;
    }
}

Project-06-aarnavp

For this project, I was inspired by the concept of dendrochronology, which is the study of time depiction through tree rings. Tree rings are indicative not only of the age of the tree, but also the conditions of the climate at the time. I thought this was really interesting, as the from a distance, the time can’t be easily counted, but it depicts more than just time, but place.

The tree ring is comprised of the layered brown/green ring (which denotes 24 layers for 24 hours), and then an underlying minutes and seconds red ring which grows gradually (and doesn’t layer).I also represented days from the moving ellipses in the center of the tree ring, to mimic the idea of celestial bodies.

sketch
//Aarnav Patel
//Section D
//aarnavp@andrew.cmu.edu
//Project 06

//Inspired by dendrochronology (how time is depicted through tree rings)

var radius;
var dayX = [];
var dayY = [];
var degree = [];
var dDegree = []
var diam;

function setup() {
    createCanvas(480, 480);
    let m = month();

    //finding the days per month
	if ( m == 4 || m == 6 || m == 9 || m == 11) {	
		diam = width / 30;
	} else if (m == 1 || m ==3 || m == 5 || m == 7 || m == 8 || m == 10 || m == 12) {		
		diam = width / 31;
	} else {			//february
		diam = width / 28;
	}
    
    radius = width / 60; //for seconds and minutes, they increment evenly 60 times until reach end of canvas
    ringColor = color(random(150, 160), random(105, 155), random(90, 100), 255 / 24);	//opacity is 255/24 so that the center of circle wil eventaully be 100% opacity
    			//random "magic paramters" is for random shade of brown (like tree barks)
    for (var i = 0; i < day(); i++) {
    	append(dayX, diam * i)
    	append(dayY, 0);
    	append(degree, 0);
    	append(dDegree, radians(random(-1, 1)));
    }
}

function draw() {
	background(255);
	translate(width / 2, height / 2);	//set new origin at middle of canvas

	fill(255, 0, 0, 20);	
	drawSecond();
	fill(255, 0, 0, 20);
	drawMinute();
	fill(ringColor);
	drawHour();

	for (var i = 0; i < degree.length; i++) {
		fill(255, 255, 255, 70);		
		ellipse(dayX[i], dayY[i], diam);

		rotate(degree[i]);
		degree[i] = degree[i] + dDegree[i];		//incrementing degree by specific dDegree
	}



}


function drawHour() {					//want the hours rings to be static military time (e.g 24:00) and show circles layered
	for (var i = 0; i < hour(); i++) {	//from 0 to 1 - current hour amount
		noStroke();
		ellipse(0, 0, width / i);		//draws circle proportional to width
	}

}

function drawMinute() {
	ellipse(0, 0, minute() * radius);		//minutes dynamic – increments evenly across canvas

}

function drawSecond() {
	secondR = 8;
	ellipse(0, 0, second() * radius);	//second dynamic – increments evenly across canvas

}

anabelle’s project 06

we always think too much about how time passes by too quickly. don’t be obsessed with aging, and just think about the good that comes with your birthday!

the background indicates to minute (to some extent). at the start of the hour, the background will be pink. it will become increasingly bluer the greater the minute is.

the number of strawberries on the cake indicate the hour of the day in a 12-hour cycle. to distinguish am and pm, the fruit will turn into blueberries in the am and strawberries in the pm.

the number of candles indicates the month and the number of gifts indicates the day.

sketch 

// kayla anabelle lee (kaylalee)
// kaylalee@andrew.cmu.edu
// section c
// project 6

// define variables
let redValue, blueValue, greenValue;
let strawberryFill;
let giftCounter;
let giftDraw;

function setup() {
    createCanvas(480, 480);
    let h = hour(); 
    let m = minute();
    let d = day();
    let mon = month();

    // initialize background color
    redValue = 248;
    blueValue = 226;
    greenValue = 226;

    giftCounter = 0;

}

function draw() {
    // every minute, the background changes by this increment
    let redMinute = 1.25;
    let blueMinute = 0.633;
    let greenMinute = 0.1167;

    // final color will be (173, 188, 219)
    background(redValue - (redMinute*minute()), blueValue - (blueMinute*minute()), greenValue - (greenMinute*minute())); // final color will be (173, 188, 219)

    // set color variables for helper functions
    let cakeColor = color(255, 214, 148);
    let icingColor = color(246, 158, 178);
    let tableColor = color(112, 77, 36);

    let candleColor = color(247, 200, 238);
    let outerFire = color(245, 154, 142);
    let innerFire = color(255, 202, 150);

    let giftColor = color(171, 156, 217);
    let ribbonColor = color(248, 239, 233);

    // draw table and cake
    table(150, height - 105, 275, 190, tableColor); // 4/3 ratio
    cakeBase(150, height - 160, 150, 75, cakeColor);
    cakeBase(150, height - 230, 100, 50, cakeColor);

    // the number of candles = month (12 candles total)
    for (i = 1; i <= month()%12; i++) {
        if (i <= 6) {
            candle(i*15 + 96, 205, 8, 32, candleColor); // (top row)

        } else {
            candle(i*20 - 45, 255, 10, 40, candleColor); // 2/3 ratio (bottom row)
        }
    }

    // the number of gifts = day (31 total)
    giftDraw = true;
    giftCounter = 0;
    for (i = 0; i < 7; i++) {
        for (j = 0; j < 5; j++) {
            if (giftCounter >= day()) {
                giftDraw = false;
            } gift(280 + 30*i, 470 - 30*j, 25, 25, giftColor, ribbonColor, giftDraw);   
            giftCounter += 1;
        }
    }

    print (giftCounter);

    // now working on strawberries
    // for PM, fill is BLUE. for AM, fill is PINK)
    if (hour() <= 12) {
        strawberryFill = color(73, 104, 152);
    } if (hour() > 12) {
        strawberryFill = color(231, 84, 128);
    }

    // the number of strawberries = hour of the day (12 strawberries total)
    for (i = 1; i <= hour()%12; i ++) {
        if (i <= 6) {
            strawberry(i*16 + 92, 220, 15, 25, strawberryFill); // (top row)

        } else {
            strawberry(i*22 - 60, 270, 15, 25, strawberryFill); // 2/3 ratio (bottom row)
        }
    }

    textSize(20);
    textAlign(CENTER);
    text('life is too short to worry about time. eat some cake!', 220, 180, 300, 200);

}

/*my functions*/

function cakeBase(x, y, w, h, color) { // draws the bread part of cake
    var r = (w / 6);
    noStroke();
    fill(color);

    // base rectangle
    rectMode(CENTER);
    rect(x, y, w, h);

    // left arc
    arc(x - w/2 + r/2, y - h/2, r, r, radians(180), radians(270));

    // right arc
    arc(x + w/2 - r/2, y - h/2, r, r, radians(270), radians(360));

    // connect arcs
    line(x - w/2 + r/2, y - 2*r, x + w/2 - r/2, y - 2*r);
    rect(x, y - 7*r/4, w - r, r/2);

}

function table(x, y, w, h, color) { // draws table
    fill(color);
    rectMode(CENTER);
    noStroke();

    // vertical slabs
    rect(x - 3*w/10, y + 3*h/10, w/12, h/2); // left
    rect(x + 3*w/10, y + 3*h/10, w/12, h/2); // right

    // horizontal slabs
    rect(x, y, (3*w)/4, (h/6)); // bottom
    rect(x, y - h/12, w, h/12); // top
}

function gift(x, y, w, h, boxColor, ribbonColor, draw) { // draws one present

    if (!draw) {
        return false;
    }

    rectMode(CENTER);
    noStroke();

    fill(boxColor) // use arrays to create different colors for each gift

    // rectangles
    rect(x, y, 4*w/5, 4*h/5); // bottom
    rect(x, y - 2*h/5, w, h/10); // top

    // bow
    stroke(ribbonColor);
    strokeWeight(w/10);
    noFill();
    circle(x - w/8, y - h/2, w/4);
    circle(x + w/8, y - h/2, w/4);

    // box ribbon
    fill(ribbonColor);
    noStroke();
    rectMode(CENTER);
    rect(x, y, w/5, 8*h/10);
}

function candle(x, y, w, h, color) { // the width to height should be a 1/4 ratio
    rectMode(CENTER);
    fill(color);
    strokeWeight(1);
    stroke(150);
    rect(x, y, w, 4*h/5);

    fill(255, 0, 0, 150); // outer flame
    noStroke();
    ellipse(x, y - 3*h/5, 4*w/5, 3*h/10);

    fill(255, 165, 0, 150);
    ellipse(x, y - 11*h/20, 3*w/5, h/5);
}

function strawberry(x, y, w, h, color) { // draws one strawberry
    fill(color);
    noStroke();

    arc(x, y, w, h, radians(180), radians(0));
    arc(x, y, w, h/10, radians(0), radians(180));

}

function icing(x, y, w, h, color) {
    push();
    translate(x, y);
    fill(color); 
    stroke(color);

    x += cos(radians(x));
    y += sin(radians(y));

    point(x, y);
    pop();
}