I'd like to get help from Geometry / Wolfram Mathematica people.
I want to visualize this 3D Rose in JavaScript (p5.js) environment.
This figure is originally generated using wolfram language by Paul Nylanderin 2004-2006, and below is the code:
Rose[x_, theta_] := Module[{
phi = (Pi/2)Exp[-theta/(8 Pi)],
X = 1 - (1/2)((5/4)(1 - Mod[3.6 theta, 2 Pi]/Pi)^2 - 1/4)^2},
y = 1.95653 x^2 (1.27689 x - 1)^2 Sin[phi];
r = X(x Sin[phi] + y Cos[phi]);
{r Sin[theta], r Cos[theta], X(x Cos[phi] - y Sin[phi]), EdgeForm[]
}];
ParametricPlot3D[
Rose[x, theta], {x, 0, 1}, {theta, -2 Pi, 15 Pi},
PlotPoints -> {25, 576}, LightSources -> {{{0, 0, 1}, RGBColor[1, 0, 0]}},
Compiled -> False
]
I tried implement that code in JavaScript like this below.
function rose(){
for(let theta = 0; theta < 2700; theta += 3){
beginShape(POINTS);
for(let x = 2.3; x < 3.3; x += 0.02){
let phi = (180/2) * Math.exp(- theta / (8*180));
let X = 1 - (1/2) * pow(((5/4) * pow((1 - (3.6 * theta % 360)/180), 2) - 1/4), 2);
let y = 1.95653 * pow(x, 2) * pow((1.27689*x - 1), 2) * sin(phi);
let r = X * (x*sin(phi) + y*cos(phi));
let pX = r * sin(theta);
let pY = r * cos(theta);
let pZ = (-X * (x * cos(phi) - y * sin(phi)))-200;
vertex(pX, pY, pZ);
}
endShape();
}
}
But I got this result below
Unlike original one, the petal at the top is too stretched.
I suspected that the
let y = 1.95653 * pow(x, 2) * pow((1.27689*x - 1), 2) * sin(phi);
may should be like below...
let y = pow(1.95653*x, 2*pow(1.27689*x - 1, 2*sin(theta)));
But that went even further away from the original.
Maybe I'm asking a dumb question, but I've been stuck for several days.
If you see a mistake, please let me know.
Thank you in advanse🙏
Update:
I changed the x range to 0~1 as defined by the original one.
Also simplified the JS code like below to find the error.
function rose_debug(){
for(let theta = 0; theta < 15*PI; theta += PI/60){
beginShape(POINTS);
for(let x = 0.0; x < 1.0; x += 0.005){
let phi = (PI/2) * Math.exp(- theta / (8*PI));
let y = pow(x, 4) * sin(phi);
let r = (x * sin(phi) + y * cos(phi));
let pX = r * sin(theta);
let pY = r * cos(theta);
let pZ = x * cos(phi) - y * sin(phi);
vertex(pX, pY, pZ);
}
endShape();
}
}
But the result still keeps the wrong proportion↓↓↓
Also, when I remove the term "sin(phi)" in the line "let y =..." like below
let y = pow(x, 4);
then I got a figure somewhat resemble the original like below🤣
At this moment I was starting to suspect the mistake on the original equation, but I found another article by Jorge García Tíscar(Spanish) that implemented the exact same 3D rose in wolfram language successfully.
So, now I really don't know how the original is formed by the equation😇
Update2: Solved
I followed a suggestion by Trentium (Answer No.2 below) that stick to 0 ~ 1 as the range of x, then multiply the r and X by an arbitrary number.
for(let x = 0; x < 1; x += 0.05){
r = r * 200;
X = X * 200;
Then I got this correct result looks exactly the same as the original🥳
Simplified final code:
function rose_debug3(){
for(let x = 0; x <= 1; x += 0.05){
beginShape(POINTS);
for(let theta = -2*PI; theta <= 15*PI; theta += 17*PI/2000){
let phi = (PI / 2) * Math.exp(- theta / (8 * PI));
let X = 1 - (1/2) * ((5/4) * (1 - ((3.6 * theta) % (2*PI))/PI) ** 2 - 1/4) ** 2;
let y = 1.95653 * (x ** 2) * ((1.27689*x - 1) ** 2) * sin(phi);
let r = X * (x * sin(phi) + y * cos(phi));
if(0 < r){
const factor = 200;
let pX = r * sin(theta)*factor;
let pY = r * cos(theta)*factor;
let pZ = X * (x * cos(phi) - y * sin(phi))*factor;
vertex(pX, pY, pZ);
}
}
endShape();
}
}
The reason I got the vertically stretched figure at first was the range of the x. I thought that changing the range of the x just affect the whole size of the figure. But actually, the range affects like this below.
(1): 0 ~ x ~ 1, (2): 0 ~ x ~ 1.2
(3): 0 ~ x ~ 1.5, (4): 0 ~ x ~ 2.0
(5): flipped the (4)
So far I saw the result like (5) above, didn't realize that the correct shape was hiding inside that figure.
Thank you Trentium so much for kindly helping me a lot!
Since this response is a significant departure from my earlier response, am adding a new answer...
In rendering the rose algorithm in ThreeJS (sorry, I'm not a P5 guy) it became apparent that when generating the points, that only the points with a positive radius are to be rendered. Otherwise, superfluous points are rendered far outside the rose petals.
(Note: When running the code snippet, use the mouse to zoom and rotate the rendering of the rose.)
<script type="module">
import * as THREE from 'https://cdn.jsdelivr.net/npm/three#0.115.0/build/three.module.js';
import { OrbitControls } from 'https://cdn.jsdelivr.net/npm/three#0.115.0/examples/jsm/controls/OrbitControls.js';
//
// Set up the ThreeJS environment.
//
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
var camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 500 );
camera.position.set( 0, 0, 100 );
camera.lookAt( 0, 0, 0 );
var scene = new THREE.Scene();
let controls = new OrbitControls(camera, renderer.domElement);
//
// Create the points.
//
function rose( xLo, xHi, xCount, thetaLo, thetaHi, thetaCount ){
let vertex = [];
let colors = [];
let radius = [];
for( let x = xLo; x <= xHi; x += ( xHi - xLo ) / xCount ) {
for( let theta = thetaLo; theta <= thetaHi; theta += ( thetaHi - thetaLo ) / thetaCount ) {
let phi = ( Math.PI / 2 ) * Math.exp( -theta / ( 8 * Math.PI ) );
let X = 1 - ( 1 / 2 ) * ( ( 5 / 4 ) * ( 1 - ( ( 3.6 * theta ) % ( 2 * Math.PI ) ) / Math.PI ) ** 2 - 1 / 4 ) ** 2;
let y = 1.95653 * ( x ** 2 ) * ( (1.27689 * x - 1) ** 2 ) * Math.sin( phi );
let r = X * ( x * Math.sin( phi ) + y * Math.cos( phi ) );
//
// Fix: Ensure radius is positive, and scale up accordingly...
//
if ( 0 < r ) {
const factor = 20;
r = r * factor;
radius.push( r );
X = X * factor;
vertex.push( r * Math.sin( theta ), r * Math.cos( theta ), X * ( x * Math.cos( phi ) - y * Math.sin( phi ) ) );
}
}
}
//
// For the fun of it, lets adjust the color of the points based on the radius
// of the point such that the larger the radius, the deeper the red.
//
let rLo = Math.min( ...radius );
let rHi = Math.max( ...radius );
for ( let i = 0; i < radius.length; i++ ) {
let clr = new THREE.Color( Math.floor( 0x22 + ( 0xff - 0x22 ) * ( ( radius[ i ] - rLo ) / ( rHi - rLo ) ) ) * 0x10000 + 0x002222 );
colors.push( clr.r, clr.g, clr.b );
}
return [ vertex, colors, radius ];
}
//
// Create the geometry and mesh, and add to the THREE scene.
//
const geometry = new THREE.BufferGeometry();
let [ positions, colors, radius ] = rose( 0, 1, 20, -2 * Math.PI, 15 * Math.PI, 2000 );
geometry.setAttribute( 'position', new THREE.Float32BufferAttribute( positions, 3 ) );
geometry.setAttribute( 'color', new THREE.Float32BufferAttribute( colors, 3 ) );
const material = new THREE.PointsMaterial( { size: 4, vertexColors: true, depthTest: false, sizeAttenuation: false } );
const mesh = new THREE.Points( geometry, material );
scene.add( mesh );
//
// Render...
//
var animate = function () {
requestAnimationFrame( animate );
renderer.render( scene, camera );
};
animate();
</script>
Couple of notables:
When calling rose( xLo, xHi, xCount, thetaLo, thetaHi, thetaCount ), the upper range thetaHi can vary from Math.PI to 15 * Math.PI, which varies the number of petals.
Both xCount and thetaCount vary the density of the points. The Wolfram example uses 25 and 576, respectively, but this is to create a geometry mesh, whereas if creating a point field the density of points needs to be increased. Hence, in the code the values are 20 and 2000.
Enjoy!
Presumably the algorithm above is referencing cos() and sin() functions that handle the angles in degrees rather than radians, but wherever using angles while employing non-trigonometric transformations, the result will be incorrect.
For example, the following formula using radians...
phi = (Pi/2)Exp[-theta/(8 Pi)]
...has been incorrectly translated to...
phi = ( 180 / 2 ) * Math.exp( -theta / ( 8 * 180 ) )
To test, let's assume theta = 2. Using the original formula in radians...
phi = ( Math.PI / 2 ) * Math.exp( -2 / ( 8 * Math.PI ) )
= 1.451 rad
= 83.12 deg
...and now the incorrect version using degrees, which returns a different angle...
phi = ( 180 / 2 ) * Math.exp( -2 / ( 8 * 180 ) )
= 89.88 deg
= 1.569 rad
A similar issue will occur with the incorrectly translated expression...
pow( ( 1 - ( 3.6 * theta % 360 ) / 180 ), 2 )
Bottom line: Stick to radians.
P.S. Note that there might be other issues, but using radians rather than degrees needs to be corrected foremost...
Related
This particle cloud of sprites should sit to the right of the x-axis and above the y-axis. However, as you can see in this fiddle it mystifyingly hangs just below the y-axis and despite all my editing and rearranging and can't figure out what's going on here. I'd appreciate a fresh pair of eyes to help me out. Thanks!
Here is the basis for my math in the elliptical cloud.
function pointInEllipticalCloud(radiusA, radiusB, pZ) {
var pX = Math.random() * (radiusA * 2);
var rightBisector = Math.abs( radiusA - pX );
var chord = (2 * radiusB) * Math.sqrt(1 - Math.pow((rightBisector / radiusA), 2));
var pY = (Math.random() * chord) + ((radiusB - chord) / 2);
return new THREE.Vector3(pX, pY, pZ);
}
var pZ = 1;
var particleGroup = new THREE.Object3D();
for( var i = 0; i < 300; i++ ) {
var radiusA = 200;
var radiusB = 50;
var particle = new THREE.Sprite( spriteMaterial );
particle.scale.set( 20, 20, 1 );
var spritePoint = pointInEllipticalCloud(radiusA, radiusB, pZ);
// *** Why the resulting form hanging below the y axis?
particle.position = spritePoint ;
particleGroup.add( particle );
pZ += 0.1;
}
particleGroup.position.set(0,0,0);
scene.add( particleGroup );
Ah! Found it. The bug was in part of the calculation for pointInEllipticalCloud(). pY should instead equal this:
var pY = (Math.random() * chord) + (((radiusB * 2) - chord) / 2);
...where radiusB is multiplied by two to make it the vertical diameter of the ellipse.
I am trying to create an image distortion effect on my canvas, but nothing appears to be happening. Here is my code:
self.drawScreen = function (abilityAnimator, elapsed) {
if (!self.initialized) {
self.initialized = true;
self.rawData = abilityAnimator.context.getImageData(self.targetX, self.targetY, self.width, self.height);
self.initialImgData = self.rawData.data;
}
abilityAnimator.drawBackground();
self.rawData = abilityAnimator.context.getImageData(self.targetX, self.targetY, self.width, self.height);
var imgData = self.rawData.data, rootIndex, translationIndex, newX;
for (var y = 0; y < self.height; y++) {
for (var x = 0; x < self.width; x++) {
rootIndex = (y * self.height + x) * 4;
newX = Math.ceil(self.amplitude * Math.sin(self.frequency * (y + elapsed)));
translationIndex = (y * self.width + newX) * 4;
imgData[translationIndex + 0] = self.initialImgData[rootIndex + 0];
imgData[translationIndex + 1] = self.initialImgData[rootIndex + 1];
imgData[translationIndex + 2] = self.initialImgData[rootIndex + 2];
imgData[translationIndex + 3] = self.initialImgData[rootIndex + 3];
}
}
abilityAnimator.context.putImageData(self.rawData, self.targetX, self.targetY);
};
abilityAnimator is a wrapper for my canvas object:
abilityAnimator.context = //canvas.context
abilityAnimator.drawBackground = function(){
this.canvas.width = this.canvas.width;
}
elapsed is simply the number of milliseconds since the animation began (elapsed is always <= 2000)
My member variables have the following values:
self.width = 125;
self.height = 125;
self.frequency = 0.5;
self.amplitude = self.width / 4;
self.targetX = //arbitrary value within canvas
self.targetY = //arbitrary value within canvas
I can translate the image to the right very easily so long as there is no sine function, however, introducing these lines:
newX = Math.ceil(self.amplitude * Math.sin(self.frequency * (y + elapsed)));
translationIndex = (y * self.width + newX) * 4;
Causes nothing to render at all. The translation indexes don't appear to be very strange, and the nature of the sinusoidal function should guarantee that the offset is no greater than 125 / 4 pixels.
Your formula using sin is wrong, the frequency will be so high it will be seen as noise.
The typical formula to build a sinusoid is :
res = sin ( 2 * PI * frequency * time ) ;
where frequency is in Hz and time in s.
So in js that would translate to :
res = Math.sin ( 2 * Math.PI * f * time_ms * 1e-3 ) ;
you can obviously compute just once the constant factor :
self.frequency = 0.5 * ( 2 * Math.PI * 1e-3 );
// then use
res = Math.sin ( self.frequency * time_ms ) ;
So you see you were 1000 times too fast.
Second issue :
Now that you have your time frequency ok, let's fix your spatial frequency : when multiplying time frequency by y, you're quite adding apples and cats.
To build the formula, think that you want to cross n time 2*PI during the height of the canvas.
So :
spatialFrequency = ( n ) * 2 * Math.PI / canvasHeight ;
and your formula becomes :
res = Math.sin ( self.frequency * time_ms + spatialFrequency * y ) ;
You can play with various values with this jsbin i made so you can visualize the effect :
http://jsbin.com/ludizubo/1/edit?js,output
I'm building a globe(sphere geometry) with set of predefined locations on geo-mapped and drawn as point(sphere geometry). I would like to focus(moving one location to another) those locations by rotating globe along y-axis. I tried the following code, seems not working for all locations.
location.geometry.computeBoundingBox();
var position = new THREE.Vector3();
position.subVectors( location.geometry.boundingBox.max, location.geometry.boundingBox.min );
position.multiplyScalar( 0.20 );
position.sub( location.geometry.boundingBox.min );
location.matrixWorld.multiplyVector3( position );
var point1 = scene.clone().position;
var point2 = position;
var distance = point1.distanceTo( point2 );
locationCollection.rotation.y = distance;
I think, I don't understand the concept enough. Hopefully, I will get some idea from the community.
Fiddle
var c = group.rotation.y;
var d = -b * (Math.PI / 180)%(2 * Math.PI);
var e = Math.PI / 2 * -1;
group.rotation.y = c % (2 * Math.PI);
group.rotation.x = a * (Math.PI / 180) % Math.PI;
group.rotation.y= d+e;
where a= latitude, b= longitude,group=Object3D(or sphere)
I'm trying to implement the formulas necessary to calculate the global radiation incident on an inclined solar panel.
The formulas I use were found in the following research paper :
--> ipac.kacst.edu.sa/eDoc/2010/191048_1.pdf
Here is the commented JavaScript code :
var config = require('./configuration.json'),
pi = Math.PI;
function solar_efficiency(angle, day) {
var R_mD, // average sun-earth distance (m)
a, // semi-major axis (km)
e, // oval orbit eccentricity (km)
theta, // angle with the perihelion
n, // current nth day of the year (int)
R_D, // actual sun-earth distance (m)
I_o; // extraterrestrial radiation (indice)
R_mD = config.avg_sun_earth_dist;
a = config.semi_major_axis;
e = config.eccentricity;
n = day;
theta = n * 365.25 / 360;
R_D = a * (1 - e * e) / (1 + e * Math.cos(theta));
I_o = 1367 * Math.pow(R_mD / R_D, 2);
var axis, // angle of the earth's axis
D; // sun declination (radian)
axis = config.earth_axis;
D = ((axis * pi) / 180) * Math.sin(((2 * pi) * (284 + n)) / 365);
var Eq_t; // solar time correction (float)
if((1 <= n) && (n <= 106)) {
Eq_t = -14.2 * Math.sin((pi * (n + 7)) / 111);
}
else if((107 <= n) && (n <= 166)) {
Eq_t = 4.0 * Math.sin((pi * (n - 106)) / 59);
}
else if((167 <= n) && (n <= 246)) {
Eq_t = -6.5 * Math.sin((pi * (n - 166)) / 80);
}
else if((247 <= n) && (n <= 365)) {
Eq_t = 16.4 * Math.sin((pi * (n - 247)) / 113);
}
var Long_sm, // longitude of the standard meridian (longitude)
Long_local, // longitude of the panels (longitude)
T_local, // local time (h)
T_solar; // solar time (h)
Long_sm = config.std_meridian_long;
Long_local = config.current_longitutde;
T_local = config.local_time;
T_solar = T_local + (Eq_t / 60) + ((Long_sm - Long_local) / 15);
var W; // hour angle (radian)
W = pi * ((12 - T_solar) / 12);
var Lat_local, // latitude of the panels (latitude)
W_sr, // sunrise hour angle (°)
W_ss; // sunset hour angle (°)
Lat_local = config.current_latitude;
W_sr = W_ss = Math.acos(-1 * Math.tan(Lat_local) * Math.tan(D));
var alpha, // angle between solar panel and horizontal (°) -FIND!!!
R_b; // ratio of avg. beam radiation on horiz. / inclined surface
alpha = angle; // /!\ TESTING ONLY /!\
var num_1 = Math.cos(Lat_local - alpha) * Math.cos(D) * Math.sin(W_ss);
var num_2 = W_ss * Math.sin(Lat_local - alpha) * Math.sin(D);
var det_1 = Math.cos(Lat_local) * Math.cos(D) * Math.sin(W_ss);
var det_2 = W_ss * Math.sin(Lat_local) * Math.sin(D);
R_b = (num_1 + num_2) / (det_1 + det_2); // in the northern hemisphere
var H_g, // global radiation on horizontal surface (W h/m^2/day) ---DB!!!
H_d, // diffuse radiation on horizontal surface (W h/m^2/day) ---DB!!!
H_B; // beam radiation on inclined surface (W h/m^2/day)
H_g = 700;
H_d = 500;
H_B = (H_g - H_d) / R_b;
var R_d; // ratio of avg. daily diffuse radiation tilted / horiz. surface
R_d = (3 + Math.cos(2 * alpha)) / 2; // isotropic Badesco model
var H_D; // sky-diffuse radiation on inclined surface (W h/m^2/day)
H_D = R_d * H_d;
var p, // albedo std. = 0.2 (soil = 0.17, grass = 0.25, concrete = 0.55)
H_R; // ground reflected radiation on inclined surface (W h/m^2/day)
p = config.ground_albedo;
H_R = H_g * p * ((1 - Math.cos(alpha)) / 2);
var H_T; // daily global radiation on a tilted surface (W h/m^2/day)
H_T = H_B + H_D + H_R;
return H_T;
}
var results = {}, current_day;
for(var i = 0; i < 365; i++) {
current_day = [];
for(var k = 0; k <= 90; k++) {
current_day.push([k, solar_efficiency(k, i)]);
}
current_day.sort(function(a, b) { return b[1] - a[1]; });
current_day.length = 1;
results[i] = current_day[0];
}
console.log(results);
The configurations like latitude and longitude are situated in a JSON file.
Here are the values I'm testing the program with :
{
"avg_sun_earth_dist" : 149597870.7,
"earth_axis" : 23.45,
"eccentricity" : 0.0167,
"semi_major_axis" : 149598261,
"local_time" : 12,
"std_meridian_long" : 0,
"current_longitude" : 2.294351,
"current_latitude" : 48.858844,
"ground_albedo" : 0.2
}
If you change the latitude a little bit you will see that you either get NaNs or the values stabilize but suddenly for certain values of "i" just skyrocket.
The problem seems to be this line :
W_sr = W_ss = Math.acos(-1 * Math.tan(Lat_local) * Math.tan(D));
I'm not sure if the input data is wrong and thus crashes the program or if I just implemented the formulas wrong.
Use that library , floats aren't good for such calculations. You'll always end up with errors. In every language for such arithmetics are used BigDecimals
I found this script by mrdoob that generates a web of lines. I've figured out where a line begins and where it ends. Now I want to extrude faces from these shapes, however all I have are lines and vertices. I'm trying to read through some half-edges theory, but i don't think I understand it that well.
Is it a matter of following a line until it's a rectangle, checking if it intersects a line or subdivides? I need a bump in the right direction.
// Based on Jared Tarbell's Substrate algorithm concept.
// http://www.complexification.net/gallery/machines/substrate/index.php
var Boid = function ( x, y, angle ) {
this.x = x;
this.y = y;
this.angle = Math.pow( Math.random(), 20 ) + angle;
this.dx = Math.cos( this.angle );
this.dy = Math.sin( this.angle );
this.life = Math.random() * 100 + 100;
this.dead = false;
this.update = function () {
context.strokeStyle = '#000000';
context.beginPath();
context.moveTo( this.x, this.y );
this.x += this.dx * 2;
this.y += this.dy * 2;
this.life -= 2;
context.lineTo( this.x, this.y );
context.stroke();
var index = ( Math.floor( this.x ) + width * Math.floor( this.y ) ) * 4;
if ( this.life <= 0 ) this.kill();
if ( data[ index + 3 ] > 0 ) this.kill();
if ( this.x < 0 || this.x > width ) this.kill();
if ( this.y < 0 || this.y > height ) this.kill();
}
this.kill = function () {
boids.splice( boids.indexOf( this ), 1 );
this.dead = true;
}
}
var width = window.innerWidth;
var height = window.innerHeight;
var canvas = document.getElementById( 'world' );
canvas.width = width;
canvas.height = height;
var context = canvas.getContext( '2d' );
var image, data;
var boids = [];
boids.push( new Boid( width / 2, height / 2, Math.random() * 360 * Math.PI / 180 ) );
setInterval( function () {
image = context.getImageData( 0, 0, width, height );
data = image.data;
for ( var i = 0; i < boids.length; i ++ ) {
var boid = boids[ i ];
boid.update();
if ( !boid.dead && Math.random() > 0.5 && boids.length < 500 ) {
boids.push( new Boid( boid.x, boid.y, ( Math.random() > 0.5 ? 90 : - 90 ) * Math.PI / 180 + boid.angle ) );
}
}
}, 1000 / 60 );
This looks more complicated than I tough. I'm not sure if it is the answer you are asking for, but may help you to decide the next step:
If you have to use this algorithm: I think you are going to need to keep track of every pair of points that makes an edge: the first point at the beginning of the Boid function and the second when the Boid is killed; both points (or the x1, x2, y1 and y2 values) are saved in a new edge object that will be added to an edges array (every edge will be kind of the soul of a death Boid).
There are two problems before applying the half-edges theory: you have an array of edges, but you need to know what other edges are connected to the beginning or end of a given edge. The other problem is that the "collision" between two Boids only affects the Boid currently being updated, which is killed during the collision. In order to use the half-edge theory you'll have to "notify" the other Boid/edge about this collision and split it at that point: a collision point is a vertex of three edges, the one that collides and the two in which the one being collided was split.
Also note that the shapes (faces) are not necessarily made of four edges, I opened the link you provider and there where a lot of shapes with tree and five edges.
If you can use a different algorithm for generating the mesh then you may have a better representation of the edges and vertexes that will help you to find the "corners" that makes every shape.