A basic sketch that shows how to use millis() for basic animation, in this case a fade-in of a rect(). millis() returns the current runtime of the sketch in milliseconds. Left-click for Fade-In, Right-click for Fade-Out. The transparency (alpha channel of fill\/stoke) is calculated evenly across the duration, meaning you only have to change 1 variable (delaytime) for adjusting the speed and fade. I wrote this from scratch as a learning activity some time ago, should be helpful to newcomers.<\/p>\n
http:\/\/www.openprocessing.org\/visuals\/?visualID=30730<\/a><\/p>\n ..continue for code..<\/p>\n A basic sketch that shows how to use millis() for basic animation, in this case a fade-in of a rect(). millis() returns the current runtime of the sketch in milliseconds. Left-click for Fade-In, Right-click for Fade-Out. The transparency (alpha channel of fill\/stoke) is calculated evenly across the duration, meaning you only have to change 1\u2026 Read More »<\/a><\/span><\/p>\n","protected":false},"author":1,"featured_media":359,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[117,93],"tags":[95,94,82],"jetpack_featured_media_url":"http:\/\/www.lazytrap.com\/trapped\/wp-content\/uploads\/2018\/05\/code.png","_links":{"self":[{"href":"http:\/\/www.lazytrap.com\/trapped\/index.php?rest_route=\/wp\/v2\/posts\/366"}],"collection":[{"href":"http:\/\/www.lazytrap.com\/trapped\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.lazytrap.com\/trapped\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.lazytrap.com\/trapped\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.lazytrap.com\/trapped\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=366"}],"version-history":[{"count":8,"href":"http:\/\/www.lazytrap.com\/trapped\/index.php?rest_route=\/wp\/v2\/posts\/366\/revisions"}],"predecessor-version":[{"id":419,"href":"http:\/\/www.lazytrap.com\/trapped\/index.php?rest_route=\/wp\/v2\/posts\/366\/revisions\/419"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/www.lazytrap.com\/trapped\/index.php?rest_route=\/wp\/v2\/media\/359"}],"wp:attachment":[{"href":"http:\/\/www.lazytrap.com\/trapped\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=366"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.lazytrap.com\/trapped\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=366"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.lazytrap.com\/trapped\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=366"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}\r\n<pre class="brush: java; title: ; notranslate" title="">\/\/GLOBALS\r\nint alphavalue;\r\nint starttime;\r\nint delaytime = 9255;\r\nint curtime;\r\n\r\nfloat count_up;\r\nfloat count_down;\r\nfloat calc_alpha;\r\n\r\nvoid setup(){\r\n\u00a0 size(400,180);\r\n}\r\n\r\nvoid draw()\r\n{\r\n\u00a0 background(0); \u00a0\r\n strokeWeight(10);\r\n\u00a0 stroke(120,alphavalue);\r\n\u00a0 fill(255,alphavalue);\r\n\u00a0\r\n\u00a0 rectMode(CORNER);\r\n\u00a0 rect(245,34,130,100);\r\n\u00a0\r\n\u00a0 fill(255);\r\n\u00a0 text("start time: " + starttime, 15, 45); \/\/ start time (runtime when mouse was first clicked)\r\n\u00a0 text("delay time: " + delaytime, 15, 60); \/\/ delay time\r\n\u00a0 text("count: " + ceil(count_up), 15, 75); \/\/ timer count\r\n\u00a0 text("count down: " + ceil(count_down), 15, 90); \/\/ count down\r\n\u00a0 text("current runtime: " + curtime, 15, 105); \/\/ current runtime in ms since sketch started\u00a0\u00a0\r\n\u00a0 text("calculated alpha: " + calc_alpha, 15, 120); \/\/ alpha amount distributed over time\r\n\u00a0 text("alpha: " + alphavalue, 15, 135); \/\/ actual alpha transparency\r\n\r\n\u00a0 if(mousePressed) {\r\n\u00a0\r\n\u00a0\u00a0\u00a0 if (millis() - starttime < delaytime) {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 count_up = (millis() - starttime);\u00a0\u00a0\u00a0\u00a0 \/\/ timer count (difference from time first mousePressed occurs and the total runtime of sketch)\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 count_down = delaytime - count_up; \/\/ countdown since started (mousePressed())\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 if (mouseButton == LEFT) {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 calc_alpha = 255 \/ (delaytime \/ count_up); \/\/ fade-in, calculate alpha value vs. duration\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 alphavalue = ceil(calc_alpha); \/\/ ceil rounds UP and returns the closest integer value\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 }\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 if (mouseButton == RIGHT) {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 calc_alpha = 255 \/ (delaytime \/ count_down); \/\/ fade-out, calculate alpha value vs. duration\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 alphavalue = floor(calc_alpha); \/\/ floor rounds DOWN and returns the closest integer value\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 }\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 curtime = millis(); \/\/report the current runtime only while loop is running. visual readonly only. ignoreable.\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 if (alphavalue == 0) { count_down = 0; count_up = delaytime;}\u00a0\u00a0 \/\/some precision is lost from float to int, so i reset the counters..\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 if (alphavalue == 255) {count_down = 0; count_up = delaytime; } \u00a0\/\/..for visual readout only, also ignoreable.\u00a0\u00a0\u00a0\u00a0\r\n\u00a0\u00a0\u00a0 }\r\n\u00a0\u00a0\u00a0\r\n\u00a0 }\r\n\u00a0 else {\r\n\u00a0\u00a0\u00a0 \/\/alphavalue = 0;\r\n\u00a0 }\r\n\u00a0\r\n}\r\n\r\nvoid mousePressed() {\r\n\u00a0\u00a0\u00a0 starttime = millis();\u00a0 \/\/ mousePressed() is only called once per press, unlike in draw\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \/\/ if starttime was set in draw's mousePressed event, it would never end\r\n}\r\n\r\nvoid mouseReleased() {\r\n\u00a0 redraw(); \/\/ start over\r\n}\r\n<\/pre>\r\n<div class="addtoany_share_save_container addtoany_content_bottom">\r\n<div id="" class="a2a_kit a2a_kit_size_32 addtoany_list a2a_target">\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"