Skip to content

Commit 0a1156b

Browse files
committed
:octocat: added SVG mosaic example
1 parent df18b1d commit 0a1156b

File tree

2 files changed

+167
-1
lines changed

2 files changed

+167
-1
lines changed

examples/Readme.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@
3535
- [SVG with randomly colored modules](./svgRandomColoredDots.php): a visual effect using multiple colors for the matrix modules ([#136](https://github.com/chillerlan/php-qrcode/discussions/136))
3636
- [SVG with a round shape and randomly filled quiet zone](./svgRoundQuietzone.php): example similar to the QR Codes of a certain vendor ([#137](https://github.com/chillerlan/php-qrcode/discussions/137))
3737
- [SVG with logo, custom module shapes and custom finder patterns](./svgWithLogoAndCustomShapes.php): module- and finder pattern customization ([#150](https://github.com/chillerlan/php-qrcode/discussions/150))
38-
38+
- [SVG with "jittering" modules](./svgModuleJitter.php): square modules randomly tilted to a certain degree to create a mosaic effect
3939

4040
## Other examples
4141

examples/svgModuleJitter.php

Lines changed: 166 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,166 @@
1+
<?php
2+
/**
3+
* A jitter effect for square modules (Mosaic)
4+
*
5+
* @created 17.09.2024
6+
* @author smiley <[email protected]>
7+
* @copyright 2024 smiley
8+
* @license MIT
9+
*/
10+
declare(strict_types=1);
11+
12+
use chillerlan\QRCode\{QRCode, QROptions};
13+
use chillerlan\QRCode\Data\QRMatrix;
14+
use chillerlan\QRCode\Output\QRMarkupSVG;
15+
use chillerlan\Settings\SettingsContainerInterface;
16+
17+
require_once __DIR__.'/../vendor/autoload.php';
18+
19+
20+
/*
21+
* Class definition
22+
*/
23+
24+
/**
25+
* the extended SVG output module
26+
*/
27+
class ModuleJitterSVGoutput extends QRMarkupSVG{
28+
29+
protected const ROUND_PRECISION = 5;
30+
31+
protected readonly float $sideLength;
32+
33+
public function __construct(QROptions|SettingsContainerInterface $options, QRMatrix $matrix){
34+
parent::__construct($options, $matrix);
35+
36+
// copy the value to a local property to avoid excessive magic getter calls
37+
$this->sideLength = $this->options->sideLength;
38+
}
39+
40+
// emulates JS Math.random()
41+
protected function random():float{
42+
return (random_int(0, PHP_INT_MAX) / PHP_INT_MAX);
43+
}
44+
45+
protected function module(int $x, int $y, int $M_TYPE):string{
46+
47+
// skip light modules
48+
if((!$this->options->drawLightModules && !$this->matrix->check($x, $y))){
49+
return '';
50+
}
51+
52+
// early exit on pure square modules
53+
if($this->matrix->checkTypeIn($x, $y, $this->options->keepAsSquare)){
54+
// phpcs:ignore
55+
return "M$x,$y h1 v1 h-1Z";
56+
}
57+
58+
// calculate the maximum tilt angle of the square with the previously determined side length
59+
$maxAngle = (45 - rad2deg(acos(1 / hypot($this->sideLength, $this->sideLength))));
60+
// set the maximum angle from the options and clamp between valid min/max
61+
$maxAngle = max(0, min($maxAngle, $this->options->maxAngle));
62+
// randomize the tilt angle
63+
$a = ($this->random() * $maxAngle);
64+
// calculate the opposite and adjacent sides of the triangle
65+
$opp = round((cos(deg2rad($a)) * $this->sideLength), self::ROUND_PRECISION);
66+
$adj = round((sin(deg2rad($a)) * $this->sideLength), self::ROUND_PRECISION);
67+
68+
// tilt to the left
69+
if($this->random() > 0.5){
70+
$x = round(($x + 0.5 - $opp / 2 - $adj / 2), self::ROUND_PRECISION);
71+
$y = round(($y + 0.5 - $opp / 2 + $adj / 2), self::ROUND_PRECISION);
72+
73+
// phpcs:ignore
74+
return "M$x,$y l$opp,-$adj l$adj,$opp l-$opp,$adj Z";
75+
}
76+
77+
// tilt right
78+
$x = round(($x + 0.5 - $opp / 2 + $adj / 2), self::ROUND_PRECISION);
79+
$y = round(($y + 0.5 - $opp / 2 - $adj / 2), self::ROUND_PRECISION);
80+
81+
// phpcs:ignore
82+
return "M$x,$y l$opp,$adj l-$adj,$opp l-$opp,-$adj Z";
83+
}
84+
85+
}
86+
87+
88+
/**
89+
* the augmented options class
90+
*
91+
* @property float $sideLength
92+
* @property float $maxAngle
93+
*/
94+
class ModuleJitterOptions extends QROptions{
95+
96+
/**
97+
* the side length of the modules (calmped internally between square root of 0.5 (at 45°) and 1 (full length))
98+
*/
99+
protected float $sideLength = 0.8;
100+
101+
/**
102+
* The maximum tilt angle (clamped inside the 1x1 module, at a maximum of 45 degrees)
103+
*/
104+
protected float $maxAngle = 45.0;
105+
106+
/**
107+
* clamp the side length
108+
*/
109+
protected function set_sideLength(float $sideLength):void{
110+
$this->sideLength = max(M_SQRT1_2, min(1.0, $sideLength));
111+
}
112+
113+
}
114+
115+
116+
/*
117+
* Runtime
118+
*/
119+
$options = new ModuleJitterOptions;
120+
121+
// settings from the custom options class
122+
$options->sideLength = 0.85;
123+
$options->maxAngle = 45.0;
124+
125+
$options->version = 7;
126+
$options->outputInterface = ModuleJitterSVGoutput::class;
127+
$options->drawLightModules = false;
128+
$options->svgUseFillAttributes = false;
129+
$options->outputBase64 = false;
130+
$options->addQuietzone = true;
131+
$options->connectPaths = true;
132+
$options->keepAsSquare = [
133+
QRMatrix::M_FINDER_DARK,
134+
QRMatrix::M_FINDER_DOT,
135+
QRMatrix::M_ALIGNMENT_DARK,
136+
];
137+
$options->svgDefs = '
138+
<linearGradient id="rainbow" x1="100%" y2="100%">
139+
<stop stop-color="#e2453c" offset="0"/>
140+
<stop stop-color="#e07e39" offset="0.2"/>
141+
<stop stop-color="#e5d667" offset="0.4"/>
142+
<stop stop-color="#51b95b" offset="0.6"/>
143+
<stop stop-color="#1e72b7" offset="0.8"/>
144+
<stop stop-color="#6f5ba7" offset="1"/>
145+
</linearGradient>
146+
<style><![CDATA[
147+
.dark{fill: url(#rainbow);}
148+
]]></style>';
149+
150+
151+
$out = (new QRCode($options))->render('https://www.youtube.com/watch?v=dQw4w9WgXcQ');
152+
153+
154+
if(PHP_SAPI !== 'cli'){
155+
header('Content-type: image/svg+xml');
156+
157+
if(extension_loaded('zlib')){
158+
header('Vary: Accept-Encoding');
159+
header('Content-Encoding: gzip');
160+
$out = gzencode($out, 9);
161+
}
162+
}
163+
164+
echo $out;
165+
166+
exit;

0 commit comments

Comments
 (0)