Viewing Program

Program Data

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

Title	Livestream Template
ID	6104566183968768
Created	4 years ago, 1610395602189
Updated	3 years ago, 1612563193267
Code	<!DOCTYPE html> <!-- Welcome to the Twitch.KA livestream template! If you don't know what Twitch.KA is yet or you don't understand the basics of live streaming, please visit our website first: https://www.khanacademy.org/computer-programming/ka-livestreaming-live-coding-not-video/5956454169657344. To begin your live stream, create a spin off. Once you're spin off has been created, save it once to start the auto save process. After it's started to auto save, you can start writing your code. Make sure to write where the placeholder code already is. Don't go outside of the comment brackets or the host webpage won't be able to display your code and your viewers will have a poor experience. A few words of advice: For best results, create a PJS graphic. Only PJS code will work and anything involving draw loops will be constantly reloaded for your viewers, meaning they can't play your game or run your animation. Since traditional PJS is a little different from KA's version, you may have some difficulty adjusting. The biggest difference in graphics is the angle mode. KA uses degrees but standard PJS uses radians. To convert degrees to radians, use degrees / PI / 18 wherever you would regularly have degrees. You can technically manipulate the DOM in the stream hosting webpage so we operate on the honor system. If enough viewers complain about a streamer manipulating DOM, that streamer may be banned from Twitch.KA so please don't. Warning: The autosave functionality in this program has shown to be somewhat cursed. During the initial spin-off, the program will duplicate several times. Feel free to delete the duplicates but keep the first save as it's the original! And now you're ready to start streaming!!! --> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Livestream Template</title> <style> * { padding : 0; margin : 0; } #mycanvas { position : fixed; } </style> </head> <body> <canvas id = "mycanvas" width = "600"></canvas> <!--PJS in a webpage; credit Pamela @pamela--> <script src="https://cdn.jsdelivr.net/processing.js/1.4.8/processing.min.js"></script> <script> //{ var programCode = function(processingInstance) { //} //PJS code starts here with (processingInstance) { size(400, 400); frameRate(60); //{ write your code in these brackets for best results var PJS = { rotate : rotate, arc : arc, }; function Rotate(r) { PJS.rotate(r / PI / 18); } function Arc(x, y, w, h, start, stop) { PJS.arc(x, y, w, h, start / PI / 360, stop / PI / 18); } fill(255, 255, 0); ellipse(200, 200, 300, 300); noFill(); Arc(200, 200, 200, 200, 0, 180); fill(0, 0, 0); ellipse(140, 125, 25, 25); ellipse(260, 125, 25, 25); //} don't write after this bracket for best results } //PJS code ends here //{ }; var canvas = document.getElementById("mycanvas"); var processingInstance = new Processing(canvas, programCode); //} </script> <!--program auto-saver; credit Bluebird @birdwatcher03--> <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script> <script> var save = function() { html2canvas(document.body, { onrendered : function(canvas) { b64Img = canvas.toDataURL(); window.top.postMessage(b64Img, "https://www.khanacademy.org/"); window.setTimeout(save, 1000); }, allowTaint : false, useCORS : true, width : 400, height : 400 }); }; save(); </script> </body> </html>
Folds	104,120
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgJ2XoYLsCgw
Votes	31
Spin-Offs	50
Type	WEBPAGE
Width	400
Height	600
User Flagged	false
Origin Scratchpad	null
Hidden From Hotlist	false
Restricted Posting	false
By Child	false
Author Nick	Quinn Hardbrook
Author Name	stranothus
Author ID	kaid_96558739702575557799545
Author Profile Access	PUBLIC

Archive Data

Added	22 days ago, 1734569838574
Updated	22 days ago, 1734569838574
Source Deleted	unknown