Creative Coding: Junji Ito-inspired horror spiral effect with JavaScript
Here’s a tutorial on creating a Junji Ito-inspired horror spiral effect using JavaScript and HTML5 Canvas. This effect mimics the haunting…
Creative Coding: Junji Ito-inspired horror spiral effect with JavaScript
Junji Ito-inspired horror spiral effect
Here’s a tutorial on creating a Junji Ito-inspired horror spiral effect using JavaScript and HTML5 Canvas. This effect mimics the haunting spiral patterns often seen in Junji Ito’s art, creating a mesmerizing and eerie animation.
SSet Up the HTML Structure
We’ll need a simple HTML file with a canvas element for drawing the spiral and an optional image overlay (e.g., a character face).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Junji Ito Spiral Effect</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<canvas id="deformCanvas"></canvas>
<div class="center-image">
<img src="Tomie.png" alt="Tomie">
</div>
<script src="app.js"></script>
</body>
</html>Apply CSS Styling
We’ll style the page to make the canvas fill the entire screen and position an image overlay in the center. This image can represent a character with a spiral background effect, creating an eerie vibe.
body {
margin: 0;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #fff;
}
canvas {
display: block;
}
.center-image {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1;
}Create the Spiral Animation with JavaScript
The main code for the spiral effect involves drawing alternating black and white arcs in a spiral pattern and gradually rotating them to create a hypnotic effect. Here’s how it works:
window.onload = function() {
const canvas = document.getElementById('deformCanvas');
const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
let time = 0; // Time variable to control rotation speed
function drawSwirlPattern() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
// Define the center and other spiral parameters
const centerX = canvas.width / 2;
const centerY = canvas.height / 2;
const numberOfWaves = 50; // Number of spiral layers
const maxRadius = Math.min(canvas.width, canvas.height) / 2;
// Loop to draw each spiral layer
for (let i = 0; i < numberOfWaves; i++) {
ctx.beginPath();
ctx.strokeStyle = i % 2 === 0 ? '#000' : '#fff'; // Alternate between black and white
ctx.lineWidth = maxRadius / numberOfWaves; // Adjust the thickness of each spiral line
// Draw the spiral curve by incrementing the angle
for (let angle = 0; angle <= Math.PI * 6; angle += 0.01) {
const radius = (maxRadius / numberOfWaves) * i + angle * 10;
const x = centerX + radius * Math.cos(angle + time);
const y = centerY + radius * Math.sin(angle + time);
if (angle === 0) {
ctx.moveTo(x, y); // Start from the initial position
} else {
ctx.lineTo(x, y); // Draw line to the next point
}
}
ctx.stroke();
}
time += 0.06; // Control the speed of rotation
}
function animate() {
drawSwirlPattern(); // Draw the current frame
requestAnimationFrame(animate); // Request the next frame
}
animate(); // Start the animation
};Explanation of Key Elements:
Canvas Initialization: The canvas is set to fill the entire viewport.
Spiral Parameters:
- centerX and centerY define the center of the spiral.
- numberOfWaves controls the number of black and white spiral layers.
- maxRadius limits the spiral’s size to half the smaller dimension of the viewport.
Spiral Pattern:
- A loop runs to draw multiple layers, alternating colors between black and white to create the spiral effect.
- For each layer, another loop increments the angle, and the position is calculated using trigonometric functions for X and Y.
Animation:
- time variable controls the rotation speed by slightly adjusting the angle in each frame, making the spiral “rotate” over time.
Overlay an Image (Optional)
To create a horror effect similar to Junji Ito’s style, overlay an image (e.g., a character’s face) in the center of the canvas. This image will appear static while the background spiral rotates, creating a captivating contrast.
Tomie.png
.center-image {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1;
}Place the image (like “Tomie.png”) in the same directory as your HTML file, and it will appear centered above the spiral animation, creating a horror aesthetic similar to Junji Ito’s work.
Summary
This tutorial demonstrates how to recreate the Junji Ito horror spiral effect with simple JavaScript and HTML5 Canvas. By adjusting the spiral’s speed, thickness, and number of layers, you can experiment with different levels of visual intensity to create a haunting, hypnotic animation.
메타데이터
- post_id
- aa6e0c00a3cb
- slug
- creative-coding-junji-ito-inspired-horror-spiral-effect-with-javascript-aa6e0c00a3cb
- url
- https://medium.com/@banyapon/creative-coding-junji-ito-inspired-horror-spiral-effect-with-javascript-aa6e0c00a3cb
- canonical_url
- https://medium.com/@banyapon/creative-coding-junji-ito-inspired-horror-spiral-effect-with-javascript-aa6e0c00a3cb
- author_url
- https://medium.com/@banyapon
- status
- ok
- fetched_at
- 2026-08-22 07:22:41
