Viewing Program

Program Data

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

Title	Solar system
ID	6719174983467008
Created	1 years ago, 1705077045422
Updated	11 months ago, 1705373920820
Code	<!DOCTYPE html> <!-- NOT TO SCALE --> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Solar system </title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <link href="https://fonts.googleapis.com/css2?family=Salsa:wght@400;500;600&family=Roboto+Serif:wght@400;500&family=Lato:wght@400;700&family=Roboto:wght@300;400;500&display=swap" rel="stylesheet"> <style> @keyframes fadeOut { from { opacity: 100%; } to { opacity: 0%; } } body { overflow: hidden; margin:0px; background:linear-gradient(54deg,rgb(14, 245, 187), rgb(20, 150, 0), rgb(9, 24, 232)); font-family:"Salsa"; animation-timing-function: ease-in; } canvas{ } </style> <style> #pages-h1{ font-family:"Lora"; margin:0; font-size:50px; margin:30px; } #quistons{ position:fixed; left:0px; top:0px; background-image:url("https://upload.wikimedia.org/wikipedia/commons/thumb/c/c2/Solar_sys.jpg/600px-Solar_sys.jpg"); color:white; width:100%; height:600px; background-position: center; background-repeat: no-repeat; background-size: cover; background-attachment: fixed; font-family:serif; font-size:4.0em; text-align:center; } #quistions img{ position:fixed; left:-199px; top:0px; color:white; height:600px; } h1{ position:fixed; left:5%; top:5%; color:white; height:600px; font-family:"Salsa"; } h6{ position:fixed; left:7%; top:60%; color:white; height:600px; font-family:"Salsa"; } </style> </head> <body> <script src="https://cdn.jsdelivr.net/gh/NovaSagittarii/misc@1.0.2/p5.min.js"></script> <div id = "quistons"onMouseOver="document.getElementById('quistons').style.animation ='fadeOut 5s';var i = 0;function draw(){i++;if(i<5){document.getElementById('quistons').remove();}}window.setInterval(draw,5000); "> <img src = "https://upload.wikimedia.org/wikipedia/commons/thumb/c/c2/Solar_sys.jpg/600px-Solar_sys.jpg"height = "600"> <h1> 3D Solar system </h1> <h6>move mouse over to start</h6> </div> <div id="canvas-parent"> </div> <script type> //<script> function setup(){ canvas = createCanvas(window.innerWidth, window.innerHeight, 'webgl'); canvas.parent("canvas-parent"); angleMode('degrees'); // canvas.onmousedown=()=>canvas.requestPointerLock() } var rx = 0; var ry = 0; var rz = 0 var externals; var ctx = externals.context; var movedX = 0; var movedY = 0; //var moved = false; function Torus(x,y,z,r,s,d,rotX,rotY,rotZ){ push(); translate(x,y,z); rotateY(rotY); rotateX(rotX); rotateZ(rotZ); torus(r,s,d); pop(); }; function Sphere(x,y,z,r,d,rotX,rotY,rotZ){ push(); translate(x,y,z); rotateY(rotY); rotateX(rotX); rotateZ(rotZ); sphere(r,d); pop(); }; function thing(n,u,m){ Torus(0,0,0,300,5,50,n,u,m); }; function fill3D(c){ specularMaterial(c) }; var starX = []; function draw(){ background(0); fill(255); ellipse(200,200,3,4); ellipse(100,223,5,2); ellipse(200,100,1,3); ellipse(-107,-180,3,4); ellipse(-200,-200,3,4); ellipse(-150,240,5,5); ellipse(157,113,3,4); ellipse(-182,-70,3,4); ellipse(200,-200,3,4); ellipse(97,-241,3,4); ellipse(273,-137,3,4); ellipse(123,-137,3,4); ellipse(-200,220,3,4); ellipse(-240,250,5,3); ellipse(-130,130,3,4); ellipse(-280,150,3,4); ellipse(-196,17,3,4); ellipse(77,229,3,4); ellipse(34,-268,3,4); ellipse(-98,-205,3,4); ellipse(-6,-176,3,4); ellipse(-10,-116,3,4); ellipse(-205,-226,3,4); ellipse(-49,142,3,4); ellipse(-15,234,3,4); ellipse(168,34,3,4); ellipse(240,5,3,4); push(); camera(0, 0, 1000+sin(frameCount/5)800 , 0, 0, 0, 0, 1, 0); noStroke(); ambientLight(200, 200, 200); directionalLight(255, 205, 205, 0,0,-150) fill3D(color(200,200,0)); Sphere(0,0,0,50,90,0,0,0); document.body.addEventListener("mousemove", function(e) { rx += e.movementX; ry += e.movementY; // translate(e.movementY/903.14/2,e.movementX/903.14/2,e.movementX/903.14/2); }) push(); rotateX(ry/900); rotateY(rx/900); rotateZ((rx/ry)/10); fill3D(color(150,150,150)) push(); rotateY(frameCount); Sphere(70,0,0,5,90,0,0,0); pop(); fill3D(color(200,150,0)) push(); rotateX(frameCount); Sphere(0,100,0,7,90,0,0,0); pop(); fill3D(color(0,0,200)) push(); rotateY(frameCount); //rotateX(frameCount/500); Sphere(0,0,100,8,90,0,0,0); pop(); push(); fill3D(100,100,100); rotateY(frameCount); translate(0,0,100); push(); rotateX(frameCount); Sphere(0,0,10,2,90,0,0,0); pop(); pop(); fill3D(color(100,20,20)) push(); rotateX(frameCount); Sphere(0,0,200,7,90,0,0,0); pop(); fill3D(color(150,100,0)) push(); rotateX(frameCount); Sphere(0,0,500,20,90,0,0,0); pop(); fill3D(color(150,120,100)) push(); rotateY(frameCount); Sphere(0,0,900,17,90,0,0,0); fill3D(color(250,250,250)) Torus(0,0,900,19,2,90,19,17,-16); pop(); fill3D(color(10,120,200)) push(); rotateX(frameCount); Sphere(0,0,1200,10,90,0,0,0); pop(); fill3D(color(10,120,250)) push(); rotateY(frameCount); Sphere(0,0,1600,15,90,0,0,0); fill3D(color(250,250,250)) Torus(0,0,1600,16,2,90,19,17,16); pop(); pop(); //moved = false; pop(); } function mouseMoved() { // moved = true; }; function mouseWheel(event) { camera.z += event.delta; // return false; } document.body.onmousedown=()=>document.body.requestPointerLock() </script> <script type> document.body.onmousedown=()=>document.body.requestPointerLock() </script> <script type="application/javascript"> document.body.addEventListener("keydown", function(e) { if (e.code === "Escape") { document.body.innerHTML = ` <div style="margin: 0; padding: 0; background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/c/c2/Solar_sys.jpg/600px-Solar_sys.jpg);text-align:center; text-shadow:3px 3px rgb(255, 98, 0); background-position: -0px 0px; background-size: 600px 600px; height:600px;padding:5%;"> <img src = "https://upload.wikimedia.org/wikipedia/commons/thumb/c/c2/Solar_sys.jpg/600px-Solar_sys.jpg"height = "600"> <div style="display: grid; align-items: center; justify-content: center;"> <h1 style="font-size: 100px; color: #fff; ">3D solar system (animated)</h1> </div> <div style="display: grid; align-items: center; justify-content: center;"> <h2 style="color: #fff; font-family: 'Montserrat'; font-size: 35px; text-align: center; osition:fixed; left:5%; top:5%; "></h2> </div> `; } if (e.code === "Enter") { e.preventDefault(); } }); </script> <!-- The Thumbnail Script 2.0.0 10/24/2023 by Bluebird@kaid_157624541333313939750668 --> <script src="https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js"></script> <script type> var r = 600; var s = document.documentElement.clientWidth; window.parent.html2canvas = e => { try { html2canvas(document.body, { width: s, height: s, useCORS: true, }).then(e => { var c = document.createElement("canvas"); c.width = r; c.height = r; c.getContext('2d').drawImage(e, 0, 0, e.width, e.height, 0, 0, r, r); window.top.postMessage(c.toDataURL(), ""); }).catch(e => { alert("Thumbnail Script Error: " + e); }); } catch { window.top.postMessage(document.createElement("canvas").toDataURL(), ""); } }; </script> </body> </html>
Folds	5,377
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgMuw3eH3Cww
Votes	53
Spin-Offs	2
Type	WEBPAGE
Width	400
Height	600
User Flagged	false
Origin Scratchpad	null
Hidden From Hotlist	false
Restricted Posting	false
By Child	false
Author Nick	Vicioustre𝑥 BBB#
Author Name	Vicioustrex
Author ID	kaid_1063463007130342809105382
Author Profile Access	PUBLIC

Archive Data

Added	1 months ago, 1733625913768
Updated	23 days ago, 1734465172095
Source Deleted	unknown