A Pen by François Chazal

Developer
François Chazal
Size
6,426 Kb
Views
20,240
  1. A Pen by François Chazal Previews
  2. A Pen by François Chazal HTML Codes
  3. A Pen by François Chazal CSS Codes
  4. A Pen by François Chazal JS Codes

How do I make an a pen by françois chazal?

What is a a pen by françois chazal? How do you make a a pen by françois chazal? This script and codes were developed by François Chazal on 21 September 2022, Wednesday.

A Pen by François Chazal Previews
IQ Test

A Pen by François Chazal - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>A Pen by François Chazal</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ @import url(https://fonts.googleapis.com/css?family=Roboto+Condensed:300italic,400italic,700italic,400,300,700);
html { font-size: 11px;
}
body { overflow: hidden; min-height: 100%; font: 1em/1.5em 'Roboto Condensed', sans-serif;
}
/************************************/
#about { position: fixed; left: 0px; bottom: 0px; width: 100%; height: 50px; color: #fff; background: rgba(0, 0, 0, 0.8);
}
#about-title { position: absolute; left: 25px; bottom: 25px; font-size: 2em; font-weight: 700;
}
#about-author { position: absolute; left: 25px; top: 27px; font-size: .9em; font-weight: 300;
}
#about-author a { color: inherit; text-decoration: inherit;
}
/************************************/
#console { position: fixed; top: 0px; right: 0px; width: 200px; bottom: 50px; margin: 0px; padding: 5px; background: rgba(0, 0, 0, 0.05); border-left: 2px solid rgba(0, 0, 0, 0.1); font-size: .9em; color: rgba(0, 0, 0, 0.3);
}
#console::before { display: block; content: 'CONSOLE'; font-size: 1.1rem; font-weight: bold; margin-bottom: 5px;
}
/************************************/
#content { position: fixed; top: 0px; left: 0px; width: 100%; height: 100%;
}
#content canvas { width: 100%; height: 100%; background: #fff;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <section id="content"></section>
<section id="console">
</section>
<section id="about"> <div id="about-title">Voronoï</div> <div id="about-author">an experimentation by François Chazal (<a href="twitter.com/fchazal">@fchazal</a>)</div>
</section> <script src="js/index.js"></script>
</body>
</html>

A Pen by François Chazal - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Roboto+Condensed:300italic,400italic,700italic,400,300,700);
html { font-size: 11px;
}
body { overflow: hidden; min-height: 100%; font: 1em/1.5em 'Roboto Condensed', sans-serif;
}
/************************************/
#about { position: fixed; left: 0px; bottom: 0px; width: 100%; height: 50px; color: #fff; background: rgba(0, 0, 0, 0.8);
}
#about-title { position: absolute; left: 25px; bottom: 25px; font-size: 2em; font-weight: 700;
}
#about-author { position: absolute; left: 25px; top: 27px; font-size: .9em; font-weight: 300;
}
#about-author a { color: inherit; text-decoration: inherit;
}
/************************************/
#console { position: fixed; top: 0px; right: 0px; width: 200px; bottom: 50px; margin: 0px; padding: 5px; background: rgba(0, 0, 0, 0.05); border-left: 2px solid rgba(0, 0, 0, 0.1); font-size: .9em; color: rgba(0, 0, 0, 0.3);
}
#console::before { display: block; content: 'CONSOLE'; font-size: 1.1rem; font-weight: bold; margin-bottom: 5px;
}
/************************************/
#content { position: fixed; top: 0px; left: 0px; width: 100%; height: 100%;
}
#content canvas { width: 100%; height: 100%; background: #fff;
}

A Pen by François Chazal - Script Codes JS Codes

