Skip to content

Instantly share code, notes, and snippets.

@ckissane

ckissane/index.html

Created March 16, 2016 02:05
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ckissane/ab4b31b9c1d6c19c76b7 to your computer and use it in GitHub Desktop.
Save ckissane/ab4b31b9c1d6c19c76b7 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link rel="stylesheet" href="style.css">
<title>Fluid Painting</title>
</head>
<body>
<canvas id="c"></canvas>
<div class="instruct" selectable="false">
<h1>Draw With Fire</h1>
</div>
<script src="main2.js"></script>
</body>
</html>
Raw
main.js
var c = $("#c")[0];
var ctx = c.getContext("2d");
var arr = [];
var arrTemp = [];
var w = 500;
var h = 300;
var mouse = {
x: 0,
y: 0
};
var pressed = false;
c.width = w;
c.height = h;
for (var r = 0; r < w - 1; r++) {
arr[r] = [];
for (var c = 0; c < h - 1; c++) {
arr[r][c] = [];
}
}
/*for(var i=0;i<100000;i++){
arr[250][250].push("red");
}*/
var nodes = [];
var colors = ["orange", "red"];
function tick() {
for (var i = 0; i < 50; i += 1) {
arr[298][i % 25 + 225].push(colors[Math.floor(Math.random() * colors.length)]);
}
if (pressed) {
for (var y = -5; y <= 5; y++) {
for (var x = -5; x <= 5; x++) {
arr[Math.max(Math.min(w - 1, Math.floor(mouse.y + y)), 0)][Math.max(Math.min(h - 1, Math.floor(mouse.x + x)), 0)].push(colors[Math.floor(Math.random() * colors.length)]);
}
}
}
arrTemp = [];
for (var r = 0; r < w; r++) {
arrTemp[r] = [];
for (var c = 0; c < h; c++) {
arrTemp[r][c] = [];
}
}
for (var r = 0; r < w - 1; r++) {
for (var c = 0; c < h - 1; c++) {
nodes = arr[r][c];
for (var i = 0; i < nodes.length; i++) {
var choice = Math.floor(Math.random() * 5);
if (Math.floor(Math.random() * 100) != 10) {
if (choice + "" == "0") {
if (r > 0) {
arrTemp[r - 1][c].push(nodes[i]);
}
} else if (choice + "" == "1") {
if (c < h - 1) {
arrTemp[r][c + 1].push(nodes[i]);
}
} else if (choice == 2) {
/*if (r < w - 1) {
arrTemp[r + 1][c].push(nodes[i]);
}*/
if (r > 0) {
arrTemp[r - 1][c].push(nodes[i]);
}
} else if (choice == 3) {
if (c > 0) {
arrTemp[r][c - 1].push(nodes[i]);
}
} else {
arrTemp[r][c].push(nodes[i]);
}
}
}
}
}
for (var r = 0; r < w; r++) {
arr[r] = arrTemp[r];
}
}
function draw() {
ctx.clearRect(0, 0, w, h);
for (var r = 0; r < w - 1; r++) {
for (var c = 0; c < h - 1; c++) {
nodes = arr[r][c];
if (nodes.length > 0) {
ctx.beginPath();
ctx.fillStyle = "hsl(0,90%," + Math.min(100, nodes.length * 10 - 10) + "%)";
ctx.fillRect(c, r, 1, 1);
ctx.fill();
}
}
}
}
document.body.onmousedown = function(event) {
mouse = {
x: event.clientX,
y: event.clientY
};
pressed = true;
};
document.body.onmouseup = function(event) {
mouse = {
x: event.clientX,
y: event.clientY
};
pressed = false;
};
document.body.onmousemove = function(event) {
mouse = {
x: event.clientX,
y: event.clientY
};
};
window.setInterval(tick, 1);
window.setInterval(draw, 100);
Raw
main2.js
Array.prototype.remove = function(from, to) {
var rest = this.slice((to || from) + 1 || this.length);
this.length = from < 0 ? this.length + from : from;
return this.push.apply(this, rest);
};
var c = $("#c")[0];
var ctx = c.getContext("2d");
var arr = [];
var arrTemp = [];
var w = document.body.clientWidth - 4;
var h = document.body.clientHeight - 4;
var mouse = {
x: 0,
y: 0
};
var pressed = false;
c.width = w;
c.height = h;
for (var r = 0; r < w - 1; r++) {
arr[r] = [];
for (var c = 0; c < h - 1; c++) {
arr[r][c] = [];
}
}
/*for(var i=0;i<100000;i++){
arr[250][250].push("red");
}*/
var nodes = [];
var colors = ["orange", "red"];
function node(x, y) {
this.x = x;
this.y = y;
this.color = "orange"; //colors[Math.floor(Math.random() * colors.length)];
return this;
}
function tick() {
/* for(var i=0;i<50;i+=1){
nodes.push(new node(i%25+225+mouse.x,298+Math.sqrt(12.5*12.5-Math.pow(i%25-12,2)), 0));
//arr[298][i%25+225].push(colors[Math.floor(Math.random()*colors.length)]);
}*/
/* for (var i = 0; i < 360; i += 6) {
nodes.push(new node(Math.sin(i / 180 * Math.PI) * 50 + w / 2, Math.cos(i / 180 * Math.PI) * 50 + h / 2, 0));
}*/
/*for (var y = -4; y <= 4; y++) {
for (var x = -4; x <= 4; x++) {
nodes.push(new node(x+w/2,y+h/2, 0));
}
}*/
if (pressed) {
for (var i = 0; i < 2; i++) {
for (var y = -1; y <= 1; y++) {
for (var x = -1; x <= 1; x++) {
nodes.push(new node(Math.max(Math.min(h - 1, Math.floor(mouse.x + x)), 0), Math.max(Math.min(w - 1, Math.floor(mouse.y + y)), 0)));
}
}
}
}
arrTemp = [];
for (var i = 0; i < nodes.length; i++) {
var nod = nodes[i];
var r = nod.y;
var c = nod.x;
if (Math.floor(Math.random() * 200) == 5) {
if (nodes[i].color == "orange") {
nodes[i].color = "red";
}
}
if (Math.floor(Math.random() * 100) == 5) {
if (nodes[i].color == "blue") {
nodes[i].color = "orange";
}
}
var choice = Math.floor(Math.random() * 5);
if (Math.floor(Math.random() * 80) != 10) {
if (choice + "" == "0") {
if (r > 0) {
nod.y--;
}
} else if (choice + "" == "1") {
if (c < w - 1) {
nod.x++;
}
} else if (choice == 2) {
/*if (r < w - 1) {
arrTemp[r + 1][c].push(nodes[i]);
}*/
if (r > 0) {
nod.y--;
}
} else if (choice == 3) {
if (c > 0) {
nod.x--;
}
} else {
}
} else {
nodes.remove(i);
i--;
}
}
}
function draw() {
if (w != document.body.clientWidth - 4 || h != document.body.clientHeight - 4) {
w = document.body.clientWidth - 4;
h = document.body.clientHeight - 4;
c.width = w;
c.height = h;
}
ctx.clearRect(0, 0, w, h);
ctx.globalCompositeOperation = "screen";
for (var c = 0; c < nodes.length; c++) {
ctx.beginPath();
ctx.fillStyle = nodes[c].color; //"hsl(0,90%," + Math.min(100, nodes.length * 10 - 10) + "%)";
ctx.fillRect(nodes[c].x, nodes[c].y, 1, 1);
ctx.fill();
}
}
document.body.onmousedown = function(event) {
mouse = {
x: event.clientX,
y: event.clientY
};
pressed = true;
};
document.body.onmouseup = function(event) {
mouse = {
x: event.clientX,
y: event.clientY
};
pressed = false;
};
document.body.onmousemove = function(event) {
mouse = {
x: event.clientX,
y: event.clientY
};
};
window.setInterval(tick, 1);
window.setInterval(draw, 100);
Raw
style.css
@import url(https://fonts.googleapis.com/css?family=Flavors);
body, html {
background: black;
margin:0;
padding:0px;
width:100%;
height:100%;
overflow:hidden;
}
canvas {
position:absolute;
top:0;
left:0;
background:black;
filter: blur(5px);
-webkit-filter:blur(5px);
}
.instruct {
position:absolute;
top:calc(50% - 200px);
left:0%;
right:0%;
color:rgba(132, 79, 0, 1);
text-align:center;
}
.instruct h1 {
text-align:center;
width:100%;
font-family:"Flavors","Cursive";
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment