Scratch

rdococ · 2011-04-28 09:51:09

Here, you can post HTML snippets, and etc.

For me, it's

Code:

<html>
<head>

<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<style type="text/css">
body
{
background-color:#000000;
}
h1
{
color:white;
text-align:center;
}
p
{
font-family:"System";
font-size:10px;
}
</style>
<script type="text/javascript">
function displayDate()
{
document.getElementById("demo").innerHTML=Date();
}
</script>
<script type="text/javascript">
function displayVer()
{
document.getElementById("demo").innerHTML=("Hypertext DOS version 1.0 BETA made by Macrosoft HTML");
}
</script>
</head>
<body style="color: rgb(0, 0, 0); background-color: rgb(0, 0, 0);"
alink="#ee0000" link="#0000ee" vlink="#551a8b">
<style type="text/css">
body
{
background-color:#FF22FF;
}
h1
{
color:white;
text-align:center;
}
p
{
font-family:"System";
font-size:10px;
}
</style>
<p
style="font-family: Fixedsys; color: rgb(255, 255, 255); background-color: rgb(0, 0, 0);"
id="demo"><big>Welcome to Hypertext DOS. Your requests finished are
displayed here.</big></p>
<button type="button" onclick="displayVer()">About</button>
<button type="button" onclick="displayDate()">Date?</button>
</body>
</html>

---------------------
Hypertext DOS
It's DOS in a web-browser. Made in pure HTML Tryit Editor and a tiny bit of SeaMonkey Composer fiddling. Takes advantage of document editing with scripts, paragraphs, CSS fonts, and Javascript.

Post yours too!

thecrazyguy · 2011-04-28 10:52:13

Ok, but it needs a little work.

blazerv82 · 2011-04-28 11:04:27

Very interesting. Trying out JS, or do you know some of it already?

adriangl · 2011-04-28 11:49:26

To keep organized, you should always put your CSS in a different document and link it to this one. It really keeps everything clean smile

thecrazyguy · 2011-04-28 17:18:17

Code:

<html>
<body>
<p>
Bump.
</p>
</body>
</html>

brettman98 · 2011-04-28 18:13:26

Code:

<html>

<a href="http://scratch.mit.edu/users/brettman98">Check out this awesome stuff!</a>

<html>

fanofcena · 2011-04-29 01:57:44

Ah heres mine for a 3d rotating square (u can manipulate it for whatever u want wink

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <title>Untitled Document</title>
    <script language="JavaScript">
        var ctx;
        var FocalLength = 300;
        function init()
        {
            ctx = document.getElementById("canvas").getContext('2d');
            ctx.clearRect(0,0,800,600);
        }
        function dubplet(x,y)
        {
            
        }
        function triplet(x,y,z)
        {
            this.X = x;
            this.Y = y;
            this.Z = z;
            
        }
            var Rotation = new triplet(0,0,0);
        var Origin = new triplet(0,0,-30);
        
        function vertex(x,y,z)
        {
            this.x = x;
            this.y = y;
            this.z = z;
            this.rotate = function (){
                //Rotation On Y Axis
                sin = Math.sin(Rotation.Y);
                cos = Math.cos(Rotation.Y);
                Ax = this.x*cos + this.z*sin;
                Ay = this.y;
                Az = this.z*cos -this.x*sin;
                //Rotation On X Axis
                sin = Math.sin(Rotation.X);
                cos = Math.cos(Rotation.X);

                Bx = Ax;
                By = Ay*cos + Az*sin;
                Bz = Az*cos - Ay*sin;
                  
                // Rotation on Z axis
                sin = Math.sin(Rotation.Z);
                cos = Math.cos(Rotation.Z);
                Sx = Bx*cos + By*sin;
                Sy = By*cos -Bx*sin;
                Sz = Bz;
                
                var Rp = new triplet(Sx,Sy,Sz);
                return Rp;
            }
        }
        
        a = new vertex(50,50,0);
        b = new vertex(-50,50,0);
        d = new vertex(50,-50,0);
        c = new vertex(-50,-50,0);
    
        
        function Face(a,b,c,d)
        {
            this.A = a;
            this.B = b;
            this.C = c;
            this.D = d;
            
            this.Render= function()
                {
                
                    ctx.beginPath();    
                    var verts =  [];
                     verts[0]=  this.A.rotate();
                    verts[1] = this.B.rotate();
                    verts[2] = this.C.rotate();
                    verts[3] = this.D.rotate();
                    sfr = FocalLength / (FocalLength + verts[0].Z);
                    x= verts[0].X*sfr;
                    y= verts[0].Y*sfr;
                    ctx.moveTo(x+400,300-y);
                    
                    for (var i = 1; i <4; i++) 
                    {
                        sfr = FocalLength / (FocalLength + verts[i].Z);
                        x= verts[i].X*sfr;
                        y= verts[i].Y*sfr;
                        ctx.lineTo(x+400,300-y);
                    
                    
                    }
                    
                    ctx.closePath();
                    ctx.fill();
                }
            
        }
        
var NewFace =new Face(a,b,c,d);
function Cycle()
        {    ctx.clearRect(0,0,800,600);
            Rotation.X += 0.12;
            Rotation.Y += 0.12;
            Rotation.Z += 0.12;    
            NewFace.Render();
            
            setTimeout(Cycle,10);
        }
    </script>
    </head>
    <body onload="init();Cycle();">
        <canvas id = "canvas" height="600" width="800">
            Oink
        </canvas>
    </body>
</html>

urhungry · 2011-04-29 02:25:10

While I kind of know HTML, I haven't done anything in it, so I have nothing to post.

rdococ · 2011-04-29 05:49:14

blazerv82 wrote:
Very interesting. Trying out JS, or do you know some of it already?

I learned it from W3schools and made it in Tryit Editor with a tiny bit of SeaMonkey editing.

I also did another one before this one, this time made with pure SeaMonkey Composer:

<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="Content-Type">
<title>Dimensions</title>
</head>
<body>

<h1 style="font-family: Calibri;">Dimensions</h1>
Indroduction 
A dimension is one of the cooridnate values needed for the object to
specify a location in n-dimensional space. An object e.g. square needs
cooridnates to carry over to the n-dimensional space. 
 
1. The 1st and 0th
dimensional space 
These dimensional spaces are rarely
known by kids. You probably all know about 2d and 3d, etc. but
1-dimensional spaces exist. A 1-dimensional space needs only 1
cooridnate value to specify a location of an object. That is, X
position. However if any cooridnate isn't known, it specifys a location
in 0-dimensional space. 
2. Oh, the 4th dimensional space
exists? 
A 4-dimensional cube is a
tesseract. A tesseract, to explain needs sprites. So pretend we have
sprites... 
<table
style="text-align: left; width: 160px; height: 88px; font-family: Calibri;"
border="1" cellpadding="2" cellspacing="2">
<tbody>
<tr>
<td style="vertical-align: top;">Name 
</td>
<td style="vertical-align: top;">What
is
it 
</td>
</tr>
<tr>
<td style="vertical-align: top;">Cube1 
</td>
<td style="vertical-align: top;">Small cube 
</td>
</tr>
<tr>
<td style="vertical-align: top;">Cube2 
</td>
<td style="vertical-align: top;">Big cube 
</td>
</tr>
</tbody>
</table>
Now, Cube1 becomes the big cube, as
Cube2 becomes the small cube, when it is rotated in any-W rotation. 
To a 4d person, in the big cube,
any of the cubes as long as they are the big ones, is more closer in
the Upsilon direction to the 4d person than the small one. 
 
3. What'd happen with a 4d kid
rotating in the Ana / Kata / Zant / Wint / other 4d directions feel
like for the 4d kid? 
I think the kid's shape would
appear disorted. Like a baby being held by a mother, expect the baby is
the same size as the "mother". Then, the baby "infects" the mother and
becomes the "mother", and the proccess repeats for as long as the
rotation keeps going. 
 
4. More dimensional spaces. 
All I can say, a 5d cube is a
tesseract in a tesseract, corners connected like the tesseract case
with a cube-cube corners-connected. More direction rotations are made
for the new cubes. 
Here is a table on the hypercubes names in dimensions: 

<table
style="text-align: left; width: 109px; height: 136px; font-family: Calibri;"
border="1" cellpadding="2" cellspacing="2">
<tbody>
<tr>
<td style="vertical-align: top; font-weight: bold;"># 
</td>
<td style="vertical-align: top; font-weight: bold;">Object 
</td>
</tr>
<tr>
<td style="vertical-align: top;">1 
</td>
<td style="vertical-align: top;">Line 
</td>
</tr>
<tr>
<td style="vertical-align: top;">2 
</td>
<td style="vertical-align: top;">Square 
</td>
</tr>
<tr>
<td style="vertical-align: top;">3 
</td>
<td style="vertical-align: top;">Cube 
</td>
</tr>
<tr>
<td style="vertical-align: top;">4 
</td>
<td style="vertical-align: top;">Tesseract 
</td>
</tr>
</tbody>
</table>
 
5. More! 
5.3. Email me about the image at 5.7 
Not implented yet 
5.7. Image of dimensions [with ALT text] 
<img style="width: 1197px; height: 495px;"
alt="0. · 1. | 2. □ 3. Cube [no image] 4. Tesseract [no image] 2.5. ???? 11. Supergravity [no image]"
title="Image 1" src="file:///C:/Users/Parent/Pictures/Untitledxd.png"
align="right"> 
5.7.1. All the different cooridnates 
---------------- 

<div style="text-align: justify;">
<div style="text-align: left;">X Y
Z W V U T S R Q P and... O for the  gravity! 
</div>
</div>

 
</body>
</html>

All the divs were rendered automatically for me via SeaMonkey. I don't know what the few spans are tho, SeaMonkey automatically did it for me... I did an alt for the picture incase it doesn't load on web-browsers.

Scratch

archived forums

#1 2011-04-28 09:51:09

Share your raw HTML recipies [code] here

Code:

#2 2011-04-28 10:52:13

Re: Share your raw HTML recipies [code] here

#3 2011-04-28 11:04:27

Re: Share your raw HTML recipies [code] here

#4 2011-04-28 11:49:26

Re: Share your raw HTML recipies [code] here

#5 2011-04-28 17:18:17

Re: Share your raw HTML recipies [code] here

Code:

#6 2011-04-28 18:13:26

Re: Share your raw HTML recipies [code] here

Code:

#7 2011-04-29 01:57:44

Re: Share your raw HTML recipies [code] here

Code:

#8 2011-04-29 02:25:10

Re: Share your raw HTML recipies [code] here

#9 2011-04-29 05:49:14

Re: Share your raw HTML recipies [code] here

blazerv82 wrote:

Board footer