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 |
Dat.GUI | 14,895 Kb |
Kira Kira Particle Effects | 4,616 Kb |
WonderHTML5Wall | 8,439 Kb |
Abstriangulation | 5,794 Kb |
Gravity Points | 5,148 Kb |
Elastic String | 17,622 Kb |
Lightning | 19,150 Kb |
Noise Abstraction | 16,664 Kb |
Duotone Sketch | 56,080 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 |
Filtering with shuffle.js | Deyand | 2,712 Kb |
Nice responsive team page | Infomiho | 3,139 Kb |
A Pen by Shidhin | Shidhincr | 5,015 Kb |
A Different Type of Gallery | DonPage | 2,950 Kb |
Typefaces with descriptions | Megandoty | 2,944 Kb |
Social Profiles | Lachlanjc | 1,939 Kb |
TweetBox with React JS | J0zelito | 3,325 Kb |
Beautiful canvas stars | Matths | 2,399 Kb |
Spiralator 9000 | AdmiralPotato | 4,671 Kb |
A simple log in form made with css | Mayurelbhar | 2,160 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!