Git Product home page Git Product logo

programming-based-animations's Introduction

Programming-Based-Animations

A compilation of programming based animations that I have made in my spare time while playing around with particle movement and math.

Cube Wave

This is an animation made to represent a 3d surface sectioned into cuboids that can be displaced according to impact forces that act on it.

For my first experiment I want to be able to generate the actual 3 dimensional surface itself and be able to move it according to a wave function, in this case a sine wave vertically upwards.

Sand Cellular Automata

This is a cellular automata-based project that uses rules like John Conway's Game of Life to create cells that travel down the screen. The sand itself also holds the hue of its colour when initialised creating the patterns that can be seen in the preview below.

General Particle

This is a coding foundation for almost all of my particle based animation programs, essentially being a blueprint code that I start off with.

It defines a basic particle class that can hold position, colour, size, velocity and acceleration of a particle and render it on a canvas. The current particle generation code in the program creates white particles at the center of the window with a random velocity, running at 60 frames per second.

Lapping Water

This is an animation I made for a project on procedural generation. The aim was to procedurally generate islands, and although the animation for waves was simple to recreate for a straight edge, corners proved difficult due to the nature of how I programmed my code, requiring the waves to be in the right phase for it to make sense. Hence I made a separate animation for corners.

This consisted of creating an array of pixels that represented a wave function. Then translating the points respectively to create the illusion of water motion back and forth, done simply by translating the function.

However this only succeeded in creating a wave function line, so the next step was to create a division, making one side blue and the other a chroma key-able colour (e.g. black or green); this was done by drawing a rectangle with a width of 1 pixel but a length long enough to leave the window, these are then attached to the coordinates of the wave function such that it looks like it is water on one side and land on the other.

And that's how the animation is created:

Tentacle

This animation was an experiment to see what kind of motion I could create with waves and particles exclusively, hence decided on the idea of a tentacle.

The basic concept consisted of having circular particles emitted from a point that would shrink over time to create a basic tentacle shape. image

Then for moving the tentacle you could give the particle a velocity based on a wave function and the time passed from when the program initially started, combining these to give the particles an x and y velocity.

The y velocity would determining the up and down motion of the tentacle while the x velocity determining the length of the tentacle as a whole. Changing the values to always be positive or negative then would give different orientations.

The y velocity is a cos wave function and the x velocity is a sine squared function (with an offset of 1 as the wave like motion needed to be extended to be further away from the origin point.

A single tentacle:

8 tentacles in different orientations:

programming-based-animations's People

Contributors

arcane34 avatar

Stargazers

 avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.