Pacman Concept
Hello Guys! Welcome to Coding Torque. In this blog, I'm going to explain to you how to make Pacman concept using HTML, CSS(stylus), JavaScript(Babel) . You can use this effect on your website/portfolio to showcase any skills/features. This will be a step-by-step guide. Let's get started 🚀.
Let's go step by step:
Step 1: HTML Code
<script> type="x-shader/x-vertex" id="shader-passthrough-vertex">
varying vec2 vUv;
void main() {
vUv = uv;
gl_Position = projectionMatrix * modelViewMatrix * vec4(position,1.0);
}
</script>
<script> type="x-shader/x-fragment" id="shader-passthrough-fragment">
uniform sampler2D tDiffuse;
varying vec2 vUv;
void main() {
gl_FragColor = texture2D( tDiffuse, vec2( vUv.x, vUv.y ) );
}
</script>
<script> type="x-shader/x-fragment" id="shader-volumetric-light-fragment">
varying vec2 vUv;
uniform sampler2D tDiffuse;
uniform vec2 lightPosition;
uniform float exposure;
uniform float decay;
uniform float density;
uniform float weight;
uniform int samples;
const int MAX_SAMPLES = 100;
void main()
{
vec2 texCoord = vUv;
vec2 deltaTextCoord = texCoord - lightPosition;
deltaTextCoord *= 1.0 / float(samples) * density;
vec4 color = texture2D(tDiffuse, texCoord);
float illuminationDecay = 1.0;
for(int i=0; i < MAX_SAMPLES; i++) {
if(i == samples) {
break;
}
texCoord -= deltaTextCoord;
vec4 sample = texture2D(tDiffuse, texCoord);
sample *= illuminationDecay * weight;
color += sample;
illuminationDecay *= decay;
}
gl_FragColor = color * exposure;
}
</script>
<script> type="x-shader/x-fragment" id="shader-additive-fragment">
uniform sampler2D tDiffuse;
uniform sampler2D tAdd;
varying vec2 vUv;
void main() {
vec4 color = texture2D( tDiffuse, vUv );
vec4 add = texture2D( tAdd, vUv );
gl_FragColor = color + add;
}
</script>
<img id="map-test" src="data:image/gif;base64,R0lGODdhHAAfAPIAAAAAAAD/AAAA//8AACZFySZFySZFySZFySH5BAEAAAQALAAAAAAcAB8AAAOwOLrc/iMIAISkNahL7cyKwIhj2JDmADArq7QLrKZ0itYk5+0SL3gdzeBGupWGR2IteeQAhD3oTxp8GIsnB4YyY7q24FUrOp2+VGFMF8VNibcObBhJZ4GjaHh0nkXOsQ1gaxAkb2liGx9bFmeHXC1GC4V5bUcyLnUMOk6MEYpAIJlXS0qifaOSiVAZZT5Pql6RNkt0gHGzCxJ4nq+enWRCsqmZt8SBtE2KYK5pnRDP0AkAOw==" />
Step 2: CSS(Stylus) Code
body
overflow: hidden
//background-color: white
background: radial-gradient(ellipse at center, #000000 0%, #100B0D 99%);
img
display: noneOutput Till Now
Check Codepen for JavaScript:
See the Pen Pacman Concept by Ivan Juarez N. (@radixzz) on CodePen.
Code Credits: @radixzz
Written by: Piyush Patil
If you want me to code any project or post any specific post,
feel free to DM me at IG @code.scientist or @codingtorque
If you have any doubt or any project ideas feel free to
Contact Us
Hope you find this post helpful💖
Follow us on Instagram for more projects like
this👨💻