Difference between revisions of "User talk:Piphi"

m (Continuation)
(shutdown)
Line 6: Line 6:
  
 
--[[User:Piphi|piphi]] ([[User talk:Piphi|talk]]) 13:52, 4 February 2020 (EST)
 
--[[User:Piphi|piphi]] ([[User talk:Piphi|talk]]) 13:52, 4 February 2020 (EST)
 
Recently I've been working on drawing the Firefox logo using [[Asymptote]], and just recently with a lot of help from [https://artofproblemsolving.com/community/user/sonone sonone] we finished it!
 
 
===More info===
 
 
====Inspiration====
 
I decided to draw the Firefox logo after seeing sonone's [https://artofproblemsolving.com/community/c68h2059229p14822284 submission] for the [https://aops.com/community/h2059229 Asymptote Design Comptetion].  Two of their submissions were Asymptote drawings of the browsers Safari and Chrome and since Firefox wasn't there I decided to draw it. :)
 
 
====Beginnings====
 
I drew the logo by copying a 128x128 Firefox logo into MS paint and finding the coordinates of each intersection to make the curves.  [[Image:Firefox128.png|thumb|right|Firefox]]  This resulted in the below image.
 
<asy>
 
//firefox
 
fill(Circle((64,64),30), purple);
 
 
//fox belly
 
draw((76,82)..(66,38)..(35,66));
 
path a = (76,82)..(66,38)..(35,66);
 
 
//fox lower mouth
 
draw((35,66)..(27,69)..(23,75));
 
path b = (35,66)..(27,69)..(23,75);
 
 
//fox upper mouth
 
draw((23,75)..(32,79)..(44,76));
 
path c = (23,75)..(32,79)..(44,76);
 
 
//fox middle nose
 
draw((44,76)..(54,74)..(63,75));
 
path d = (44,76)..(54,74)..(63,75);
 
 
//fill(a--b--c--d--cycle);
 
 
//fox upper nose
 
draw((63,75)..(53,79.5)..(46,84)..(41,89)..(32,92));
 
path e = (63,75)..(53,79.5)..(46,84)..(41,89)..(32,92);
 
 
//fox left ear
 
draw((32,92)..(29,99)..(29,106));
 
path f = (32,92)..(29,99)..(29,106);
 
 
//fox left back
 
draw((29,106)..(14,38)..(64,9));
 
path g = (29,106)..(14,38)..(64,9);
 
 
//fox right back
 
draw((64,9)..(113,35)..(105,100));
 
path h = (64,9)..(113,35)..(105,100);
 
 
// fox outer part of inner tail
 
draw((76,82)..(96,70)..(96,49));
 
path i = (76,82)..(96,70)..(96,49);
 
 
// fox upper belly
 
draw((39,59)..(63,38)..(96,49)..(111,81));
 
path j = (39,59)..(63,38)..(96,49)..(111,81);
 
 
// fox middle belly
 
draw((111,81)..(108,92)..(105,100));
 
path k = (111,81)..(108,92)..(105,100);
 
 
// fox lower chin
 
draw((39,59)..(45,67)..(58,70));
 
path l = (39,59)..(45,67)..(58,70);
 
 
// fox snout
 
draw((58,70)..(60,71)..(63,75));
 
path m = (58,70)..(60,71)..(63,75);
 
 
//fox outer right ear
 
draw((32,92)..(37,98)..(45,102));
 
path n = (32,92)..(37,98)..(45,102);
 
 
//fox inner right ear
 
draw((45,102)..(44,95)..(46,84));
 
path o = (45,102)..(44,95)..(46,84);
 
 
// fox middle belly
 
draw((8,64)..(39,17)..(111,81)..(102,98)..(95,106)..(87,115)..(81,124));
 
path p = (8,64)..(39,17)..(111,81)..(102,98)..(95,106)..(87,115)..(81,124);
 
 
// fox upper left tail
 
draw((81,124)..(68,112)..(62,94));
 
path q = (81,124)..(68,112)..(62,94);
 
 
 
//fill(c--d--e--f--g--cycle, orange);
 
 
shipout(bbox(lightgrey+3mm,FillDraw(lightgrey)));
 
</asy>
 
 
But then I encountered a small problem, I had no idea how to paint it!
 
 
====Continuation====
 
