Random Paint

Developer
Oliver Kühn
Size
2,444 Kb
Views
30,360
  1. Random Paint Previews
  2. Random Paint HTML Codes
  3. Random Paint CSS Codes
  4. Random Paint JS Codes

How do I make an random paint?

Playing around with paper.js.. What is a random paint? How do you make a random paint? This script and codes were developed by Oliver Kühn on 15 November 2022, Tuesday.

Random Paint Previews
IQ Test

Random Paint - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Random Paint</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!-- This is just some very simple testing of the abilities of paper.js - check out their samples on http://paperjs.org/examples ! -->
<h2>powered by <a href="http://paperjs.org/">paper.js</a></h2>
<div class="container"> <canvas id="myCanvas" resize />
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.11.3/paper-full.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Random Paint - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Monda);
body { font: 12px Monda; margin: 0; padding: 0;
}
a { text-decoration: none; color: #333;
}
a:hover { text-decoration: underline;
}
h2 { position: absolute; left: 20px; top: 20px; margin: 0; font-size: 24px; color: #666; cursor: cursor;
}
.container { overflow: hidden;
}
#myCanvas { width: 100%; height: 100%;
}

Random Paint - Script Codes JS Codes

// helpers
function zerofill(value, width) { var fill = new Array(255).join('0'); return fill.slice(0, width - value.toString().length) + value.toString();
}
function randomColor() { return '#' + zerofill(Math.round(Math.random() * 0xFFFFFF).toString(16), 6);
}
// paper.js setup
paper.install(window);
window.onload = function() { paper.setup('myCanvas'); // Create a simple drawing tool: var tool = new Tool(); var path; var paths; // Define a mousedown and mousedrag handler tool.onMouseDown = function(event) { console.info('onMouseDown'); path = new Path(); path.style = { strokeColor: randomColor(), strokeWidth: Math.max(1, 20 * Math.random()), strokeCap: 'round' }; path.add(event.point); } tool.onMouseDrag = function(event) { path.add(event.point); } tool.onMouseUp = function(event) { path.smooth(10); } /* view.onFrame = function(event) { if (path) { for (var i=0, l=path.segments.length; i<l; i++) { var p = path.segments[i].point; var r = Math.random(); r *= Math.random() > 0.5 ? -1 : 1; path.segments[i].point = new Point(p.x + r, p.y + r); //console.info(path.segments[i].point); } } } */
}
Random Paint - Script Codes
Random Paint - Script Codes
Home Page Home
Developer Oliver Kühn
Username 0x04
Uploaded November 15, 2022
Rating 3.5
Size 2,444 Kb
Views 30,360
Do you need developer help for Random Paint?

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!

Oliver Kühn (0x04) Script Codes
Name
Pentagon loading indicator
Perforated foil
Border loading indicators
ASCIICanvas
Unicode glitching
Scanline effect
Hover rotating cube
Pure CSS Jalousien
FourPerfectlyRoundCircles
Background-blend-mode Test
Create amazing web content 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!