I haven’t had much time to post lately, but here’s something I’ve been playing around with. It basically takes an image you upload and turns it into a randomly scattered mosaic of buttons! I don’t know why….
Demo
It basically just moves your uploaded image to canvas where we can gather pixel information. Based on the color of the pixel we insert a button in that location with the same color. I think it looks more like rain, so I may try to modify this script to perform a similar effect with a liquid form like paint or something. Anyway, Mr. Doob and his webGL posse are coming out with cooler shit that this anyway, but if you still want to know how to do it, I packaged a nice class for you to play with (I didn’t clean any of this up so there are several variables that I’m not using…I’ll clean it up later..maybe).
/*
* Mike Newell
* https://iwearshorts.com
*
* Licensed under the "Whatever" License - which means I don't care what you do
* with this. It'd be cool to get some credit, but if you don't want to be cool
* that's cool too.
*
* getImageData(x1, y1, x2, y2)
*
* clearRect(x, y, w, h)
*
* putImageData(data, x, y)
**/
var Buttonizer = {
c: document.getElementById("fox-canvas"),
c2: document.getElementById("fox-canvas2"),
ctx: {},
ctx2: {},
img: document.getElementById("fox-image"),
imgData: {},
pixelArr: [],
memory: [],
pixel: 0,
remainder: 0,
x: 0,
y: 0,
random: 25,
size: 0,
opacity: 1,
PI2: Math.PI*2,
radius: 0,
angle: 0,
on: true,
count: 0,
cx: 0,
cy: 0,
x2: 0,
y2: 0,
spiral: true,
overlay: document.getElementById("button-overlay"),
overlay2: document.getElementById("button-overlay2"),
overlay3: document.getElementById("button-overlay3"),
newPixel: {},
init: function() {
this.setDimensions();
this.ctx = this.c.getContext("2d");
this.ctx2 = this.c2.getContext("2d");
this.buttonize();
},
setDimensions: function() {
this.c.width = this.img.width;
this.c.height = this.img.height;
this.c2.width = this.img.width;
this.c2.height = this.img.height;
this.size = Math.floor(Math.random()*5+(this.c.width / (.12*(this.c.width))));
},
setCenter: function() {
this.cx = Math.floor(this.c.width / 2);
this.cy = Math.floor(this.c.height / 2);
this.x2=this.cx;
this.y2=this.cy;
},
reset: function() {
this.setCenter();
this.count = 0;
},
setPixelData: function() {
this.imgData = this.ctx2getImageData(0, 0, this.c.width, this.c.height);
this.pixelArr = this.imgData.data;
},
drawShadow: function() {
// shadow
this.ctx.fillStyle = "rgba("+75+","+75+","+75+","+.5+")";
this.ctx.beginPath();
this.ctx.arc(-2, -2, this.size, 0, this.PI2, true);
this.ctx.closePath();
this.ctx.fill();
},
drawColor: function() {
this.ctx.fillStyle = "rgba("+this.newPixel.data[0]+","+this.newPixel.data[1]+","+this.newPixel.data[2]+","+this.newPixel.data[3]+")";
this.ctx.beginPath();
this.ctx.arc(0, 0, this.size, 0, this.PI2, true);
this.ctx.closePath();
this.ctx.fill();
},
drawPNG: function() {
var random = Math.floor(Math.random()*100);
if( random > 0 && random < 30 ) {
this.ctx.drawImage(this.overlay, -this.size, -this.size, (this.size * 2), (this.size * 2));
} else if (random > 30 && random < 60) {
this.ctx.drawImage(this.overlay2, -this.size, -this.size, (this.size * 2), (this.size * 2));
} else if (random > 60 && random < 100) {
this.ctx.drawImage(this.overlay3, -this.size, -this.size, (this.size * 2), (this.size * 2));
} else {
this.ctx.drawImage(this.overlay, -this.size, -this.size, (this.size * 2), (this.size * 2));
}
},
buttonize: function() {
if(this.spiral) {
this.ctx.drawImage(this.img, 0, 0);
this.ctx2.drawImage(this.img, 0, 0);
this.setCenter();
var interval = setInterval(function() {
var b = Buttonizer;
if(b.on) {
b.angle = b.count/5;
b.radius = b.angle*2;
var x = b.cx+b.radius*Math.cos(b.angle);
var y = b.cy+b.radius*Math.sin(b.angle);
if(x > b.c.width) {
b.spiral = false;
b.reset();
b.buttonize();
clearInterval(interval);
}
b.newPixel = b.ctx2.getImageData(x, y, 1, 1);
b.ctx.save();
b.ctx.translate(x, y);
if(Math.floor(Math.random()*100 > 20)) {
b.size = Math.floor(Math.random()*5+(b.c.width / (.22*(b.c.width)))) * 2;
// color layer
b.drawColor();
// png
b.drawPNG();
}
b.ctx.moveTo(b.x2,b.y2);
b.ctx.restore();
b.x2=x;
b.y2=y;
b.count++
} // if on
}, 0);
} else {
setInterval(function() {
var b2 = Buttonizer;
if(b2.on == true) {
for(var i = 0; i < 10; i++) {
var x = Math.floor(Math.random()*b2.c.width);
var y = Math.floor(Math.random()*b2.c.height);
b2.radius = Math.floor(Math.random() * b2.size + b2.size);
var offset = Math.floor(Math.random()*10);
b2.newPixel = b2.ctx2.getImageData(x, y, 1, 1);
b2.size = Math.floor(Math.random()*5+(b2.c.width / (.22*(b2.c.width)))) * 1.5;
b2.ctx.save();
b2.ctx.translate(x, y);
// color
b2.drawColor();
// png
b2.drawPNG();
b2.ctx.restore();
b2.memory = [b2.newPixel.data[0], b2.newPixel.data[1], b2.newPixel.data[2], b2.newPixel.data[3]];
b2.count++;
}
}
}, 20);
}
} // end buttonize
} // end buttonizer
As always, if you need help with anything let me know and I’ll get back to you. @newshorts if you want to get in touch