Home/ Questions/Q 8500971
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-11T01:05:07+00:00

I have the following code for a complex function plotter. It creates a phase

  • 0

I have the following code for a complex function plotter. It creates a phase plot of the complex function f(z) = z*(z+5)(z-v) where v is where your mouse is pointing. As you can see, it is pretty slow. Is there any way to speed this up and get a smooth animation? Just pointing me in the right direction would be helpful.

<html>
<head>
<script type="text/javascript" src="jquery-1.8.1.js"></script>
<script type="application/javascript">
function draw() {
var canvas = document.getElementById("canvas");
var ctx;// = canvas.getContext("2d");

//The following functions convert pixel Xs and Ys to real and imaginary 
//parts of a complex    number, and back again
var pixToReal = function(n){return n/15.0-10.0};
var pixToImag = function(n){return  - n/15.0+10}
var realToPix = function(x){return Math.round((x+10.0)*15)}
var imagToPix = function(y){return Math.round((-y+10.0)*15)}

//Storing the complex number a+bi as [a,b], the following functions add, 
//multiply, and  find the modulus of the complex number
var add = function(z1,z2){return [z1[0]+z2[0],z1[1] + z2[1]]}
var mult = function(z1,z2){return [z1[0]*z2[0]-z1[1]*z2[1],z1[0]*z2[1]+z1[1]*z2[0]]}
var modulus = function(z){
    if (z[1]>0){return Math.atan2(z[1],z[0])}
    else {return Math.atan2(z[1],z[0])+2*Math.PI}
    };

//Takes a complex number and returns the RGB value of the corresponding 
//point on the color wheel.
var complexToRGB = function(z){
var theta = modulus(z)%(2*Math.PI)
var Hp = (theta/(2*Math.PI))*6
var X = Math.abs(Math.round((1 - Math.abs(Hp%2 -1))*255))
var C =  "rgb(0,0,0)"
if (Hp>=0 && Hp<1){
    C = "rgb("+255+","+X+",0)"
    };
if (1<=Hp && Hp<2){
    C = "rgb("+X+","+255+",0)"}
if (2<=Hp && Hp<3){
    C = "rgb("+0+","+255+","+X+")"}
if (3<=Hp && Hp<4){
    C = "rgb("+0+","+X+","+255+")"}
if (4<=Hp && Hp<5){
    C = "rgb("+X+","+0+","+255+")"}
if (5<=Hp && Hp<6){
    C = "rgb("+255+","+0+","+X+")"}
return  C

}

//a complex number
var v = [0,4] 

//the function f(z) = z*(z+5)*(z+v)
var f = function(z){return mult(add(mult(z,z),mult([5,5],z)),add(z,v))}

//makes v the opposite complex number your mouse is pointing at, 
//i.e. your mouse points at a root of f
function onMouseMove(evt) {
v = [-pixToReal(evt.pageX), -pixToImag(evt.pageY)];
}

$(document).mousemove(onMouseMove);

makeFrame = function(){
 ctx.clearRect(0,0,300,300);
 for (var n =0;n<300;n++){
     for (var m=0;m<300;m++){
        var x = pixToReal(n)
        var y = pixToImag(m)
        var z = [x,y]
        var w = f(z) 
        ctx.fillStyle = complexToRGB(w)
        ctx.fillRect(n,m,1,1)
        }
       }
   }

 function animate() {
 ctx = canvas.getContext("2d");
 return setInterval(makeFrame, 1);
 }

 animate();

}
 </script>
</head>
<body onload="draw()">
  <canvas id="canvas" width="300" height="300"></canvas>
</body>

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I have made some quick optimizations that speeds it up about 500%. I think you could speed it up further but it would require a bit more work.

    What I have done is:

    • Instead of setting the pixel values using fillStyle and fillRect, all pixel values are retrieved as an array (imageData), and then makeFrame() manipulates the imageData array and then set all pixels at once using putImageData().
    • The change above required that complexToRGB() retuns an array with the red, green and blue color values instead of a string.
    • in the complexToRGB() function the list of if-cases has been changed to a chain of if-else (which is faster since the conditions after a true condition will not be evaluted).
    • Changed the setInterval from 1000 fps to 25. There’s no way the algorithm will be able to keep up with that framerate, so it’s better to set it to a more realistic frame rate.

    Here’s the code as a jsFiddle.

    Next steps: I would also try to remove as many function calls as possible, for instance inline the pixToReal() and pixToImag() formulas in the inner for loop:

    for (var m = 0; m < 300; m++) {
   var x = n / 15.0 - 10.0;
   var y = -m / 15.0 + 10;

    And then optimize the code in complexToRGB() and consider doing the same to that function to remove that function call.

    • 0