requireScripts([]);
/* BEGIN LOADING BLOCK ***********************/
addEvent(window, "pageReady", function() { Console.init('#console'); Canvas.init('#content'); Voronoi.init(); Voronoi.addPoint(new Point(60, 120)); /* Voronoi.addPoint(new Point(110, 160)); Voronoi.addPoint(new Point(130, 130)); Voronoi.addPoint(new Point(110, 70)); Voronoi.addPoint(new Point(110, 145)); Voronoi.addPoint(new Point(50, 135)); */ /* var segment = new Segment(Canvas.points[0], Canvas.points[1]); segment.limits = [-2.8,1.2]; Canvas.segments.push(segment);
*/
});
/* END LOADING BLOCK *************************/
/* OBJECT : Point
**********************************************/
var Point = function(x, y) { this.x = x; this.y = y; this.cell = new Cell(this);
};
Point.prototype = { x: 0, y: 0, cell: null, draw: function(context) { Console.info('P('+this.x+', '+this.y+')'); context.fillStyle = '#dddddd'; context.lineWidth = 0.5; context.strokeStyle = '#888888'; context.beginPath(); context.arc(this.x, this.y, 2, 0, 2 * Math.PI, false); context.fill(); context.stroke(); context.closePath(); }
};
/* OBJECT : Vector
**********************************************/
var Vector = function(x, y) { this.x = x; this.y = y;
};
Vector.prototype = { x: 0, y: 0, length: function() { return Math.sqrt(Math.pow(this.x,2) + Math.pow(this.y,2)); }, normal: function() { return new Vector(-this.y, this.x); }
};
/* OBJECT : Segment
**********************************************/
var Segment = function(P1, P2) { if (!P1 || !P2) return ; this.generators = [P1, P2]; this.origin = Tools.getMiddlePoint(P1, P2); this.direction = Tools.getNormalVector(P1, P2);
};
Segment.prototype = { generators: [], origin: null, direction: null, limits: [0, 0], draw: function(context) { Console.info('S('+this.origin.x+' + k*'+this.direction.x+', '+this.origin.y+' + k*'+this.direction.y+')'); context.lineWidth = 0.5; context.strokeStyle = '#cc0000'; context.beginPath(); context.moveTo(this.origin.x + this.limits[0] * this.direction.x, this.origin.y + this.limits[0] * this.direction.y) context.lineTo(this.origin.x + this.limits[1] * this.direction.x, this.origin.y + this.limits[1] * this.direction.y) context.stroke(); context.closePath(); }
};
/* OBJECT : Cell
**********************************************/
var Cell = function(P) { this.generator = P;
};
Cell.prototype = { generator: null, segments: []
};
/* ELEMENT : Voronoi
**********************************************/
var Voronoi = { box: [], points: [], segments: [], init: function(min_X, min_Y, max_X, max_Y) { this.box.push(Tools.getSegment(0,0,0,1,0,500)); this.box.push(Tools.getSegment(0,0,1,0,0,500)); this.box.push(Tools.getSegment(500,0,0,1,0,500)); this.box.push(Tools.getSegment(0,500,1,0,0,500)); }, addPoint: function(point) { var tmp_segments = []; // Stops everything if single point if (this.points.length < 1) { this.points.push(point); return null; } // Get distance to all existing points and determine the closest var min = null; var distance = []; for (var i = 0; i < this.points.length; i++) { distance.push(Tools.getDistance(this.points[i], point)); if (!i || distance[i] < distance[min]) min = i; } // Define first neighbour cell var elt = Voronoi.getNextSegment(this.points[min], point); this.segments.push(elt.segment); // Select the two best limits and update //this.cells.push(cell); this.points.push(point); }, getNextSegment: function(cur_point, point) { var cur_cell = cur_point.cell; // Get intersection limits for all existing segments of closest point cell var segment = new Segment(cur_point, point); var intersections = []; var min = -1; var max = -1; for (var i=0; i<this.segments.length; i++) { var solution = Tools.getIntersection(segment, this.segments[i]); try { if (solution[0] < 0 && (min<0 || intersections[min][0] < solution[0])) min = i; if (solution[0] >= 0 && (max<0 || intersections[max][0] > solution[0])) max = i; } catch(e) { /* solution is null */ } intersections.push(solution); } for (var j=0; j<this.box.length; j++) { var solution = Tools.getIntersection(segment, this.box[j]); try { if (solution[0] < 0 && (min<0 || intersections[min][0] < solution[0])) min = i+j; if (solution[0] >= 0 && (max<0 || intersections[max][0] > solution[0])) max = i+j; } catch(e) { /* solution is null */ } intersections.push(solution); } segment.limits = [intersections[min][0], intersections[max][0]]; return { min: min, max: max, segment: segment, intersections: intersections }; }, draw: function(context) { Console.info(this.points.length + " BORDERS"); for (var id = 0; id < this.box.length; id++) { this.box[id].draw(context); } Console.info(''); Console.info(this.points.length + " POINTS"); for (var id = 0; id < this.points.length; id++) { this.points[id].draw(context); } Console.info(''); Console.info(this.segments.length + " SEGMENTS"); for (var id = 0; id < this.segments.length; id++) { this.segments[id].draw(context); } }
}
/* ELEMENT : Tools
**********************************************/
var Tools = { // POINTS ////////////////////////////////// getDistance: function(P1, P2) { return Math.sqrt(Math.pow(P2.x-P1.x,2) + Math.pow(P2.y-P1.y,2)); }, getMiddlePoint: function(P1, P2) { return new Point((P1.x + P2.x) / 2 , (P1.y + P2.y) / 2); }, // VECTORS ///////////////////////////////// getVector: function(P1, P2) { return new Vector(P2.x - P1.x, P2.y - P1.y); }, getNormalVector: function(P1, P2) { return new Vector(P1.y - P2.y, P2.x - P1.x); }, // SEGMENTS //////////////////////////////// getSegment: function(P_x, P_y, v_x, v_y, min, max) { var segment = new Segment(); segment.limits = [min, max]; segment.origin = new Point(P_x, P_y); segment.direction = new Vector(v_x, v_y); return segment; }, getIntersection: function(S1, S2) { var P1 = S1.origin, V1 = S1.direction; var P2 = S2.origin, V2 = S2.direction; var n = P1.y - P2.y + V1.y * (P2.x - P1.x) / V1.x; var d = V2.y - (V1.y * V2.x) / V1.x; var L2 = n / d; var L1 = (P2.x - P1.x) / V1.x + L2 * V2.x / V1.x; if (L2 < S2.limits[0] || L2 > S2.limits[1]) return null; return [L1, L2]; },
}
/* ELEMENT : Canvas
**********************************************/
var Canvas = { domElement: null, context: null, segments: [], points: [], cells: [], init: function(id) { var container = document.querySelector(id); this.domElement = document.createElement('canvas'); addEvent(window, 'resize', this.resize, this); addEvent(this.domElement, 'click', this.mousedown, this); container.appendChild(this.domElement); this.resize(); this.context = this.domElement.getContext('2d'); this.update(); }, resize: function() { this.domElement.width = this.domElement.offsetWidth; this.domElement.height = this.domElement.offsetHeight; }, mousedown: function(event) { Voronoi.addPoint(new Point(event.clientX, event.clientY)); }, update: function() { Console.clear(); this.context.clearRect(0, 0, this.domElement.width, this.domElement.height); Voronoi.draw(this.context); var self = this; this.getAnimationFrame()(function() { self.update() }); }, getAnimationFrame: function() { return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (callback) { window.setTimeout(callback, 1000 / 60) }; }
}
/* ELEMENT : Console
**********************************************/
var Console = { element: null, init: function(id) { this.element = document.querySelector(id); }, info: function(html) { this.element.innerHTML += html+'<br>'; }, clear: function(html) { this.element.innerHTML = ''; }
}
/* LIBRARY : Object Extension
***********************************************/
Object.prototype.extend = function(parent, overrides)
{ var object = this; var parent = parent || Object; var overrides = overrides || {}; object.prototype = parent.prototype; object.prototype.constructor = object; object.prototype.parent = parent; object.parent = parent; for (i in overrides) object.prototype[i] = overrides[i];
}
/* LIBRARY : Requirements Management
***********************************************/
function requireScripts(list) { var dom = false; var scripts = []; for (var id in list) scripts.push({ url: list[id], loaded: false }); function onScriptReady(evt) { scripts[evt.target.getAttribute('data-ID')].loaded = true; checkReadyState(); } function onDomReady(evt) { dom = true; checkReadyState(); } function checkReadyState() { var ready = dom; for (i=0; i<scripts.length; i++) { ready = ready && scripts[i].loaded; } if (ready) fireEvent(window, 'pageReady'); } for (var id in scripts) { var domElement = document.createElement('script'); domElement.type = 'text/javascript'; domElement.setAttribute('data-ID', id); domElement.src = scripts[id].url + '?' + (new Date().getTime()); addEvent(domElement, 'load', onScriptReady); addEvent(domElement, 'readystatechange', onScriptReady); document.getElementsByTagName('head')[0].appendChild(domElement); } addEvent(window, 'DOMContentLoaded', onDomReady);
}
/* LIBRARY : Event Management
***********************************************/
function addEvent(eventTrigger, eventName, eventHandler, scopeElement) {	var scopedEventHandler = null;	if (scopeElement === undefined)	scopedEventHandler = eventHandler; else scopedEventHandler = function(e) { eventHandler.apply(scopeElement, [e]); } eventTrigger.addEventListener(eventName, scopedEventHandler, false);
}
function fireEvent(eventTrigger, eventName, eventData) {	var evt = null;	if (typeof Event !== 'undefined') {	evt = new Event(eventName);	} else {	evt = document.createEvent("Event");	evt.initEvent(eventName, true, true);	} evt.data = eventData; eventTrigger.dispatchEvent(evt);
}
function removeEvent(eventTrigger, eventName, eventHandler) { eventTrigger.removeEventListener(eventName, eventHandler, false);
}
A Pen by François Chazal - Script Codes
A Pen by François Chazal - Script Codes
Home Page Home
Developer François Chazal
Username fchazal
Uploaded September 21, 2022
Rating 3
Size 6,426 Kb
Views 20,240
Do you need developer help for A Pen by François Chazal?

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!

François Chazal (fchazal) Script Codes
Name
Ribbon Animated Effect
Hexagona
HExa
Folding Panel
World
Penrose Triangle CSS
The Cube
WebTechs Animated Logo
Parallax Scrolling
Logo
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!