search

freeCodeCamp / CurriculumExpansion

Creative Commons Attribution Share Alike 4.0 International
313 stars 104 forks source link

Learn SVG by Building a Solar System #109

Closed QuincyLarson closed 2 years ago

DanCouper commented 5 years ago

@scissorsneedfoodtoo I'd be interested in taking this. I can get an example together by the end of next week and go from there?

scissorsneedfoodtoo commented 5 years ago

@DanCouper, sure, sounds great! Looking forward to seeing your project.

scissorsneedfoodtoo commented 5 years ago

@DanCouper, just wanted to check in and see how everything's going with the project. Were you able to start working on a prototype?

borntofrappe commented 5 years ago

@scissorsneedfoodtoo if possible I'd like to contribute to this project.

Last Sunday I made this pen inspired by a set of icons on Dribbble and I was thinking it could be a great start. It may look simple, but it allows to go through many important features of SVG syntax, from drawing basic shapes like circles and rectangles, to introduce more complex tools like the path element. It also allows to describe the SVG canvas, its coordinate system, how elements can be grouped, overlap and even be styled and animated with CSS.

Do you think it could work as a starting point?

I can give you a short list describing the process behind the SVG if you'd like, to have an idea of the steps the project might entail.

scissorsneedfoodtoo commented 5 years ago

@borntofrappe, those look amazing! I really dig the style and animations. This would be a great starting point for this project.

No need to send a short list describing your process here. Just going by your pen and message above, I can already tell that you'll teach all of the important concepts that we'd like to cover.

Really looking forward to seeing your finished prototype! This will make for a really slick looking solar system.

borntofrappe commented 5 years ago

@scissorsneedfoodtoo great to hear!

I'll get working on the complete project and update you promptly.

If you have any suggestion or a specific SVG topic you'd like me to include let me know. Glad to be of help.

scissorsneedfoodtoo commented 5 years ago

@borntofrappe, awesome! Just keep us posted.

I'll keep thinking on SVG topics and will let you know if I come up with anything.

borntofrappe commented 5 years ago

Just wanted to give a quick update to assure you I'm still active. 💪

Two highlights are worth mentioning:

scissorsneedfoodtoo commented 5 years ago

@borntofrappe, thanks for the update! Don't feel like you have to teach everything in your project -- a couple of the projects I've been working on don't touch on everything. But if you find a way to incorporate <text> elements and the viewBox attribute, then go for it!

scissorsneedfoodtoo commented 5 years ago

@borntofrappe, just wanted to check in and see how everything's going. Were you able to make some progress with your prototype?

borntofrappe commented 5 years ago

@scissorsneedfoodtoo thanks for checking in

I have made progress in the current prototype, perhaps less than I would have liked, and I am already quite confident in the first 15-20 solutions explaining the project one step at a time.

SVG can be a daunting subject, and I'm trying to balance heavier concepts (the SVG canvas, the viewBox attribute) with lighter and more visually appealing steps (drawing and coloring a circle).

Perhaps I'm getting ahead of myself though. I wanted to include the drawing of a spaceship to better explain the <path> element, but I wasn't considering much more beyond that.

Do you have any suggestions in terms of the design of the prototype?

Sorry to bring you more questions than answers. I will give you a breakdown of the steps I envisioned so far by the end of the day and I remain open for any feedback.

borntofrappe commented 5 years ago

@scissorsneedfoodtoo sorry for the delay, I've underestimated the amount of time it takes to break down and explain the steps.

I've divided the project in 19 parts, and I'm approaching the end with a few more challenges on the path element and the viewBox attribute.

As recommended, I tried not to stretch the project too much and stick to a few, important topics. That being said, I'm sure the entire project could use a revision from another person 👍

Let me know how I should proceed. In the meantime, I'll get working on the last few steps. 💪

scissorsneedfoodtoo commented 5 years ago

@borntofrappe, sorry for the delay.

Seems like you're making great progress! Yes, SVG is a pretty daunting subject, so I'm sure students will learn a lot while working through your project.

A spaceship to explain <path> sounds like a great idea! Before you continue breaking your project down into steps, could you show us your finished prototype? Would be great to see your spaceship and the rest of your solar system in action.

And don't worry about stretching the project too much. While we don't want to cover absolutely everything about SVG, we do want to break the project down into tens if not hundreds of small steps like the RPG game and CSS variables skyline projects.

borntofrappe commented 5 years ago

@scissorsneedfoodtoo Sure 👍

Here's the complete project. Hope it's enough 🤞

Notes

Current steps

  1. Add an <svg> element

  2. Size the <svg> element

  3. Draw a circle

  4. Understand the <svg> element: cropping

  5. Understand the <svg> element: coordinate system

  6. Style the circle

  7. Understand the <svg> element: overlap

  8. Draw another circle

  9. Group elements

  10. Draw a rectangle

  11. Draw another rectangle

  12. Draw a line

  13. Draw more lines

  14. Resize the <svg> element

  15. Transform translate

  16. Draw another planet

  17. Draw text

  18. Draw multiple lines

  19. Draw a polygon

  20. Draw a path

  21. Draw a relative path

  22. Draw a curve

  23. Practice curves

  24. Practice curves. (Not a typo, as the body of the spaceship does require a few steps to build)

  25. Understand the <svg> element: the viewBox attribute

borntofrappe commented 5 years ago

@scissorsneedfoodtoo I completed the description for most steps,

Let me know how I should proceed 👍

scissorsneedfoodtoo commented 5 years ago

@borntofrappe, thank you again for all of your hard work here. These look great, and the steps you outlined seem like a good way to teach important SVG concepts.

