Skip to content

Instantly share code, notes, and snippets.

View bit101's full-sized avatar

Keith Peters bit101

815 followers · 1 following
View GitHub Profile
@bit101
bit101 / flow_fields_01.js
Last active October 21, 2017 20:06
flow fields, iteration 1
var canvas = document.getElementById("canvas"),
context = canvas.getContext("2d"),
width = canvas.width = window.innerWidth,
height = canvas.height = window.innerHeight;
var res = 10;
for(var x = 0; x < width; x += res) {
for(var y = 0; y < height; y += res) {
var value = (x + y) * 0.01 * Math.PI * 2;
@bit101
bit101 / tutorial_index.html
Created October 21, 2017 18:43
HTML Template for tutorials
<!doctype html>
<html>
<head>
<title>tuturial template</title>
<style type="text/css">
html, body {
margin: 0;
padding: 0;
}
canvas {
@bit101
bit101 / tutorial_main.js
Created October 21, 2017 18:43
JavaScript Template for tutorials
var canvas = document.getElementById("canvas"),
context = canvas.getContext("2d"),
width = canvas.width = window.innerWidth,
height = canvas.height = window.innerHeight;
@bit101
bit101 / flow_fields_02.js
Created October 21, 2017 18:46
flow fields, iteration 2
var canvas = document.getElementById("canvas"),
context = canvas.getContext("2d"),
width = canvas.width = window.innerWidth,
height = canvas.height = window.innerHeight;
var res = 10;
for(var x = 0; x < width; x += res) {
for(var y = 0; y < height; y += res) {
var value = getValue(x, y);
@bit101
bit101 / flow_fields_03.js
Created October 21, 2017 18:58
flow fields, iteration 3
var canvas = document.getElementById("canvas"),
context = canvas.getContext("2d"),
width = canvas.width = window.innerWidth,
height = canvas.height = window.innerHeight;
var count = 20000;
for(var i = 0; i < count; i++) {
var x = Math.random() * width,
y = Math.random() * height;
@bit101
bit101 / flow_fields_04.js
Created October 22, 2017 16:10
flow fields, iteration 4
var canvas = document.getElementById("canvas"),
context = canvas.getContext("2d"),
width = canvas.width = window.innerWidth,
height = canvas.height = window.innerHeight;
var count = 50000;
context.lineWidth = 0.25;
for(var i = 0; i < count; i++) {
var x = Math.random() * width,
@bit101
bit101 / flow_fields_05.js
Created October 22, 2017 16:36
flow fields, iteration 5
var canvas = document.getElementById("canvas"),
context = canvas.getContext("2d"),
width = canvas.width = window.innerWidth,
height = canvas.height = window.innerHeight;
context.lineWidth = 0.5;
// create point
var p = {
x: Math.random() * width,
@bit101
bit101 / flow_fields_06.js
Last active October 22, 2017 22:18
flow fields, iteration 6
var canvas = document.getElementById("canvas"),
context = canvas.getContext("2d"),
width = canvas.width = window.innerWidth,
height = canvas.height = window.innerHeight;
context.lineWidth = 0.1;
// random attractor params
var a = Math.random() * 4 - 2;
var b = Math.random() * 4 - 2;
@bit101
bit101 / flow_fields_2_01.js
Last active October 27, 2017 01:48
flow fields 2, iteration 1
var canvas = document.getElementById("canvas"),
context = canvas.getContext("2d"),
width = canvas.width = window.innerWidth,
height = canvas.height = window.innerHeight;
noise.seed(Math.random());
render();
function render() {
var res = 10;
@bit101
bit101 / flow_fields_2_02.js
Created October 27, 2017 01:57
flow fields 2, iteration 2
var canvas = document.getElementById("canvas"),
context = canvas.getContext("2d"),
width = canvas.width = window.innerWidth,
height = canvas.height = window.innerHeight;
noise.seed(Math.random());
var z = 0;
render();
function render() {