Paint on Heat Distortion

Developer
Matt Popovich
Size
5,614 Kb
Views
24,288
  1. Paint on Heat Distortion Previews
  2. Paint on Heat Distortion HTML Codes
  3. Paint on Heat Distortion CSS Codes
  4. Paint on Heat Distortion JS Codes

How do I make an paint on heat distortion?

This pen is very experimental and probably will not work in any browser except recent versions of Chrome.. What is a paint on heat distortion? How do you make a paint on heat distortion? This script and codes were developed by Matt Popovich on 15 October 2022, Saturday.

Paint on Heat Distortion Previews
IQ Test

Paint on Heat Distortion - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Paint on Heat Distortion</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <main>	<canvas data-img=""></canvas>	<div class="mask">	<div class="mask-inner">	</div>	</div>
</main>
<a class="button">Clear</a>
<span class="button">	<input type="file" id="upload">
</span>
<svg xlmns="http://www.w3.org/2000/svg" version="1.1"> <filter id="heat" filterUnits="objectBoundingBox" x="0" y="0" width="100%" height="100%"> <feTurbulence id="heatturb" type="fractalNoise" numOctaves="1" seed="2"></feTurbulence> <feDisplacementMap xChannelSelector="G" yChannelSelector="B" scale="22" in="SourceGraphic"></feDisplacementMap> </filter>
</svg> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Paint on Heat Distortion - Script Codes CSS Codes

* { box-sizing: border-box; margin: 0; padding: 0;
}
body, html { height: 100%; overflow-x: hidden;
}
body { padding: 30px 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; background: -webkit-linear-gradient(top, #0f0000 0%, #230505 60%, #c30f05 92%, #ff4105 100%); background: linear-gradient(to bottom, #0f0000 0%, #230505 60%, #c30f05 92%, #ff4105 100%);
}
main { cursor: -webkit-grab; cursor: grab; width: 700px; height: 450px; -ms-flex-negative: 0; flex-shrink: 0; background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/436243/87e79ed19a288cc9b004234db8853204.jpg); background-size: cover; background-position: 100% 50%; position: relative; border: 2px solid rgba(195, 15, 5, 0.3);
}
canvas { opacity: 0; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
}
.mask { display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; mask-mode: luminance; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-backdrop-filter: hard-light; backdrop-filter: hard-light;
}
.mask-inner { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/436243/87e79ed19a288cc9b004234db8853204.jpg") 0% 0% repeat; background-size: cover; background-position: 100% 50%; -webkit-filter: url(#heat); filter: url(#heat);
}
.button { position: relative; -webkit-font-smoothing: antialiased; background-color: #0f0000; border: none; color: #fff; display: inline-block; text-align: center; font-size: 14px; font-weight: 100; text-decoration: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; letter-spacing: 2px; color: white; margin: 15px 10px 0; padding: 8px 0; width: 280px; text-transform: uppercase; -webkit-transition: all 0.1s ease-out; transition: all 0.1s ease-out; cursor: pointer;
}
.button:hover { background-color: #7d0f05; outline: 1px solid rgba(255, 255, 255, 0.3);
}

Paint on Heat Distortion - Script Codes JS Codes

'use strict';
var canvas = $('canvas')[0];
var ctx = canvas.getContext('2d');
var sketch = $('main')[0];
var sketch_style = getComputedStyle(sketch);
canvas.width = parseInt(sketch_style.getPropertyValue('width'));
canvas.height = parseInt(sketch_style.getPropertyValue('height'));
var mouse = { x: 0, y: 0 };
canvas.addEventListener('mousemove', function (e) { var c = $('canvas'); mouse.x = e.pageX - c.offset().left; mouse.y = e.pageY - c.offset().top;
}, false);
ctx.lineWidth = 40;
ctx.lineJoin = 'round';
ctx.lineCap = 'round';
ctx.strokeStyle = 'black';
canvas.addEventListener('mousedown', function (e) { ctx.beginPath(); ctx.moveTo(mouse.x, mouse.y); canvas.addEventListener('mousemove', onPaint, false);
}, false);
canvas.addEventListener('mouseup', function () { canvas.removeEventListener('mousemove', onPaint, false);
}, false);
var onPaint = function onPaint() { ctx.lineTo(mouse.x, mouse.y); ctx.stroke(); var url = canvas.toDataURL(); $('div').css({ display: 'initial', 'mask-image': 'url(' + url + ')' });
};
var timeline = new TimelineMax({ repeat: -1, yoyo: true }), feTurb = document.querySelector('#heatturb');
timeline.add(new TweenMax.to(feTurb, 8, { onUpdate: function onUpdate() { var bfX = this.progress() * 0.01 + 0.025, bfY = this.progress() * 0.003 + 0.01, bfStr = bfX.toString() + ' ' + bfY.toString(); feTurb.setAttribute('baseFrequency', bfStr); }
}), 0);
function clear() { $('div').css({ display: 'none', 'mask-image': 'none' });
}
$('.button').click(function () { ctx.clearRect(0, 0, canvas.width, canvas.height); clear();
});
document.getElementById('upload').onchange = function (e) { var imageFile = this.files[0]; var newImg = window.URL.createObjectURL(imageFile); // var newImg = $("input").value; console.log(newImg); clear(); $('main').css({ 'background': 'url("' + newImg + '")', 'background-size': 'cover', 'background-position': 'center' }); $('.mask-inner').css({ 'background': 'url("' + newImg + '")', 'background-size': 'cover', 'background-position': 'center' });
};
Paint on Heat Distortion - Script Codes
Paint on Heat Distortion - Script Codes
Home Page Home
Developer Matt Popovich
Username mpopv
Uploaded October 15, 2022
Rating 4
Size 5,614 Kb
Views 24,288
Do you need developer help for Paint on Heat Distortion?

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!

Matt Popovich (mpopv) Script Codes
Name
Make Your Own Marco Mag
Animated Email Signup Form
Text-rendering comparison
Increment Card Hover Style
Polygon-style gradient pull quote
Space Mono
MoonJS Hello World
Visual GIPHY Search
FOLLOW UR DREAMS
CSS Falling Shelf Menu
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!