Now we’ll apply this object oriented programming to each dot and give them all random placement. interactive physics animations via javascript & canvas | 05. $(function () { var canvas, context, width, height, x, y, radius = 25, clickX, clickY, drag = false; canvas = $("#canvas")[0]; [...]
This time we won’t make the canvas any different visually, it’s more just cleaning up the code. We’re making the circle into a dot object, then later it will be easier to keep track of it (and any others). interactive physics animations via javascript & canvas | 04. $(function () { var canvas, [...]
This iteration really isn’t that big, but I figured baby steps may be the way to go here. We’re just giving the first circle a random position. The other dots are positioned relative to the first one still. interactive physics animations via javascript & canvas | 03. $(function () { var canvas, context, [...]
Adding more circles, each a multiple of the first circle’s coordinates. I like the effect of having them all move in unison. Ceck the source: interactive physics animations via javascript & canvas | 02 $(function () { var canvas, context, width, height, x, y, radius = 25, clickX, clickY, drag = false; [...]
Adding a second circle, always at twice the x and y as the first. The first is still draggable. View the source: interactive physics animations via javascript & canvas | 01 $(function () { var canvas, context, width, height, x, y, radius = 25, clickX, clickY, drag = false; [...]
I’ve played a lot with physics experiments in flash and moving more to javascript and canvas for simple things I wanted to test it out with some physics and animations. I’ve been curious to find out how the performance compares. Obviously this will depend on the browser, but the browsers that do support canvas should [...]
Attaching a taxonomy to a user? This will help. I was thinking just the other day about how to go about it, and this post by Justin Tadlock seems to answer all my questions on that. Link: Custom user taxonomies in WordPress – (http://devpress.com/blog/custom-user-taxonomies-in-wordpress/?utm_source=rss&utm_medium=rss&utm_campaign=custom-user-taxonomies-in-wordpress) from (author unknown) at DevPress
I’ve been playing with canvas and different javascript drawing libraries a lot lately in my projects at work. I’ve been antsy to play with the techniques I’ve learned and apply it to some more interactive experiments. Much like my last series on generative art in flash, but this will all be in javascript! In case [...]
Here’s a great writeup/tutorial on javascript animations involving circles, spirals, roses, starfish and sunflowers from one of my favorites: jbum/KrazyDad Link: Circles, Spirals, and Sunflowers – (http://www.krazydad.com/blog/2011/10/circles-spirals-and-sunflowers/) from (author unknown) at KrazyDad
Flash is always the bleeding edge and can move/adapt much faster than html because it is controlled by one entity. Which is some people’s criticism – they don’t want to rely too much on Adobe, I partly agree, but I’d much rather rely on Adobe than many other tech companies: especially Microsoft, Apple or even [...]
Zero images is something that always gets me excited, I really like these arrow button styles! I like the css used more and the hover/active states too, nice css3 transitions. via Adobe-like Arrow Headers | CSS-Tricks.
After playing with the settings in my experiments I found a few settings I liked and wanted to develop further. The first was snow! An added bonus I was able to work on a project just for the holidays and used much of this code in it! I looked around the web and saw a [...]
Microsoft has a new line of TouchMouse. They have a campaign to cooinside with it called the Art of Touch and have invited a few artists to participate and more to drive interest with free shwag! Basically that boils down to me having a to give away! So go play with the app and link [...]
I’m really enjoying giving a control panel of sorts to the end user and letting them control the physics rules of their canvas. Let’s add more motion to it by applying a jitter to the velocity of each dot. This is similar to earlier, when we first started animating by applying a random number to [...]
Here’s a great article about the process of responsive design & mobile first design and how to practically use them both in a project. This site is a proof of concept for many of the ideas described in Rethinking the Mobile Web or (Mobile First Responsive Design). via Yiibu – About this site….
Here’s a great tool to make responsive grid layouts. Thanks to Erskine Labs! Introducing Gridpak | Erskine Labs.
Here’s a great little script I found useful today as I was working on having dynamic effects applied to javascript via canvas. “The canvas element provides scripts with a resolution-dependent bitmap canvas, which can be used for rendering graphs, game graphics, or other visual images on the fly.” Thanks to the canvas APIs I was [...]
A great css developer helper script from Fred. CSSrefresh is a small, unobstructive javascript file that monitors the CSS-files included in your webpage. As soon as you save a CSS-file, the changes are directly implemented, without having to refresh your browser. When you’re coding a website, nothing can be more frustrating than having to switch [...]
I'm Evan Mullins. I'm a web designer and am very interested in the intersection of art & technology, user experience, and interactive design. I like contributing to make the web incrementally a better place. I love simultaneously solving problems & making things aesthetically brilliant. circlecube is my interactive design site chock full of tutorials, critiques, techniques, technologies, ramblings and a playground of experiments. Welcome to it!
Karl