Viewing Program

Program Data

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

Title	Animated Khan Academy Logo
ID	6574830563131392
Created	7 years ago, 1536015963361
Updated	7 years ago, 1536036316492
Code	/** * Animated Khan Academy Logo * by DY * * My hobby: Inadvertently compelling people to * click their mouse repeatedly in a trance. * * Using output from * https://darryl-yeo.com/svg-to-processing-js-converter / // Remove some restrictions on JavaScript enforced // by Khan Academy's environment, like automatic semicolon // insertion and the "const" and "let" keywords. // jshint ignore: start const at = function(s, x, y, f){ pushMatrix() translate(x, y) scale(s) f() popMatrix() } // An infinite-curry function! Pass as many arguments // as you want, whenever you want. Learn more: // https://hackernoon.com/currying-in-js-d9ddc64f162e const drawShape = function(){ beginShape() const call = function(a, b, c, d, e, f){ if(arguments.length === 2) vertex(a, b) else if(arguments.length === 6) bezierVertex(a, b, c, d, e, f) else if(arguments.length === 0) endShape() else if(arguments.length === 1){ if(typeof a === 'number') fill(a) else if(a instanceof Function) a() } return call } if(arguments.length) call.apply(null, arguments) return call } Array.prototype.random = function(){ return this[floor(random(this.length))] } Array.prototype.shuffle = function(){ return this.map(function(a){ return [Math.random(), a] }).sort(function(a, b){ return a[0] - b[0] }).map(function(a){ return a[1] }) } // ======================================== let t, x1, y1, r1, x2, y2, sx, sy, r2 let BG, TEXT_FILL let AVATARS const EMOJI = ['😛', '😄', '😉', '😂', '🎉'] let runs = 0 let screenshot const init = mouseClicked = function(){ // Randomize const surprise = Program.runs > 5 && random(4) < 1 const dark = Program.runs > 5 && random(7) < 1 colorMode(HSB) BG = dark ? color(156.1, 230, 102) : surprise ? color(random(70, 160), 30, 255) : color(76.5, 5, 255) TEXT_FILL = dark ? color(155.125, 50, 255) // color(155.125, 230.01, 241.536) : color(156.1, 230, 102) TEXT_ANIMATION_BRIGHTNESS = dark ? 255 : 200 AVATARS = surprise ? [ 'avatars/aqualine-' + ['sapling', 'tree', 'ultimate'].random(), 'avatars/duskpin-' + ['sapling', 'tree', 'ultimate'].random(), 'avatars/leafers-' + ['sapling', 'tree', 'ultimate'].random(), 'avatars/piceratops-' + ['sapling', 'tree', 'ultimate'].random(), 'avatars/primosaur-' + ['sapling', 'tree', 'ultimate'].random(), 'avatars/starky-' + ['sapling', 'tree', 'ultimate'].random(), 'avatars/marcimus', 'avatars/mr-pants', // + ['', '-with-hat'].random(), 'avatars/old-spice-man', 'avatars/orange-juice-squid', 'avatars/purple-pi' + ['', '-pink', '-teal'].random(), 'avatars/spunky-sam', 'creatures/Hopper-' + ['Cool', 'Happy', 'Jumping'].random(), 'creatures/OhNoes' + ['', '-Happy', '-Hmm'].random(), 'creatures/Winston', ].shuffle() : [] // Set initial state t = 0 switch(runs){ case 0: x1 = 0 y1 = 0 r1 = -2000 x2 = 112 y2 = 256 sx = -3 sy = -3 r2 = 0 break case 1: x1 = -112 y1 = -256 r1 = -1000 x2 = 12 y2 = 56 sx = -9 sy = -9 r2 = 0 break case 2: x1 = -52 y1 = 100 r1 = -300 x2 = 12 y2 = 56 sx = -9 sy = -9 r2 = 0 break default: x1 = 0 y1 = 0 r1 = random(-100, 10) x2 = random(-300, 300) y2 = random(-300, 300) sx = random(-30, 30) sy = random(-30, 30) r2 = random(-600, 600) } // Take screenshot if(runs > 0){ filter(BLUR, 2) screenshot = get() } // Record run runs++ Program.runs = (Program.runs \|\| 0) + 1 const message = 'You\'ve restarted ' + Program.runs + ' times! ' + EMOJI.random() debug(message) if(Program.runs.toString().match(/^[125]0+$/)){ println('') println(message) } } init() // ======================================== background(255) noStroke() imageMode(CENTER) translate(width / 2, height / 2) draw = function() { background(BG) // Previous screenshot if(screenshot && t < 20) at( max(pow(0.85, t), 0), 0, 0, function(){ rotate(t cos(millis() / 10) * 5) tint(0, 0, 255, 255 * pow(0.9, t)) image( screenshot, t * cos(millis() / 10) * 10, t * sin(millis() / 10) * 10 ) noTint() } ) // Avatars at(1, 0, -50, function(){ for(let i = 0; i < AVATARS.length; i++){ const size = 0.55 const height = 100 const speed = 5 const offset = i * 360 / AVATARS.length * 7 const angle = 30 + (360 / AVATARS.length) * i + 0.5 * t const s = size * pow(sin(t * speed - offset), 0.6) * pow(-cos(t), 0.125) if(s > 0) at(s, 0, 0, function(){ rotate(angle) image(getImage(AVATARS[i]), 0, -height / size) }) } }) // Icon at(6, 0, -50, function(){ const transform = function(){ const n = pow(0.93, t) translate(x1 * n, y1 * n) rotate(r1 * n) translate(x2 * n, y2 * n) scale(sx, sy) rotate(r2 * n) sx = (sx - 1) * 0.93 + 1 sy = (sy - 1) * 0.93 + 1 } colorMode(RGB) drawShape(transform)(color(20, 191, 150)) (-11.69, -8.2) (-12.659, -7.587, -13.273, -6.545, -13.34, -5.4) (-13.34, 5.4) (-13.273, 6.545, -12.659, 7.587, -11.69, 8.2) (-2, 13.62) (-0.959, 14.13, 0.259, 14.13, 1.3, 13.62) (11, 8.2) (11.969, 7.587, 12.583, 6.545, 12.65, 5.4) (12.65, -5.4) (12.583, -6.545, 11.969, -7.587, 11, -8.2) (1.31, -13.62) (0.269, -14.13, -0.949, -14.13, -1.99, -13.62) () drawShape(transform)(color(255, 255, 255, (1 - pow(0.95, t)) * 255)) (9.61, -2.68) (4.23, -2.68, 0.21, 1.78, 0.21, 7.25) (0.21, 7.48) (-0.87, 7.48) (-0.87, 7.25) (-0.87, 1.78, -4.87, -2.66, -10.29, -2.68) (-10.29, -2.34, -10.29, -1.99, -10.29, -1.68) (-10.312, 2.458, -7.76, 6.174, -3.89, 7.64) (-2.74, 8.062, -1.525, 8.278, -0.3, 8.28) (0.935, 8.278, 2.16, 8.062, 3.32, 7.64) (7.184, 6.169, 9.731, 2.455, 9.71, -1.68) (9.66, -2, 9.64, -2.34, 9.61, -2.68) () translate(-100 * pow(0.9, t), 600 * pow(0.9, t)) scale(1 + 5 * pow(0.9, t)) ellipse(-0.34, -5.26, 6, 6) }) // "Khan Academy" at(3.3, 0, 95, function(){ let I = 0 const transform = function(){ // translate(100 * pow(0.92, t), 300 * pow(0.92, t)) // scale(1 + 5 * pow(0.92, t)) I++ translate( 40 * pow(0.9, t), 40 * pow(0.925, t) * sin(t * 10 + I * 76) ) rotate(40 * pow(0.5, t)) scale(1 + 5 * pow(0.925, t)) } let i = 0 const getLetterFill = function(){ i++ const n = pow(0.96, max(t - 60, 0)) colorMode(HSB) const c = lerpColor( TEXT_FILL, color( lerp(90, 156, (i * 0.3 + t * 0.02) % 1), 240, TEXT_ANIMATION_BRIGHTNESS, 255 * (1 - pow(0.98, t)) ), n ) return c } // K drawShape(transform)(getLetterFill()) (-70.34, -7.5) (-70.319, -7.786, -70.077, -8.006, -69.79, -8) (-67.79, -8) (-67.486, -8, -67.24, -7.754, -67.24, -7.45) (-67.24, -1.25) (-61.45, -7.77) (-61.349, -7.918, -61.179, -8.004, -61, -8) (-58.7, -8) (-58.331, -8.017, -58.082, -7.628, -58.252, -7.3) (-58.275, -7.255, -58.305, -7.215, -58.34, -7.18) (-64.34, -0.43) (-57.91, 7.26) (-57.679, 7.577, -57.878, 8.026, -58.269, 8.067) (-58.286, 8.069, -58.303, 8.07, -58.32, 8.07) (-60.82, 8.07) (-60.976, 8.079, -61.129, 8.021, -61.24, 7.91) (-67.24, 0.51) (-67.24, 7.51) (-67.24, 7.815, -67.485, 8.065, -67.79, 8.07) (-69.79, 8.07) (-70.098, 8.07, -70.346, 7.818, -70.34, 7.51) () // h drawShape(transform)(getLetterFill()) (-56.22, -7.55) (-56.201, -7.818, -55.988, -8.031, -55.72, -8.05) (-53.86, -8.05) (-53.584, -8.045, -53.361, -7.826, -53.35, -7.55) (-53.35, -1.92) (-52.588, -2.535, -51.629, -2.855, -50.65, -2.82) (-47.27, -2.82, -46.35, -0.48, -46.35, 2.18) (-46.35, 7.5) (-46.36, 7.777, -46.583, 8, -46.86, 8.01) (-48.72, 8.01) (-48.998, 8.005, -49.22, 7.778, -49.22, 7.5) (-49.22, 2.16) (-49.22, 0.69, -49.89, -0.2, -51.15, -0.2) (-52.247, -0.222, -53.189, 0.575, -53.35, 1.66) (-53.35, 7.51) (-53.35, 7.81, -53.49, 8.02, -53.91, 8.02) (-55.72, 8.02) (-55.996, 8.009, -56.215, 7.786, -56.22, 7.51) () // a drawShape(transform)(getLetterFill()) (-40.52, 1.31) (-39.843, 1.322, -39.171, 1.423, -38.52, 1.61) (-38.52, 0.26, -38.86, -0.39, -39.99, -0.39) (-41.001, -0.373, -42.008, -0.242, -42.99, 0) (-43.34, 0.12, -43.54, -0.13, -43.59, -0.45) (-43.82, -1.65) (-43.925, -1.922, -43.764, -2.224, -43.48, -2.29) (-42.3, -2.631, -41.078, -2.809, -39.85, -2.82) (-36.54, -2.82, -35.85, -1.1, -35.85, 1.8) (-35.85, 7.51) (-35.85, 7.792, -36.078, 8.02, -36.36, 8.02) (-37.14, 8.02) (-37.32, 8.02, -37.46, 7.95, -37.6, 7.65) (-37.9, 6.94) (-38.788, 7.81, -39.987, 8.289, -41.23, 8.27) (-43.278, 8.397, -44.966, 6.686, -44.81, 4.64) (-44.75, 2.76, -43.21, 1.31, -40.52, 1.31) () drawShape(BG) (-40.45, 6.13) (-39.664, 6.108, -38.945, 5.68, -38.55, 5) (-38.55, 3.45) (-39.045, 3.246, -39.574, 3.137, -40.11, 3.13) (-41.33, 3.13, -41.99, 3.7, -41.99, 4.64) (-42.05, 5.507, -41.315, 6.219, -40.45, 6.13) () // n drawShape(transform)(getLetterFill()) (-33.41, -2.08) (-33.41, -2.362, -33.182, -2.59, -32.9, -2.59) (-32, -2.59) (-31.795, -2.606, -31.608, -2.47, -31.56, -2.27) (-31.17, -1.27) (-30.329, -2.285, -29.067, -2.853, -27.75, -2.81) (-24.38, -2.81, -23.51, -0.54, -23.51, 2.03) (-23.51, 7.52) (-23.53, 7.78, -23.739, 7.986, -24, 8) (-25.9, 8) (-26.182, 8, -26.41, 7.772, -26.41, 7.49) (-26.41, 2) (-26.41, 0.63, -26.96, -0.22, -28.24, -0.22) (-29.29, -0.249, -30.231, 0.426, -30.54, 1.43) (-30.54, 7.49) (-30.54, 7.88, -30.7, 8, -31.2, 8) (-32.9, 8) (-33.177, 7.99, -33.4, 7.767, -33.41, 7.49) () // A drawShape(transform)(getLetterFill()) (-18.11, 7.42) (-11, -8) (-10.936, -8.158, -10.78, -8.258, -10.61, -8.25) (-10.38, -8.25) (-10.213, -8.257, -10.06, -8.156, -10, -8) (-2.93, 7.45) (-2.783, 7.729, -2.994, 8.063, -3.309, 8.051) (-3.313, 8.05, -3.316, 8.05, -3.32, 8.05) (-5.32, 8.05) (-5.622, 8.069, -5.899, 7.879, -5.99, 7.59) (-7.11, 5.11) (-13.93, 5.11) (-15.06, 7.59) (-15.159, 7.869, -15.424, 8.054, -15.72, 8.05) (-17.72, 8.05) (-18.024, 8.101, -18.269, 7.805, -18.162, 7.516) (-18.149, 7.482, -18.132, 7.45, -18.11, 7.42) () drawShape(BG) (-8.2, 2.53) (-10.49, -2.52) (-10.56, -2.52) (-12.81, 2.53) () // c drawShape(transform)(getLetterFill()) (3, -2.82) (4.536, -2.829, 5.998, -2.163, 7, -1) (7.23, -0.77, 7.12, -0.47, 6.89, -0.24) (5.89, 0.82) (5.66, 1.07, 5.41, 0.95, 5.2, 0.75) (4.658, 0.159, 3.892, -0.175, 3.09, -0.17) (1.495, -0.183, 0.215, 1.146, 0.29, 2.74) (0.192, 4.34, 1.467, 5.689, 3.07, 5.68) (3.963, 5.67, 4.799, 5.236, 5.32, 4.51) (5.491, 4.323, 5.774, 4.293, 5.98, 4.44) (6.98, 5.31) (7.23, 5.54, 7.35, 5.8, 7.16, 6.07) (6.26, 7.511, 4.658, 8.361, 2.96, 8.3) (-1.309, 8.481, -4.173, 3.974, -2.195, 0.186) (-1.199, -1.721, 0.81, -2.881, 2.96, -2.79) () // a drawShape(transform)(getLetterFill()) (12.83, 1.31) (13.507, 1.323, 14.179, 1.424, 14.83, 1.61) (14.83, 0.26, 14.48, -0.39, 13.36, -0.39) (12.349, -0.373, 11.342, -0.242, 10.36, 0) (10.02, 0.12, 9.81, -0.13, 9.77, -0.45) (9.54, -1.65) (9.435, -1.922, 9.596, -2.224, 9.88, -2.29) (11.06, -2.631, 12.282, -2.809, 13.51, -2.82) (16.81, -2.82, 17.51, -1.1, 17.51, 1.8) (17.51, 7.51) (17.51, 7.788, 17.288, 8.015, 17.01, 8.02) (16.23, 8.02) (16.04, 8.02, 15.91, 7.95, 15.77, 7.65) (15.47, 6.94) (14.581, 7.808, 13.383, 8.286, 12.14, 8.27) (10.092, 8.397, 8.404, 6.686, 8.56, 4.64) (8.61, 2.76, 10.15, 1.31, 12.83, 1.31) () drawShape(BG) (12.9, 6.13) (13.689, 6.108, 14.411, 5.681, 14.81, 5) (14.81, 3.45) (14.315, 3.246, 13.786, 3.137, 13.25, 3.13) (12.03, 3.13, 11.37, 3.7, 11.37, 4.64) (11.303, 5.505, 12.037, 6.22, 12.9, 6.13) () // d drawShape(transform)(getLetterFill()) (24.62, -2.82) (25.489, -2.819, 26.351, -2.67, 27.17, -2.38) (27.17, -7.55) (27.189, -7.818, 27.402, -8.031, 27.67, -8.05) (29.53, -8.05) (29.806, -8.045, 30.029, -7.826, 30.04, -7.55) (30.04, 7.51) (30.04, 7.792, 29.812, 8.02, 29.53, 8.02) (28.68, 8.02) (28.43, 8.02, 28.27, 7.81, 28.18, 7.51) (27.9, 6.68) (27.035, 7.69, 25.77, 8.271, 24.44, 8.27) (21.54, 8.27, 19.36, 5.93, 19.36, 2.71) (19.174, -0.311, 21.593, -2.855, 24.62, -2.82) () drawShape(BG) (27.17, 0.4) (26.504, -0.002, 25.738, -0.21, 24.96, -0.2) (23.401, -0.182, 22.186, 1.157, 22.32, 2.71) (22.32, 4.21, 23.17, 5.65, 24.83, 5.65) (25.84, 5.694, 26.772, 5.109, 27.17, 4.18) () // e drawShape(transform)(getLetterFill()) (37.22, -2.82) (39.954, -2.891, 42.183, -0.644, 42.09, 2.09) (42.09, 2.25, 42.09, 2.62, 42.04, 2.78) (42.016, 3.042, 41.803, 3.246, 41.54, 3.26) (34.74, 3.26) (34.789, 4.669, 35.971, 5.771, 37.38, 5.72) (38.205, 5.737, 39.009, 5.46, 39.65, 4.94) (39.91, 4.73, 40.18, 4.71, 40.34, 4.94) (41.24, 6.13) (41.443, 6.325, 41.419, 6.656, 41.19, 6.82) (40.092, 7.764, 38.689, 8.279, 37.24, 8.27) (34.198, 8.272, 31.762, 5.75, 31.87, 2.71) (31.78, -0.31, 34.198, -2.81, 37.22, -2.82) () drawShape(BG) (39.22, 1.38) (39.161, 0.328, 38.273, -0.484, 37.22, -0.45) (36.103, -0.534, 35.115, 0.27, 34.97, 1.38) () // m drawShape(transform)(getLetterFill()) (43.79, -2.08) (43.79, -2.358, 44.012, -2.585, 44.29, -2.59) (45.12, -2.59) (45.318, -2.611, 45.501, -2.483, 45.55, -2.29) (45.94, -1.29) (46.716, -2.286, 47.917, -2.857, 49.18, -2.83) (50.446, -2.887, 51.649, -2.276, 52.35, -1.22) (53.201, -2.229, 54.45, -2.817, 55.77, -2.83) (59.16, -2.83, 59.97, -0.67, 59.97, 2.08) (59.97, 7.5) (59.965, 7.787, 59.727, 8.016, 59.44, 8.01) (57.6, 8.01) (57.322, 8.005, 57.1, 7.778, 57.1, 7.5) (57.1, 2) (57.1, 0.63, 56.59, -0.22, 55.26, -0.22) (54.429, -0.307, 53.631, 0.132, 53.26, 0.88) (53.26, 0.88, 53.26, 1.41, 53.26, 1.88) (53.26, 7.48) (53.255, 7.756, 53.036, 7.979, 52.76, 7.99) (51, 7.99) (50.716, 7.996, 50.484, 7.764, 50.49, 7.48) (50.49, 2) (50.49, 0.63, 50.1, -0.22, 48.75, -0.22) (47.783, -0.196, 46.957, 0.485, 46.75, 1.43) (46.75, 7.49) (46.745, 7.766, 46.526, 7.989, 46.25, 8) (44.39, 8) (44.114, 7.989, 43.895, 7.766, 43.89, 7.49) () // y drawShape(transform)(getLetterFill()) (61.07, -1.9) (60.899, -2.219, 61.137, -2.603, 61.499, -2.592) (61.509, -2.592, 61.52, -2.591, 61.53, -2.59) (63.73, -2.59) (63.929, -2.608, 64.114, -2.482, 64.17, -2.29) (66.07, 4.04) (66.12, 4.04) (68.53, -2.29) (68.69, -2.57, 68.87, -2.59, 69.2, -2.59) (71.2, -2.59) (71.56, -2.625, 71.823, -2.258, 71.674, -1.928) (71.67, -1.919, 71.665, -1.909, 71.66, -1.9) (65.41, 13.16) (65.33, 13.346, 65.152, 13.47, 64.95, 13.48) (62.75, 13.48) (62.382, 13.51, 62.119, 13.131, 62.276, 12.797) (62.281, 12.788, 62.285, 12.779, 62.29, 12.77) (64.42, 7.4) () }) t++ } // See line 96 and // https://github.com/Khan/live-editor/issues/678 'aqualine-sapling aqualine-tree aqualine-ultimate duskpin-sapling duskpin-tree duskpin-ultimate leafers-sapling leafers-tree leafers-ultimate piceratops-sapling piceratops-tree piceratops-ultimate primosaur-sapling primosaur-tree primosaur-ultimate starky-sapling starky-tree starky-ultimate purple-pi-pink purple-pi-teal Hopper-Cool Hopper-Happy Hopper-Jumping OhNoes-Happy OhNoes-Hmm' // Updated 2018-09-03
Folds
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgLLB4PjWCww
Votes	241
Spin-Offs	16
Type	PJS
Width	600
Height	600
User Flagged	false
Origin Scratchpad	null
Hidden From Hotlist	false
Restricted Posting	false
By Child	false
Author Nick	DY
Author Name	darrylyeo
Author ID	kaid_436187987535602224909820
Author Profile Access	COACH

Archive Data

Added	6 months ago, 1739459328528
Updated	6 months ago, 1739459328528
Source Deleted	unknown