Cameron's World. Dynamics.js. Popularity contest - Tweetable Mathematical Art. OK, this one gave me a hard time.
I think it's pretty nice though, even if the results are not so arty as some others. That's the deal with randomness. Maybe some intermediate images look better, but I really wanted to have a fully working algorithm with voronoi diagrams. Space.js – HTML-driven narrative 3D-scrolling. Chrome Experiments - Academic Experiments. Particles.js - A lightweight JavaScript library for creating particles. Fftvisualize2 by urtubia / HasCanvas. HTML5 Online Animation Editor. Zzmp/juliusjs · GitHub. WebGL Fluid Experiment. Single Div Drawings with CSS. Why A Single Div?
In May of 2013 I attended CSSConf and saw Lea Verou speak about the humble border-radius. It was an eye-opening talk and I realized there was much about CSS behavior I did not fully understand. This reminded me of my time as a fine arts student where I was constantly pushed to become a master of my chosen medium. As a web designer, CSS is my medium and so I challenged myself to learn all I could about it and to explore and experiment with its limits.
But why a single div? When I was learning to paint, my class did these color mixing exercises where we created the many colors of the spectrum from only the three primary colors: red, yellow, and blue. I decided to start a CSS drawing project, every few days illustrating something new with only CSS. The Toolkit With only a single div and browser-supported CSS properties, it may seem like the tools are too limited. Pseudo elements Shapes With CSS and one element, we are afforded three basic shape types. Gradients Visualizing Demos. Terra.js. Terra is a super customizable framework for creating and analyzing biological simulations.
It's open-source and licenced under MIT. Usage. Time to get hacking – Introducing Rec Room. It’s no secret that the best frameworks and tools are extracted, not created out of thin air.
Since launching Firefox OS, Mozilla has been approached by countless app developers and web developers with a simple question: “How do I make apps for Firefox OS?” The answer: “It’s the web; use existing web technologies.” was—and still is—a good answer. But if you don’t already have an existing toolchain as a web developer, I’ve been working on extracting something out of the way I’ve been creating web apps at Mozilla that you can use to write your next web app. The Cellular Automaton Method for Cave Generation. Dear reader, this post has an interactive simulation!
We encourage you to play with it as you read the article below. In our series of posts on cellular automata, we explored Conway’s classic Game of Life and discovered some interesting patterns therein. And then in our primers on computing theory, we built up a theoretical foundation for similar kinds of machines, including a discussion of Turing machines and the various computational complexity classes surrounding them. Snark Hunting: Force Directed Graphs in D3 — delimited. There are also really fun to look at and make a good launching point for talking about D3's force layout.
After some searching, I found a dataset that contains the node and link information for many common snark graphs (thank you, internet!). You can get the original data here. An Interactive Introduction to Graphics Programming. This is a proposal and proof-of-concept for an interactive book about programming the graphics processor.
Modern computers come with two separate processors, two “brains”: The traditional CPU, the Central Processing Unit The newer GPU, the Graphics Processing Unit Almost all books and courses about programming only teach you how to program the CPU. GPU programming is esoteric. Learning resources are targeted at experienced programmers who need to use the GPU for applications like high-performance video games and scientific simulations. Yet there is a unique joy to programming the graphics processor. This book is intended to bring the wonder and joy of graphics processor programming to a wider audience. An Interactive Book This book will be interactive. The text will be extensively illustrated with manipulable diagrams and live code examples. On the left you have a graphic output and on the right you have the code that produced it. Try moving your mouse over the output.
Contents Open Source. Engineering. During the latest redesign of our homepage I implemented a framework in AngularJS for building scrolling animations.
The framework is called angular-scrollery and it makes implementing a scrolling animation as simple as defining a series of steps and element behaviors specific to each step. In this post I will describe the process of creating a scrolling animation (specifically, this demo) with angular-scrollery. Step 1: Set-up The first thing you need to do is standard set-up for using an angular module. This includes: Canvas Editor. Sports betting between friends. No silly website I don't want to sign-up with Facebook....
Nooo silly website I don't want to sign-up with Twitter.... Noooo freaking website I don't even want to sign-up with Google+.... Noooooo I don't want to create an account either! I know I'm going to need to come up with some password, not to mention I'll need to "verify" my email address, give a few personal details that I don't want to give, all that for something that I don't even care that much about... what a hassle, seriously. Anyway I'm writing this because of a lot of very nice comments I've had both on HN (the thread) and Reddit when showing my newly created website You see, nospronos lets you create friendly "leagues" with your friends to predict the results of the 2014 football world cup in Brazil for free. I started developing the website last Saturday and knew I needed to be quick if I wanted to post something convincing on HN before Monday!
IDE. Maze Tree. Removing User Interface Complexity, or Why React is Awesome. I've been studying frameworks and libraries like Ember, Angular, and React the past several months, and given Web Components a lot of thought.
These all solve similar problems to varying degrees, and are in conflict in some ways and in harmony in others. I'm mostly concerned with the core problems of data binding and componentizing UIs. After much research and usage of the technologies mentioned above, I found React to provide the best solution. I ask that you set aside your framework prejudices and read this post with an open mind. This post is not to evangelize React specifically, but to explain why its technique is profound. This post actually started as a call to address problems with Web Components. The Bloop Library# I'm not going to focus on React specifically. Havel-Hakimi. CSS 3D Solar System. Magic Animations CSS3. Parallax.js. PhysicsJS Examples. Mr.doob. Maximecb/Turing-Drawings. @ehouais « Javascript, vector graphics and the REST… Nested Selections. D3’s selections can be hierarchical, much like the elements and data they join.
Consider a table: <table><thead><tr><td> A</td><td> B</td><td> C</td><td> D</td></tr></thead><tbody><tr><td> 0</td><td> 1</td><td> 2</td><td> 3</td></tr><tr><td> 4</td><td> 5</td><td> 6</td><td> 7</td></tr><tr><td> 8</td><td> 9</td><td> 10</td><td> 11</td></tr><tr><td> 12</td><td> 13</td><td> 14</td><td> 15</td></tr></tbody></table> How would you select only the body cells?
The selector "td" would match the td elements in the head as well as the body. To match only those elements A within some other elements B, use the descendant combinator, "B A". Var td = d3.selectAll("tbody td"); Alternatively, select the tbody element first, then select the td elements within: var td = d3.select("tbody").selectAll("td"); This produces the same result because selectAll, for each element in the current selection, selects the matching descendants. #Nesting and Index. Tearable Cloth. Sprite Lamp. 507 Mechanical Movements, 33. Speaking Colors in 7 Lines. Animated Engines - Home.