A Pen by Kevin

Developer
Kevin
Size
2,831 Kb
Views
24,288
  1. A Pen by Kevin Previews
  2. A Pen by Kevin HTML Codes
  3. A Pen by Kevin CSS Codes
  4. A Pen by Kevin JS Codes

How do I make an a pen by kevin?

Unfinished proof of concept. I came up with the idea of making a canvas maze game that uses images of drawn mazes, or any images. The goal was to take a movable piece and have it navigate through a thresholded image, being able to move freely through white areas, but not black areas. Starting with an image, each pixel of the image is converted into either black or white depending on the overall RGB values of the pixel. The green circle is moved with WASD and is only able to move in any given direction if the pixel in that direction are white.. What is a a pen by kevin? How do you make a a pen by kevin? This script and codes were developed by Kevin on 27 August 2022, Saturday.

A Pen by Kevin Previews
IQ Test

A Pen by Kevin - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>A Pen by Kevin</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <canvas id = "canvas"></canvas>
<canvas id = "bgMap"></canvas> <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

A Pen by Kevin - Script Codes CSS Codes

body{ margin: 0;
}
#canvas, #bgMap { display: block; position: absolute; height: 100vh; width: 100vw;
}
#bgMap{ z-index: -1
}

A Pen by Kevin - Script Codes JS Codes

function draw() { var canvas = document.getElementById("canvas"); var bgMap = document.getElementById("bgMap"); canvas.width = window.innerWidth; canvas.height = window.innerHeight; bgMap.width = window.innerWidth; bgMap.height = window.innerHeight; if (canvas.getContext) { var ctx = canvas.getContext("2d"); var mapCtx = bgMap.getContext("2d"); ctx.fillStyle = "green"; var player = { xPos: 100, yPos: 100 }; var catImage; var catData; //65 A, 87 W, 83 S, 68 D var keysDown = {}; $(document).on('keydown', function(e) { keysDown[e.keyCode] = true; }); $(document).on('keyup', function(e) { keysDown[e.keyCode] = false; }); mapCtx.fillStyle = "white"; mapCtx.fillRect(0, 0, canvas.width, canvas.height); function drawImage() { mapCtx.drawImage(imageObj,100, 0); catImage = mapCtx.getImageData(0, 0, canvas.width, canvas.height); catData = catImage.data; mapCtx.fillStyle = "white"; mapCtx.fillRect(0,0,canvas.width,canvas.height); threshold(); } function threshold() { for (var x = 0; x < catData.length; x += 4) { var brightness = 0.34 * catData[x] + 0.5 * catData[x + 1] + 0.16 * catData[x + 2]; // red if (brightness > 90) { catData[x] = 255; catData[x+1] = 255; catData[x+2] = 255; } else { catData[x] = 0; // green catData[x + 1] = 0; // blue catData[x + 2] = 0; catData[x + 3] = 255; } } mapCtx.putImageData(catImage, 0, 0); } function checkIfWhite(x, y) { var checkMap = mapCtx.getImageData(x, y, 1, 1); var cmData = checkMap.data; if (cmData[1] < 1) { return false; } return true; } function movePlayer() { if (keysDown[65]) { if (checkIfWhite(player.xPos - 1, player.yPos)) { player.xPos -= 1; } } if (keysDown[68]) { if (checkIfWhite(player.xPos + 1, player.yPos)) { player.xPos += 1; } } if (keysDown[87]) { if (checkIfWhite(player.xPos, player.yPos - 1)) { player.yPos -= 1; } } if (keysDown[83]) { if (checkIfWhite(player.xPos, player.yPos + 1)) { player.yPos += 1; } } ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.beginPath(); ctx.arc(player.xPos, player.yPos, 5, 0, Math.PI * 2); ctx.fill(); requestAnimationFrame(movePlayer) } movePlayer(); var imageObj = new Image(); imageObj.src = 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/542135/Maze.gif'; imageObj.crossOrigin = "Anonymous"; imageObj.onload = function() { drawImage(); } }
}
draw();
A Pen by Kevin - Script Codes
A Pen by Kevin - Script Codes
Home Page Home
Developer Kevin
Username KevinBruland
Uploaded August 27, 2022
Rating 3
Size 2,831 Kb
Views 24,288
Do you need developer help for A Pen by Kevin?

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!

Kevin (KevinBruland) Script Codes
Name
Canvas Spiral Loader
Simon
Canvas Gears
Pomodoro Clock
Twitch
Calculator
CSS Transform Sphere
Memory
Canvas Optical Illusion
Canvas Mouse Position Radial Gradient
Create amazing marketing copy 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!