Rasterization

Developer
Khalkeus
Size
3,615 Kb
Views
12,144
  1. Rasterization Previews
  2. Rasterization HTML Codes
  3. Rasterization CSS Codes
  4. Rasterization JS Codes

How do I make an rasterization?

What is a rasterization? How do you make a rasterization? This script and codes were developed by Khalkeus on 11 November 2022, Friday.

Rasterization Previews
IQ Test

Rasterization - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>rasterization</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div>	<p>Original image: <a href="https://en.wikipedia.org/wiki/File:Gentileschi_judith1.jpg">Judith and Her Maidservant</a></p>	<p>Inspired by the rasterization examples from the <a href="http://paperjs.org/examples/">paper.js</a> docs.</p>	<p>Use arrow keys switch rasterization styles.</p>
</div>
<canvas id = "c"></canvas> <script src="js/index.js"></script>
</body>
</html>

Rasterization - Script Codes CSS Codes

body, html{	width: 100%;	height: 100%;	margin: 0px;	padding: 0px;	overflow: hidden;	font-family: courier;
}
canvas{	width: 100%;	height: 100%;	z-index: -1;
}
div{	margin: 20px;	font-size: 10px;	position: absolute;
}
p{	margin: 0px;	margin-bottom: 10px;	width: 30%;	background-color: white;	padding: 5px;
}
a{	color: black;
}
a:hover{	color: white;	background-color: black;
}

Rasterization - Script Codes JS Codes