So that's when I asked sonone to help me color it.  I found a nice function from [https://artofproblemsolving.com/community/c68h564416p3303712 here] (which I later used to draw in inner circle).  But sonone found a better function to help us and they also fixed the curves up a bit.  They then drew a part of the fox using that function.
 
 
<asy>
 
//firefox
 
fill(Circle((64,64),30), purple);
 
 
//fox belly
 
//draw((76,82)..(66,38)..(35,66),red);
 
path a = (76,82)..(66,38)..(35,66);
 
 
//fox lower mouth
 
draw((35,66)..(27,69)..(23,75));
 
path b = (35,66)..(27,69)..(23,75);
 
 
//fox upper mouth
 
draw((23,75)..(32,79)..(44,76));
 
path c = (23,75)..(32,79)..(44,76);
 
 
//fox middle nose
 
draw((44,76)..(54,74)..(63,75));
 
path d = (44,76)..(54,74)..(63,75);
 
 
//fox upper nose
 
draw((63,75)..(53,79.5)..(46,84)..(41,89)..(32,92));
 
path e = (63,75)..(53,79.5)..(46,84)..(41,89)..(32,92);
 
 
//fox left ear
 
draw((32,92)..(29,99)..(29,106));
 
path f = (32,92)..(29,99)..(29,106);
 
 
//fox left back
 
draw((29,106)..(14,38)..(64,9));
 
path g = (29,106)..(14,38)..(64,9);
 
 
//fox right back
 
draw((64,9)..(113,35)..(105,100));
 
path h = (64,9)..(113,35)..(105,100);
 
 
// fox outer part of inner tail
 
draw((76,82)..(96,70)..(96,49));
 
path i = (76,82)..(96,70)..(96,49);
 
 
// fox upper belly
 
//draw((39,59)..(63,38)..(96,49)..(111,81),orange);
 
path j = (39,59)..(63,38)..(96,49)..(111,81);
 
 
// fox middle belly
 
draw((111,81)..(108,92)..(105,100));
 
path k = (111,81)..(108,92)..(105,100);
 
 
// fox lower chin
 
draw((39,59)..(45,67)..(58,70));
 
path l = (58,70)..(45,67)..(39,59);
 
 
// fox snout
 
draw((58,70)..(60,71)..(63,75));
 
path m = (63,75)..(60,71)..(58,70);
 
 
//fox outer right ear
 
draw((32,92)..(37,98)..(45,102));
 
path n = (32,92)..(37,98)..(45,102);
 
 
//fox inner right ear
 
draw((45,102)..(44,95)..(46,84));
 
path o = (45,102)..(44,95)..(46,84);
 
 
// fox middle belly
 
draw((8,64)..(39,17)..(111,81)..(102,98)..(95,106)..(87,115)..(81,124));
 
path p = (8,64)..(39,17)..(111,81)..(102,98)..(95,106)..(87,115)..(81,124);
 
 
// fox upper left tail
 
draw((81,124)..(68,112)..(62,94));
 
path q = (81,124)..(68,112)..(62,94);
 
 
// updated belly
 
draw((76,82)..(65,40)..(39,59));
 
path aA=(39,59)..(65,40)..(76,82);
 
 
//updated fox upper belly
 
draw((111,81)..(96,49)..(47,43)..(35,66));
 
path jJ=(111,81)..(96,49)..(47,43)..(35,66);
 
 
// updated fox upper belly extra
 
draw((96,49)..(47,43)..(35,66),red);
 
path jJ1=(96,49)..(46.5,43.5)..(35,66);
 
 
picture middle_shade;
 
path one=aA--i--jJ1--b--c--d--m--l--cycle;
 
pen[][] firefox1={{yellow+.3*orange,yellow+orange,orange}};
 
latticeshade(middle_shade,rotate(90)*one,firefox1);
 
add(rotate(-90)*middle_shade);
 
 
shipout(bbox(lightgrey+3mm,FillDraw(lightgrey)));
 
</asy>
 
 
They then also drew more of the fox.
 
<asy>
 
//firefox
 
fill(Circle((64,64),30), purple);
 
 
//fox belly
 
//draw((76,82)..(66,38)..(35,66),red);
 
path a = (76,82)..(66,38)..(35,66);
 
 
//fox lower mouth
 
draw((35,66)..(27,69)..(23,75));
 
path b = (35,66)..(27,69)..(23,75);
 
 
//fox upper mouth
 
draw((23,75)..(32,79)..(44,76));
 
path c = (23,75)..(32,79)..(44,76);
 
 
//fox middle nose
 
