Create points for Povray Surface of Revolution by tracing

This app takes a series of coordinates and converts them to the input for Povray’s splines and surfaces of revolution (, etc.

I generated the points by tracing an image of a head in another app I had written.

This is the output of that app which I copied and pasted into a text element of the current app:
342,656, 587,649, 529,615, 489,555, 491,494, 516,461, 540,416, 553,381, 558,337, 557,289, 540,242, 532,205, 519,170, 505,144, 490,117, 476,97, 461,90, 439,78, 392,55, 339,49

This is the conversion:
<0.1, 0.0>, <6.2, 0.2>, <4.8, 1.0>, <3.8, 2.5>, <3.8, 4.0>, <4.4, 4.9>, <5.0, 6.0>, <5.3, 6.9>, <5.5, 8.0>, <5.5, 9.2>, <5.0, 10.3>, <4.8, 11.3>, <4.5, 12.2>, <4.2, 12.8>, <3.8, 13.5>, <3.4, 14.0>, <3.0, 14.2>, <2.5, 14.4>, <1.3, 15.0>, <0.0, 15.2>

This is the pov file:
#include “colors.inc”
camera {
location <10, 7.5, -20>
look_at <0, 7.5, 0>
}
background { color rgb<0.2, 0.4, 0.8> }
light_source { <100, 100, -100> color rgb .8 }
sor {
20,
<0.1, 0.0>, <6.2, 0.2>, <4.8, 1.0>, <3.8, 2.5>, <3.8, 4.0>, <4.4, 4.9>, <5.0, 6.0>, <5.3, 6.9>, <5.5, 8.0>, <5.5, 9.2>, <5.0, 10.3>, <4.8, 11.3>, <4.5, 12.2>, <4.2, 12.8>, <3.8, 13.5>, <3.4, 14.0>, <3.0, 14.2>, <2.5, 14.4>, <1.3, 15.0>, <0.0, 15.2>
pigment {color rgb<0.6, 0.5, 0.2> }
}

This is how it appears:

<!DOCTYPE HTML >
<html>
<head>
<title>PRConvert</title>
<style>
body {margin-left:0;margin-right:0;font:normal normal normal 15px Arial;}
a{ text-decoration: }:link { color: rgb(0, 0, 255) }:visited {color :rgb(100, 0,100) }:hover { }:active { }

</style>
</head>
<body>
<input type="text" id="t1" style= "width: 80%" value = "329,49,402,61,469,98,505,146,525,191,543,262,554,329,536,410,481,530,578,652" />
 <input type="text" id="t2" style = "width: 100px" value = "" placeholder = "divide by" />
 <input type ="button" id="b1" value="convert" onclick='cnvrt() ;' />
<script>
var arrx = []; var arry = []; var cntx = -1; var cnty = -1; var arr = []; var xminxmin; var ymax;
document.getElementById("t1").value =  document.getElementById("t1").value.replace(new RegExp('new jsPoint', 'g'),'');

function cnvrt() {
  arr = document.getElementById("t1").value.split(",");
  document.getElementById("t1").value = "";
  xmin = parseInt(arr[0]);
  ymax = parseInt(arr[1]);
  for (var i = 0; i <= arr.length -1; i += 2) {
    arr[i] = parseInt(arr[i]);
    cntx ++;
    arrx[cntx] = arr[i];
    if (i % 2 == 0 && arr[i] < xmin) xmin = arr[i];
  }
  
    for (var i = 1; i <= arr.length -1; i += 2) {
      arr[i] = parseInt(arr[i]);
    cnty ++;
    arry[cnty] = arr[i];
    if (i % 2 == 1  && arr[i] > ymax) ymax = arr[i];
  }
  
  
  for (var i = 0; i <= arrx.length -1; i ++) {
   arrx[i] -= xmin;
   arrx[i] /= parseInt(document.getElementById("t2").value);
   arrx[i] = arrx[i].toFixed(1);
  }
  for (var i = arrx.length -1; i >= 0; i --) {
   arry[i] -= ymax;
   arry[i] /= parseInt(document.getElementById("t2").value);
   arry[i] = - arry[i];
   arry[i] = arry[i].toFixed(1);
  }
   for (var i = 0; i <= arrx.length -1; i ++) {
   document.getElementById("t1").value += "<" + arrx[i] + ", " + arry[i] + ">, ";
  }
  document.getElementById("t1").value = document.getElementById("t1").value.substr(0,document.getElementById("t1").value.length - 2);
}
</script>
</body></html>
I converted the string to an array and obtained the minimum x and maximum y values:
 arr = document.getElementById("t1").value.split(",");
  document.getElementById("t1").value = "";
  xmin = parseInt(arr[0]);
  ymax = parseInt(arr[1]);
  for (var i = 0; i <= arr.length -1; i += 2) {
    arr[i] = parseInt(arr[i]);
    cntx ++;
    arrx[cntx] = arr[i];
    if (i % 2 == 0 && arr[i] < xmin) xmin = arr[i];
  }
  
    for (var i = 1; i <= arr.length -1; i += 2) {
      arr[i] = parseInt(arr[i]);
    cnty ++;
    arry[cnty] = arr[i];
    if (i % 2 == 1  && arr[i] > ymax) ymax = arr[i];
  }
  
  I subtracted the minimum x value from each point and divided to get a scale consistent to the of Povray:
  for (var i = 0; i <= arrx.length -1; i ++) {
   arrx[i] -= xmin;
   arrx[i] /= parseInt(document.getElementById("t2").value);
   arrx[i] = arrx[i].toFixed(1);
  }
  
  I did something similar for the y values, but since html y increases downward and Povray increases upward, I had to reverse the sign:
  for (var i = arrx.length -1; i >= 0; i --) {
   arry[i] -= ymax;
   arry[i] /= parseInt(document.getElementById("t2").value);
   arry[i] = - arry[i];
   arry[i] = arry[i].toFixed(1);
  }
  
  I then created the final string and placed it in the text input to be copied and pasted in the pov code:
   for (var i = 0; i <= arrx.length -1; i ++) {
   document.getElementById("t1").value += "<" + arrx[i] + ", " + arry[i] + ">, ";
  }
  document.getElementById("t1").value = document.getElementById("t1").value.substr(0,document.getElementById("t1").value.length - 2);

AN SVG Sunrise

This extends the coming of dawn with a rising sun.

This is the code:

<?xml version="1.0" encoding="UTF-8" standalone="no"?> <svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" id="svg1" >
<rect x = "0" y = "0" width = "100%" height = "100%" >
<animate attributeName = "fill" values = "rgb(0,0,30); rgb(0,0,100); rgb(0,0,100); rgb(70,0,140); rgb(120,40,140); rgb(80,80,200); rgb(100,100,255) ; rgb(100,100,255); rgb(100,100,255)" dur = "30s" repeatCount="indefinite"/>
</rect>
<ellipse cx="50%" cy="103%" rx="5%" ry = "8%" fill="#ffff00" >
<animate attributeName = "cy" values = "117% ; 103%" dur = "30s" repeatCount="indefinite"/>
<animate attributeName = "cx" values = "47% ; 53%" dur = "30s" repeatCount="indefinite"/>
</ellipse>
</svg>
The change is with the sun which has the following code:
<ellipse cx="50%" cy="103%" rx="5%" ry = "8%" fill="#ffff00" >
<animate attributeName = "cy" values = "117% ; 103%" dur = "30s" repeatCount="indefinite"/>
<animate attributeName = "cx" values = "47% ; 53%" dur = "30s" repeatCount="indefinite"/>
</ellipse>

The key is placing the sun initially below the screen, just beginning to show at the end of the animation:
<animate attributeName = "cy" values = "117% ; 103%" dur = "30s" repeatCount="indefinite"/>

A SVG Temporal Gradient – A Simulated Night To Dawn Image

This small file creates a svg temporal gradient, particularly a simulation of the conversion of night to dawn.

This is an example:


This is the code:

<?xml version="1.0" encoding="UTF-8" standalone="no"?> <svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" id="svg1" >
<rect x = "0" y = "0" width = "100%" height = "100%" >
  <animate attributeName = "fill" values = "rgb(0,0,40); rgb(0,0,100); rgb(0,0,100); rgb(70,0,140); rgb(120,40,140);  rgb(80,80,200); rgb(100,100,255) ; rgb(100,100,255); rgb(100,100,255)" dur = "30s" repeatCount="indefinite"/>
  </rect>
</svg>

The effect is created with an animation tag, with the fill as the attribute:
<animate attributeName = "fill" values = "rgb(0,0,40); rgb(0,0,100); rgb(0,0,100); rgb(70,0,140); rgb(120,40,14