symmetry problems with card images

[pixelzoom]

Related to phetsims/tasks#828 and https://github.com/phetsims/function-builder-basics/issues/18.

In addition to master, this problem is present in the production version of Function Builder (1.0.6), demonstrable on all platforms.

Many of the card images (png files) do not behave properly with the Mirror function. Some of the cards (snowflake, butterfly, star, rectangle, circle, triangle, star) are supposed to have symmetry about their x and/or y axes. And applying the Mirror function to there cards should result in no change. That is not the case -- these images are currently not symmetrical.

In the sim, applying the Mirror function causes them to shift horizontally. Try the 'Star' card with the 'Mirror' function for a particularly obvious example:

Using the "Image -> Image Rotation -> Flip Canvas Horizontal" menu item in Photoshop verifies that the problem is with the images, they can be seen to shift horizontally there too. Even the butterfly seems wrong -- it's body remains stationary, but the wings move slightly, which points to a problem with the .ai artwork.

So... @amanda-phet to address this issue and https://github.com/phetsims/function-builder-basics/issues/18, we need to redo all of the .png files for cards. They must have even dimensions, and they must exhibit the desired symmetry with "Flip Canvas Horizontal" in Photoshop.

The .ai file: https://github.com/phetsims/function-builder/blob/master/assets/card-icons.ai

The .png files: https://github.com/phetsims/function-builder/tree/master/images/cards

[pixelzoom]

@phet-steele so that you're aware of this.

[pixelzoom]

Symmetry problems should be checked using the following function configurations:

Mirror Mirror > Rotate90 Rotate90 > Mirror Mirror > Rotate180 Rotate180 > Mirror

The images that have a symmetry problem are:

snowflake.png butterfly.png* sun.png circle.png (see Rotate90 > Mirror) star.png

With the possible exception of circle.png, all of these need to be fixed in the .ai file.

[pixelzoom]

Looking at the images in Photoshop using "Flip Canvas Horizontal" and "Flip Canvas Vertical", here are the axes that demonstrate symmetry problems:

image	Flip Horizontal	Flip Vertical
snowflake.png	x	x
butterfly.png	x	N/A
sun.png	x	x
circle.png	x	x
star.png	x	N/A

[pixelzoom]

@amanda-phet What's your feeling about the priority of this issue? Should it be addressed before publishing Function Builder: Basics? Does it require a maintenance release of Function Builder?

[pixelzoom]

In https://github.com/phetsims/function-builder-basics/issues/18#issuecomment-299248432, @amanda-phet indicated that she's going to reach out to the artist to see how much work this is.

[clmccutchan]

@amanda-phet @pixelzoom

There seem to be two different issues.

1. The actual illustration is not symmetrical. No matter how the art board is aligned in export, the image will never be symmetrical. This can almost always be fixed.

2. The illustration is not aligned symmetrically on the art board. When these are exported, the image on the png shifts back and forth when you rotate or reflect it in PS. No matter what you do, some images will not align on the art board. Pointy objects seem to be the worst! I've been trolling the Illustrator forums and cannot find any information to perfectly align the object but have not found anything useful. One solution may be to make the problem illustrations very large in Illustrator, export as pngs, pull the pngs into Photoshop, and crop them there. That might minimize Illustrator's inability to align the objects to the art board.

So, as of now, all of the objects are perfectly symmetrical (the feet and the Erlenmeyer flask were a bit off so I corrected them also). In addition, the butterfly, snowflake, circle, feet, and Erlenmeyer are all perfectly symmetrical when exported from Illustrator. The star and sun are not perfectly aligned when exported so still display that jump when reflected or rotated.

[pixelzoom]

@clmccutchan @amanda-phet Do one of you have the new .ai and .png files for the images that have been fixed?

[clmccutchan]

@pixelzoom @amanda-phet Chris, while all of the objects are symmetrical, there may still be a problem with exporting some of them. The pointy objects are particularly fussy and don't seem to export symmetrically in the Illustrator artboard. I'll attach all of the exported pngs and share the .ai url from my Google drive. I don't know if this will give you access to the file or not. I can also email the .ai file to you.

If it is relatively simple for you to test the objects for symmetry in the sim, that will help me determine which ones still need work. Thanks!

