(by @andrestaltz)
If you prefer to watch video tutorials with live-coding, then check out this series I recorded with the same contents as in this article: Egghead.io - Introduction to Reactive Programming.
| /** | |
| * Converts an RGB color value to HSL. Conversion formula | |
| * adapted from http://en.wikipedia.org/wiki/HSL_color_space. | |
| * Assumes r, g, and b are contained in the set [0, 255] and | |
| * returns h, s, and l in the set [0, 1]. | |
| * | |
| * @param Number r The red color value | |
| * @param Number g The green color value | |
| * @param Number b The blue color value | |
| * @return Array The HSL representation |
(by @andrestaltz)
If you prefer to watch video tutorials with live-coding, then check out this series I recorded with the same contents as in this article: Egghead.io - Introduction to Reactive Programming.
Please consider using http://lygia.xyz instead of copy/pasting this functions. It expand suport for voronoi, voronoise, fbm, noise, worley, noise, derivatives and much more, through simple file dependencies. Take a look to https://github.com/patriciogonzalezvivo/lygia/tree/main/generative
float rand(float n){return fract(sin(n) * 43758.5453123);}
float noise(float p){
float fl = floor(p);
float fc = fract(p);
| /* | |
| Another way of splitting a gulpfile into multiple files based on: | |
| http://macr.ae/article/splitting-gulpfile-multiple-files.html | |
| https://github.com/gulpjs/gulp/blob/master/docs/recipes/split-tasks-across-multiple-files.md | |
| */ | |
| 'use strict'; | |
| var gulp = require('gulp'), | |
| plugins = require('gulp-load-plugins')(), |
| // takes a {} object and returns a FormData object | |
| var objectToFormData = function(obj, form, namespace) { | |
| var fd = form || new FormData(); | |
| var formKey; | |
| for(var property in obj) { | |
| if(obj.hasOwnProperty(property)) { | |
| if(namespace) { |
| /* | |
| Copyright (c) 2015-2025 Alessandro Diaferia | |
| Permission is hereby granted, free of charge, to any person obtaining a copy | |
| of this software and associated documentation files (the "Software"), to deal | |
| in the Software without restriction, including without limitation the rights | |
| to use, copy, modify, merge, publish, distribute, sublicense, and/or sell | |
| copies of the Software, and to permit persons to whom the Software is | |
| furnished to do so, subject to the following conditions: |
| // ⚠ IMPORTANT: this is old and doesn't work for many different edge cases but I'll keep it as-is for any of you want it | |
| // ⚠ IMPORTANT: you can find more robust versions in the comments or use a library implementation such as lodash's `merge` | |
| // Merge a `source` object to a `target` recursively | |
| const merge = (target, source) => { | |
| // Iterate through `source` properties and if an `Object` set property to merge of `target` and `source` properties | |
| for (const key of Object.keys(source)) { | |
| if (source[key] instanceof Object) Object.assign(source[key], merge(target[key], source[key])) | |
| } |
| import {Directive, ElementRef, Input} from '@angular/core'; | |
| @Directive({ | |
| selector: '[background-image]' | |
| }) | |
| export class BackgroundImage { | |
| private el: HTMLElement; | |
| constructor(el: ElementRef) { | |
| this.el = el.nativeElement; |
| tinymce.init({ | |
| plugins: 'charactercount', | |
| elementpath: false | |
| }); |
| /* Breakpoints */ | |
| /* ------------------------- Source: http://blog.scur.pl/2012/06/variable-media-queries-less-css/ */ | |
| @highdensity: ~"only screen and (-webkit-min-device-pixel-ratio: 1.5)", | |
| ~"only screen and (min--moz-device-pixel-ratio: 1.5)", | |
| ~"only screen and (-o-min-device-pixel-ratio: 3/2)", | |
| ~"only screen and (min-device-pixel-ratio: 1.5)"; | |
| @mobile: ~"only screen and (max-width: 529px)"; | |
| @tablet: ~"only screen and (min-width: 530px) and (max-width: 949px)"; | |
| @desktop: ~"only screen and (min-width: 950px) and (max-width: 1128px)"; | |
| @desktop-xl: ~"only screen and (min-width: 1129px)"; |