Painting
How do I make an painting?
Http://jsdo.it/akm2/zAOw. What is a painting? How do you make a painting? This script and codes were developed by Akimitsu Hamamuro on 13 June 2022, Monday.
Painting - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Painting</title> <link href='http://fonts.googleapis.com/css?family=Anaheim' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="message">Drag mouse to paint.</div>
<canvas id='c'></canvas> <script src='js/kzymdn.js'></script> <script src="js/index.js"></script>
</body>
</html>
Painting - Script Codes CSS Codes
body { font-family: 'Anaheim', sans-serif; padding: 0; margin: 0; background: #f7f6f2; overflow: hidden; -webkit-user-select: none; -moz-user-select: none; -o-user-select: none; -ms-user-select: none; user-select: none;
}
canvas { position: absolute; top: 0; left: 0; z-index: 1;
}
#message { color: #e2e2de; font-size: 32px; text-align: center; letter-spacing: 2px; position: fixed; top: 50%; z-index: 0; width: 100%; margin-top: -0.5em; text-shadow: 0 -1px 0 #d3d3d1;
}
.dg.ac { z-index: 2;
}
Painting - Script Codes JS Codes
/** * requestAnimationFrame */
window.requestAnimationFrame = (function(){ return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (callback) { window.setTimeout(callback, 1000 / 60); };
})();
/** * Brush */
var Brush = (function() { /** * @constructor * @public */ function Brush(x, y, color, size, inkAmount) { this.x = x || 0; this.y = y || 0; if (color !== undefined) this.color = color; if (size !== undefined) this.size = size; if (inkAmount !== undefined) this.inkAmount = inkAmount; this._drops = []; this._resetTip(); } Brush.prototype = { _SPLASHING_BRUSH_SPEED: 75, x: 0, y: 0, color: '#000', size: 35, inkAmount: 7, splashing: true, dripping: true, _latestPos: null, _strokeId: null, _drops: null, isStroke: function() { return Boolean(this._strokeId); }, startStroke: function() { if (this.isStroke()) return; this._resetTip(); // http://stackoverflow.com/questions/105034/how-to-create-a-guid-uuid-in-javascript this._strokeId = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) { var r, v; r = Math.random() * 16 | 0; v = c === 'x' ? r : (r & 0x3 | 0x8); return v.toString(16); }); }, endStroke: function() { this._strokeId = this._latestPos = null; }, render: function(ctx, x, y) { var isStroke = this.isStroke(), dx, dy, i, len; if (!this._latestPos) this._latestPos = {}; this._latestPos.x = this.x; this._latestPos.y = this.y; this.x = x; this.y = y; if (this._drops.length) { var drops = this._drops, drop, sizeSq = this.size * this.size; for (i = 0, len = drops.length; i < len; i++) { drop = drops[i]; dx = this.x - drop.x; dy = this.y - drop.y; if ( (isStroke && sizeSq > dx * dx + dy * dy && this._strokeId !== drop.strokeId) || drop.life <= 0 ) { drops.splice(i, 1); len--; i--; continue; } drop.render(ctx); } } if (isStroke) { var tip = this._tip, strokeId = this._strokeId, dist; dx = this.x - this._latestPos.x; dy = this.y - this._latestPos.y; dist = Math.sqrt(dx * dx + dy * dy); if (this.splashing && dist > this._SPLASHING_BRUSH_SPEED) { var maxNum = (dist - this._SPLASHING_BRUSH_SPEED) * 0.5 | 0, r, a, sr, sx, sy; ctx.save(); ctx.fillStyle = this.color; ctx.beginPath(); for (i = 0, len = maxNum * Math.random() | 0; i < len; i++) { r = (dist - 1) * Math.random() + 1; a = Math.PI * 2 * Math.random(); sr = 5 * Math.random(); sx = this.x + r * Math.sin(a); sy = this.y + r * Math.cos(a); ctx.moveTo(sx + sr, sy); ctx.arc(sx, sy, sr, 0, Math.PI * 2, false); } ctx.fill(); ctx.restore(); } else if (this.dripping && dist < this.inkAmount * 2 && Math.random() < 0.05) { this._drops.push(new Drop( this.x, this.y, (this.size + this.inkAmount) * 0.5 * ((0.25 - 0.1) * Math.random() + 0.1), this.color, this._strokeId )); } for (i = 0, len = tip.length; i < len; i++) { tip[i].render(ctx, dx, dy, dist); } } }, dispose: function() { this._tip.length = this._drops.length = 0; }, _resetTip: function() { var tip = this._tip = [], rad = this.size * 0.5, x0, y0, a0, x1, y1, a1, cv, sv, i, len; a1 = Math.PI * 2 * Math.random(); len = rad * rad * Math.PI / this.inkAmount | 0; if (len < 1) len = 1; for (i = 0; i < len; i++) { x0 = rad * Math.random(); y0 = x0 * 0.5; a0 = Math.PI * 2 * Math.random(); x1 = x0 * Math.sin(a0); y1 = y0 * Math.cos(a0); cv = Math.cos(a1); sv = Math.sin(a1); tip.push(new Hair( this.x + x1 * cv - y1 * sv, this.y + x1 * sv + y1 * cv, this.inkAmount, this.color )); } } }; /** * Hair * @private */ function Hair(x, y, inkAmount, color) { this.x = x || 0; this.y = y || 0; this.inkAmount = inkAmount; this.color = color; this._latestPos = { x: this.x, y: this.y }; } Hair.prototype = { x: 0, y: 0, inkAmount: 7, color: '#000', _latestPos: null, render: function(ctx, offsetX, offsetY, offsetLength) { this._latestPos.x = this.x; this._latestPos.y = this.y; this.x += offsetX; this.y += offsetY; var per = offsetLength ? this.inkAmount / offsetLength : 0; if (per > 1) per = 1; else if (per < 0) per = 0; ctx.save(); ctx.lineCap = ctx.lineJoin = 'round'; ctx.strokeStyle = this.color; ctx.lineWidth = this.inkAmount * per; ctx.beginPath(); ctx.moveTo(this._latestPos.x, this._latestPos.y); ctx.lineTo(this.x, this.y); ctx.stroke(); ctx.restore(); } }; /** * Drop * @private */ function Drop(x, y, size, color, strokeId) { this.x = x || 0; this.y = y || 0; this.size = size; this.color = color; this.strokeId = strokeId; this.life = this.size * 1.5; this._latestPos = { x: this.x, y: this.y }; } Drop.prototype = { x: 0, y: 0, size: 7, color: '#000', strokeId: null, life: 0, _latestPos: null, _xOffRatio: 0, render: function(ctx) { if (Math.random() < 0.03) { this._xOffRatio += 0.06 * Math.random() - 0.03; } else if (Math.random() < 0.1) { this._xOffRatio *= 0.003; } this._latestPos.x = this.x; this._latestPos.y = this.y; this.x += this.life * this._xOffRatio; this.y += (this.life * 0.5) * Math.random(); this.life -= (0.05 - 0.01) * Math.random() + 0.01; ctx.save(); ctx.lineCap = ctx.lineJoin = 'round'; ctx.strokeStyle = this.color; ctx.lineWidth = this.size + this.life * 0.3; ctx.beginPath(); ctx.moveTo(this._latestPos.x, this._latestPos.y); ctx.lineTo(this.x, this.y); ctx.stroke(); ctx.restore(); ctx.restore(); } }; return Brush;
})();
// Initialize
(function() { // Vars var canvas, context, centerX, centerY, mouseX = 0, mouseY = 0, isMouseDown = false, brush, gui, control, guiColorCtr, guiSizeCtr, guiIsRandColorCtr; // Event Listeners function resize(e) { canvas.width = window.innerWidth; canvas.height = window.innerHeight; centerX = canvas.width * 0.5; centerY = canvas.height * 0.5; context = canvas.getContext('2d'); control.clear(); } function mouseMove(e) { mouseX = e.clientX; mouseY = e.clientY; } function mouseDown(e) { mouseX = e.clientX; mouseY = e.clientY; if (control.isRandomColor) { brush.color = randomColor(); guiColorCtr.updateDisplay(); } if (control.isRandomSize) { brush.size = random(51, 5) | 0; guiSizeCtr.updateDisplay(); } brush.startStroke(mouseX, mouseY); } function mouseUp(e) { brush.endStroke(); } var touched = false; function touchMove(e) { var t = e.touches[0]; mouseX = t.clientX; mouseY = t.clientY; } function touchStart(e) { if (touched) return; touched = true; var t = e.touches[0]; mouseX = t.clientX; mouseY = t.clientY; if (control.isRandomColor) { brush.color = randomColor(); guiColorCtr.updateDisplay(); } if (control.isRandomSize) { brush.size = random(51, 5) | 0; guiSizeCtr.updateDisplay(); } brush.startStroke(mouseX, mouseY); } function touchEnd(e) { touched = false; brush.endStroke(); } // Helpers function randomColor() { var r = random(256) | 0, g = random(256) | 0, b = random(256) | 0; return 'rgb(' + r + ',' + g + ',' + b + ')'; } function random(max, min) { if (typeof max !== 'number') { return Math.random(); } else if (typeof min !== 'number') { min = 0; } return Math.random() * (max - min) + min; } // GUI Control control = { isRandomColor: true, isRandomSize: false, clear: function(e) { context.clearRect(0, 0, canvas.width, canvas.height); brush.dispose(); } }; // Init canvas = document.getElementById('c'); brush = new Brush(centerX, centerY, randomColor()); window.addEventListener('resize', resize, false); resize(null); canvas.addEventListener('mousemove', mouseMove, false); canvas.addEventListener('mousedown', mouseDown, false); canvas.addEventListener('mouseout', mouseUp, false); canvas.addEventListener('mouseup', mouseUp, false); canvas.addEventListener('touchmove', touchMove, false); canvas.addEventListener('touchstart', touchStart, false); canvas.addEventListener('touchcancel', touchEnd, false); canvas.addEventListener('touchend', touchEnd, false); // GUI gui = new dat.GUI(); guiColorCtr = gui.addColor(brush, 'color').name('Color').onChange(function() { control.isRandomColor = false; guiIsRandColorCtr.updateDisplay(); }); guiSizeCtr = gui.add(brush, 'size', 5, 50).name('Size'); gui.add(brush, 'inkAmount', 1, 30).name('Ink Amount'); gui.add(brush, 'splashing').name('Splashing'); gui.add(brush, 'dripping').name('Dripping'); guiIsRandColorCtr = gui.add(control, 'isRandomColor').name('Random Color'); gui.add(control, 'isRandomSize').name('Random Size'); gui.add(control, 'clear').name('Clear'); gui.close(); // Start Update var loop = function() { brush.render(context, mouseX, mouseY); requestAnimationFrame(loop); }; loop();
})();

Developer | Akimitsu Hamamuro |
Username | akm2 |
Uploaded | June 13, 2022 |
Rating | 4.5 |
Size | 18,358 Kb |
Views | 44,506 |
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!
Name | Size |
WonderHTML5Wall | 8,439 Kb |
Duotone Sketch | 56,080 Kb |
Kira Kira Particle Effects | 4,616 Kb |
Dat.GUI | 14,895 Kb |
Lightning | 19,150 Kb |
Elastic String | 17,622 Kb |
Gravity Points | 5,148 Kb |
Abstriangulation | 5,794 Kb |
Noise Abstraction | 16,664 Kb |
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!
Name | Username | Size |
Airbnb Homepage | SindhujaD | 2,480 Kb |
CSS Dynamic Width Square Div | Elleestcrimi | 2,861 Kb |
Smoke Shader - Frame Buffer | Omarshe7ta | 2,672 Kb |
Headroom.js demo | WickyNilliams | 3,982 Kb |
Materializecss input form | Jasonchan | 1,443 Kb |
Spinners using Font Icons | Keyamoon | 3,007 Kb |
CSS3 iPad | Vikvarg | 1,766 Kb |
Direction-icon | Alexandremasy | 3,323 Kb |
A Pen by Michael Parenteau | Michaelparenteau | 2,133 Kb |
Material Design-Layout-Principles Practice | Fraina | 2,331 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!