A Pen By
Marco Dell'Anna

JavaScript preprocessors can help make authoring JavaScript easier and more convenient. For instance, CoffeeScript can help prevent easy-to-make mistakes and offer a cleaner syntax and Babel can bring ECMAScript 6 features to browsers that only support ECMAScript 5.

Any URL's added here will be added as `<script>`

s in order, and run *before* the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.

If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.

You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.

+ add another resource

` ````
<div class="title">
<h3>Welcome to</h3>
<h1>WWDCXX</h1>
<h3>Milan, IT <strong>JUNE 5-9</strong></h3>
<h4>C O N C E P T</h4>
</div>
<div class="more-pens">
<a target="_blank" href="https://codepen.io/plasm/" class="white-mode">VIEW OTHER PENS</a>
<a target="_blank" href="https://codepen.io/collection/nZpPbz/" class="white-mode">VIEW OTHER PARTICLES</a>
</div>
```

` ````
@import url('https://fonts.googleapis.com/css?family=Montserrat:200,300,400,600')
.more-pens
position: fixed
left: 20px
bottom: 20px
z-index: 10
font-family: "Montserrat"
font-size: 12px
a.white-mode, a.white-mode:link, a.white-mode:visited, a.white-mode:active
font-family: "Montserrat"
font-size: 12px
text-decoration: none
background: #212121
padding: 4px 8px
color: #f7f7f7
&:hover
background: #edf3f8
color: #212121
body
margin: 0
padding: 0
overflow: hidden
width: 100%
height: 100%
background: #FFFFFF
.title
z-index: 10
position: absolute
left: 50%
top: 55%
transform: translateX(-50%) translateY(-50%)
font-family: "Montserrat"
text-align: center
width: 100%
h1
position: relative
color: #121212
font-weight: 600
font-size: 70px
padding: 0
margin: 0
line-height: 1
span
font-weight: 600
padding: 0
margin: 0
color: #121212
h3
font-weight: 200
font-size: 30px
padding: 0
margin: 0
line-height: 1
color: #121212
letter-spacing: 2px
h4
font-weight: 400
font-size: 16px
padding: 0
margin: 4px 0 0 0
line-height: 1
color: #CC3341
letter-spacing: 2px
```

` ````
function drawCircleGrey(ctx, radius, position){
let grey = Math.round(100 + (Math.random() * 155));
let rgbaFill = "rgba(" + grey + ", " + grey + ", " + grey + ", 1)";
let rgbaStroke = "rgba(" + grey + ", " + grey + ", " + grey + ", 1)";
ctx.beginPath();
ctx.arc(position.x, position.y, radius, 0, 2 * Math.PI, false);
ctx.fillStyle = rgbaFill;
ctx.strokeStyle = rgbaStroke;
if(radius < 3){
ctx.fillStyle = "#CC3341";
ctx.strokeStyle = "#CC3341";
}
if(radius < 2){
ctx.fillStyle = "#B5E3E3";
ctx.strokeStyle = "#B5E3E3";
}
ctx.fill();
ctx.lineWidth = 1;
ctx.stroke();
}
function hexToRGB(hex, alpha) {
let r = parseInt(hex.slice(1, 3), 16),
g = parseInt(hex.slice(3, 5), 16),
b = parseInt(hex.slice(5, 7), 16);
if (alpha) {
return "rgba(" + r + ", " + g + ", " + b + ", " + alpha + ")";
} else {
return "rgb(" + r + ", " + g + ", " + b + ")";
}
}
function randomIntFromInterval(min,max) {
return Math.floor(Math.random()*(max-min+1)+min);
}
function pointIsInPolygon(p, polygon) {
let isInside = false;
let minX = polygon[0].x, maxX = polygon[0].x;
let minY = polygon[0].y, maxY = polygon[0].y;
for (let n = 1; n < polygon.length; n++) {
let q = polygon[n];
minX = Math.min(q.x, minX);
maxX = Math.max(q.x, maxX);
minY = Math.min(q.y, minY);
maxY = Math.max(q.y, maxY);
}
if (p.x < minX || p.x > maxX || p.y < minY || p.y > maxY) {
return false;
}
let i = 0, j = polygon.length - 1;
for (i, j; i < polygon.length; j = i++) {
if ( (polygon[i].y > p.y) != (polygon[j].y > p.y) &&
p.x < (polygon[j].x - polygon[i].x) * (p.y - polygon[i].y) / (polygon[j].y - polygon[i].y) + polygon[i].x ) {
isInside = !isInside;
}
}
return isInside;
}
function getBoundingBoxPolygon(points){
let minX = null;
let maxX = null;
let minY = null;
let maxY = null;
for(let i = 0; i < points.length; i++) {
let x = points[i].x;
let y = points[i].y;
if(minX == null){
minX = x; maxX = x; minY = y; maxY = y;
}
minX = Math.min(minX, x);
maxX = Math.max(maxX, x);
minY = Math.min(minY, y);
maxY = Math.max(maxY, y);
}
let width = maxX - minX;
let height = maxY - minY;
return {
x: minX,
y: minY,
width: width,
height: height,
}
}
function addParticle(){
// Externa points
let vector = {
x: Math.random()*WIDTH,
y: Math.random()*HEIGHT
}
let vector_check = {
x: vector.x - offsetX,
y: vector.y - offsetY
}
if( !pointIsInPolygon(vector_check, apple) && !pointIsInPolygon(vector_check, leaf) ){
drawCircleGrey(canvas, Math.random()*10, {
x: vector.x,
y: vector.y
})
}
}
//
let WIDTH = $(window).width()
let HEIGHT = $(window).height()
let leaf = [{x: 179.9, y: 34.8 }, {x: 242.7, y: 0 }, {x: 222.1, y: 63.9 }, {x: 162.5, y: 92 } ];
let apple = [{x: 165.8, y: 114.8 }, {x: 194.3, y: 105.5 }, {x: 237.1, y: 96.2 }, {x: 297.4, y: 116.2 }, {x: 315.5, y: 136.2 }, {x: 293.8, y: 154 }, {x: 272.2, y: 212 }, {x: 299.1, y: 275.4 }, {x: 326.1, y: 293.4 }, {x: 300.9, y: 346.4 }, {x: 237.5, y: 399.4 }, {x: 204.9, y: 391.5 }, {x: 171.4, y: 383.7 }, {x: 134.9, y: 391.8 }, {x: 105.2, y: 400 }, {x: 35.2, y: 339.6 }, {x: 0, y: 218.6 }, {x: 30.7, y: 128.1 }, {x: 96.3, y: 97.3 }, {x: 136.5, y: 106 } ]
let tela = document.createElement('canvas');
tela.width = $(window).width();
tela.height = $(window).height();
$("body").append(tela);
let canvas = tela.getContext('2d');
let leafBB = getBoundingBoxPolygon(leaf);
let appleBB = getBoundingBoxPolygon(apple)
let offsetX = WIDTH/2 - appleBB.width/2
let offsetY = HEIGHT/2 - (appleBB.height+leafBB.height)/2
setInterval(function(){
for(let i=0;i<8;i++){
addParticle()
}
}, 1)
```

999px

Loading
..................

Alt F
Opt F
Find & Replace

Also see: Tab Triggers