https://drive.google.com/a/colorado.edu/file/d/0BweEY_N5MwV4VnB2SmJfRHdWSlk/view?usp=sharing

[clmccutchan]

@pixelzoom I forgot to note that the original artwork is still in the .ai file on a single artboard. The new artwork is to the right of this, and each object is on a separate artboard.

[pixelzoom]

Thanks @clmccutchan. But those PNG files that you've attached are nowhere near the sizes of the PNG files that I've been using (found here: https://github.com/phetsims/function-builder/tree/master/images/cards). The images that you've provided are much smaller, and scaling them up in the sim would look awful. I can access the .ai file on Google Drive, but I'd prefer not to attempt to export the PNG files from Illustrator myself.

[amanda-phet]

I plan to take care of this. @pixelzoom I will email you.

I can directly add these to github but will want the old images in case something goes wrong.

[pixelzoom]

All versions of old images are saved in GitHub. If/when you add the revised images to GitHub, reference this issue in your commit message, and also commit the revised card-icons.ai file.

[clmccutchan]

@pixelzoom @amanda-phet The objects can be exported as pngs from the .ai file at a much large size than those I provided. I didn't have specifications on the size needed for the pngs.

[clmccutchan]

@pixelzoom @amanda-phet I've attached the next iteration of the pngs. These should (fingers crossed) all be symmetrical. The widest dimension on each png is 120 px. I can alter that if need be.

[pixelzoom]

@clmccutchan Perhaps @amanda-phet hasn't communicated this to you.... After adjusting symmetry and using even numbers for width and height, we need the dimensions of the PNG files to be in the same ballpark as the current images. Some of these PNG files have dimensions that are very different. For example butterfly.png was 153x93, the new version is 120x84, so the new image will appear to be 22% smaller in the sim. The current images (and their dimensions) can be found at https://github.com/phetsims/function-builder/tree/master/images/cards.

@amanda-phet I'm also confused about how we're proceeding here. In https://github.com/phetsims/function-builder/issues/109#issuecomment-301543487 you indicated that you were going to take care of this and add the new files to github.

[pixelzoom]

By the way... I spot checked a few of the above PNG images, and they behaved as desired with "Flip Canvas Horizontal" and "Flip Canvas Vertical" in Photoshop. So nice job @clmccutchan! Looks like all we have to do is get the PNG dimensions sorted out.

[clmccutchan]

@pixelzoom @amanda-phet Amanda was going to take care of exporting pngs, but it proved to be more complicated than just simply exporting from Illustrator. To get them symmetrical, I had to export them at a large size from Illustrator and then crop them very precisely in Photoshop. I could then adjust the image size as necessary.

Amanda had specified in an email to me that you needed the images in an even number of pixels. The two I checked in the original file are not an even number of pixels. Would you like an even number of pixels on each image (though, this doesn't work for the snowflake) OR would you like them to match the dimensions of the original files?

[pixelzoom]

@clmccutchan asked:

Would you like an even number of pixels on each image (though, this doesn't work for the snowflake) OR would you like them to match the dimensions of the original files?

From https://github.com/phetsims/function-builder/issues/109#issuecomment-301655006 (emphasis added):

After adjusting symmetry and using even numbers for width and height, we need the dimensions of the PNG files to be in the same ballpark as the current images.

@amanda-phet It was my understanding (based on our Skype chat) that you were going to specify the new dimensions. Here's our Skype chat, so that @clmccutchan is in the loop:

[5/15/17, 11:30:35 AM] Amanda McGarry: regarding the function builder images [5/15/17, 11:30:49 AM] Amanda McGarry: I can export at any size, and the issue really was about the size... [5/15/17, 11:31:14 AM] Amanda McGarry: The .ai file Cheryl gave me has the images slightly larger than the original [5/15/17, 11:33:09 AM] Amanda McGarry: so how many pixels are appropriate for these images [5/15/17, 11:33:26 AM] Amanda McGarry: the current beaker is 93x123 [5/15/17, 11:33:28 AM] Chris Malley: it shouldn't matter what size they are in the .ai file, that's the point of vector graphics. [5/15/17, 11:33:36 AM] Amanda McGarry: I mean the exported images [5/15/17, 11:34:16 AM] Chris Malley:the current beaker.png is 93x123. the revised one can be anything close to that with even dimensions. [5/15/17, 11:34:24 AM] Amanda McGarry: ok, anything close, that is helpful thank you [5/15/17, 11:34:34 AM] Amanda McGarry: sometimes I’m told not to make it too large [5/15/17, 11:34:39 AM] Amanda McGarry: sometimes an exact size [5/15/17, 11:35:14 AM] Chris Malley: in this case, we're trying to correct the symmetry issue, so will necessarily need to change the size of make both dimensions even (where relevant). [5/15/17, 11:35:25 AM] Amanda McGarry: correct [5/15/17, 11:35:56 AM] Amanda McGarry: ok thanks, I’ll try to do this, or ask Cheryl to export the images for me [5/15/17, 11:36:10 AM] Chris Malley: up to you whether you want to increase or decrease the size relative to the current PNG files. if you decrease the new files, they will decrease in the sim. Similarly for increase.

[pixelzoom]

Perhaps it will be easier all around if I specify the desired dimensions, and @clmccutchan creates the PNG files? Stand by, I'll specify the dimensions in my next comment.

[amanda-phet]

Sorry for all of the confusion... since the beaker had a dimension of 123 px I figured 120-130 was a good range for the largest dimension, so I told Cheryl that was a good size. How wide are the cards?

[pixelzoom]

Cards are 70x70. PNG files are oversized so that quality is consistent across all supported platforms. When imported into the sim, the PNG files have a default scale of 0.4, which can be adjusted to optimize how the image looks. But none of that really matters for creating the PNG files. What matters is that the revised PNG files need to have even dimensions that are in the same ballpark as the old PNG files.

[pixelzoom]

@clmccutchan Here are the desired dimensions for the PNG files. In all cases, I have simply added 1 to any odd dimension.

PNG file	old dimensions	desired dimensions
beaker.png	93 x 123	94 x 124
butterfly-hires.png	499 x 344	500 x 344
butterfly.png	135 x 93	136 x 94
cherries.png	93 x 117	94 x 118
circle.png	105 x 108	106 x 108
feet.png	120 x 108	120 x 108 (no change)
planet.png	99 x 162	100 x 162
rectangle.png	108 x 63	108 x 64
snowflake.png	111 x 129	112 x 130
star.png	125 x 122	126 x 122
stickFigure.png	87 x 138	88 x 138
sun.png	111 x 111	112 x 112
triangle.png	125 x 125	126 x 126

NOTES:

(1) Since some of the artwork has changed, it may not possible to meet the "desired dimensions" exactly. It's totally OK to increase/decrease one of the dimensions by a few pixels in order to maintain the aspect ratio.

(2) Please use the file names shown above for the PNG files.

(3) Please email the PNG files and .ai file to me.

Thanks, and let me know if you have any questions.

[clmccutchan]

@pixelzoom Will the snowflake need to rotate 60º to show symmetry with rotation? If so, I will need to keep the dimensions at 118 x 130. If not, I can squish a bit to achieve 112 x130.

[pixelzoom]

@clmccutchan yes, the snowflake needs to show symmetry across both horizontal and vertical axes. 118 x 130 will work just fine.

[clmccutchan]

@amanda-phet @pixelzoom At 118 x 130, you can also rotate the snowflake 60º.

I'm going to email you two the final pngs and .ai file.

[pixelzoom]

Thanks @clmccutchan, good to know, even thought we won't be rotating 60º. The relevant functions in the sim are mirror (reflection about x or y axis), rotate 90º, rotate 180º.

[pixelzoom]

Revised artwork received from @clmccutchan via email, along with this note:

Attached are the symmetrical .png card icons and the .ai file. Note that some of the objects are not perfectly aligned on the artboards (Illustrator just won't align some images. Stupid Illustrator) so that when the pngs are exported there is a little more space on one side than the other. You can simply export some art from Illustrator and have a perfect symmetrical png. The solution is to pull them into Photoshop and crop then until they're symmetrical. Totally fun!

[pixelzoom]

I've verified the revised artwork and checked it into GitHub. It looks great, and resolves both this issue and https://github.com/phetsims/function-builder-basics/issues/18. Nicely done @clmccutchan!

I did notice one difference in the artwork for the basic shapes (rectangle, circle, triangle, star) that I believe may be significant. They have a noticeably reduced stroke width, and (to my eye) don't look as good - especially after put through some functions. Below is a screenshot that compares the old images (on left) to the revised images. You can also compare in these versions:

old images: 1.0.6 revised images: 1.1.0-dev.3

@clmccutchan was there a reason for reducing the stroke width on these images?

@amanda-phet do you think this is significant?

[clmccutchan]

@pixelzoom Thanks! It was a little more involved than I suspected.

The outline stroke is smaller in the new images because of the image reduction in Photoshop. I can export these four objects from Illustrator with a wider outline stroke so that the reduction in Photoshop will leave a wider stroke.

Let me know what you think, @amanda-phet.

[amanda-phet]

I agree they don't look as good with the thin stroke. It's is pretty pixelated. It doesn't need to exactly match the original but would be good to have it a bit thicker. Sorry Cheryl!

---

From: clmccutchan notifications@github.com Sent: Wednesday, May 17, 2017 12:53:40 PM To: phetsims/function-builder Cc: Amanda McGarry; Mention Subject: Re: [phetsims/function-builder] symmetry problems with card images (#109)

@pixelzoomhttps://github.com/pixelzoom Thanks! It was a little more involved than I suspected.

The outline stroke is smaller in the new images because of the image reduction in Photoshop. I can export these four objects from Illustrator with a wider outline stroke so that the reduction in Photoshop will leave a wider stroke.

Let me know what you think, @amanda-phethttps://github.com/amanda-phet.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHubhttps://github.com/phetsims/function-builder/issues/109#issuecomment-302194341, or mute the threadhttps://github.com/notifications/unsubscribe-auth/AHfTdO0COLR18eKbvt9-nfgodsHVndzoks5r60I0gaJpZM4NQDPJ.

[amanda-phet]

I've been playing with it a bit and am not actually bothered by the thin stroke in practice. The screenshots above show it much more zoomed in than on my actual screen, and maybe it's because I'm on a retina but it doesn't look bad to me. @pixelzoom would some displays make this situation worse than others?

[pixelzoom]

Everything looks better on retina :) Borrow one of the non-retina PhET test devices to evaluate.

[pixelzoom]

@amanda-phet said:

The screenshots above show it much more zoomed in than on my actual screen,

The screenshots above show it just about identical in size and quality as what I see on my 2560 x 1440 Apple LED Cinema Display. And I suspect it looks pretty similar on my 17" 2009 MacBook Pro. (Neither display is retina.)

[pixelzoom]

@amanda-phet What is your decision? I'm running out of time to complete this before my vacation.

[amanda-phet]

I planned to look at it on an iPad today but with meetings being remote today it slipped my mind. Let's make the stroke thicker to better match the originals. @clmccutchan are you able to get to this this week?

[clmccutchan]

@amanda-phet @pixelzoom Sure thing. Chris, when do you absolutely need these by?

[pixelzoom]

We've missed the deadline. I won't be able to do anything else on this sim until June 5 at the earliest.

[pixelzoom]

Actually... If I have the revised images (and card-icons.ai) before noon on Friday 5/19, I may be able to squeeze in integration of those images, then get the sim into QA before I go on vacation. Then (hopefully) QA would be completed by the time I get back, and we can publish before the June conference deadline. Otherwise, QA won't start until sometime the week of June 5.

[clmccutchan]

@pixelzoom I emailed the four modified pngs with the thicker stroke to you.

[amanda-phet]

Thanks @clmccutchan , they look great.

[pixelzoom]

Thanks @clmccutchan. I integrated the revised images, and they look great in the sim. We can now move forward with the next phase to RC testing.

[clmccutchan]

@pixelzoom Awesome! Glad we could get that done before your vacation.

[phet-steele]

@pixelzoom, ?C > shrink > ?C still has a slight issue with the new artwork:

An example where the planet and flask images are slightly bad

[pixelzoom]

Ah yes. I'll also need to constrain Shrink function to even dimensions.

[pixelzoom]

Fix for Shrink pushed to master, @phet-steele please verify.

[phet-steele]

@pixelzoom, symmetrical cards don't budge. Thanks @clmccutchan!

[phet-steele]

Fix for Shrink pushed to master, @phet-steele please verify.

Verified fixed.

[clmccutchan]

@phet-steele That's awesome! Glad I could work out the issue.

[pixelzoom]

Okey dokey, closing this one. Thanks everyone.