I'm sorry, but I wasn't clear enough at the onset. While we all really like the style of your planets, what we're really looking for is something more along the lines of an actual solar system with multiple planets and a sense of scale. Here's an example of what I mean: image

It doesn't have to look like this exactly, but some sort of 2D plane with planets lined up horizontally. Since it's a solar system we won't need constellations or anything like that. Would it be possible to rework your prototype into something like the image above? @QuincyLarson thinks your rocket looks really cool, and that it would be a neat touch to have it going from Earth to Mars as a nod to NASA's efforts.

Let us know what you think! I'm sorry again for not being more clear from the beginning. Let me know if there's anything I can do. I'm always available here on GitHub, or can hop on a call if you'd like to discuss this project in more detail.

borntofrappe commented 5 years ago

@scissorsneedfoodtoo absolutely no problem, I misunderstood the assignment. It's been already a very teaching effort so there's no work lost here.

I might need a moment to think it through. but I think there is a way to adapt most steps to create a solar system as shown in the picture. I'll let you know as soon as possible ⚡️

P.S: I quite like the idea to keep the rocket going from Earth to Mars 👍 🚀

borntofrappe commented 5 years ago

@scissorsneedfoodtoo I started working on the new prototype. It's quite barebone, but here it is.

While researching the topic I realized that considering the size of the planets and their distance at the same time would have made for a very wide canvas, in which the planets get lost.

Taking inspiration from the graph in the wiki page I chose to have the circles consider the size of the planets, while the line below the circles highlights the relative distance.

Am I on the right track?

P.S: Here's the informaton I've used to compute the relative measures.

Celestial Body Diameter (km) Distance from the Sun (AU)
Sun 1 392 684 0
Mercury 4 879.4 0.4
Venus 12 103.6 0.7
Earth 12 756.3 1
Mars 6 792.4 1.5
Jupiter 142 984 5.2
Saturn 120 536 9.5
Uranus 51 118 19.2
Neptune 49 528 30.1
scissorsneedfoodtoo commented 5 years ago

@borntofrappe, thank you so much for understanding and for your continued efforts with this project.

Your new prototype looks great! You're definitely on the right track, and separating the size and relative distance of the planets was a really good idea, and I really dig the way you chose to display the distance of each planet from the sun.

I wouldn't say this is barebones at all! @QuincyLarson mentioned that displaying an asteroid belt might be a nice touch, but only if you feel like it's good for this project and doesn't draw it out too long. We don't want this process to be tedious for our students and especially not for you! Looking forward to seeing the rocket later :rocket:

Also, do you have about 20 to 30 minutes to hop on a call next week? I'd just like to learn more about you and your project, and answer any questions that you might have. If so, please send me an email at kris@freecodecamp.org and I'll send you a calendar invite.

borntofrappe commented 5 years ago

I'm up for it 👍

I sent you a mail at the provided address (sorry for the mishap).

DanCouper commented 5 years ago

Hi @scissorsneedfoodtoo , I'm sorry I didn't get back to this, got stuck with family stuff and let it lapse. I have a fully functional prototype here, covering basic SVG primitives (just circle tbh), placing them via coordinates, styling via SVG, using SVG filters, animating using CSS. The CP demo uses JS to render out the SVG based on a set of data, but almost cut into steps on my local version and wavering over removing that

  1. empty svg (basics, viewBox)
  2. draw a circle for sun at centre (coordinates/fill)
  3. draw a circle for an orbit (fill/stroke)
  4. add a planet (fill/stroke)
  5. repeat 3 + 4 based on a set of data (possibly just render out using JS, which necessitates a few more steps but makes it 10* easier to deal with radii/animation length)
  6. use filters for asteroids (defs/references in CSS)
  7. use CSS to add extra style
  8. add animations using CSS
scissorsneedfoodtoo commented 5 years ago

Hi @DanCouper, no need to apologize! Family and other things definitely come first.

Your project looks great! Unfortunately I didn't hear back for some time, so I assumed it was open and gave it to another contributor. If you have some free time now, would you be interested in picking up another project? We still have a few unclaimed ones here.

QuincyLarson commented 5 years ago

@DanCouper Your SVG solar system looks fantastic. It looks like it could be in a contemporary art museum.

Is there a way you could refactor it a little so it makes even more use of SVG?

DanCouper commented 5 years ago

Hi Quincy! Sorry about the delay between you messaging me on FCC and now, had a wedding to be married at so last week has been somewhat of a write-off. Yes, I've got one using moar SVG; this was literally because I wanted elliptical orbits, then that led to using animation in SVG instead of CSS. This may be a slight deal-breaker as it won't work in IE/Edge, but I can investigate polyfills. Also needs a nice subtle star field background as well I think, so moar SVG there, and a rocket would be nice. Anyway:

https://codepen.io/DanielCouper/full/rgqEyb

scissorsneedfoodtoo commented 5 years ago

Congratulations on your wedding @DanCouper! This is looking great--I'm excited to see the finished prototype with the star field and a rocket.

Only about 2% of people that visited fCC in the last month used IE or Edge, so I don't think you need to worry about the polyfills. I couldn't test your pen above on Safari, but it's working well on Chrome and Firefox.

DanCouper commented 5 years ago

Thank you! Just a check-in - sorry this has been a little while, I am on it & should have a PR by this time next week, I've just been extremely busy at work & with being away after wedding.

scissorsneedfoodtoo commented 5 years ago

No need to apologize @DanCouper. Thank you for keeping us in the loop and looking forward to seeing your PR whenever it's ready.