Challenge Overview
Project Overview
Sparticl is a new web and mobile service for teens, a collection of the very best science resources the web has to offer in science, technology, engineering, and math or STEM. Sparticl includes answers to science questions, images, videos, games, and hands-on activities, all curated by a team of experts. But it's also a place where teens play a critical part in ranking content, sharing it, and recommending new content. Sparticl is being created by the National Productions division of Twin Cities Public Television, and is made possible with the generous support of 3M.
Current Status- We're planning to launch the new Sparticl website this summer. We've spent the last year naming and creating the brand, building the site, and planning a marketing launch to reach our target audience (teens 13 to 15 years old) in order to build a strong teen community on the site.
Animated Logo- Part of our process has included creating the logo and the header for the website. The name Sparticl is related to a real scientific term -- a sparticle, a type of sub-atomic particle. The spray of colored dots spiraling away from our logo is an artist’s interpretation of this idea. We'd like to get some help from the TopCoder community to produce a dynamic version of this logo.
Website Link
The Sparticl website is currently in private beta testing (http://www.sparticl.org/preview/). A login will be provided to registered contest participants.
Desired End Result
The name Sparticl is related to the scientific term “sparticle,” which is a term in particle physics. Our logo design is inspired by sub-atomic particle collisions, which produce sub-particles that fly away from the collision point in different patterns, depending on the mass and velocity of those particles. We would like to display a colorful and dynamic logo in the header of the website that draws its artistic inspiration from this idea and the current, logo and header.
Our goal is a compact, multicolored particle generator, where the particles ideally will emerge from the “S” of our logo and form mathematically-driven patterns that vary, depending on a small set variables we can control. Patterns should include but not be limited to spirals. The particles will take on variations in both color and size. The motion of the particles would derive from the simulated forces included in the particle engine (e.g. velocity dependent forces, other non-central forces, and central forces).
On every page load, we imagine the particle engine will be seeded with different initial conditions to produce a variety of particle paths and patterns for the user. The animation should run for between 3-5 seconds before freezing. Ideally, it will not significantly slow the speed of the page load. The simulation should be programmed so that the variables can be controlled and eventually be adapted to accept user input or respond to user activity on the site.
Examples
These links show a "flavor" of logo animation that are similar to what we envision for Sparticl:
http://www.youtube.com/watch?v=OzkZWvAJUr0 The scattering of “particles” from the Microsoft logo have an appealing 3D design, and remain consistent with the logo identity.
http://vimeo.com/20250134 - The middle of this video illustrates a dynamic logo that has many variations but remains consistent with the identify.
These links offer some idea of the algorithms we envision could be used to animate the logo, an example of the mathematical backbones on which the position and orientation of particles could be attached:
http://madflame991.blogspot.com/p/particle-systems.html - The Radial Emitter button on this page creates a shower from a single point. The particles have weight and float to the bottom of the screen.
http://davidthomasbernal.com/blog/2011/06/22/drawing-simple-particle-systems-with-html5-canvas-tag/ - This site presents code here for a Fountain with some initial velocity for the particles.
http://9elements.com/io/projects/html5/canvas/ - Vivid demonstration of patterns of colored particles.
http://www.html5grind.com/2011/06/22/demo-javascript-particle-system-sandbox/ - Follow the link to “the page describing the project”.
http://www.nihilogic.dk/labs/particles/ - A simple particle generator that shows what happens when you apply different forces in x, y, z axes.
http://giladlotan.com/html5/flock/ - “Colored worms” – without the trails they’d be a flock of particles.
http://www.mrspeaker.net/dev/parcycle/ - Options 4,5,6 in the control dashboard below the animation show animations of colored particles.
Platform
The site is developed in Expression Engine. We imagine the header would be built using HTML5 Canvas and it would need to integrate into most pages of the site with the exclusion of the content frame page.