var canvas, ctx, img, imgData;
var gridSize = 1;
var currentRasterizationFunction = 2;
var rasterizer;
var rasterizations = [	// Halftone inspired rasterization- draws black squares of varying sizes based on color	function(){	this.gridSize = 10;	this.init = function () {	gridSize = this.gridSize;	getData();	ctx.fillStyle = 'white';	ctx.fillRect(0, 0, canvas.width, canvas.height);	}	this.init();	this.update = function(){	for(var i = 0; i < 50; i++){	var px = randomInt(0, imgData[0].length);	var py = randomInt(0, imgData.length);	var color = Math.floor((255 - (imgData[py][px]))*gridSize/255);	ctx.fillStyle = 'black';	ctx.fillRect(px * gridSize - color/2, py * gridSize - color/2, color, color);	}	}	},	// Random walkers that leave greyscale dots and move on a 45 degree rotated grid	function () {	this.walkers = [];	this.gridSize = 1;	this.walker = function (){	this.active = true;	this.x = Math.floor(imgData[0].length/gridSize/2);	this.y = Math.floor(imgData.length/gridSize/2);	this.dx = Math.random() > .5 ? 1 : -1;	this.dy = Math.random() > .5 ? 1 : -1;	this.init = function(){	this.x = Math.floor(imgData[0].length/gridSize/2);	this.y = Math.floor(imgData.length/gridSize/2);	this.dx = randomInt(-1, 2);	this.dy = randomInt(-1, 2);	}	this.update = function () {	if(this.active){	this.x = Math.floor(this.x);	this.y = Math.floor(this.y);	// Draw	if(imgData[this.y] != undefined && imgData[this.y][this.x] != undefined){	var c = imgData[this.y][this.x].toString(16);	ctx.fillStyle = '#' + c + c + c;	ctx.fillRect(this.x * gridSize, this.y * gridSize, Math.ceil(gridSize/2), Math.ceil(gridSize/2));	this.x += this.dx;	this.y += this.dy;	}	// Randomly change direction	if(Math.random() < Math.random()/5){	this.dx = Math.random() > .5 ? 1 : -1;	this.dy = Math.random() > .5 ? 1 : -1;	}	// Randomly reset or deactivate	if(Math.random() < Math.random()/500){	if(Math.random() < Math.random()){	this.init();	}else{	this.active = false;	}	}	}	}	}	// Initialize and get data for correct size	this.init = function () {	gridSize = this.gridSize;	getData();	ctx.fillStyle = 'white';	ctx.fillRect(0, 0, canvas.width, canvas.height);	ctx.fillStyle = 'black';	for(var i = 0; i < 100; i++){	this.walkers.push(new this.walker());	}	}	this.init();	this.update = function(){	for(var i = 0; i < this.walkers.length; i++){	this.walkers[i].update();	}	}	},	// Random walkers on a grid	function () {	this.walkers = [];	this.gridSize = 2;	this.walker = function (){	ctx.lineWidth = gridSize;	this.active = true;	this.x = Math.floor(imgData[0].length/gridSize/2);	this.y = Math.floor(imgData.length/gridSize/2);	this.dx = randomInt(-1, 2);	this.dy = Math.abs(this.dx) > 0 ? 0 : randomInt(-1, 2);	this.init = function(){	this.x = Math.floor(imgData[0].length/gridSize/2);	this.y = Math.floor(imgData.length/gridSize/2);	if(Math.random() < .5){	this.dx = randomInt(-1, 2);	this.dy = Math.abs(this.dx) > 0 ? 0 : randomInt(-1, 2);	}else{	this.dy = randomInt(-1, 2);	this.dx = Math.abs(this.dy) > 0 ? 0 : randomInt(-1, 2);	}	}	this.update = function () {	if(this.active){	this.x = Math.floor(this.x);	this.y = Math.floor(this.y);	// Draw	if(imgData[this.y] != undefined && imgData[this.y][this.x] != undefined){	var c = imgData[this.y][this.x].toString(16);	ctx.strokeStyle = '#' + c + c + c;	ctx.beginPath();	ctx.moveTo(this.x * gridSize, this.y * gridSize);	ctx.lineTo(this.x * gridSize + ((gridSize*gridSize) * this.dx), this.y * gridSize + ((gridSize*gridSize) * this.dy));	ctx.stroke();	this.x += this.dx * gridSize;	this.y += this.dy * gridSize;	}	// Change directions at random	if(Math.random() < Math.random()/10){	if(Math.random() < .5){	this.dx = randomInt(-1, 2);	this.dy = Math.abs(this.dx) > 0 ? 0 : randomInt(-1, 2);	}else{	this.dy = randomInt(-1, 2);	this.dx = Math.abs(this.dy) > 0 ? 0 : randomInt(-1, 2);	}	}	// Deactivate or re-initialize at random	if(Math.random() < Math.random()/500){	if(Math.random() < Math.random()){	this.init();	}else{	this.active = false;	}	}	}	}	}	this.init = function () {	gridSize = this.gridSize;	getData();	ctx.fillStyle = 'white';	ctx.fillRect(0, 0, canvas.width, canvas.height);	ctx.fillStyle = 'black';	for(var i = 0; i < 200; i++){	this.walkers.push(new this.walker());	}	}	this.init();	this.update = function(){	for(var i = 0; i < this.walkers.length; i++){	this.walkers[i].update();	}	}	},	// Draws randomly sized and opacity'd circles to match target image (color)	function(){	this.gridSize = 5;	this.init = function () {	gridSize = this.gridSize;	getData();	ctx.fillStyle = 'white';	ctx.fillRect(0, 0, canvas.width, canvas.height);	}	this.init();	this.update = function(){	for(var i = 0; i < 100; i++){	var px = randomInt(0, imgData[0].length);	var py = randomInt(0, imgData.length);	ctx.globalAlpha = Math.random();	var targetColor = Math.floor(((imgData[py][px])));	var currentColor = ctx.getImageData(px * gridSize, py * gridSize, 1, 1).data;	currentColor = (currentColor[0] + currentColor[1] + currentColor[2])/3;	if(Math.abs(targetColor - currentColor) > 10){	if(targetColor < currentColor){	ctx.fillStyle = 'black';	}else{	ctx.fillStyle = 'white';	}	ctx.beginPath();	ctx.arc(px * gridSize, py * gridSize, randomFloat(.1, 5), 0, Math.PI * 2);	ctx.fill();	}	}	}	},
];
function randomFloat(a, b){	return (Math.random() * (b - a) + a);
}
function randomInt(a, b) {	return Math.floor(randomFloat(a, b))
}
window.onresize = function () {	canvas.width = window.innerWidth;	canvas.height = window.innerHeight;	init();
}
window.onkeydown = function(e) {	if(e.keyCode === 37){	inc(-1);	}else if(e.keyCode === 39){	inc(1);	}
}
function inc(dir) {	if(dir > 0){	if(currentRasterizationFunction === rasterizations.length - 1){	currentRasterizationFunction = 0;	}else{	currentRasterizationFunction++;	}	}else{	if(currentRasterizationFunction > 0){	currentRasterizationFunction--;	}else{	currentRasterizationFunction = rasterizations.length - 1;	}	}	init();
}
window.onload = function () {	init();
}
function getData() {	canvas = document.getElementById('c');	canvas.width = window.innerWidth;	canvas.height = window.innerHeight;	img = new Image();	img.crossOrigin = 'Anonymous';	img.src = 'https://upload.wikimedia.org/wikipedia/commons/7/7a/Gentileschi_judith1.jpg';	ctx = canvas.getContext('2d');	ctx.fillStyle = 'white';	ctx.fillRect(0, 0, canvas.width, canvas.height);	ctx.scale(1/gridSize, 1/gridSize);	ctx.drawImage(img, (canvas.width - img.width/2)/2, (canvas.height - img.height/2)/2, img.width * .5, img.height * .5);	var tempData = ctx.getImageData(0, 0, canvas.width, canvas.height);	imgData = [];	i = 0;	for(var y = 0; y < tempData.height; y++){	imgData.push([]);	for(var x = 0; x < tempData.width; x++){	imgData[y].push(Math.floor((tempData.data[i] + tempData.data[i + 1] + tempData.data[i + 2])/3));	i += 4;	}	}	ctx.scale(gridSize, gridSize);
}
function init() {	getData();	rasterizer = new rasterizations[currentRasterizationFunction]();	update();
}
function update() {	rasterizer.update();	requestAnimationFrame(update);
}
Rasterization - Script Codes
Rasterization - Script Codes
Home Page Home
Developer Khalkeus
Username khalkeus
Uploaded November 11, 2022
Rating 3.5
Size 3,615 Kb
Views 12,144
Do you need developer help for Rasterization?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Khalkeus (khalkeus) Script Codes
Name
Fish pond
Live pixel sorting
Css loaders ii
City generator
Binary clock
Metaballs
Particle fire
Cannon.js test
Color Name Game
Capybaras
Create amazing art & images with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!