Scharinteract

Developer
Timo Hausmann
Size
3,392 Kb
Views
24,288
  1. Scharinteract Previews
  2. Scharinteract HTML Codes
  3. Scharinteract CSS Codes
  4. Scharinteract JS Codes

How do I make an scharinteract?

Interactive Geradenschar. What is a scharinteract? How do you make a scharinteract? This script and codes were developed by Timo Hausmann on 16 October 2022, Sunday.

Scharinteract Previews
IQ Test

Scharinteract - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Scharinteract</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <canvas id="canvas" width="800" height="600"></canvas> <script src="js/index.js"></script>
</body>
</html>

Scharinteract - Script Codes CSS Codes

body {	margin: 0;
}
canvas { display: block;
}

Scharinteract - Script Codes JS Codes

/* * Scharinteract.js * @version 1.0 * @author Timo Hausmann <[email protected]> * @licence The MIT License (MIT) * @repository https://github.com/timohausmann/scharinteract.js */
/** * Factor for converting degree values into radian. */
Math.TO_RAD = Math.PI/180;
/** * return a random number within given boundaries. * * @param {number} min	the lowest possible number * @param {number} max	the highest possible number * @param {boolean} round	if true, return integer * @return {number}	a random number */
Math.randMinMax = function(min, max, round) {	var val = min + (Math.random() * (max - min));	if( round ) val = Math.round( val );	return val;
};
(function(window, Math) {	/* * DOM */	var	canvas = document.querySelector('#canvas'),	ctx = canvas.getContext('2d');	/* * Parameters */	var	line_lifetime = 2000, //Lebensdauer einer Linie (in ms)	degree_delta = 0.5, //Gradaenderung pro Iteration	line_len_delta = 3, //Groessenaenderung pro Iteration	line_pos_delta = 1.5; //Positionsaenderung pro Iteration	/* * Runtime Variables */	var	degree = 0, //aktuelle Gradzahl	lines = [], //Array fuer unsere Linien	mouseX = 0, //Mausposition X	mouseY = 0; //Mausposition Y	/* * setup */	function setup() {	canvas.width = window.innerWidth;	canvas.height = window.innerHeight;	canvas.addEventListener('mousemove', function(e) {	mouseX = e.offsetX || e.layerX,	mouseY = e.offsetY || e.layerY;	});	mouseX = canvas.width/2,	mouseY = canvas.height/2;	}	/* * draw */	function draw() {	var currLine;	ctx.fillStyle = 'white';	ctx.fillRect(0,0,canvas.width,canvas.height);	//degree laeuft von 0 bis endlos.	degree += degree_delta;	//Neue Linie an Position mouseX, mouseY mit gegebener Drehung erstellen.	//sin(radians(degree)) pendelt zwischen -1 und 1 hin und her; durch die *360 schliesslich zwischen -360 und +360.	//Mit der 45 wird dafuer gesorgt, dass die Endstellungen des Pendelns diagonal sind, also -315 und +405	lines.push( new Line(mouseX, mouseY, 45 + (Math.sin(degree * Math.TO_RAD) * 360)) );	//ueber alle Linien loopen ...	for(var i=0;i<lines.length;i++) {	currLine = lines[i];	if( currLine.isDead() ) continue;	//Linie aktualisieren und malen	currLine.update();	currLine.paint( ctx );	}	window.requestAnimationFrame( draw );	}	/* * Line * @param float _x X-Position * @param float _x Y-Position * @param float _degree Drehung in Grad */	function Line(x, y, degree) {	this.birth	= new Date(), //Zeitpunkt der Erstellung (in ms)	this.age	= 0, //Derzeitige Lebensdaur (in ms)	this.x	= x, //X-Position	this.y	= y, //Y-Position	this.len	= Math.randMinMax(300,400), //Laenge	this.degree	= degree; //Drehung in Grad	}	/* * Line.prototype */	Line.prototype = {	/* * Line.update * Diese Funktion aktualisiert lediglich die Werte der Linie */	update : function() {	//Alter aktualisieren	this.age = new Date() - this.birth;	//Linienlaenge aktualisieren	this.len += line_len_delta;	//Position aktualisieren	this.x += (Math.sin( degree * Math.TO_RAD ) * line_pos_delta);	this.y -= (Math.cos( degree * Math.TO_RAD ) * line_pos_delta);	},	/* * Line.paint * Diese Funktion zeichnet die Linie */	paint : function( ctx ) {	//Alphawert anhand des Alters bestimmen	var alpha = 1 - (this.age/2000);	//Da x und y nur den Mittelpunkt der Linie beschreiben,	//muessen wir die Linie mithilfe der Gradzahl eine halbe Laenge weitterrechnen.	//Diese Werte addieren und subtrahieren wir dann pro Achse einmal,	//um Start- und Endpunkt zu erhalten.	var len_x = (Math.cos( this.degree * Math.TO_RAD ) * (this.len/2));	var len_y = (Math.sin( this.degree * Math.TO_RAD ) * (this.len/2));	ctx.strokeStyle = 'rgba(0,0,0,' + alpha + ')';	ctx.beginPath();	ctx.moveTo(this.x + len_x, this.y + len_y);	ctx.lineTo(this.x - len_x, this.y - len_y);	ctx.closePath();	ctx.stroke();	},	/* * Line.isDead * @return boolean true, wenn Lebensdauer der Linie ueberschritten */	isDead : function() {	return ( this.age > line_lifetime );	}	};
window.setTimeout(function() {	setup();	draw();
}, 100);
})(window, Math);
Scharinteract - Script Codes
Scharinteract - Script Codes
Home Page Home
Developer Timo Hausmann
Username timohausmann
Uploaded October 16, 2022
Rating 4
Size 3,392 Kb
Views 24,288
Do you need developer help for Scharinteract?

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!

Timo Hausmann (timohausmann) Script Codes
Name
IPad Page Flip
Vector Based Movement
Another Particle Demo
CSS3 3D Particles
Use your mousewheel
Single Element Spinner
CSS3 Butterfly
Particle Button
Tekken Particles
Depth First Search Maze
Create amazing blog posts 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!