draw((44,76)..(54,74)..(63,75));
 
path d = (44,76)..(54,74)..(63,75);
 
 
//fox upper nose
 
draw((63,75)..(53,79.5)..(46,84)..(41,89)..(32,92));
 
path e = (63,75)..(53,79.5)..(46,84)..(41,89)..(32,92);
 
 
//fox left ear
 
draw((32,92)..(29,99)..(29,106));
 
path f = (32,92)..(29,99)..(29,106);
 
 
//fox left back
 
draw((29,106)..(14,38)..(64,9));
 
path g = (29,106)..(14,38)..(64,9);
 
 
//fox right back
 
draw((64,9)..(113,35)..(105,100));
 
path h = (64,9)..(113,35)..(105,100);
 
 
// fox outer part of inner tail
 
draw((76,82)..(96,70)..(96,49));
 
path i = (76,82)..(96,70)..(96,49);
 
 
// fox upper belly
 
//draw((39,59)..(63,38)..(96,49)..(111,81),orange);
 
path j = (39,59)..(63,38)..(96,49)..(111,81);
 
 
// fox middle belly
 
draw((111,81)..(108,92)..(105,100));
 
path k = (105,100)..(108,92)..(111,81);
 
 
// fox lower chin
 
draw((39,59)..(45,67)..(58,70));
 
path l = (58,70)..(45,67)..(39,59);
 
 
// fox snout
 
draw((58,70)..(60,71)..(63,75));
 
path m = (63,75)..(60,71)..(58,70);
 
 
//fox outer right ear
 
draw((32,92)..(37,98)..(45,102));
 
path n = (32,92)..(37,98)..(45,102);
 
 
//fox inner right ear
 
draw((45,102)..(44,95)..(46,84));
 
path o = (45,102)..(44,95)..(46,84);
 
 
// fox middle belly
 
draw((8,64)..(39,17)..(111,81)..(102,98)..(95,106)..(87,115)..(81,124));
 
path p = (8,64)..(39,17)..(111,81)..(102,98)..(95,106)..(87,115)..(81,124);
 
 
// fox upper left tail
 
draw((81,124)..(68,112)..(62,94));
 
path q = (81,124)..(68,112)..(62,94);
 
 
// updated belly
 
draw((76,82)..(65,40)..(39,59));
 
path aA=(39,59)..(65,40)..(76,82);
 
 
//updated fox upper belly
 
draw((111,81)..(96,49)..(47,43)..(35,66));
 
path jJ=(111,81)..(96,49)..(47,43)..(35,66);
 
 
// updated fox upper belly extra
 
draw((96,49)..(47,43)..(35,66),red);
 
path jJ1=(96,49)..(46.5,43.5)..(35,66);
 
 
draw((29,106)..(9.3,72)..(14,38));
 
path g1=(29,106)..(9.3,72)..(14,38);
 
 
draw((8,64)..(39,17)..(111,81));
 
path p1=(8,64)..(39,17)..(111,81);
 
 
picture ms;
 
path one=aA--i--jJ1--b--c--d--m--l--cycle;
 
pen[][] firefox1={{yellow+.3*orange,yellow+orange,orange+.5*red}};
 
latticeshade(ms,rotate(90)*one,firefox1);
 
add(rotate(-90)*ms);
 
 
picture bs;
 
path two=jJ--b--c--d--e--f--g1--p1--cycle;
 
pen[][] firefox1={{yellow+.3*orange,yellow+orange,red}};
 
latticeshade(bs,rotate(120)*two,firefox1);
 
add(rotate(-120)*bs);
 
 
picture right_ear_shade;
 
path two=n--o--(46,84)..(41,89)..(32,92)--cycle;
 
pen[][] firefox2={{yellow+.5*orange,orange+yellow,orange}};
 
latticeshade(right_ear_shade,rotate(90)*two,firefox2);
 
add(rotate(-90)*right_ear_shade);
 
 
shipout(bbox(lightgrey+3mm,FillDraw(lightgrey)));
 
</asy>
 
 
Then I learned how to use this function, I fixed the colors of the image above and colored the rest of the image!
 
 
Here is the final drawing:
 
<asy>
 
/**
 
* Firefox
 
*
 
* Made by piphi and sonone
 
*
 
* For more information go to the link below.
 
* https://artofproblemsolving.com/wiki/index.php/User_talk:Piphi#Firefox_Logo
 
*/
 
