createCanvas(imgSrc.width, imgSrc.height);
image(imgSrc, 0, 0);<head>
<meta charset="UTF-8">
<title>Glitch Effect</title>
<link rel="stylesheet" href="css/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
</head>
<body>
<img src="./1.png" alt="" class="glitch_effect">
<script src='https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.7/p5.min.js'></script>
<script src="./js/index.js"></script>
</body>var windowW = window.innerWidth;
var windowH = window.innerHeight;
var isLoaded = false;
var glitch = void 0;
var imgElement = document.querySelector('.glitch_effect');
imgSrc = imgElement.src;
function setup() {
background(0);
createCanvas(windowW, windowH);
loadImage(imgSrc, function (img) {
glitch = new Glitch(img);
isLoaded = true;
});
}<body>
<div class="section">
<img class="glitch_effect" src="../glitch-effect/1.png" alt="">
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.7/p5.min.js'></script>
<script src="js/index.js"></script>
</body>function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
var windowW = window.innerWidth;
var windowH = window.innerHeight;
var isLoaded = false;
var glitch = void 0;
const imgSrc = document.querySelectorAll('.glitch_effect');
images.forEach(image =>{
// apply effect to each image
})
// const img = document.querySelector('.glitch_effect');
function setup() {
background(0);
createCanvas(imgSrc.width, imgSrc.height);
loadImage(imgSrc, function (img) {
glitch = new Glitch(img);
isLoaded = true;
});
image(imgSrc, 0, 0);
}
function draw() {
clear();
background(0);
if (isLoaded) {
glitch.show();
}
// fill(255, 255, 255);
// textSize(14);
// text('FPS: ' + floor(frameRate()), 20, 30);
}