HTML5 [Hypertext Markup Language] Options

agor95 · Post by **agor95** » Sun Jan 08, 2023 1:23 pm

Hi All

I spent some time looking at the new features present in this version; during the festive season.
I was looking to see if it was possible to create an easy to use one page presentation file.
One that can run as a file on your desktop.

There are some nice options to Video and Audio playback programmed into standard browsers these days.

Also a 'canvas' option so you can paint with SVG [Vector graphics], 2D Bit maps [arrays] and 3D [WebGL: Geometry Language] programming.

Well sod that having a declarative markup language for a web page structure and CSS for style and JavaScript for dynamics is one thing. But no declarative markup language for geometry in HTML5.

It looks like we have to wait for HTML6 along with the VR features [Virtual Reality], peer-to-pear steaming etc.

All the Best - Happy New Year

agor95 · Post by **agor95** » Sun Jan 08, 2023 2:36 pm

Hi All

A base file is attached with the code below.

Code: Select all

<html> 
        <head> 
            <title>My first X3DOM page</title> 			
            <script type='text/javascript' src='http://www.x3dom.org/download/x3dom.js'> </script> 
            <link rel='stylesheet' type='text/css' href='http://www.x3dom.org/download/x3dom.css'></link>
            <style>
             x3d
             {border:1px solid black;background:#EEE;}
            </style>
        </head> 
        <body> 
            <h1>Hello, X3DOM!</h1> 
            <p></p> 
            <x3d width='600px' height='400px'> 
                <scene> 
                    <shape>
                        <appearance> 
                            <material diffuseColor='1 0 0'></material> 
                        </appearance> 	
                        <box></box> 
                    </shape> 
                </scene> 
            </x3d>   
        </body> 
    </html>

You can see a line 'material diffuseColor' the 1 0 0 is Red Green Blue. so 0.5 0 0 is half red.

Edit the numbers with values between 0.0 to 0.99 where 0 and 1 are the limits.
Lets See what colours you can come up with.

P.S. This is not HTML5 as I have combined Cascading Style Sheet, JavaScript, HTML & X3Dom in the same file.
In HTML5 CSS, JS and HTML should be in separate files to separate Presentation Style, Programmed script behaver and structured contents from each other.

Regards

agor95 · Post by **agor95** » Sun Jan 08, 2023 2:52 pm

Hi All

Code: Select all

                    <shape>
                        <appearance> 
                            <material diffuseColor='1 0 0'></material> 
                        </appearance>
                        <cylinder></cylinder> 
                    </shape>

You could edit out

Code: Select all

<box></box>

to get a different object.

Regards

agor95 · Post by **agor95** » Sun Jan 08, 2023 8:57 pm

Hi All

I looked at the X3Dom documentation and though any newbie would get lost in that.

So here is another Base Model that has more to it.

The next will have movement using JavaScript.

Regards

agor95 · Post by **agor95** » Thu Jan 12, 2023 1:32 pm

Here is the Base Model that has movement.

The cylinder moves around with the (X,Y,Z) location displayed near it's centre of mass.

The location is displayed using a delta amount and updated every millisecond.

agor95 · Post by **agor95** » Fri Jan 13, 2023 3:58 pm

Hi All

This is the real Base IV model

Any device imagined must exist in a region of space.
In this case the space on top of a table.

I have added a marker to show the displacement direction.

I want to change that later to be a marker to indicate acceleration.

So elements 1. object 2. centre of mass 3. displacement marker [of some form] 4. a boundary box.

Regards

BesslerWheel.com

HTML5 [Hypertext Markup Language] Options

HTML5 [Hypertext Markup Language] Options

Base File Zipped

Object Box to Cylinder

Base II Model

Base III Model

Base IV Model