nikolev Posted April 21, 2020 Posted April 21, 2020 Hello amazing folks! So I took my melting piece and started building an ice-cream. It's going okay but I am sure there's a lot of things that I can do better. I am really hopeful to hear some advice from the pros here. Btw @PointC I started using the background rectangle advice that you gave me and that alone has been a game changer! Thank you so much. Anyways here's what I have right now: There's a few things I dislike about it: 1. I had to break down the melting piece into 2 pieces. That's because I wanted the middle part of it to start melting first to reflect on the bottom of the pink ice cream ball touching the cone first. Is there a way to do this without breaking the melting part into 2 pieces? Please take a look at the screenshot above to see better. I have a "middle" ending part and "endings" melting part. 2. Another thing I would like to improve is the starting piece. I had to make the starting points(which I call the "unmelted" pieces) pink rectangles. Originally I had it as a path with no stroke and no fill. However once that piece was to expand to become "melted" there was a small gap above it(less than a pixel) between the melted piece the cone and the pin ice cream ball. So the cone was showing between the melted piece and the ice cream ball. That gap was not visible in illustrator and I didn't know how to fix that differently. I expanded the starting piece into a rectangle to overlap the cone. However that seems wrong to me as I have to first hide it and then display at after the pink ball is close enough so it can hide it. Sorry I forgot to take a screenshot of what that gap looks like. 3. At a specific point of the animation the ice cream ball is overlapping the cone. What would be a better way to change the shape of the ball to avoid this defect? To summarize I feel like I have way too many moving pieces and I would like to optimize my development process. If you have any additional feedback please let me know. I am having so much fun with this and would LOVE to learn as much as I possibly could. See the Pen LYpYvoM by nikolev (@nikolev) on CodePen. 1
ZachSaucier Posted April 21, 2020 Posted April 21, 2020 5 minutes ago, nikolev said: 1. I had to break down the melting piece into 2 pieces. That's because I wanted the middle part of it to start melting first to reflect on the bottom of the pink ice cream ball touching the con first. Is there a way to do this without breaking the melting part into 2 pieces? Nope, you can't morph part of an element before another part. Using 2 pieces is the way to go for that effect. 6 minutes ago, nikolev said: Another thing I would like to improve is the starting piece. I had to make the starting points(which I call the "unmelted" pieces) pink rectangles. Originally I had it as a path with no stroke and no fill. However once that piece was to expand to become "melted" there was a small gap above it(less than a pixel) between the melted piece the con and the pin ice cream ball. It can't be less than a pixel It probably was a pixel. Most likely that's rendering error due to a partial pixel and is based on the display size. It can be fixed in a couple of ways, like being more careful in how you create the SVG (making sure that the points/lines align with pixels on the size you're going to display the SVG or by building in a little wiggle room) or in some cases applying a 3D transform to the parent to force more careful rendering. Hard to help without seeing it ourselves. 10 minutes ago, nikolev said: 3. At a specific point of the animation the ice cream ball is overlapping the con. What would be a better way to change the shape of the ball to avoid this defect? Have the shape that morphs only be as wide as the start of the ice cream to the point at which the cone stops. 1
nikolev Posted April 21, 2020 Author Posted April 21, 2020 @ZachSaucier Thanks for the quick response! I will work on #2 and submit another thread to show you what it looks like if by any chance I can't get it to fix.
PointC Posted April 21, 2020 Posted April 21, 2020 Are you gonna add a little gooey drip? See the Pen yLYVbBj by PointC (@PointC) on CodePen. 3
nikolev Posted April 21, 2020 Author Posted April 21, 2020 3 minutes ago, PointC said: Are you gonna add a little gooey drip? That's a great idea! I will need to study your code in a minute and see how you did that. @ZachSaucier I used "snap to point" and #2 got resolved. Thanks for the advice. I thought it was a glitch in Illustrator but it turned to be my lack of experience. 2
nikolev Posted April 24, 2020 Author Posted April 24, 2020 @ZachSaucier Today I was adjusting the animation again and I noticed that I have the extra pixel or so showing up even though I had aligned everything in illustrator. This time I have a codepen link to show you: See the Pen LYpYvoM by nikolev (@nikolev) on CodePen. It's visible for the middle melting piece. You can see the cone behind it showing up. I tried to zoom in to make it more clear. When I look at the Y coordinate in AI this it both the cone and the melting piece have 287px. So same Y value for all 3 pieces: Could it be that the browser is not rendering it correctly? Or am I doing something wrong? Thank you guys.
ZachSaucier Posted April 24, 2020 Posted April 24, 2020 4 minutes ago, nikolev said: Could it be that the browser is not rendering it correctly? Or am I doing something wrong? You have a good eye! I could hardly see it when looking at your zoomed in image. I don't see it on my computer. It's probably rendering error. You might be able to figure out a way to get rid of it but I'm betting it's not worth your time. Like I mentioned above, you can work around it by making the SVG extend past what you need it to cover. 2
OSUblake Posted April 24, 2020 Posted April 24, 2020 Create some overlap. https://graphicdesign.stackexchange.com/a/41174/131165 1
Shrug ¯\_(ツ)_/¯ Posted April 24, 2020 Posted April 24, 2020 1 hour ago, nikolev said: extra pixel You can leverage SVG filters to correct things like this. In this Codepen example you can see @chrisgannon uses a filter with an ID of edgeClean, which can be seen extracted below. See the Pen NqyWOw by chrisgannon (@chrisgannon) on CodePen. ... <defs> <filter id="edgeClean" color-interpolation-filters="sRGB"> <feComponentTransfer> <feFuncA type="table" tableValues="0 .5 1 1" /> </feComponentTransfer> </filter> </defs> ... <g filter="url(#edgeClean)"> This can be used to prevent the hairline phenomenon. I'm not sure if this is something Chris came up with but he is one of the first people I saw using it. ? Here is another example by someone that using a different name but its the same setup. See the Pen JKmRwY by grayghostvisuals (@grayghostvisuals) on CodePen. 1 1
OSUblake Posted April 24, 2020 Posted April 24, 2020 One problem with using that filter is that it can mess with antialiasing, so stuff can look pixelated. See the Pen 91db7269c9fab4249fe1ae721efd02fa by osublake (@osublake) on CodePen. 2
Shrug ¯\_(ツ)_/¯ Posted April 24, 2020 Posted April 24, 2020 5 minutes ago, OSUblake said: One problem with using that filter is that it can mess with antialiasing, so stuff can look pixelated. Wonder what the factor for "it can" is, as some do and some don't ?
PointC Posted April 24, 2020 Posted April 24, 2020 That hairline can definitely be tricky and irritating. I'd agree with Blake and suggest adding some overlap. Here's a really old pen of mine with some square paths morphing to circles. You can see on line 11 that I had to add a small stroke to blend everything together. If you comment out that line, you'll see that this suffers from the same hairline problem even though the paths line up in AI. See the Pen yeRXRx by PointC (@PointC) on CodePen. Happy tweening. 3
OSUblake Posted April 24, 2020 Posted April 24, 2020 51 minutes ago, Shrug ¯\_(ツ)_/¯ said: Wonder what the factor for "it can" is, as some do and some don't ? Well, it probably won't affect a rectangle.
Shrug ¯\_(ツ)_/¯ Posted April 24, 2020 Posted April 24, 2020 Ha, or maybe straight lines in general. Fun discussion, like with most things different approaches are applicable in different scenarios for different outcomes. I think its a nice usage of an SVG filter , which can work in various cases where setting a stroke or even reworking original artwork are not applicable if the final result is acceptable. Of course if things can be considered and setup correctly initially thats always optimal. I personally have found this approach to be useful in various occasions. ¯\_(ツ)_/¯ 1
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now