I am inspired by what community of programing language called Processing is achieving in digital arts. I have recently saw a striking visualization based on simple mathematical formulas and a very short p5.js code which is a version of Processing that is based off JavaScript rather than Java. Here is the link and copy of the original
Here is the code copied for convenience:
a=(x,y,d=5*cos(o=mag(k=x/8-25,e=y/8-25)/3))=>
[(q=x/2+k/atan(9*cos(e))*sin(d*4-t))*sin(c=d/3-t/8)+200,
(y/4+5*o*o+q)/2*cos(c)+200]
t=0,draw=$=>
{t||createCanvas(w=400,w);background(6).stroke(255,96);
for(t+=PI/60,y=99;++y<300;)for(x=99;++x<300;)point(...a(x,y))}
[(q=x/2+k/atan(9*cos(e))*sin(d*4-t))*sin(c=d/3-t/8)+200,
(y/4+5*o*o+q)/2*cos(c)+200]
t=0,draw=$=>
{t||createCanvas(w=400,w);background(6).stroke(255,96);
for(t+=PI/60,y=99;++y<300;)for(x=99;++x<300;)point(...a(x,y))}
The code looked so simple, but visually so complex I wondered if a person who does not know Processing would be able to code it in the language they know. And the second thought was -- what if I ask ChatGPT for a code translation, wow well will it do? I decided to use the following strategy:
◼
ChatGPT Model 4o: figure out a best prompt for Chat GPT to do code translation from Processing to Wolfram Language. 4o because it can access web and check various resources there (o1 currently cannot go web).
◼
ChatGPT Model o1: use worked prompt to do code translation. o1 because it got much more logical reasoning.
Here is the prompt we worked out with 4o (feel free to use this prompt for your own experiments):
Translate the following Processing code to Wolfram, adhering to the following steps and checkpoints:
1. **Understand the Code:** First, analyze the Processing code and understand its functionality fully. Ensure you grasp the logic, so no critical behavior is lost during translation.
2. **Mapping to Wolfram:** Translate the code in a way that takes full advantage of Wolfram’s **native constructs**. Focus on efficiency, compactness, and aligning the code with Wolfram’s architecture, avoiding direct line-for-line translation unless necessary.
3. **Verify Each Function:** For each function used in Wolfram, **consult Wolfram’s official documentation** to confirm its existence and correct usage. Ensure that no made-up functions or non-existent constructs are introduced at any point.
4. **Test for Logic and Accuracy:** At each step of translation, ensure that the structure and logic of the Processing code are preserved. Break the code into functional blocks and validate that each block’s behavior remains true to the original.
5. **Check Compactness and Efficiency:** After translating, review the code to optimize it for compactness and performance. Ensure it is written in a clear and efficient manner, leveraging Wolfram’s built-in strengths.
6. **Final Validation:** Before providing the translated code, ensure that all the checkpoints have been met:
- The translation is compact and efficient.
- All functions used are verified through documentation.
- The core functionality of the Processing code is preserved.
- The translated code can run as-is in Wolfram without any errors.
Only after all tests are true, provide the code.
1. **Understand the Code:** First, analyze the Processing code and understand its functionality fully. Ensure you grasp the logic, so no critical behavior is lost during translation.
2. **Mapping to Wolfram:** Translate the code in a way that takes full advantage of Wolfram’s **native constructs**. Focus on efficiency, compactness, and aligning the code with Wolfram’s architecture, avoiding direct line-for-line translation unless necessary.
3. **Verify Each Function:** For each function used in Wolfram, **consult Wolfram’s official documentation** to confirm its existence and correct usage. Ensure that no made-up functions or non-existent constructs are introduced at any point.
4. **Test for Logic and Accuracy:** At each step of translation, ensure that the structure and logic of the Processing code are preserved. Break the code into functional blocks and validate that each block’s behavior remains true to the original.
5. **Check Compactness and Efficiency:** After translating, review the code to optimize it for compactness and performance. Ensure it is written in a clear and efficient manner, leveraging Wolfram’s built-in strengths.
6. **Final Validation:** Before providing the translated code, ensure that all the checkpoints have been met:
- The translation is compact and efficient.
- All functions used are verified through documentation.
- The core functionality of the Processing code is preserved.
- The translated code can run as-is in Wolfram without any errors.
Only after all tests are true, provide the code.
After which, from the first attempt (!), I got the following working code:
(* Define the function a[x, y, t] *)a[x_, y_, t_] := Module[ {k, e, o, d, q, c, xOut, yOut}, k = x/8 - 25; e = y/8 - 25; o = Sqrt[k^2 + e^2]/3; d = 5*Cos[o]; q = x/2 + (k/ArcTan[9*Cos[e]])*Sin[4*d - t]; c = d/3 - t/8; xOut = q*Sin[c] + 200; yOut = ((y/4 + 5*o^2 + q)/2)*Cos[c] + 200; {xOut, yOut}];(* Define the drawing function *)draw[t_] := Module[ {pointsList}, pointsList = Flatten[ Table[a[x, y, t], {y, 100, 299}, {x, 100, 299}], 1 ]; Graphics[ { {Opacity[96/255], White, PointSize[Small], Point[pointsList]} }, Background -> GrayLevel[6/255], PlotRange -> {{0, 400}, {0, 400}}, ImageSize -> 400 ]];(* Create the animation *)Manipulate[ draw[t], {t, 0, 2*Pi}]
The only disadvantage of this code was that it is a bit heavy to run as Manipulate. So I resorted to video generation and slight parameters changes. We use first part as is:
In[]:=
(*Definethefunctiona[x,y,t]*)a[x_,y_,t_]:=Module[{k,e,o,d,q,c,xOut,yOut},k=x/8-25;e=y/8-25;o=Sqrt[k^2+e^2]/3;d=5*Cos[o];q=x/2+(k/ArcTan[9*Cos[e]])*Sin[4*d-t];c=d/3-t/8;xOut=q*Sin[c]+200;yOut=((y/4+5*o^2+q)/2)*Cos[c]+200;{xOut,yOut}];
Second part slightly changed for Background and ImageSize:
(*Definethedrawingfunction*)draw[t_]:=Module[{pointsList},pointsList=Flatten[Table[a[x,y,t],{y,100,299},{x,100,299}],1];Graphics[{{Opacity[96/255],White,PointSize[Small],Point[pointsList]}},Background->Black,PlotRange->{{0,400},{0,400}},ImageSize->1080]];
Lastly we replace Manipulate with AnimationVideo and corresponding options. It took some time to run, as you can see below. So consider your computer resources before running this line:
(*Createtheanimation*)v=Parallelize@AnimationVideo[draw[t],{t,0,16Pi},RasterSize->1080,DefaultDuration->35];//AbsoluteTiming
Out[]=
{8100.81,Null}
Next I wanted to put the video in the context of math that is behind its shapes. But while math is quite simple, the final formal is not and it is too large to meaningfully use as decoration for the video:
In[]:=
a[x,y,t]//TraditionalForm
Out[]//TraditionalForm=
200-sin-cos-25+-25-9cos25-,cos-cos-25+-25-9cos25-+-25+-25+++200
t
8
5
3
1
3
2
x
8
2
y
8
x
2
-25sint-20cos+
x
8
1
3
2
-25
x
8
2
-25
y
8
-1
tan
y
8
1
2
t
8
5
3
1
3
2
x
8
2
y
8
-25sint-20cos+
x
8
1
3
2
-25
x
8
2
-25
y
8
-1
tan
y
8
5
9
2
x
8
2
y
8
x
2
y
4
So I decided just to highlight the key set of functions used in the video and made a header:
In[]:=
title=RasterizeFramedStyle" MADE WITH: "<>ToStringRowSin[x],Cos[x],ArcTan[x],
x
,x^2,","//TraditionalForm<>" ",25,GrayLevel[1],FontFamily->"Bangla MN",Background->Black,RasterSize->1080;ImageAssemble[{{title,VideoExtractFrames[v,0]}}//Transpose]Out[]=
that I attached to the top of every frame:
Parallelize@VideoFrameMap[ImageAssemble[{{title,#}}//Transpose]&,v];
Out[]=
CITE THIS NOTEBOOK
CITE THIS NOTEBOOK
Depth dweller: translating art code between Processing and Wolfram languages using ChatGPT o1 and 4o
by Vitaliy Kaurov
Wolfram Community, STAFF PICKS, October 17, 2024
https://community.wolfram.com/groups/-/m/t/3299852
by Vitaliy Kaurov
Wolfram Community, STAFF PICKS, October 17, 2024
https://community.wolfram.com/groups/-/m/t/3299852