path circ = Circle((64,64),30)--cycle;
 
 
path upper = (111,81)..(102,98)..(95,106)..(87,115)..(81,124);
 
path q = (81,124)..(68,112)..(62,94);
 
path i = (76,82)..(96,70)..(96,49);
 
path ll = (111,81)..(106,61)..(96,49);
 
 
picture highest_tail_shade;
 
path two=upper--q--i--ll--cycle;
 
pen[][] firefox2={{rgb(255,242,77),rgb(255,219,63),rgb(251,122,83)}};
 
latticeshade(highest_tail_shade,rotate(110)*two,firefox2);
 
add(rotate(-110)*highest_tail_shade);
 
 
void fillmyway(picture pic=currentpicture,pair C,path P,real[] r,pen[] p,int n=100)
 
{
 
int m=r.length;
 
for(int k=n;k>0;--k)
 
{
 
real[] g(real rr)
 
{
 
real qq=70,ss=0; real[] col={0,0,0};
 
for(int kk=0;kk<r.length-1;++kk)
 
{
 
real h=r[kk+1]-r[kk];
 
for (real t=0.05;t<1;t+=0.1)
 
{
 
real rt=r[kk]+t*h;
 
col+=exp(-qq*(rr-rt)^2)*h*((1-t)*colors(rgb(p[kk]))+t*colors(rgb(p[kk+1])));
 
ss+=exp(-qq*(rr-rt)^2)*h;
 
}
 
}
 
return col/ss;
 
}
 
real[] col=g(k/n);
 
unfill(shift(C)*scale(k/n)*shift(-C)*P);
 
fill(shift(C)*scale(k/n)*shift(-C)*P,rgb(col[0],col[1],col[2]));
 
}
 
}
 
 
pen[] p={rgb(109,93,228),rgb(104,88,218),rgb(167,66,233),rgb(188,59,231),rgb(170,51,216)};
 
real[] r={0,0.45,0.8,0.9,1};
 
 
fillmyway((50,45),circ,r,p);
 
 
//fox belly
 
path a = (76,82)..(66,38)..(35,66);
 
 
//fox lower mouth
 
path b = (35,66)..(27,69)..(23,75);
 
 
//fox upper mouth
 
path c = (23,75)..(32,79)..(44,76);
 
 
//fox middle nose
 
path d = (44,76)..(54,74)..(63,75);
 
 
//fox upper nose
 
path e = (63,75)..(53,79.5)..(46,84)..(41,89)..(32,92);
 
 
//fox left ear
 
path f = (32,92)..(29,99)..(29,106);
 
 
//fox left back
 
path g = (29,106)..(14,38)..(64,9);
 
 
//fox right back
 
path h = (64,9)..(113,35)..(105,100);
 
path hh = (105,100)..(113,35)..(64,9);
 
 
// fox outer part of inner tail
 
path i = (76,82)..(96,70)..(96,49);
 
 
// fox upper belly
 
path j = (39,59)..(63,38)..(96,49)..(111,81);
 
 
// fox middle belly extra
 
path k = (105,100)..(108,92)..(111,81);
 
 
path kk = (111,81)..(108,92)..(105,100);
 
 
// fox lower chin
 
path l = (58,70)..(45,67)..(39,59);
 
 
// fox snout
 
path m = (63,75)..(60,71)..(58,70);
 
 
//fox outer right ear
 
path n = (32,92)..(37,98)..(45,102);
 
 
//fox inner right ear
 
path o = (45,102)..(44,95)..(46,84);
 
 
// fox middle belly
 
path p = (8,64)..(39,17)..(111,81)..(102,98)..(95,106)..(87,115)..(81,124);
 
path upper = (111,81)..(102,98)..(95,106)..(87,115)..(81,124);
 
 
// fox upper left tail
 
path q = (81,124)..(68,112)..(62,94);
 
 
// updated belly
 
path aA=(39,59)..(65,40)..(76,82);
 
 
//updated fox upper belly
 
path jJ=(111,81)..(96,49)..(47,43)..(35,66);
 
 
path ll = (111,81)..(106,61)..(96,49);
 
 
// updated fox upper belly extra
 
path jJ1=(96,49)..(46.5,43.5)..(35,66);
 
 
path g1=(29,106)..(9.3,72)..(14,38);
 
 
path p1=(8,64)..(39,17)..(111,81);
 
 
picture ms;
 
