Viewing Program

Program Data

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

Title	done
ID	6561587688062976
Created	3 years ago, 1617359496882
Updated	2 years ago, 1648504790950
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>done</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 /* based on: https://www.pinterest.ph/pin/446349013075055073/ created by: kaid_1022771308406748622482319 created on: April 2, 2021 / smooth(); noStroke(); background(126, 196, 230); fill(244, 158, 135); rect(0, 20, 400, 380); // shadow fill(104, 42, 42); beginShape(); vertex(110, 90); vertex(100, 290); vertex(120, 330); vertex(315, 320); vertex(60, 360); endShape(); // window fill(30, 43, 60); beginShape(); vertex(145, 145); vertex(292, 145); vertex(289, 290); vertex(140, 290); endShape(); fill(100, 139, 191); beginShape(); vertex(158, 190); vertex(292, 165); vertex(289, 290); vertex(155, 290); endShape(); // window pane fill(34, 29, 29); beginShape(); vertex(145, 145); vertex(292, 145); vertex(289, 290); vertex(140, 290); vertex(145, 145); vertex(155, 151); vertex(153, 290); vertex(279, 290); vertex(282, 150); vertex(155, 151); endShape(); beginShape(); vertex(213.5, 150); vertex(223.5, 150); vertex(221.5, 290); vertex(211.5, 290); endShape(); // window frame fill(243, 189, 180); beginShape(); vertex(310, 110); vertex(315, 320) vertex(312, 310); endShape(); fill(195, 110, 94); beginShape(); vertex(100, 290); vertex(312, 310); vertex(315, 320) vertex(120, 330); endShape(); beginShape(); vertex(133, 110); vertex(287, 125); vertex(287, 145); vertex(145, 145); endShape(); fill(245); /beginShape(); vertex(110, 90); vertex(310, 110); vertex(307, 310); vertex(100, 290); endShape();*/ beginShape(); vertex(110, 90); vertex(310, 110); vertex(312, 310); vertex(100, 290); vertex(110, 90); vertex(133, 110); vertex(125, 273); vertex(289, 290); vertex(287, 125); vertex(133, 110); endShape(); //} 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	31,44,188,204
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgL36qvfTCww
Votes	4
Spin-Offs	0
Type	WEBPAGE
Width	400
Height	400
User Flagged	false
Origin Scratchpad	{"id":"6104566183968768","title":"Livestream Template","deleted":"false","official":"false"}
Hidden From Hotlist	false
Restricted Posting	false
By Child	false
Author Nick	Quest of Ion
Author Name	questOFion
Author ID	kaid_1022771308406748622482319
Author Profile Access	COACH

Archive Data

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