How can I use the clamp function, for my h1 element, to change the font-size responsive with specific requirements.
h1 { font-size: clamp(min, ???, max); }
Only from a screen width of 576px should "clamp" increase the size of the font proportionally/responsive up to a screen width of 1200px.
#media (min-width: 576px)
{
h1 { font-size: clamp(32.44px, ???, 61.04px); }
}
Is there a formula to calculate the green area in the picture?
slope = (maxFontSize - minFontSize) / (maxWidth - minWidth)
yAxisIntersection = -minWidth * slope + minFontSize
preferredValue = yAxisIntersection[rem] + (slope * 100)[vw]
On this Website, I found the formula to calculate the value for clamp.
Linearly Scale font-size with CSS clamp() Based on the Viewport
The calculation example for my situation:
maxFontSize = 61.04px or 3,81rem
minFontSize = 32.44px or 2,0275rem
maxWidth = 1200px or 75rem
minWidth = 576px or 36rem
slope = ( 3,815 - 2,0275) / ( 75 - 36 )
slope = 1,7875 / 39
slope = 0,045833
yAxisIntersection = -36 * slope + 2,0275
yAxisIntersection = 0,3775
preferredValue = yAxisIntersection[rem] + (slope * 100)[vw]
preferredValue = 0,3775rem + 4,5833vw
clamp(2,0275rem, 0,3775rem + 4,5833vw, 3,815rem);
Temani Afif found a website where you can calculate the value.
Font-size Clamp Generator
Related
Given a certain color in HSL (let's say hsl(74,64%,59%)), I want to calculate what darker shade (with the same h and s values) gives me enough contrast to satisfy W3C color contrast requirements.
There are formulas to convert HSL to RGB (for example https://en.wikipedia.org/wiki/HSL_and_HSV#HSL_to_RGB) and to calculate the relative luminance from that RGB (for example https://www.w3.org/TR/WCAG20/#relativeluminancedef). Based on the color contrast formula (https://www.w3.org/TR/WCAG20/#contrast-ratiodef) I can calculate what the relative luminance for my other color should be.
However, then I'm stuck. I find no way to calculate back from a given relative luminance, to an HSL color with given h and s.
Using tools like https://contrast-ratio.com/ I can just decrease the lightness until it satisfies the requirements, but I would like a formula (preferably in JavaScript) to do this calculation for a large selection of colors.
(I am currently using a binary search method to find the closest value, by testing many conversions from HSL to RGB to relative lightness, but that is quite intensive plus I wonder if the conversion to RGB in between introduces inaccuracies.)
Hope this is what you need
Using the formulas in this SO answer, and below:
// Relative luminance calculations
function adjustGamma(p) {
if (p <= 0.03928) {
return p / 12.92;
} else {
return Math.pow( ( p + 0.055 ) / 1.055, 2.4 );
}
}
function relativeLuminance(rgb) {
const r = adjustGamma( rgb[0] / 255 );
const g = adjustGamma( rgb[1] / 255 );
const b = adjustGamma( rgb[2] / 255 );
return 0.2126 * r + 0.7152 * g + 0.0722 * b;
}
// Contrast calculations
function contrastRatio(a,b) {
const ratio = (a + 0.05) / (b + 0.05);
return ratio >= 1 ? ratio : 1 / ratio;
}
// Loop for correct lightness
function rgbFromHslContrast(h, s, l1, ratio) {
var inc = -0.01;
var l2 = ( ( l1 + 0.05 ) / ratio - 0.05 );
if (l2 < 0) {
l2 = ( ratio * ( l1 + 0.05 ) - 0.05 );
inc = -inc;
}
while (contrastRatio(l1, relativeLuminance(hslToRgb(h, s, l2))) < ratio) {
l2 += inc;
}
return hslToRgb(h, s, l2);
}
The function you want to call is:
const originalHslAsRgb = hslToRgb(0.2, 0.2, 0.2);
const l1 = relativeLuminance(originalHslAsRgb);
const contrastRgb = rgbFromHslContrast(0.2, 0.2, l1, 3.5) // 3.5 is minimum contrast factor we target for..
// [139, 149, 100]
// equivalent to hsl(72, 20%, 53%)
I'm trying to calculate position 2 in the illustration below.
I know position 1 from
this._end = new THREE.Vector3()
this._end.copy( this._rectanglePos )
.sub( this._circlePos ).setLength( 1.1 ).add( this._circlePos )
Where the radius of the circle is 2.2
I'm now trying to work out a position on the edge of the rectangle along this intersect.
I've found an equation written in pseudo code which I turned into this function
function positionAtEdge(phi, width, height){
let c = Math.cos(phi)
let s = Math.sin(phi)
let x = width/2
let y = height/2
if (width * Math.abs(s) < height * Math.abs(c)){
x -= Math.sign(c) * width / 2
y -= Math.tan(phi) * x
}
else{
y -= Math.sign(s) * height / 2
x -= cot(phi) * y
}
return {x, y, z: 0}
function cot(aValue){
return 1/Math.tan(aValue);
}
}
And this kind of works for the top of the rectangle but starts throwing crazy values after 90 degrees. Math didn't have a coTan function so I assumed from a little googling they meant this cot function.
Anyone know an easier way of finding this position 2 or how to convert this function into something useable.
This is a general purpose solution, which is independent of their relative position.
Live Example (JSFiddle)
function getIntersection( circle, rectangle, width, height ) {
// offset is a utility Vector3.
// initialized outside the function scope.
offset.copy( circle ).sub( rectangle );
let ratio = Math.min(
width * 0.5 / Math.abs( offset.x ),
height * 0.5 / Math.abs( offset.y )
);
offset.multiplyScalar( ratio ).add( rectangle );
return offset;
}
You don't need any transcendental functions for this.
Vsb = (Spherecenter - rectanglecenter)
P2 = rectanglecenter + ((vsb * rectangleheight * .5) / vsb.y)
Is there any option to rotate an image at the (3D) y-Axis by using the GraphicsContext in a JavaFX canvas?
I thought about applying an affine transformation. Sadly I only got that far that I was able to shear and rotate the image which does not result in the perspective I am looking for.
Thanks to 'fabian'!
The Solution is a PerspectiveTransform (Oracle documentation).
This code for example returns a Transform for the desired effect.
static PerspectiveTransform getTransform(double x, double y, double width) {
double hf = 0.3; // Height Factor (0 < hf < 1)
double df = 0.2; // Deepth-Factor (0 < df < 0.5)
double heightDif = (1 - hf) * width;
PerspectiveTransform pt = new PerspectiveTransform();
pt.setUlx(x + (df * width)); // upper left x
pt.setUly(y + heightDif); // upper left y
pt.setUrx(x + width - (df * width)); // upper right x
pt.setUry(y + heightDif); // upper right y
pt.setLlx(x); // lower left x
pt.setLly(y + width * hf + heightDif); // lower left y
pt.setLrx(x + width); // lower right x
pt.setLry(y + width * hf + heightDif); lower right y
return pt;
}
The Transform can be applyied by performing canvas.getGraphicsContext2D().setEffect(getTransform(...));
Any square image, drawn at x and y will be bend like it is shown in the picture.
I am trying to add flip and flop functionality to this demo http://www.ernestdelgado.com/public-tests/canvasphoto/demo/canvas.html
I am trying by setting scalex = -1 , its works , but this demo also has resize functionality. So author finding height and width (on resizing the image) with scalex (please check below code).
After I am assigning scalex = -1 , the canvas height and width become 0. Is there any other was of doing this?
Canvas.Img.prototype.setFlop = function() {
this.width = this._oElement.width;
this.height = this._oElement.height;
this.scalex = -1
this.setImageCoords();
}
Canvas.Img.prototype.setImageCoords = function() {
this.left = parseInt(this.left);
this.top = parseInt(this.top);
this.currentWidth = parseInt(this.width) * this.scalex;
this.currentHeight = parseInt(this.height) * this.scalex;
this._hypotenuse = Math.sqrt(Math.pow(this.currentWidth / 2, 2) + Math.pow(this.currentHeight / 2, 2));
this._angle = Math.atan(this.currentHeight / this.currentWidth); ...
afternoon all. Iv'e come across some mathematical problems that im not too good at. does anyone know how to calculate the ratio for Height against width?
Regards Phil
Here is a simple function that should give you the aspect ratio (simplified and in javascript)
function getAspectRatio(w, h)
{
var rem;
var newW = w;
var newH = h;
while (h != 0)
{
rem = w % h;
w = h;
h = rem;
}
newH = newH / w;
newW = newW / w;
alert("Aspect Ratio: " + newW + ":" + newH);
}
getAspectRatio(800,600); results in 4:3.
Hope this helps
G
EDIT: I forgot to mention, it calculates the gcd of the two numbers and does not check for division by zero, so you might want to add that. :)
Pseudo code:
newWidth = newHeight / oldHeight * oldWidth
OR
newHeight = newWidth / oldwidth * oldHeight
If you mean the aspect ratio of a height and width, it's just height / width reduced to its greatest common factor.
For instance, if your monitor is 1600 x 1200, it's 1600/1200 reduced to 4/3. To do this:
In math terms, you have to find the "Greatest Common Factor" and divide both values (1600 and 1200) by that. In this case, it's 400.
A very simple (and relatively) algorithm for this is:
for i <= min( 1600, 1200 ); i > 0; --i );
if( 1600 % i == 0 && 1200 % i == 0 ) {
minTop = 1600 / i;
minBottom = 1200 / i;
break;
}
}
Your answer is minTop / minBottom. Replace 1600 and 1200 with the width and height you want, respectively.
Basically, the algorithm goes like this: count down from the lesser of the two numbers and find the first number into which both 1600 and 1200 divide into evenly (using the mod operator, so remainder == 0). That will end up being 400. That leads you with (1600 / 400) / (1200 / 400), or 4/3.
Hope this helps; leave a comment with any questions and I'll try to help further.