Viewing Program

Program Data

Program thumbnail for "{props.program.title}"

Title	New Year Countdown with Fireworks
ID	5396732170207232
Created	11 years ago, 1419918351426
Updated	10 years ago, 1425685713904
Code	/* BIG DISPLAY https://www.khanacademy.org/computer-programming/new-year-countdown-with-fireworks/5396732170207232?width=800&height=600 / /* * Fireworks * * Click to launch a missile * * Discovered something very important about arrays, splice * and sequence of values. Goto 308 for more... * * Troy Cook / // the builtin Date object is not directly accessible from Processing JS // create a variable that points to the native code in JavaScript var $Date = (function(){ return this.Date; })(); var Burst = function(x,y,r,c,s){ // burst center // adjust x and y so multiple bursts // are at slightly different locations this.x = x + random(-3,3); this.y = y + random(-3,3); // final radius of burst this.r = r; // if no color is specified then // generate random bright color this.c = c===undefined?color(random(255),random(200,255),255):c; // if no burst speed is specified then // generate random speed this.s = s===undefined?random(0.005,0.01):s; // number of trails radiating from center // limit by radius this.n = round(random(5,constrain(this.r/2,10,50))); // value of this burst is from 0 to 1 // when it reaches 1 then it is complete this.v = 0; // length of each trail // limited by radius this.l = round(random(3,this.r/2)); // stroke weight of trail // limited by radius this.sw = round(random(1,this.r/30)); // angle dividing each trail this.ra = 360/this.n; // real time start this.rt = millis(); // burst type this.t = round(random(0,1)); this.draw = function(a,i) { // receives array and index variables of this object // calculate current v from this.v // makes burst expand quickly at first // then slow down var v = (1-sq(this.v-1)); v = this.v; // real time passage var rt = (millis() - this.rt)/2000; // current radius is maximum radius // multiplied by progress var r = this.r v; // looks better at 1 // apply stroke weight //strokeWeight(this.sw); // save matrix settings pushMatrix(); // square rt for acceleration var rts = sq(rt); // move the origin to the center of the burst // and adjust to simulate falling translate(this.x,this.y+rtsr); // stretch vertically scale(1,1+rts/2); // loop through number of trails for(var j=0; j<this.n; j++){ // x value expressed with r and burst type var x = r (this.t===1?sin(jthis.r):1); // change to trail color stroke(this.c); // draw color trail line(x,0,x+this.l,0); // change to white color stroke(255); // draw spark point(x+this.l,0); // move to next position rotate(this.ra); } // restore matrix settings popMatrix(); // reduce trail length this.l = 0.9; // add speed to progress this.v += this.s; // if the progress is complete if(this.v>1){ // if number of trails is less than 9 // add secondary bursts if(this.n<9 && this.r>30){ // reduce radius r /= 3; // loop through number of trails for(var j=0; j<360; j+=this.ra){ // push additional burst onto array a.push( new Burst(this.x+cos(j)this.r,this.y+(sin(j)+1+rts/2)this.r,r,this.c,0.01) ); } } // remove this object from the array a.splice(i,1); } }; }; var Missile = function(bx,by,ex,ey,s){ // define a Bezier curve trajectory for the missile // beginning this.bx = bx; this.by = by; // first control point this.cx = bx2/3 + ex1/3; this.cy = by1/4 + ey3/4; // second control point this.dx = bx1/3 + ex2/3; this.dy = by1/8 + ey7/8; // end point this.ex = ex; this.ey = ey; // missile speed this.s = s; // position along trajectory from 0 to 1 this.v = 0; // current position this.x = bx; this.y = by; this.draw = function(a,i) { // receives array and index variables of this object // save previous position // adjust x to simulate exhaust turbulence this.px = this.x+random(-2,2); this.py = this.y; // calculate new x and y as the point along the bezier curve this.x = bezierPoint(this.bx,this.cx,this.dx,this.ex,this.v); this.y = bezierPoint(this.by,this.cy,this.dy,this.ey,this.v); // missile is gray stroke(128); // draw missile as a line from previous position to current line(this.px,this.py,this.x,this.y); // update progress this.v += this.s; // if progress is complete if(this.v>1){ // generate random burst radius var r = random(50,100); // loop through random number of burst packages in missle for(var j=0; j<random(1,4); j++){ // push a new burst onto the array // at the current x and y position // and adjust radius to be 20% greater than last a.push( new Burst(this.x,this.y,r=1.2) ); } // remove the missile from the array a.splice(i,1); } }; }; var dateExpand = function(sn){ // this accepts a date serial number and // formats the relevant numbers as text // save positive negative sign var pn = sn<0?"-":"+"; // make serial number positive for accurate calculation sn = abs(sn); // milliseconds var ms = sn%1000; // hundredths of a second var cs = floor(ms/10); // hundredths of a second var ds = floor(ms/100); // divide milliseconds by 1000 to get seconds sn = floor(sn/1000); // seconds var s = sn%60; // divide seconds by 60 to get minutes sn = floor(sn/60); // minutes var m = sn%60; // divide minutes by 60 to get hours sn = floor(sn/60); // hours var h = sn%24; // divide hours by 24 to get days sn = floor(sn/24); // days var d = sn%365; // divide days by 365.25 to get years sn = floor(sn/365); // years var y = sn; // define string variable and include years if not 0 var t = y!==0?nf(y,1,-1)+"y ":""; // add days if years or days are not 0 t += (t>"" \|\| d!==0)?nf(d,1,-1)+"d ":""; // add hours if days or hours are not 0 t += (t>"" \|\| h!==0)?nf(h,1,-1)+"h ":""; // add minutes if hours or minutes are not 0 t += (t>"" \|\| m!==0)?nf(m,2,-1)+"m ":""; // add seconds if minutes or seconds are not 0 t += (t>"" \|\| s!==0)?nf(s,2,-1)+"s ":""; // uncomment to add tenths of a second //t += (t>"" \|\| ds!==0)?"."+nf(ds,1,-1):""; // uncomment to add hundredths of a second //t += (t>"" \|\| cs!==0)?"."+nf(cs,2,-1):""; // uncomment to add milliseconds //t += (t>"" \|\| ms!==0)?"."+nf(ms,3,-1):""; return pn+t; }; // change to Hue Saturation Brightness // to easily generate rainbow colors colorMode(HSB); // define array holding missiles and bursts var m = []; // redefine mousePressed var mousePressed = function() { // add a missile to launch towards mouse position m.push( new Missile(random(width),height,mouseX,mouseY,0.01) ); }; // a list of fonts // add your favorites var fonts = [ "Magneto", "Jokerman", "serif", "sans serif", "impact", "cursive", "monospace", ]; // current font var fn = 0; // text is centered horizontally and vertically textAlign(CENTER,CENTER); // message font size var fs = 50; // message display outline spread // is 1/10 of font size var o = fs/10; // message to display var message = "Wait\nUntil\nMidnight!"; // random lights var rl = []; for(var x=0; x<width; x+=4){ rl[floor(x)] = random(height0.75,height0.8); } var newYear = new $Date("1/1/"+(year()+(month()>1?1:0))+" 12:00 AM"); var draw = function() { // set fill color to transparent black fill(0,0,0,15); // draw a transparent black rectangle // over the screen // to gradually erase missile and burst trails rect(-10,-10,width+20,height+20); // get current date and time var now = new $Date(); // get countdown in number of milliseconds var nycd = now - newYear; // show countdown if time remains if(nycd<-60000){ // countdown text var nycdt = "Your countdown until\nNew Year "+newYear.getFullYear()+"...\n"+dateExpand(nycd); // countdown text color fill(20,255,255,abs(nycd)%1000/10); // medium size textSize(30); // display countdown text text(nycdt,width/2,height/2); } else if(nycd<0) { // minute countdown var nycdt = str(ceil(abs(nycd)/1000)); // display color fill(frameCount%255,255,255); // big text size textSize(200); // display message text(nycdt,width/2,height/2); } // if the missile array is empty // and New Year is here if(m.length<12 && nycd>0){ // change message message = "Happy\nNew\nYear!"; // change to next font in list fn = (fn+1)%fonts.length; // change font textFont( createFont(fonts[fn]), fs ); // add a random missile m.push( new Missile(random(width),height,random(width),random(height/4,height/2),0.01) ); } // loop through all objects in the missile array // start at the last index and move towards 0 // as self-removal shifts the array and // logically skips the next object for(var i=m.length-1; i>=0; i--){ // invoke the draw method for the object // located in the array at index i // pass the array and its index // so it can remove itself when necessary m[i].draw(m,i); } // random lights for(var x=0; x<rl.length;x++){ if(rl[x]){ stroke(25,128,128,sin(x)64+128); rect(x,rl[x],3,height0.8); } } // reflect from 3/5 to 4/5 height for(var y=0; y<height/5; y+=4){ var gr = get(0,height3/5+y,width,5); image(gr,0,height-y+cos(frameCount-y)4); } // display text transparency // based on missile array length var t = m.length10-10; // outlined text color based on frame count fill(frameCount%255,255,155,t); // set text size textSize(fs); // text leading textLeading(fs); // loop through vertical outline for(var y=-o; y<=o; y+=o){ // loop through horizontal outline for(var x=-o; x<=o; x+=o){ // don't draw middle position if(y===0 && x===0){ continue; } // draw text offset by x and y text(message,width/2+x,height/2+y); } } // text color transparent white fill(255,0,255,t); // draw display message in center of outline text(message,width/2,height/2); };
Folds
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgND_yYnLCQw
Votes	189
Spin-Offs	24
Type	PJS
Width	400
Height	400
User Flagged	false
Origin Scratchpad	{"id":"6166415644819456","title":"Contest: Fireworks","deleted":"false","official":"false"}
Hidden From Hotlist	false
Restricted Posting	false
By Child	false
Author Nick	Troy Cook
Author Name	onetruetroy
Author ID	kaid_1050040908180717789041673
Author Profile Access	COACH

Archive Data

Added	10 months ago, 1739381447001
Updated	10 months ago, 1739381454479
Source Deleted	unknown