Skip to content

Instantly share code, notes, and snippets.

@mikima

mikima/index.html

Created April 26, 2018 10:53
Show Gist options
  • Save mikima/11327e4e09a6d96f24cb4a746da3666e to your computer and use it in GitHub Desktop.
Save mikima/11327e4e09a6d96f24cb4a746da3666e to your computer and use it in GitHub Desktop.
Download ZIP
Dynamic mask with P5JS
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>test</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.0/p5.min.js" type="text/javascript"></script>
<script src="sketch.js" type="text/javascript"></script>
<style>
body {
padding: 0;
margin: 0;
}
canvas {
vertical-align: top;
}
</style>
</head>
<body>
</body>
</html>
Raw
sketch.js
var img;
var pg;
var lensSize = 200;
function preload() {
//Photo by Cátia Matos from Pexels
img = loadImage("assets/test_img.jpg");
}
function setup() {
createCanvas(windowWidth, windowHeight);
background('red');
img.resize(windowWidth, 0);
background(0, 100);
//create the mask
pg = createGraphics(lensSize, lensSize);
pg.pixelDensity(1);
pg.fill('blue');
pg.noStroke();
pg.ellipse(lensSize / 2, lensSize / 2, lensSize);
}
function draw() {
var newImg = createImage(lensSize, lensSize)
//get portion of iamge
newImg.copy(img, mouseX - lensSize / 2, mouseY - lensSize / 2, lensSize, lensSize, 0, 0, lensSize, lensSize);
newImg.mask(pg);
image(newImg, mouseX - lensSize / 2, mouseY - lensSize / 2);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment