bitmap shape copy

start with image copy shape transform context paste shape

by Admiral Potato

HTML

<script src="https://unpkg.com/[email protected]/dist/lil-gui.umd.js"></script>
<script src="https://unpkg.com/[email protected]/seedrandom.min.js"></script>
<div>
	<canvas id="draw-target"></canvas>
</div>

CSS

* {
	margin: 0;
	padding: 0;
	font-family: inherit;
	font-size: inherit;
}

html,
body {
	font-size: 24px;
}
body {
	font-family: monospace;
	background-color: #000;
}

canvas {
	background-color: #111;
	width: 100%;
}

JavaScript

var drawTarget = document.getElementById('draw-target')
var drawContext = drawTarget.getContext('2d')
var gui = new lil.GUI()

// inspirations:

// https://64.media.tumblr.com/1b43b600ebab4b26c84c83cb26a9f211/24def73575514ac9-ae/s1280x1920/cd18e1eab1e8abc147d5d4214becbc627cd7e55b.jpg

// https://format-com-cld-res.cloudinary.com/image/private/s--4k4Gxbi9--/c_limit,g_center,h_65535,w_1600/fl_keep_iptc.progressive,q_95/v1/858753548a6601a8f9b5facd07714193/0277-01_2048.jpg?1600

var settings = {
	seedGradient: 674,
	seedSort: 256,
	seedRotate: 256,
	resolution: 1024,
	divisions: 8,
	// https://colorhunt.co/palette/f0a500334756082032000000
	palette0: '#f0a500',
	palette1: '#334756',
	palette2: '#082032',
	palette3: '#000000',
	loadImage () {
		console.log(arguments)
		console.log(settings)
	}
}

var params = {
	seedGradient: [0, 1024, 1],
	seedSort: [0, 1024, 1],
	seedRotate: [0, 1024, 1],
	resolution: [128, 1024, 1],
	divisions: [0, 24, 1],
}

var controllers = {}

Object.keys(settings).forEach(function (key) {
	var extra = params[key] || []
	var value = settings[key]
	var type = typeof value
	var addMethod = 'add'
	if (
		type === 'string'
		&& value.indexOf('#') === 0
	) {
		addMethod = 'addColor'
	}
	controllers[key] = gui[addMethod](settings, key, ...extra)
})

var rngForGradient = new Math.seedrandom(settings.seedGradient)
var rngForSort = new Math.seedrandom(settings.seedSort)
var rngForRotate = new Math.seedrandom(settings.seedRotate)

var rngSort = function (a, b) {
	return 0.5 - rngForSort()
}
var generateRandIndices = function (count) {
	var result = []
	for (var i = 0; i < count; i += 1) {
		result.push(i)
	}
	result.sort(rngSort)
	return result
}

var getSegmentBounds = function (index) {
	var divisions = settings.divisions
	var width = drawTarget.width / divisions
	var height = drawTarget.height / divisions
	var x = width * (index % divisions)
	var y = height * Math.floor(index / divisions)
	var halfX = (width / 2)
	var halfY = (height / 2)
	return...