A Pen by Kenji Saito

Developer
Kenji Saito
Size
3,433 Kb
Views
2,024
  1. A Pen by Kenji Saito Previews
  2. A Pen by Kenji Saito HTML Codes
  3. A Pen by Kenji Saito CSS Codes
  4. A Pen by Kenji Saito JS Codes

How do I make an a pen by kenji saito?

What is a a pen by kenji saito? How do you make a a pen by kenji saito? This script and codes were developed by Kenji Saito on 31 January 2023, Tuesday.

A Pen by Kenji Saito Previews
IQ Test

A Pen by Kenji Saito - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>A Pen by Kenji Saito</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <script src="js/index.js"></script>
</body>
</html>

A Pen by Kenji Saito - Script Codes CSS Codes

@import "compass/css3";

A Pen by Kenji Saito - Script Codes JS Codes

(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
var CanvasApp = require("canvas-bako");
var myData;
var updatedImageData;
var width, height;
var xPos, yPos;
function loop(ctx, dt) { ctx.fillStyle = "0x000"; ctx.fillRect(0, 0, window.innerWidth, window.innerHeight); if (updatedImageData){ var updatedData = updatedImageData.data; for (var yy = 0; yy < height * 3; yy++) { for (var xx = 0; xx < width * 3; xx++) { var dataPos = (parseInt(xx / 3) + width * parseInt(yy / 3))* 4 + xx % 3; var curPos = (xx + 3 * width * yy) * 4; var col = myData[dataPos]; var random; random = parseInt( (Math.random() -.5) * Math.abs(yy - height *1.5) * 3 ) + parseInt( (Math.random() -.5) * Math.abs(xx - width *1.5) * 3 ); col += random; if(col > 255) col = 255; if(col < 0) col = 0; updatedData[curPos + (xx%3)] = col ; } } updatedImageData.data = updatedData; ctx.putImageData(updatedImageData, xPos, yPos); }
}
var image = new Image(); image.crossOrigin = "Anonymous";
image.src = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/13842/monariza.png";
image.addEventListener("load", onLoadedImageHandler);
function onLoadedImageHandler(ev) { width = image.width; height = image.height; xPos = (window.innerWidth - width * 3)/2; yPos = (window.innerHeight - height*3)/2; var tempCanvas = document.createElement("canvas"); tempCanvas.width = width; tempCanvas.height = height; var tempCtx = tempCanvas.getContext("2d"); tempCtx.drawImage(image, 0, 0); var imageData = tempCtx.getImageData(0, 0, width, height); myData = imageData.data; // =============== var temp2Canvas = document.createElement("canvas"); temp2Canvas.width = width * 3; temp2Canvas.height = height * 3; var temp2Ctx = temp2Canvas.getContext("2d"); updatedImageData = temp2Ctx.getImageData(0, 0, width * 3, height * 3); var updatedData = updatedImageData.data; for (var yy = 0; yy < height * 3; yy++) { for (var xx = 0; xx < width * 3; xx++) { var dataPos = (parseInt(xx / 3) + width * parseInt(yy / 3))* 4 + xx % 3; var curPos = (xx + 3 * width * yy) * 4; var col = myData[dataPos]; col += parseInt(Math.random() * 200 - 100); if(col > 255) col = 255; if(col < 0) col = 0; updatedData[curPos + (xx%3)] = col; updatedData[curPos + 3] = 255; } } updatedImageData.data = updatedData;
}
var app = new CanvasApp(loop);
app.start();
},{"canvas-bako":2}],2:[function(require,module,exports){
var addEvent = require("add-event-listener");
var CanvasBako = function (loop) { this.canvas = document.createElement("canvas"); this.ctx = this.canvas.getContext("2d"); this.width = window.innerWidth; this.height = window.innerHeight; this.canvas.width = this.width; this.canvas.height = this.height; document.body.appendChild(this.canvas); this.prev = Date.now(); if (typeof loop === "function") { this.onLoop = loop.bind(this); } else { this.onLoop = function (ctx, dt) { console.log("nothing rendered"); } } this.renderOnce = function () { var now, dt; now = Date.now(); dt = (now - this.prev) / 1000; this.onLoop(this.ctx, dt); this.prev = now; }; this._renderHanlder = function () { this.renderOnce(); this.lastFrame = requestAnimationFrame(this._renderHanlder); }.bind(this); window.addEventListener("keydown", function (e) { // escape keycode is 27. if (e.keyCode == 27 && this._isRunning) { this.stop(); } }.bind(this), false); addEvent(window, "resize", this.resize.bind(this), false);
};
CanvasBako.prototype.start = function () { this._isRunning = true; this.lastFrame = requestAnimationFrame(this._renderHanlder);
};
CanvasBako.prototype.stop = function () { this._isRunning = false; cancelAnimationFrame(this.lastFrame);
}
CanvasBako.prototype.resize = function() { var canvas = this.canvas; this.width = window.innerWidth; this.height = window.innerHeight; canvas.width = this.width; canvas.height = this.height;
};
module.exports = CanvasBako;
},{"add-event-listener":3}],3:[function(require,module,exports){
addEventListener.removeEventListener = removeEventListener
addEventListener.addEventListener = addEventListener
module.exports = addEventListener
var Events = null
function addEventListener(el, eventName, listener, useCapture) { Events = Events || ( document.addEventListener ? {add: stdAttach, rm: stdDetach} : {add: oldIEAttach, rm: oldIEDetach} ) return Events.add(el, eventName, listener, useCapture)
}
function removeEventListener(el, eventName, listener, useCapture) { Events = Events || ( document.addEventListener ? {add: stdAttach, rm: stdDetach} : {add: oldIEAttach, rm: oldIEDetach} ) return Events.rm(el, eventName, listener, useCapture)
}
function stdAttach(el, eventName, listener, useCapture) { el.addEventListener(eventName, listener, useCapture)
}
function stdDetach(el, eventName, listener, useCapture) { el.removeEventListener(eventName, listener, useCapture)
}
function oldIEAttach(el, eventName, listener, useCapture) { if(useCapture) { throw new Error('cannot useCapture in oldIE') } el.attachEvent('on' + eventName, listener)
}
function oldIEDetach(el, eventName, listener, useCapture) { el.detachEvent('on' + eventName, listener)
}
},{}]},{},[1]);
A Pen by Kenji Saito - Script Codes
A Pen by Kenji Saito - Script Codes
Home Page Home
Developer Kenji Saito
Username kenjiSpecial
Uploaded January 31, 2023
Rating 3.5
Size 3,433 Kb
Views 2,024
Do you need developer help for A Pen by Kenji Saito?

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!

Kenji Saito (kenjiSpecial) Script Codes
Name
Three.js loader cube
Gl loader.
Box, box, box.
Particle Alphabet Roulette
Gl particle sns icons.
Balls meet boxes.
Lines
Bunny Particles
Create amazing love letters 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!