Viewing Program

Program Data

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

Title	KhanTube
ID	3999138451
Created	9 years ago, 1459546642313
Updated	9 years ago, 1467582831884
Code	/** Next Video: Modernization - explained and demonstrated / // What I'm aiming for: https://www.khanacademy.org/computing/computer-science/cryptography / My current goal: create 3 videos (0.5 / 3) (WIP) * 1. Modernization 40% * 2. How-To: Animate! 10% * 3. About InnovStudio 2% / // Fun Fact: This took 7 hours of nonstop typing and programming // Done in one day - almost 200 lines of code /**************************************\ \| KhanTube Player - v1.0 \| \| $$$ $$$ $$$$$$$ - by \| \| $$$ $$$ $$$$$$$ $$ Cai H. \| \| $$$$$$ $$$ $$ (@caihy) \| \| $$$$$$ $$$ $$ $$ $$$$ $$ \| \| $$$ $$$ $$$ $$ $$ $$ $$ $$$$ \| \| $$$ $$$ $$$ $$ $$ $$ $$ $$ \| \| $$$ $$$ $$$ $$$ $$$$ $$ \| \| > Documentation \| \| var video = new $$$(function(time) { \| \| // get time in 1st argument^^^^ \| \| // draw your stuff vvv \| \| background(168, 232, 255); \| \| fill(255, 0, 0); \| \| rect(20, 20, 360, time); \| \| // time is the time ^^ in seconds \| \| // 20 is the video length vv \| \| }, 20); \| \| // the "20" is an optional variable \| \| // it's the setting \| \| // default 20; if a number, use as \| \| // video length else use as setting \| \| // object, usage in code vvvvvvv \| \| // vv apply it to draw \| \| draw = function() { video.draw(); }; \| \| > Get Library! \| \| Just copy the $$$ varible below vvvv \| \**************************************/ var $$$ = function(vid, sets) { / jshint ignore: start / this.version = "v1.3"; var dms = [3999138451]; this.mode = [1, 1]; this.stat = [0, 0]; this.curs = [0, false, 0]; this.sbs = [0, 0]; this.prg = 0; this.vid = vid; this.logo = 10000; this.sets = { fr: sets.fr \|\| 50, size: sets.size \|\| [width, height], leng: typeof sets === "number" ? sets : (sets.leng \|\| 30), by: sets.by \|\| "Anonymous", name: sets.name \|\| ("A Clip by " + (sets.by \|\| "Anonymous")), }; this.icons = { play: function(x, y, s, p) { var mx = [s/2-s/6p, s/2+s/6p]; pushMatrix(); translate(x, y); quad(0, 0, 0, s, mx[0], s(3/4+p/4), mx[0], s(1/4-p/4)); quad(s, s(1/2-p/2), s, s(1/2+p/2), mx[1], s/43+sp/4, mx[1], s/4-sp/4); popMatrix(); } }; this.mouseout = function() { this.curs[2] += this.sets.fr2; }; this.draw = function(x, y, w, h) { /* Initor / cursor("auto"); var origi = get(0, 0, width, height); background(0, 0, 0); frameRate(this.sets.fr); var mode = this.mode; var sets = this.sets; var stat = this.stat; var prg = this.prg; var curs = this.curs; var icons = this.icons; var logo = this.logo; var sbs = this.sbs; / Play Alg */ mode[1] = (mode[1]9+mode[0])/10; stat[1] = (stat[1]5+stat[0])/6; sbs[1] = ( sbs[1]3+ sbs[0])/4; if (mouseIsPressed) { curs[0]++; } else { curs[0] = 0; } if (stat[0]) { prg += 1/sets.fr; } logo += 1/sets.fr; if (prg >= sets.leng) { prg = 0; stat[0] = false; } if (dist(mouseX, mouseY, pmouseX, pmouseY) < 4 && !mouseIsPressed) { curs[2]++; } else { curs[2] = 0; } if (curs[2] > sets.fr2 && stat[0]) { mode[0] = 0; } else { mode[0] = 1; } var secp = function(s) { var sec = floor(s100)/100; var min = floor(sec/60); var hor = floor(min/60); min = (min % 60).toString(); sec = (sec % 60).toFixed(2); if (min.length === 1) { min = "0" + min; } if (sec.length === 4) { sec = "0" + sec; } return (hor === 0 ? "" : hor + ":")+min+":"+sec; }; var ready = logo > 3/2; / Video / stroke(0, 0, 0); fill(255, 255, 255); this.vid.call({}, max(this.prg, 0)); / Main ToolBar / /* Shadow / noStroke(); for (var i = 0; i < 90; i++) { fill(9, 9, 9, (90-i)mode[1]); rect(0, height-i, width, 1); } for (var i = 0; i < 60; i++) { fill(9, 9, 9, (60-i)mode[1]2); rect(0, i, width, 1); } /* ProgBar / fill(255, 255, 255, 200); var e = sbs[1]; if ((mode[0] && mouseY > height - mode[1]40 - 3 && mouseY < height - mode[1]40 + 6 && mouseX > 8 && mouseX < width - 8 \|\| (curs[1] && curs[0])) && ready) { sbs[0] = 1; cursor("pointer"); if (curs[0]) { stat[0] = 0; var p = (mouseX-8)/(width-16); prg = (p > 1 ? 1 : p < 0 ? 0 : p)sets.leng; } curs[1] = !!curs[0]; } else { sbs[0] = 0; } rect(8, height - mode[1]40 - e, width-16, 3+e2, 5); fill(255, 64, 64); rect(8, height - mode[1]40 - e, 1+(width-17)prg/sets.leng, 3+e2, 5); ellipse(9+(width-17)prg/sets.leng, height - mode[1]40 - e + 2, e10, e10); / Buttons / fill(0, 0, 0, 50); for (var i = 0; i < 4; i++) { icons.play(20 + [-2, -2, 2, 2][i], height - mode[1]40 + 12 + [2, -2, -2, 2][i], 18, stat[1]); } fill(242, 242, 242); if (mouseX > 20 && mouseX < 38 && mouseY > height - mode[1]40 + 12 && mouseY < height - mode[1]40 + 30 && ready) { fill(252, 252, 252); if (curs[0] === 1) { stat[0] = 1-stat[0]; } cursor("pointer"); } icons.play(20, height - mode[1]40 + 12, 18, stat[1]); textAlign(0, 0); textFont(createFont("arial"), 12); fill(0, 0, 0, 120); for (var i = 0; i < 4; i++) { text(secp(prg)+" / "+secp(sets.leng), 57 + [-1, -1, 1, 1][i], height - mode[1]40 + 26 + [1, -1, -1, 1][i]); } fill(255, 255, 255); text(secp(prg)+" / "+secp(sets.leng), 57, height - mode[1]40 + 26); textAlign(39); fill(0, 0, 0, 120); for (var i = 0; i < 4; i++) { text("KhanTube " + this.version + " by InnovStudio", width - 20 + [-1, -1, 1, 1][i], height - mode[1]40 + 26 + [1, -1, -1, 1][i]); } fill(245, 245, 245); if (mouseX < width-20 && mouseX > width-20-textWidth( "KhanTube " + this.version + " by InnovStudio") && mouseY > height - mode[1]40 + 14 && mouseY < height - mode[1]40 + 26 && ready) { fill(255, 255, 255); if (curs[0] === 1) { println("InnovStudio : khanacademy.org/profile/innv\nCai's Profile: khanacademy.org/profile/caihy\nKhanTube Page: khanacademy.org/cs/k/3999138451"); } cursor("pointer"); } text("KhanTube " + this.version + " by InnovStudio", width-20, height - mode[1]40 + 26); / Title / textAlign(37); textFont(createFont("arial"), 20); fill(0, 0, 0, 120); for (var i = 0; i < 4; i++) { text(sets.name, 30 + [-1, -1, 1, 1][i], mode[1]50-22 + [1, -1, -1, 1][i]); } fill(255, 255, 255); text(sets.name, 30, mode[1]50-22); textFont(createFont("arial"), 12); fill(0, 0, 0, 120); for (var i = 0; i < 4; i++) { text("by " + sets.by, 30 + [-1, -1, 1, 1][i], mode[1]50 - 6 + [1, -1, -1, 1][i]); } fill(255, 255, 255); text("by " + sets.by, 30, mode[1]50 - 6); /* Ending */ this.prg = prg; this.logo = logo; var w = constrain(800-logo400, 0, 255); fill(250, 36, 36, w); if (w > 200) { cursor("auto"); } rect(0, 0, width, height); fill(189, 0, 0, w); rect(width/2-145, height/2-146, 300, 200, 70); fill(255, 250, 250, w); rect(width/2-150, height/2-150, 300, 200, 70); fill(250, 36, 36, w); triangle(width/2+30, height/2-50, width/2-30, height/2-80, width/2-30, height/2-20); fill(189, 0, 0, w); triangle(width/2+30, height/2-50, width/2-30, height/2-80, width/2+25, height/2-47); textFont(createFont("impact"), 52); textAlign(3); fill(189, 0, 0, w); text("KhanTube", width/2+3, height/2+132); fill(255, 250, 250, w); text("KhanTube", width/2, height/2+130); }; /* jshint ignore: end / }; var vid = new $$$(function(pos) { background(168, 232, 255); noStroke(); fill(28, 28, 28); textFont(createFont("impact"), 72); textAlign(3); text("KhanTube", 250 + sin(pos100)100, 100); textFont(createFont("impact"), 32); text("- The new video player!", 200, 150); text("Instruction in the Code", 200, height+50-pos20); }, { leng: 10, fr: 50, by: "Cai H. (@caihy)", name: "The New YouTube Player" }); var draw = function() { vid.draw(0, 0, width, height); };
Folds	9,37
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIUCxIKU2NyYXRjaHBhZBiThfjyDgw
Votes	222
Spin-Offs	25
Type
Width	500
Height	500
User Flagged	false
Origin Scratchpad	null
Hidden From Hotlist	false
Restricted Posting	false
By Child	false
Author Nick	𝒞𝒶𝒾 - IɴɴovSᴛᴜᴅɪo - T#1HP ⬣ (Inactive)
Author Name	caihy
Author ID	kaid_924007595677886147001939
Author Profile Access	COACH

Archive Data

Added	1 years ago, 1707881043883
Updated	10 months ago, 1739287817202
Source Deleted	unknown