path one=aA--i--jJ1--b--c--d--m--l--cycle;
 
pen[][] firefox1={{yellow+orange,rgb(255,172,28),orange+.5*red}};
 
latticeshade(ms,rotate(90)*one,firefox1);
 
add(rotate(-90)*ms);
 
 
picture bs;
 
path two=jJ--b--c--d--e--f--g1--p1--cycle;
 
pen[][] firefox1={{rgb(255,227,67),rgb(255,149,19),rgb(255,92,50),rgb(255,48,82)}};
 
latticeshade(bs,rotate(130)*two,firefox1);
 
add(rotate(-130)*bs);
 
 
picture right_ear_shade;
 
path two=n--o--(46,84)..(41,89)..(32,92)--cycle;
 
pen[][] firefox2={{rgb(255,189,70),rgb(255,155,59),rgb(255,80,56)}};
 
latticeshade(right_ear_shade,rotate(130)*two,firefox2);
 
add(rotate(-130)*right_ear_shade);
 
 
 
picture lowest_tail_shade;
 
path two=p1--kk--hh--(64,9)..(25,24)..(8,64)--cycle;
 
pen[][] firefox2={{rgb(254,228,78),rgb(250,129,85),rgb(229,11,113)}};
 
latticeshade(lowest_tail_shade,rotate(110)*two,firefox2);
 
add(rotate(-110)*lowest_tail_shade);
 
 
clip(currentpicture, g--h--(81,124)--cycle);
 
 
shipout(bbox(lightgrey+3mm,FillDraw(lightgrey)));
 
</asy>
 
  
 
== Firefox Logo ==
 
== Firefox Logo ==

Revision as of 00:12, 29 April 2020

I also answer questions about the GMAAS.

shutdown

The AoPS wiki is about to be shut down.

--piphi (talk) 13:52, 4 February 2020 (EST)

Recently I've been working on drawing the Firefox logo using Asymptote, and just recently with a lot of help from sonone we finished it!

More info

Inspiration

I decided to draw the Firefox logo after seeing sonone's submission for the Asymptote Design Comptetion. Two of their submissions were Asymptote drawings of the browsers Safari and Chrome and since Firefox wasn't there I decided to draw it. :)

Beginnings

I drew the logo by copying a 128x128 Firefox logo into MS paint and finding the coordinates of each intersection to make the curves.

Firefox

This resulted in the below image.

[asy] //firefox fill(Circle((64,64),30), purple);  //fox belly draw((76,82)..(66,38)..(35,66)); path a = (76,82)..(66,38)..(35,66);  //fox lower mouth draw((35,66)..(27,69)..(23,75)); path b = (35,66)..(27,69)..(23,75);  //fox upper mouth draw((23,75)..(32,79)..(44,76)); path c = (23,75)..(32,79)..(44,76);  //fox middle nose draw((44,76)..(54,74)..(63,75)); path d = (44,76)..(54,74)..(63,75);  //fill(a--b--c--d--cycle);  //fox upper nose draw((63,75)..(53,79.5)..(46,84)..(41,89)..(32,92)); path e = (63,75)..(53,79.5)..(46,84)..(41,89)..(32,92);  //fox left ear draw((32,92)..(29,99)..(29,106)); path f = (32,92)..(29,99)..(29,106);  //fox left back draw((29,106)..(14,38)..(64,9)); path g = (29,106)..(14,38)..(64,9);  //fox right back draw((64,9)..(113,35)..(105,100)); path h = (64,9)..(113,35)..(105,100);  // fox outer part of inner tail draw((76,82)..(96,70)..(96,49)); path i = (76,82)..(96,70)..(96,49);  // fox upper belly draw((39,59)..(63,38)..(96,49)..(111,81)); path j = (39,59)..(63,38)..(96,49)..(111,81);  // fox middle belly draw((111,81)..(108,92)..(105,100)); path k = (111,81)..(108,92)..(105,100);  // fox lower chin draw((39,59)..(45,67)..(58,70)); path l = (39,59)..(45,67)..(58,70);  // fox snout draw((58,70)..(60,71)..(63,75)); path m = (58,70)..(60,71)..(63,75);  //fox outer right ear draw((32,92)..(37,98)..(45,102)); path n = (32,92)..(37,98)..(45,102);  //fox inner right ear draw((45,102)..(44,95)..(46,84)); path o = (45,102)..(44,95)..(46,84);  // fox middle belly draw((8,64)..(39,17)..(111,81)..(102,98)..(95,106)..(87,115)..(81,124)); path p = (8,64)..(39,17)..(111,81)..(102,98)..(95,106)..(87,115)..(81,124);  // fox upper left tail draw((81,124)..(68,112)..(62,94)); path q = (81,124)..(68,112)..(62,94);   //fill(c--d--e--f--g--cycle, orange);  shipout(bbox(lightgrey+3mm,FillDraw(lightgrey))); [/asy]

