New "piggy" bank artwork

amanda-phet commented 2 years ago

Ashton is going to work on drawing a coin bank similar to this mockup:

Requirements:

One solid fill background
One transparent fill foreground with the details
A coin slot at the top
Two decorations to distinguish the two "accounts": the blue lightning bolt and the pink flowers would be great if we could keep those
Lid could be brown/cork color, or color-coded blue/pink to sync with the decorations
Light source should be top left
Some simple shading in the "toon" style to make it look 3D
Space in the middle for the dollar amount
Shape similar to what I've drawn up already

Resources:

original pig bank artwork (to see the layers): piggy-bank.ai.zip

brainstorming file (where I have some reference images and a start to the shape we like): NLI-bank.ai.zip

live sim (to see how this bank behaves): https://phet.colorado.edu/sims/html/number-line-integers/latest/number-line-integers_en.html and also https://phet.colorado.edu/sims/html/number-line-operations/latest/number-line-operations_en.html

Timeline:

There is no set timeline for republishing this sim, but it would be nice to do when @jbphet has time.

Ashton-Morris commented 2 years ago

@amanda-phet How does something like this look?

Asset 1

amanda-phet commented 2 years ago

It looks great!!

A few thoughts:

We might need it to be shorter to fit the sim a bit better.. at this height it might not fit in the available space. Can you squish it a bit to be shorter?
Can we make the outer stroke a bit thicker? When it scales down it will be hard to see. I think we generally like 1px strokes when it's at full resolution, and the dimensions we are replacing are approx 250x180. We don't need to match the width, but at 180px tall I think we want the stroke more visible. Hope that makes sense!

amanda-phet commented 2 years ago

Actually, regarding (1) above, I placed it in the sim screenshot at the biggest size to see it in context, and it might be just fine! But now I'm also wondering if the coin slot could look a little bit thicker.

Ashton-Morris commented 2 years ago

I have some artwork to test out.

https://drive.google.com/file/d/1r2jw6H_6DAZvvMjgB_hYno9opC79Obpq/view?usp=sharing

Although I am familiar with vector art creation I am less so when it comes to exporting for use in html5 pages. Please let me know if there are any adjustments I ned to make.

marlitas commented 10 months ago

I adjusted sizing, coin animation, and some layout for the new bank artwork. I would like to discuss with @amanda-phet how we want to handled the absoluteValue label.

I see two options:

Don't allow the bank to grow as big
move the numberLine down a bit since there is space towards the bottom.

The first option would only allow us to grow the bank to the below ( which doesn't feel like that drastic of a change when going from small to big)

In the second option the multi-controls toggle node may no longer be lined up with the number line. There's space to move it down but I feel like it could get rather crowded.

Would be good to discuss this synchronously.

amanda-phet commented 10 months ago

Let's discuss!

I thought I made the artwork the same height as the old one. Can we try matching the height and see how that feels? I would like to try the simplest approach and not move things around if possible.

On Wed, Nov 8, 2023, 4:03 PM Marla Schulz @.***> wrote:

I adjusted sizing, coin animation, and some layout for the new bank artwork. I would like to discuss with @amanda-phet https://github.com/amanda-phet how we want to handled the absoluteValue label. [image: image] https://user-images.githubusercontent.com/42476338/281565549-1cad51ea-a458-4aa4-9a45-8e6d037aac50.png

I see two options:

Don't allow the bank to grow as big

move the numberLine down a bit since there is space towards the bottom.

The first option would only allow us to grow the bank to the below ( which doesn't feel like that drastic of a change when going from small to big) [image: image] https://user-images.githubusercontent.com/42476338/281566245-65719b55-aa76-42a2-9656-c7de329ac4f0.png

In the second option the multi-controls toggle node may no longer be lined up with the number line. There's space to move it down but I feel like it could get rather crowded.

Would be good to discuss this synchronously.

— Reply to this email directly, view it on GitHub https://github.com/phetsims/number-line-integers/issues/108#issuecomment-1802850486, or unsubscribe https://github.com/notifications/unsubscribe-auth/AB35G5CABTGQE62GTVSANV3YDQFTHAVCNFSM5GCU6F42U5DIOJSWCZC7NNSXTN2JONZXKZKDN5WW2ZLOOQ5TCOBQGI4DKMBUHA3A . You are receiving this because you were mentioned.Message ID: @.***>

marlitas commented 10 months ago

Artwork was added in and reviewed by @amanda-phet. Closing.

phetsims / number-line-integers