how do I attach this HTML file purely? It has an embedded Js script
-
<!DOCTYPE html>
<html lang=’en’><style>
.thumb {
height: 75px;
border: 1px solid #000;
margin: 10px 5px 0 0;
}
</style><style>
#progress_bar {
margin: 10px 0;
padding: 3px;
border: 1px solid #000;
font-size: 14px;
clear: both;
opacity: 0;
-moz-transition: opacity 1s linear;
-o-transition: opacity 1s linear;
-webkit-transition: opacity 1s linear;
}
#progress_bar.loading {
opacity: 1.0;
}
#progress_bar .percent {
background-color: #99ccff;
height: auto;
width: 0;
}
</style><script>
//——————————————————
// Change these functions!!
var t = 10.0;var delta_t = 0.1 ;
var width = 640,
height = 480;
var num_iter = 100;
var A = width*height;
var N = 20;
var C = 1;
var k = C * Math.sqrt(A/N);
//var k = 40;
var pos = [] ;
var disp = [] ;
var thickness = 1;
var diameter = 10;
for(var i= 0 ; i<N ; i++)
{disp.push([0.0 , 0.0] ) ;
pos.push( [0.0 , 0.0] ) ;
}var graph = {
‘nodes’: [ { ‘x’: 208.992345, ‘y’: 273.053211 },
{ ‘x’: 595.98896, ‘y’: 56.377057 },
],
‘edges’: [ { ‘target’: 1, ‘source’: 0 }
]
};//here x is pj-pi
function attractive_force(x)
{
var ans = (x*x) / k ;
return ans ;
}function repulsive_force(x)
{
var ans = (k*k)/Math.abs(x)
return ans;
}function random_cycle(n,lim_x,lim_y)
{
var edges=[];
for(var i=0;i<n;i++)
{
edge = {‘target’:(i+1) % n, ‘source’:i}
edges.push(edge)
}
var nodes=[]for(var i=0;i<n;i++)
{
var rand_x = Math.random()*lim_x;
var rand_y = Math.random()*lim_y;
node = {‘x’: rand_x, ‘y’: rand_y}
nodes.push(node)
}
var g = {‘nodes’:nodes,’edges’:edges};
return g;
}function random_graph(n,lim_x,lim_y)
{
var edges=[];
for(var i=0;i<n;i++)
{
edge = {‘target’:(i+2) % n, ‘source’:i}
edges.push(edge)
edge = {‘target’:(i+5) % n, ‘source’:i}
edges.push(edge)
}
var nodes=[]for(var i=0;i<n;i++)
{
var rand_x = Math.random()*lim_x;
var rand_y = Math.random()*lim_y;
node = {‘x’: rand_x, ‘y’: rand_y}
nodes.push(node)
}
var g = {‘nodes’:nodes,’edges’:edges};
return g;
}graph = random_graph(N,width,height);
console.info(graph[‘edges’]);
var counter = 0;
function draw_graph(ctx,graph)
{var nodes = graph[‘nodes’]
var edges = graph[‘edges’]// ctx.clearRect(0,0,width,height);
// Draw the edges
for (var i=0;i<edges.length;i++)
{
var e = edges[i];
var vidx=e[‘source’] ;
x1 = nodes[vidx][‘x’];
y1 = nodes[vidx][‘y’];
vidx=e[‘target’]
x2 = nodes[vidx][‘x’];
y2 = nodes[vidx][‘y’];ctx.beginPath();
ctx.moveTo(x1,y1);
ctx.lineTo(x2,y2);
ctx.lineWidth = thickness;
ctx.strokeStyle = ‘#000000’;
ctx.stroke();}
//ctx.save();
// Draw the vertices
for (var i=0;i<nodes.length;i++)
{
var node = nodes[i]
var radius = 5;
x = node[‘x’];
y = node[‘y’];ctx.beginPath();
ctx.arc(x,y,diameter/2,0,2*Math.PI);
ctx.fillStyle = ‘#FF0000’;
ctx.fill();}
//ctx.restore();
// setInterval(update_positions,500) ;
// }
//setInterval(update_positions(ctx,graph),500) ;
//window.requestAnimationFrame(draw_graph(ctx,graph));}
function calculate_euclidean_distance(x1,x2,y1,y2)
{
var x = x2 – x1 ;
var y = y2 – y1 ;
return Math.sqrt( x*x + y*y ) ;
}function update_positions(ctx,graph){
var nodes = graph[‘nodes’]
var edges = graph[‘edges’]for (var v=0; v<nodes.length ;v++)
{
disp[v] = [0.0 , 0.0] ;
for(var u=0; u<nodes.length ;u++)
{var node1 = nodes[v];
x1 = node1[‘x’] ;
y1 = node1[‘y’] ;var node2 = nodes[u];
x2 = node2[‘x’] ;
y2 = node2[‘y’] ;var delta_x = x1-x2;
var delta_y = y1-y2;var dist = calculate_euclidean_distance(x1,x2,y1,y2) ;
if(u != v)
{
if(dist!=0)
{
var den = delta_x / dist ;
disp[v][0] = disp[v][0] + ( den * repulsive_force(dist) ) ;
den = delta_y / dist ;
disp[v][1] = disp[v][1] + ( den * repulsive_force(dist) );
}
else
{
disp[v][0] = -2*disp[u][0] ;
disp[v][1] = -2*disp[u][0] ;
}}
}
}for( var ee= 0 ; ee< edges.length ; ee++)
{var e = edges[ee] ;
//console.info(ee) ;var vv=e[‘source’]
var x2 = nodes[vv][‘x’];
var y2 = nodes[vv][‘y’];var uu=e[‘target’]
var x1 = nodes[uu][‘x’];
var y1 = nodes[uu][‘y’];var delta_x = x2-x1;
var delta_y = y2-y1;var dist = calculate_euclidean_distance(x1,x2,y1,y2) ;
if(dist!=0)
{
disp[vv][0] = disp[vv][0] – ( (delta_x) / Math.abs(dist) ) * attractive_force(dist) ;disp[vv][1] = disp[vv][1] – ( (delta_y) / Math.abs(dist) ) * attractive_force(dist) ;
disp[uu][0] = disp[uu][0] + ( (delta_x) / Math.abs(dist) ) * attractive_force(dist) ;
disp[uu][1] = disp[uu][1] + ( (delta_y) / Math.abs(dist) ) * attractive_force(dist) ;
}
else
{
disp[vv][0] = 50 ;
disp[vv][1] = 50;
disp[uu][0] = -50;
disp[uu][1] = 20;}
}
for(var ii= 0 ; ii < nodes.length ; ii++)
{
var d = Math.sqrt( (disp[ii][0]* disp[ii][0]) + (disp[ii][1]* disp[ii][1]) ) ;if(d!=0)
{
var den = disp[ii][0]/ Math.abs(d) ;
var temp1 = nodes[ii][‘x’] + ( den * Math.min(d,t) );
den = disp[ii][1]/ Math.abs(d) ;
var temp2 = nodes[ii][‘y’] + ( den * Math.min(d,t) );temp1 = Math.max(0,temp1);
temp2 = Math.max(0,temp2) ;nodes[ii][‘x’] = Math.min(width,temp1) ;
nodes[ii][‘y’] = Math.min(height,temp2) ;
}
}t = t – delta_t < 0 ? 0 : t – delta_t ; //cooling function
ctx.clearRect(0,0,width,height);
//draw_graph(ctx,nodes,edges);//}
var g = {‘nodes’:nodes,’edges’:edges};
return g;
}//MAIN
function main() {render();
}
function animate()
{
console.info(t) ;
var canvas = document.getElementById(‘example’);
var ctx = canvas.getContext(‘2d’);
graph = update_positions(ctx,graph);
counter++;
draw_graph(ctx,graph);
if(counter < num_iter)
setTimeout(animate,100);
else
return}
function render(){
counter = 0;
if(document.getElementById(‘other_graph’).checked)
graph = random_graph(N,width,height) ;
else
graph = random_cycle(N,width,height) ;
t = parseFloat(document.getElementById(‘tt’).value) ;delta_t = parseFloat(document.getElementById(‘delta_t’).value) ;
num_iter = parseFloat(document.getElementById(‘num_iter’).value) ;
if(document.getElementById(‘default_k’).checked)
k = C * Math.sqrt( A / N) ;
else
k = parseFloat(document.getElementById(‘k’).value) ;diameter = parseFloat(document.getElementById(‘diameter’).value);
thickness = parseFloat(document.getElementById(‘thickness’).value);var canvas = document.getElementById(‘example’);
if (! canvas)
{
console.log(‘ Failed to retrieve the < canvas > element’);
return false;
}else
{
console.log(‘ Got < canvas > element ‘);
}
// Get the rendering context for 2DCG <- (2)
//var ctx = canvas.getContext(‘2d’);//console.info(t);
animate();
//draw_graph(ctx,graph);
console.info(‘asd’);
}
</script><head>
<meta charset=’utf-8′>
<title>CS 519: Scientific Visualization MP3</title>
</head>
<body onload=’main()’><form id=’input_form’>
<fieldset>
<legend>Graph Layout Parameters</legend>
Test with other Graph: <input type=’checkbox’ id=’other_graph’ checked> ONMaximum Movement <input type=’text’ id=’tt’ value=’10’>
Damping value <input type=’text’ id=’delta_t’ value=’0.0′>
Number of iterations! <input type=’text’ id=’num_iter’ value=’100′>
Use default k value <input type=’checkbox’ id=’default_k’>
User-provided k value<input type=’text’ id=’k’ value=’40’>Vertex diameter<input type=’text’ id=’diameter’ value=’5′>
Edge thickness<input type=’text’ id=’thickness’ value=’1′>
</fieldset>
</form>
<button onclick=’render()’>Render</button>
<canvas id =’example’ width =’640′ height =’480′>
Please use a browser that supports ‘canvas’
</canvas >
</body>
</html>The blog I need help with is: (visible only to logged in users)
-
You can upload documents following this guide: http://en.support.wordpress.com/uploading-documents/
List of allowed filetypes is available at http://en.support.wordpress.com/accepted-filetypes/
If your document doesn’t match the list of allowed filetypes, try embedding it with Scribd: http://en.support.wordpress.com/scribd/
-
Hi @atenkrotos
It is not possible to add javascript to WordPress.com sites or to upload code files. You can only upload the documents that @tony733t listed above.
You can embed some code right into the WordPress.com pages or post (see details at https://en.support.wordpress.com/code/) but again, javascript is not permitted.
- The topic ‘how do I attach this HTML file purely? It has an embedded Js script’ is closed to new replies.
WordPress.com Forums 