But then I encountered a small problem, I had no idea how to paint it!

Continuation

So that's when I asked sonone to help me color it. I found a nice function from here (which I later used to draw in inner circle). But sonone found a better function to help us and they also fixed the curves up a bit. They then drew a part of the fox using that function.

[asy] //firefox fill(Circle((64,64),30), purple);  //fox belly //draw((76,82)..(66,38)..(35,66),red); path a = (76,82)..(66,38)..(35,66);  //fox lower mouth draw((35,66)..(27,69)..(23,75)); path b = (35,66)..(27,69)..(23,75);  //fox upper mouth draw((23,75)..(32,79)..(44,76)); path c = (23,75)..(32,79)..(44,76);  //fox middle nose draw((44,76)..(54,74)..(63,75)); path d = (44,76)..(54,74)..(63,75);  //fox upper nose draw((63,75)..(53,79.5)..(46,84)..(41,89)..(32,92)); path e = (63,75)..(53,79.5)..(46,84)..(41,89)..(32,92);  //fox left ear draw((32,92)..(29,99)..(29,106)); path f = (32,92)..(29,99)..(29,106);  //fox left back draw((29,106)..(14,38)..(64,9)); path g = (29,106)..(14,38)..(64,9);  //fox right back draw((64,9)..(113,35)..(105,100)); path h = (64,9)..(113,35)..(105,100);  // fox outer part of inner tail draw((76,82)..(96,70)..(96,49)); path i = (76,82)..(96,70)..(96,49);  // fox upper belly //draw((39,59)..(63,38)..(96,49)..(111,81),orange); path j = (39,59)..(63,38)..(96,49)..(111,81);  // fox middle belly draw((111,81)..(108,92)..(105,100)); path k = (111,81)..(108,92)..(105,100);  // fox lower chin draw((39,59)..(45,67)..(58,70)); path l = (58,70)..(45,67)..(39,59);  // fox snout draw((58,70)..(60,71)..(63,75)); path m = (63,75)..(60,71)..(58,70);  //fox outer right ear draw((32,92)..(37,98)..(45,102)); path n = (32,92)..(37,98)..(45,102);  //fox inner right ear draw((45,102)..(44,95)..(46,84)); path o = (45,102)..(44,95)..(46,84);  // fox middle belly draw((8,64)..(39,17)..(111,81)..(102,98)..(95,106)..(87,115)..(81,124)); path p = (8,64)..(39,17)..(111,81)..(102,98)..(95,106)..(87,115)..(81,124);  // fox upper left tail draw((81,124)..(68,112)..(62,94)); path q = (81,124)..(68,112)..(62,94);  // updated belly draw((76,82)..(65,40)..(39,59)); path aA=(39,59)..(65,40)..(76,82);  //updated fox upper belly draw((111,81)..(96,49)..(47,43)..(35,66)); path jJ=(111,81)..(96,49)..(47,43)..(35,66);  // updated fox upper belly extra draw((96,49)..(47,43)..(35,66),red); path jJ1=(96,49)..(46.5,43.5)..(35,66);  picture middle_shade; path one=aA--i--jJ1--b--c--d--m--l--cycle; pen[][] firefox1={{yellow+.3*orange,yellow+orange,orange}}; latticeshade(middle_shade,rotate(90)*one,firefox1); add(rotate(-90)*middle_shade);  shipout(bbox(lightgrey+3mm,FillDraw(lightgrey))); [/asy]

They then also drew more of the fox.

