Home >Web Front-end >JS Tutorial >12 lines of javascript code to draw a Bagua chart_javascript skills
One sentence explanation: Use limited code to build a 1024*1024 color matrix to show off your programming & artistic beauty
Origined from a question on stackexchange. It has been slightly expanded here to support more programming languages and relax the code length limit.
Rules
Target:
By implementing a function get_color_at(x, y) in the template, draw as “interesting” a pattern as possible on a 1024*1024 canvas.
Parameters:
int x, int y, the values are 0 - 1023, corresponding to the coordinate point on the canvas, the upper left corner is the starting point (0,0)
Return:
int r, int g, int b, int alpha, the RGBA components of the corresponding colors, all range from 0 to 255.
Note:
The definition of alpha component in each language may be different, and it is uniformly converted by template to: 0 - 255. The larger the value, the more transparent it is.
Requirements:
You can only edit the code between // {{code start}} - // {{code end}} in the get_color_at(x, y) function body in the template;
The total number of characters of the code cannot exceed 1024, and it must have good readability.
if(typeof f_c=="undefined"){ f_c=function(x,y,px,py,r){ return Math.sqrt(Math.pow(x-px,2)+Math.pow(y-py,2))<=r; }; } var x0=x-512,y0=y-512; r=g=b=128; if(f_c(x0,y0,0,0,512)) r=g=b=(x0>0)?255:0; if(f_c(x0,y0,0,256,256)&&x0<=0) r=g=b=255; if(f_c(x0,y0,0,-256,256)&&x0>0) r=g=b=0; if(f_c(x0,y0,0,256,64)) r=g=b=0; if(f_c(x0,y0,0,-256,64)) r=g=b=255;
The above is the entire content of this article, I hope you all like it.