Processing - Sombrero 3D Surface

El Sombrero 3D

Processing Language (processing.js) is an useful tool for mathematical visualization.
Here are some graphs created with it (see more samples below). This 3D surface (also known as the Mexican Hat) is represented by the mathematical equation:

    z = sin(x2+y2) / (x2+y2)
Mouse over and click to move:

Source code to generate the surface:

You can download "processing-1.1.0.min.js" here:

<script src="processing-1.1.0.min.js"></script>

<script type="application/processing" id="script1">
void setup() {
  size(640, 400);

void draw() {
  translate(width/2, height/2);
  for (float y= -4; y<4; y+=0.035) {
    for (float x = -4; x<4; x+=0.035) {
      float z = sin(x*x + y*y) / (x*x + y*y);
      float px = x*70+y*8;
      float py = -z*120+y*30;
      point(px, py);

<canvas id="canvas1"></canvas>

 var script_text = document.getElementById('script1').text;
 var canvas=document.getElementById('canvas1');
 new Processing(canvas, script_text);

Try those other interesting mathematical surfaces:

Render of the code above:

Have you found other interesting surface equations to plot using Processing?
Post them in your comments!

2 Responses to Processing - Sombrero 3D Surface

  1. Lenin Angulo says:
    Hey, really good job. I'm wondering how works this translation: float px = x*70+y*8; float py = -z*120+y*30; Tanks a lot.
  2. Pingback: Processing.js v1.2.3 released « Processing.js Blog

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <font color="" face="" size=""> <span style="">