[asy] //firefox fill(Circle((64,64),30), purple);  //fox belly //draw((76,82)..(66,38)..(35,66),red); path a = (76,82)..(66,38)..(35,66);  //fox lower mouth draw((35,66)..(27,69)..(23,75)); path b = (35,66)..(27,69)..(23,75);  //fox upper mouth draw((23,75)..(32,79)..(44,76)); path c = (23,75)..(32,79)..(44,76);  //fox middle nose draw((44,76)..(54,74)..(63,75)); path d = (44,76)..(54,74)..(63,75);  //fox upper nose draw((63,75)..(53,79.5)..(46,84)..(41,89)..(32,92)); path e = (63,75)..(53,79.5)..(46,84)..(41,89)..(32,92);  //fox left ear draw((32,92)..(29,99)..(29,106)); path f = (32,92)..(29,99)..(29,106);  //fox left back draw((29,106)..(14,38)..(64,9)); path g = (29,106)..(14,38)..(64,9);  //fox right back draw((64,9)..(113,35)..(105,100)); path h = (64,9)..(113,35)..(105,100);  // fox outer part of inner tail draw((76,82)..(96,70)..(96,49)); path i = (76,82)..(96,70)..(96,49);  // fox upper belly //draw((39,59)..(63,38)..(96,49)..(111,81),orange); path j = (39,59)..(63,38)..(96,49)..(111,81);  // fox middle belly draw((111,81)..(108,92)..(105,100)); path k = (105,100)..(108,92)..(111,81);  // fox lower chin draw((39,59)..(45,67)..(58,70)); path l = (58,70)..(45,67)..(39,59);  // fox snout draw((58,70)..(60,71)..(63,75)); path m = (63,75)..(60,71)..(58,70);  //fox outer right ear draw((32,92)..(37,98)..(45,102)); path n = (32,92)..(37,98)..(45,102);  //fox inner right ear draw((45,102)..(44,95)..(46,84)); path o = (45,102)..(44,95)..(46,84);  // fox middle belly draw((8,64)..(39,17)..(111,81)..(102,98)..(95,106)..(87,115)..(81,124)); path p = (8,64)..(39,17)..(111,81)..(102,98)..(95,106)..(87,115)..(81,124);  // fox upper left tail draw((81,124)..(68,112)..(62,94)); path q = (81,124)..(68,112)..(62,94);  // updated belly draw((76,82)..(65,40)..(39,59)); path aA=(39,59)..(65,40)..(76,82);  //updated fox upper belly draw((111,81)..(96,49)..(47,43)..(35,66)); path jJ=(111,81)..(96,49)..(47,43)..(35,66);  // updated fox upper belly extra draw((96,49)..(47,43)..(35,66),red); path jJ1=(96,49)..(46.5,43.5)..(35,66);  draw((29,106)..(9.3,72)..(14,38)); path g1=(29,106)..(9.3,72)..(14,38);  draw((8,64)..(39,17)..(111,81)); path p1=(8,64)..(39,17)..(111,81);  picture ms; path one=aA--i--jJ1--b--c--d--m--l--cycle; pen[][] firefox1={{yellow+.3*orange,yellow+orange,orange+.5*red}}; latticeshade(ms,rotate(90)*one,firefox1); add(rotate(-90)*ms);  picture bs; path two=jJ--b--c--d--e--f--g1--p1--cycle; pen[][] firefox1={{yellow+.3*orange,yellow+orange,red}}; latticeshade(bs,rotate(120)*two,firefox1); add(rotate(-120)*bs);  picture right_ear_shade; path two=n--o--(46,84)..(41,89)..(32,92)--cycle; pen[][] firefox2={{yellow+.5*orange,orange+yellow,orange}}; latticeshade(right_ear_shade,rotate(90)*two,firefox2); add(rotate(-90)*right_ear_shade);  shipout(bbox(lightgrey+3mm,FillDraw(lightgrey))); [/asy]

Then I learned how to use this function, I fixed the colors of the image above and colored the rest of the image!

Here is the final drawing: [asy] /**  * Firefox  *  * Made by piphi and sonone  *   * For more information go to the link below.  * https://artofproblemsolving.com/wiki/index.php/User_talk:Piphi#Firefox_Logo  */ path circ = Circle((64,64),30)--cycle;  path upper = (111,81)..(102,98)..(95,106)..(87,115)..(81,124); path q = (81,124)..(68,112)..(62,94); path i = (76,82)..(96,70)..(96,49); path ll = (111,81)..(106,61)..(96,49);  picture highest_tail_shade; path two=upper--q--i--ll--cycle; pen[][] firefox2={{rgb(255,242,77),rgb(255,219,63),rgb(251,122,83)}}; latticeshade(highest_tail_shade,rotate(110)*two,firefox2); add(rotate(-110)*highest_tail_shade);  void fillmyway(picture pic=currentpicture,pair C,path P,real[] r,pen[] p,int n=100) { int m=r.length; for(int k=n;k>0;--k) { real[] g(real rr) { real qq=70,ss=0; real[] col={0,0,0}; for(int kk=0;kk<r.length-1;++kk) { real h=r[kk+1]-r[kk]; for (real t=0.05;t<1;t+=0.1) { real rt=r[kk]+t*h; col+=exp(-qq*(rr-rt)^2)*h*((1-t)*colors(rgb(p[kk]))+t*colors(rgb(p[kk+1]))); ss+=exp(-qq*(rr-rt)^2)*h; } } return col/ss; } real[] col=g(k/n); unfill(shift(C)*scale(k/n)*shift(-C)*P); fill(shift(C)*scale(k/n)*shift(-C)*P,rgb(col[0],col[1],col[2])); } }  pen[] p={rgb(109,93,228),rgb(104,88,218),rgb(167,66,233),rgb(188,59,231),rgb(170,51,216)}; real[] r={0,0.45,0.8,0.9,1};  fillmyway((50,45),circ,r,p);  //fox belly path a = (76,82)..(66,38)..(35,66);  //fox lower mouth path b = (35,66)..(27,69)..(23,75);  //fox upper mouth path c = (23,75)..(32,79)..(44,76);  //fox middle nose path d = (44,76)..(54,74)..(63,75);  //fox upper nose path e = (63,75)..(53,79.5)..(46,84)..(41,89)..(32,92);  //fox left ear path f = (32,92)..(29,99)..(29,106);  //fox left back path g = (29,106)..(14,38)..(64,9);  //fox right back path h = (64,9)..(113,35)..(105,100); path hh = (105,100)..(113,35)..(64,9);  // fox outer part of inner tail path i = (76,82)..(96,70)..(96,49);  // fox upper belly path j = (39,59)..(63,38)..(96,49)..(111,81);  // fox middle belly extra path k = (105,100)..(108,92)..(111,81);  path kk = (111,81)..(108,92)..(105,100);  // fox lower chin path l = (58,70)..(45,67)..(39,59);  // fox snout path m = (63,75)..(60,71)..(58,70);  //fox outer right ear path n = (32,92)..(37,98)..(45,102);  //fox inner right ear path o = (45,102)..(44,95)..(46,84);  // fox middle belly path p = (8,64)..(39,17)..(111,81)..(102,98)..(95,106)..(87,115)..(81,124); path upper = (111,81)..(102,98)..(95,106)..(87,115)..(81,124);  // fox upper left tail path q = (81,124)..(68,112)..(62,94);  // updated belly path aA=(39,59)..(65,40)..(76,82);  //updated fox upper belly path jJ=(111,81)..(96,49)..(47,43)..(35,66);  path ll = (111,81)..(106,61)..(96,49);  // updated fox upper belly extra path jJ1=(96,49)..(46.5,43.5)..(35,66);  path g1=(29,106)..(9.3,72)..(14,38);  path p1=(8,64)..(39,17)..(111,81);  picture ms; path one=aA--i--jJ1--b--c--d--m--l--cycle; pen[][] firefox1={{yellow+orange,rgb(255,172,28),orange+.5*red}}; latticeshade(ms,rotate(90)*one,firefox1); add(rotate(-90)*ms);  picture bs; path two=jJ--b--c--d--e--f--g1--p1--cycle; pen[][] firefox1={{rgb(255,227,67),rgb(255,149,19),rgb(255,92,50),rgb(255,48,82)}}; latticeshade(bs,rotate(130)*two,firefox1); add(rotate(-130)*bs);  picture right_ear_shade; path two=n--o--(46,84)..(41,89)..(32,92)--cycle; pen[][] firefox2={{rgb(255,189,70),rgb(255,155,59),rgb(255,80,56)}}; latticeshade(right_ear_shade,rotate(130)*two,firefox2); add(rotate(-130)*right_ear_shade);   picture lowest_tail_shade; path two=p1--kk--hh--(64,9)..(25,24)..(8,64)--cycle; pen[][] firefox2={{rgb(254,228,78),rgb(250,129,85),rgb(229,11,113)}}; latticeshade(lowest_tail_shade,rotate(110)*two,firefox2); add(rotate(-110)*lowest_tail_shade);  clip(currentpicture, g--h--(81,124)--cycle);  shipout(bbox(lightgrey+3mm,FillDraw(lightgrey))); [/asy]