Новогодний конкурс 2021 года!
В прошлом году такой конкурс был очень веселый! ;) Давайте проведем и в этом тоже!
А чего делать-то будем?
Для победы в соревновании необходимо реализовать как минимум одну анимацию из следующих:
- анимация елочки;
- анимация Деда Мороза;
- анимация снежинки и падающего снега;
Чем больше сценариев будет в вашем ответе, тем лучше. При желании, вы можете добавить дополнительные анимации на тему Нового Года. Они будут «плюсом» к обязательным анимациям.
Всем веселья! Всем праздника!
Ответы (25 шт):
Автор решения: Zhihar
→ Ссылка
немного Нового Года
import turtle
import random
def koch_curve(size, n):
if n == 0:
turtle.forward(size)
else:
koch_curve(size / 3, n - 1)
turtle.left(60)
koch_curve(size / 3, n - 1)
turtle.right(120)
koch_curve(size / 3, n - 1)
turtle.left(60)
koch_curve(size / 3, n - 1)
def draw_koch_snowflake(x, y, size, n):
turtle.speed(0)
turtle.penup()
turtle.goto(x, y)
turtle.pendown()
for i in range(3):
koch_curve(size, n)
turtle.right(120)
turtle.hideturtle()
turtle.screensize(800, 600)
scr_size = turtle.screensize()
count = 100
snowflakes = [[random.randint(-0.5 * scr_size[0], +0.5 * scr_size[0]), random.randint(-0.5 * scr_size[1], +0.5 * scr_size[1]), random.randint(10, 50)] for _ in range(count)]
while True:
turtle.resetscreen()
turtle.tracer(0, 0)
scr_size = turtle.screensize()
for index in range(len(snowflakes)):
obj = snowflakes[index]
obj[1] -= random.randint(1, 15)
if obj[1] < -0.5 * scr_size[0] - 3 * obj[2]:
snowflakes[index] = [random.randint(-0.5 * scr_size[0], +0.5 * scr_size[0]), random.randint(0.3 * scr_size[1], +0.5 * scr_size[1]), random.randint(10, 50)]
draw_koch_snowflake(obj[0], obj[1], obj[2], 2)
turtle.update()
Автор решения: Zhihar
→ Ссылка
в довесок к первому :)
import random
n = 20
tree = [' ' * (n - i) + '*' * (2 * i - 1) for i in range(n)]
pos = 0
for i in range(n):
tree[i] = tree[i][:pos + (n - i)] + random.choice(['o', 'x', '@']) + tree[i][pos + (n - i) + 1:]
pos = (pos + random.randint(3, 7)) % (2 * i - 1)
print(*tree, sep='\n')
Автор решения: Victor VosMottor
→ Ссылка
Code-golfed Yolka!!! ;D
from random import*;print(''.join(f'{" "*(10-i)}/{"".join(choices("0*-o.%@ ",k=i*2))}\ \n'for i in range(10)))
Автор решения: Victor VosMottor
→ Ссылка
А вот это... Новогодний чат бот для SE!
import datetime
import random
from chatexchange.client import Client
email = "*********"
password = "*********************"
se_chat = Client("stackexchange.com")
se_chat.login(email, password)
def when_ny():
d = datetime.datetime(2021, 1, 1) - datetime.datetime.now()
room.send_message('? ' + str(d) + ' ?')
def happy(who):
happy_new_year = ['? Поздравляю с новым годом! Желаю всего самого лучшего ;) ?',
'? Поздравляю с новым годом! Отмечаем! ???',
'? Поздравляю с новым годом! Желаю счастья, любви, здоровья и просто всего доброго!?']
room.send_message(f'@{who} {random.choice(happy_new_year)}')
def fireworks():
room.send_message('https://www.funimada.com/assets/images/cards/big/ny-75.gif')
def tree(size):
room.send_message('https://1.bp.blogspot.com/-F8m0sIQpb3c/UM2bTvcgDWI/AAAAAAAAAR4/0prAbw7m1Go/s1600/0_84dd0_4ff0a30_XL.jpg')
commands = {
'when-ny': when_ny,
'happy-new-year': happy,
'fireworks': fireworks,
'yolka': tree
}
def run(command, *args):
f = commands.get(command)
if f:
try:
f(*args)
except Exception as e:
print(e)
room.send_message('Ошибка.')
else:
room.send_message(f'Нету такой команды, {command}')
def on_event(event, _):
if event.data['event_type'] == 1:
msg = event.message.content_source
if msg.startswith('ny '):
run(*msg[3:].split(' '))
room = se_chat.get_room('115560')
room.join()
room.send_message('?????? С Новым Годом! А, еще не Новый Год?')
room.watch_socket(on_event)
while True:
pass
Автор решения: Sevastopol'
→ Ссылка
Очень тяжелый код. Для просмотра требуется мощная видеокарта. Всех с Новым годом! ?
.tree {color:green;font-size:8em;text-shadow:-10px 10px 20px rgba(0,0,0,0.5);}<span class="tree">?</span>
Автор решения: DGDays
→ Ссылка
Ну, я был бы не я, если бы не поучаствовал ;)
print(" ⭐ ")
print(" ??? ")
print(" ????? ")
print("???????")
print(" ?? ")
PS Времени, к сожалению, нет на что-то крутое и большое, но ёлочку подарить могу)
С НАСТУПАЮЩИМ ВСЕХ!!!!!
Автор решения: Danis
→ Ссылка
import time
n = int(input())
for i in range(3, n + 1, 2):
for j in range(1, i + 1):
print(" " * (n - j), "0" * (j * 2 - 1))
time.sleep(0.1)
Автор решения: Sevastopol'
→ Ссылка
Друзья! Уже совсем скоро закончится этот непростой год. Уходящий 2020 год стал для многих настоящим испытанием, и не удивительно, что люди мечтают о скорейшем его завершении. Будем надеяться и верить, что в Новом 2021 году жить станет лучше, легче и веселее.
Да услышит нас Дед Мороз! ?
const second = 1000,
minute = second * 60,
hour = minute * 60,
day = hour * 24;
let countDown = new Date('Jan 1, 2022 00:00:00').getTime(),
x = setInterval(function() {
let now = new Date().getTime(),
distance = countDown - now;
document.getElementById('days').innerHTML = Math.floor(distance / (day)),
document.getElementById('hours').innerHTML = Math.floor((distance % (day)) / (hour)),
document.getElementById('minutes').innerHTML = Math.floor((distance % (hour)) / (minute)),
document.getElementById('seconds').innerHTML = Math.floor((distance % (minute)) / second);
}, second)body {
margin: 0;
width: 100%;
height: 100vh;
background: url(https://jooinn.com/images/christmas-background-19.jpg) bottom center;
background-size: cover;
text-align: center;
font-family: monospace;
}
ul {
margin: 0;
padding: 0;
position: absolute;
top: 15%;
left: 0;
right: 0;
}
li {
display: inline-block;
list-style-type: none;
padding: 1em;
text-transform: uppercase;
text-align: center;
color: #000;
font-size: 1rem;
}
li span {
display: block;
font-size: 2.8rem;
background: rgba(255, 255, 255, 0.5);
border-radius: 100%;
padding: 10px;
width: 3rem;
height: 3rem;
line-height: 3rem;
margin: 20px auto 10px auto;
border: 1px solid gold;
color: brown;
}
#days {
width: 5rem;
}<ul>
<li><span id="days"></span>дней</li>
<li><span id="hours"></span>часов</li>
<li><span id="minutes"></span>минут</li>
<li><span id="seconds"></span>секунд</li>
</ul>
Автор решения: Ildar
→ Ссылка
С новым годом! :))
Немного консольной графики на C++. Подкрутите константные переменные HEIGHT и WIDTH если картинка не умещается.
#include <iostream>
#include <iomanip>
#include <chrono>
#include <thread>
#include <vector>
#include <string>
#include <deque>
#include <algorithm>
#include <random>
constexpr size_t HEIGHT = 40;
constexpr size_t WIDTH = 160;
constexpr int64_t SLEEP_PER_FRAME = 10;
constexpr size_t SNOWFLAKE_CHANCE = 3;
std::random_device rd;
std::mt19937 generator(rd());
std::uniform_int_distribution<> distribution(1, 100);
std::string make_snow_row()
{
std::string row(WIDTH, ' ');
for (auto& symb : row) {
if (distribution(generator) < SNOWFLAKE_CHANCE) {
symb = '*';
}
}
return row;
}
void init_snow(std::vector<std::string>& snow)
{
for (auto& row : snow) {
row = make_snow_row();
}
}
void init_tree(std::deque<std::string>& tree)
{
std::string half_empty_string = std::string(WIDTH / 2 - 10, ' ');
for (auto& row : tree) {
row = half_empty_string + row + half_empty_string;
}
size_t empty_height = HEIGHT - tree.size();
std::string empty_string = std::string(WIDTH, ' ');
for (size_t i = 0; i < empty_height; ++i) {
tree.push_front(empty_string);
}
}
void make_frame(std::vector<std::string>& frame,
const std::vector<std::string>& snow, const std::deque<std::string>& tree)
{
for (size_t i = 0; i < HEIGHT; ++i) {
for (size_t j = 0; j < WIDTH; ++j) {
if (snow[i][j] == '*') {
frame[i][j] = '*';
}
else if (tree[i][j] != ' ') {
frame[i][j] = tree[i][j];
}
else {
frame[i][j] = ' ';
}
}
}
}
void draw_frame(const std::vector<std::string>& frame)
{
for (const auto& row : frame) {
std::cout << row << '\n';
}
std::cout << std::setw(WIDTH + 1) << std::setfill('*') << '\n';
}
void move_snow(std::vector<std::string>& snow)
{
auto rbegin = snow.rbegin();
auto prerend = std::prev(snow.rend());
for (auto it = rbegin; it != prerend; ++it) {
*it = std::move(*std::next(it));
}
snow[0] = make_snow_row();
}
void sleep(const int64_t ms)
{
std::this_thread::sleep_for(std::chrono::milliseconds(ms));
}
void clear_console()
{
system("cls");
}
int main()
{
std::deque<std::string> tree = {
" /\\ ",
" / \\\\ ",
" / \\\\ ",
" / o \\\\ ",
" /_ $ _\\\\ ",
" / \\\\ ",
" / $ \\\\ ",
" / $ o \\\\ ",
" /_ _\\\\ ",
" / o \\\\ ",
" / o \\\\ ",
" /o o \\\\ ",
" /_ $ _\\\\ ",
" / o \\\\ ",
" / o \\\\ ",
" / $ o \\\\ ",
" /_ $ o _\\\\ ",
" / o o \\\\ ",
" / o $ \\\\ ",
" / $ o o \\\\ ",
" /_______________________\\\\ ",
" | | ",
" | | "
};
init_tree(tree);
std::vector<std::string> snow(HEIGHT);
init_snow(snow);
std::vector<std::string> frame(HEIGHT, std::string(WIDTH, ' '));
while (true) {
make_frame(frame, snow, tree);
draw_frame(frame);
move_snow(snow);
sleep(SLEEP_PER_FRAME);
clear_console();
}
return 0;
}
Вдохновился следующей реализацией на языке Си https://ru.stackoverflow.com/a/1064253/328042
Автор решения: Danis
→ Ссылка
import random
import time
class Ball:
def __init__(self, pos, size, arr = None):
self.x, self.y = pos
self.size = size
self.speed = random.uniform(1, 2)
if arr is None:
self.arr = self.new_arr()
else:
self.arr = arr
def __str__(self):
res = ""
for el in self.arr:
res += ((bin(el)[3:] + "\n")
.replace("1", "#")
.replace("0", " "))
return res
def __or__(self, other):
arr = []
for a, b in zip(self.arr, other.arr):
arr.append(a|b)
return Ball((self.x, self.y), self.size, arr)
def new_arr(self):
arr = []
n = 2 ** self.size[1]
for i in range(self.size[0]):
if self.x <= i < self.x + 2:
arr.append(n + 2**self.y + 2**self.y//2)
else:
arr.append(n)
return arr
def update(self):
self.x += self.speed
if self.x >= self.size[0]:
self.x = 0
self.arr = self.new_arr()
x_size = 30
y_size = 50
balls = []
for _ in range(10):
x = random.randrange(x_size - 1)
y = random.randrange(y_size)
balls.append(Ball((y, x), (y_size, x_size)))
while True:
print("\033[2J\033[1;1H")
res = balls[0]
for i in range(len(balls)):
res |= balls[i]
balls[i].update()
print(res)
time.sleep(0.1)
Автор решения: CatException
→ Ссылка
Коллеги, извините за столь краткое поздравление, очень мало времени, но я все же всех Вас поздравляю и хочу, чтобы новый год для всех нас стал по-настоящему новым и продуктивным. С наступающим!
import pygame
import random
pygame.init()
BLACK = [0, 0, 0]
WHITE = [255, 255, 255]
WIN_SIZE = [400, 400]
screen = pygame.display.set_mode(WIN_SIZE)
pygame.display.set_caption("Happy New Year")
snow_list = []
for i in range(50):
x = random.randrange(0, 400)
y = random.randrange(0, 400)
snow_list.append([x, y])
clock = pygame.time.Clock()
done = False
while not done:
for event in pygame.event.get():
if event.type == pygame.QUIT:
done = True
screen.fill(BLACK)
for i in range(len(snow_list)):
pygame.draw.circle(screen, WHITE, snow_list[i], 2)
snow_list[i][1] += 1
if snow_list[i][1] > 400:
y = random.randrange(-50, -10)
snow_list[i][1] = y
x = random.randrange(0, 400)
snow_list[i][0] = x
pygame.display.flip()
clock.tick(20)
pygame.quit()
Автор решения: 0xdb
→ Ссылка
Запустите SQL*Plus в xterm или в командном окне Windows 10, и выполните следующий запрос. Получите ёлочку со случайно разбросанными огоньками и, конечно же, в насыщенном цвете.
С Новым Годом всех!
set lines 350 pagesize 0
clear screen
select
replace(
replace(
replace(r,
'X', chr(27)||'[42m'||chr(27)||'[1;'||to_char(32)||'m'||'X'||chr(27)||'[0m'),
'T',chr(27)||'[43m'||chr(27)||'[1;'||to_char(33)||'m'||'T'||chr(27)||'[0m'),
'@',chr(27)||'[33m'||chr(27)||'[1;'||to_char(31)||'m'||'@'||chr(27)||'[0m')
from (
select lpad(' ',20-e-i)||
case when dbms_random.value < 0.3 then substr(s,1,e*2-3+i*2)
else substr(substr(s,1,dbms_random.value(1,e*2-3+i*2-1))||'@'||s,1,e*2-3+i*2) end r
from (
select rpad('X',40,'X') s,rpad('T',40,'T') t from dual ), (
select level i, level+2 hop from dual connect by level<= 4), lateral (
select level e from dual connect by level<=hop)
union all
select lpad(' ',17)||substr(t,1,3)
from (
select rpad('X',40,'X') s, rpad('T',40,'T') t from dual ) connect by level<=5)
/
Свободный перевод ответа от участника @Connor McDonald
Автор решения: HamSter
→ Ссылка
JavaScript веселая консоль поздравляет:
<script>
var styles = [
'padding: 1rem; background: red',
'padding: 1rem; background: transparent',
'padding: 1rem; background: orange',
'padding: 1rem; background: gold',
'padding: 1rem; background: yellowgreen',
'padding: 1rem; background: skyblue',
'padding: 1rem; background: steelblue',
'padding: 1rem; background: transparent',
'padding: 1rem; background: darkviolet',
'padding: 1rem; background: red',
'padding: 1rem; background: orange',
'padding: 1rem; background: gold',
'padding: 1rem; background: yellowgreen',
'padding: 1rem; background: skyblue',
'padding: 1rem; background: transparent; font-size: 5rem',
];
console.log('%c С %c %c Н %c О %c В %c Ы %c М %c %c Г %c О %c Д %c О %c М %c ! %c ?',
styles[0], styles[1], styles[2], styles[3], styles[4],
styles[5], styles[6], styles[7], styles[8], styles[9],
styles[10], styles[11], styles[12], styles[13], styles[14]);
</script>
Автор решения: Voprositel
→ Ссылка
Всех с прошедшим Новым годом!
div {
font-size: 150px;
text-align: center;
background: url(https://i.gifer.com/4V0Y.gif) #1f1e1e;
border: 1px solid black;
width: 190px;
}<div>?</div>
Автор решения: MaximLensky
→ Ссылка
У меня чуть попроще - даже попросил помощи у конкурентов stackoverflow - в общем звёздочка с эффектом при наведении ...
const svg = document.getElementById('svg');
const {
width,
height
} = svg.getBoundingClientRect();
const step = 10;
const distance = 55;
for (let x = 0; x < width; x += step) {
for (let y = 0; y < height; y += step) {
const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
circle.setAttributeNS(null, 'cx', x);
circle.setAttributeNS(null, 'cy', y);
circle.setAttributeNS(null, 'r', 4);
svg.appendChild(circle);
}
}
const circles = svg.querySelectorAll('circle');
svg.addEventListener('mousemove', function(e) {
if (e.target !== this) {
return;
}
const {
offsetX: x,
offsetY: y
} = e;
circles.forEach(function(n) {
const dx = n.getAttribute('cx') - x;
const dy = n.getAttribute('cy') - y;
const d = Math.sqrt(dx ** 2 + dy ** 2);
if (d <= distance) {
const tx = (distance - d) * Math.sign(dx);
const ty = (distance - d) * Math.sign(dy);
n.style.transform = `translate(${tx}px, ${ty}px)`;
} else {
n.style.transform = '';
}
});
});
svg.addEventListener('mouseleave', function() {
circles.forEach(n => n.style.transform = '');
});circle {
fill: none;
stroke: blue;
stroke-width: 1px;
transition: transform 0.34s linear;
}
.red {
fill: red;
}
#svg {
position: fixed;
top: 0;
left: 0;
}<svg width="0" height="0">
<defs>
<clipPath id="clip" clipPathUnits="userSpaceOnUse" style="transform: scale(4)">
<path d="M81.059,35.09l-19.787-2.873c-1.125-0.164-2.102-0.873-2.605-1.893l-8.85-17.932c-1.27-2.57-4.936-2.57-6.207,0 l-8.848,17.932c-0.504,1.02-1.479,1.729-2.605,1.893L12.369,35.09c-2.838,0.416-3.971,3.904-1.918,5.904L24.77,54.951 c0.816,0.797,1.188,1.939,0.996,3.059l-3.381,19.711c-0.484,2.826,2.48,4.984,5.021,3.646l17.697-9.305 c1.008-0.529,2.213-0.529,3.221,0l17.697,9.305c2.539,1.338,5.506-0.82,5.021-3.646L67.662,58.01 c-0.191-1.119,0.182-2.262,0.996-3.059l14.316-13.957C85.029,38.994,83.896,35.506,81.059,35.09z M76.816,42.99L65.578,53.951 c-0.816,0.791-1.189,1.936-0.994,3.061l2.652,15.471c0.484,2.826-2.48,4.977-5.02,3.646l-13.893-7.303 c-1.008-0.529-2.213-0.529-3.221,0l-13.891,7.303c-2.539,1.33-5.506-0.82-5.02-3.646l2.654-15.471 c0.191-1.125-0.182-2.27-0.996-3.061L16.611,42.99c-2.055-1.996-0.918-5.484,1.92-5.898l15.531-2.256 c1.125-0.16,2.1-0.871,2.604-1.895l6.943-14.068c1.271-2.572,4.938-2.572,6.207,0l6.945,14.068 c0.504,1.023,1.479,1.734,2.605,1.895l15.531,2.256C77.736,37.506,78.869,40.994,76.816,42.99z"/><path d="M67.297,40.43L56.76,38.898c-1.053-0.156-1.963-0.814-2.434-1.77l-4.713-9.549c-1.186-2.402-4.613-2.402-5.799,0 l-4.711,9.549c-0.473,0.955-1.383,1.613-2.436,1.77L26.133,40.43c-2.652,0.383-3.713,3.645-1.795,5.514l7.627,7.432 c0.762,0.742,1.107,1.816,0.928,2.865l-1.799,10.49c-0.455,2.645,2.318,4.658,4.689,3.412l9.426-4.957 c0.941-0.496,2.066-0.496,3.01,0l9.426,4.957c2.371,1.246,5.145-0.768,4.689-3.412l-1.799-10.49 c-0.18-1.049,0.166-2.123,0.93-2.865l7.623-7.432C71.008,44.074,69.951,40.813,67.297,40.43z"/>
</defs>
</svg>
<svg id="svg" width="500" height="500" clip-path="url(#clip)"></svg>
Автор решения: Sevastopol'
→ Ссылка
CSS. Простая снежинка.
upd_one. Добавим немного падающего снега.
upd_two. Добавим Новогоднюю ёлку.
upd_three. Добавим Деда Мороза.
upd_four. Добавим снеговика.
upd_five. Добавим горы и луну.
upd_six. Добавим Новогодний шар с логотипом ruSO.
upd_seven. Добавим лопату и ведро.
body {
width: 100%;
height: 100vh;
overflow: hidden;
background: #afd9f7;
background: linear-gradient(to right, #afd9f7, #459cf7);
}
/*горы*/
.mountains {
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 100vh;
}
.mountain_1,
.mountain_2,
.mountain_3,
.mountain_4,
.mountain_5,
.mountain_6,
.mountain_7,
.mountain_8,
.mountain_9 {
position: fixed;
bottom: 0;
width: 0;
height: 0;
}
.mountain_1 {
margin-left: -5vw;
border-right: 400px solid transparent;
border-left: 150px solid transparent;
}
.mountain_2 {
margin-left: 15vw;
border-right: 400px solid transparent;
border-left: 400px solid transparent;
}
.mountain_3 {
margin-left: 70vw;
border-right: 150px solid transparent;
border-left: 400px solid transparent;
}
.mountain_4 {
margin-left: -15vw;
border-right: 400px solid transparent;
border-left: 500px solid transparent;
}
.mountain_5 {
margin-left: 25vw;
border-right: 350px solid transparent;
border-left: 150px solid transparent;
}
.mountain_6 {
margin-left: 70vw;
border-right: 200px solid transparent;
border-left: 200px solid transparent;
}
.mountain_7 {
margin-left: 15vw;
border-right: 150px solid transparent;
border-left: 250px solid transparent;
}
.mountain_8 {
margin-left: 50vw;
border-right: 300px solid transparent;
border-left: 150px solid transparent;
}
.mountain_9 {
margin-left: 60vw;
border-right: 300px solid transparent;
border-left: 250px solid transparent;
}
.mountain_one {
border-bottom: 120px solid #459cf7;
}
.mountain_two {
border-bottom: 100px solid #50aef1;
}
.mountain_three {
border-bottom: 55px solid #79c4f9;
}
.mount_snow {
width: 100%;
height: 20px;
background-color: #daedfb;
position: absolute;
bottom: 0;
left: 0;
}
.mount_snow:before,
.mount_snow:after {
content: "";
border-radius: 50%;
background-color: #daedfb;
position: absolute;
}
.mount_snow:before {
left: 10%;
height: 36px;
transform: rotate(5deg);
bottom: -4px;
width: 40vw;
}
.mount_snow:after {
right: -10%;
height: 20px;
bottom: 6px;
width: 65vw;
}
/*/горы*/
/*луна*/
.moon {
position: absolute;
top: 15px;
right: 15px;
width: 30px;
height: 30px;
border-radius: 50%;
background-color: cornsilk;
box-shadow: 3px 3px 20px 6px #fff;
}
.moon:before {
content: "";
display: block;
position: absolute;
top: 2px;
left: 0px;
width: 26px;
height: 26px;
border-radius: 50%;
background-color: antiquewhite;
-webkit-clip-path: polygon(0 0, 95% 0, 95% 30%, 70% 40%, 80% 80%, 40% 70%, 10% 90%);
clip-path: polygon(0 0, 95% 0, 95% 30%, 70% 40%, 80% 80%, 40% 70%, 10% 90%);
}
/*/луна*/
/*снежинка*/
.snowflake_container {
position: relative;
width: 100%;
height: 170px;
animation: 5s infinite linear animate;
z-index: 3;
}
.snowflake {
position: absolute;
top: 25px;
left: 50%;
width: 5px;
height: 150px;
background-color: white;
box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, 0.1);
}
.snowflake:before,
.snowflake:after {
content: "";
position: absolute;
left: -12px;
width: 25px;
height: 25px;
border: 5px solid snow;
border-top: 0;
border-left: 0;
transform: rotate(45deg);
box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, 0.1);
}
.snowflake:after {
bottom: 0;
transform: rotate(-135deg);
}
.snow__two {
transform: rotate(90deg);
}
.snow__three {
transform: rotate(45deg);
}
.snow__four {
transform: rotate(-45deg);
}
@keyframes animate {
100% {
transform: rotate(360deg);
}
}
/*/снежинка*/
/*падающий_снег*/
.snow {
position: fixed;
top: -20%;
cursor: default;
user-select: none;
color: #fff;
font-size: 2em;
font-family: Arial;
text-shadow: 0 0 1px rgba(0, 0, 0, 1);
animation-duration: 10s, 3s;
animation-name: snow_f, snow_s;
animation-play-state: running, running;
animation-iteration-count: infinite, infinite;
animation-timing-function: linear, ease-in-out;
z-index: 2;
}
@keyframes snow_f {
0% {
top: -10%;
}
100% {
top: 100%;
}
}
@keyframes snow_s {
0% {
transform: translateX(0px);
}
50% {
transform: translateX(80px);
}
100% {
transform: translateX(0px);
}
}
.snow:nth-of-type(0) {
left: 1%;
animation-delay: 0s, 0s;
}
.snow:nth-of-type(1) {
left: 10%;
animation-delay: 1s, 1s;
}
.snow:nth-of-type(2) {
left: 20%;
animation-delay: 6s, .5s;
}
.snow:nth-of-type(3) {
left: 30%;
animation-delay: 4s, 2s;
}
.snow:nth-of-type(4) {
left: 40%;
animation-delay: 2s, 2s;
}
.snow:nth-of-type(5) {
left: 50%;
animation-delay: 8s, 3s;
}
.snow:nth-of-type(6) {
left: 60%;
animation-delay: 6s, 2s;
}
.snow:nth-of-type(7) {
left: 70%;
animation-delay: 2.5s, 1s;
}
.snow:nth-of-type(8) {
left: 80%;
animation-delay: 1s, 0s;
}
.snow:nth-of-type(9) {
left: 90%;
animation-delay: 3s, 1.5s;
}
.snow:nth-of-type(10) {
left: 99%;
animation-delay: 10s, 9s;
}
/*/падающий_снег*/
/*елка*/
.tree {
position: absolute;
bottom: 10px;
right: 10px;
width: 0;
height: 0;
border-style: solid;
border-width: 0 40px 75px 40px;
border-color: transparent transparent green transparent;
}
.tree:before,
.tree:after {
content: '';
display: block;
position: absolute;
top: -15px;
right: -34px;
width: 0;
height: 0;
border-style: solid;
border-width: 0 35px 60px 35px;
border-color: transparent transparent green transparent;
}
.tree:before {
top: -35px;
right: -24px;
border-width: 0 25px 45px 25px;
}
.tree__trunk {
position: absolute;
top: 75px;
right: -6px;
width: 10px;
height: 20px;
background: brown;
}
.star {
position: absolute;
top: -60px;
left: -14px;
cursor: default;
user-select: none;
color: darkred;
font-size: 2em;
font-family: Arial;
text-shadow: 0 0 4px rgba(255, 255, 255, 0.5);
animation: 3s infinite linear star;
z-index: 1;
}
@keyframes star {
0% {
color: darkred;
}
93% {
color: red;
}
95% {
color: gold;
}
98% {
color: red;
}
100% {
color: darkred;
}
}
.tree__lights__one {
position: absolute;
top: 44px;
right: -26px;
width: 60px;
height: 16px;
border-radius: 40%;
box-shadow: 0px 3px;
transform: rotateZ(-12deg);
z-index: 1;
}
.tree__lights__one:before {
content: '';
display: block;
position: absolute;
top: 16px;
left: -2px;
width: 6px;
height: 6px;
border-radius: 100%;
animation: blink_one 2s linear infinite;
}
.tree__lights__two {
position: absolute;
top: 12px;
right: -18px;
width: 47px;
height: 16px;
border-radius: 50%;
box-shadow: 0px 3px;
transform: rotateZ(-16deg);
z-index: 1;
}
.tree__lights__two:before {
content: '';
display: block;
position: absolute;
top: 15px;
left: -6px;
width: 6px;
height: 6px;
border-radius: 100%;
animation: blink_two 1s linear infinite alternate;
}
.tree__lights__three {
position: absolute;
top: -20px;
right: -12px;
width: 32px;
height: 16px;
border-radius: 50%;
box-shadow: 0px 3px;
transform: rotateZ(-16deg);
z-index: 1;
}
.tree__lights__three:before {
content: '';
display: block;
position: absolute;
top: 10px;
left: -8px;
width: 6px;
height: 6px;
border-radius: 100%;
animation: blink_three 1s linear infinite alternate;
}
@keyframes blink_one {
0% {
box-shadow: 5px -1px #008bff, 24px 1px #fff, 40px 1px #ffdc00, 54px 0px #f00;
}
50% {
box-shadow: 5px -1px #f00, 24px 1px #008bff, 40px 1px #fff, 54px 0px #ffdc00;
}
75% {
box-shadow: 5px -1px #ffdc00, 24px 1px #f00, 40px 1px #00bcff, 54px 0px #fff;
}
100% {
box-shadow: 5px -1px #fff, 24px 1px #ffdc00, 40px 1px #f00, 54px 0px #00bcff;
}
}
@keyframes blink_two {
0% {
box-shadow: 5px -1px #008bff, 20px 1px #fff, 34px 1px #ffdc00, 46px 0px #f00;
}
50% {
box-shadow: 5px -1px #f00, 20px 1px #008bff, 34px 1px #fff, 46px 0px #ffdc00;
}
75% {
box-shadow: 5px -1px #ffdc00, 20px 1px #f00, 34px 1px #00bcff, 46px 0px #fff;
}
100% {
box-shadow: 5px -1px #fff, 20px 1px #ffdc00, 34px 1px #f00, 46px 0px #00bcff;
}
}
@keyframes blink_three {
0% {
box-shadow: 5px 3px #008bff, 20px 7px #f00, 34px 4px #ffdc00;
}
50% {
box-shadow: 5px 3px #ffdc00, 20px 7px #008bff, 34px 4px #f00;
}
100% {
box-shadow: 5px 3px #f00, 20px 7px #ffdc00, 34px 4px #008bff;
}
}
/*/елка*/
/*дед_мороз*/
.ded_moroz_container {
position: absolute;
bottom: 0;
left: 10px;
}
body:hover .ded_moroz_container {
animation: ded_moroz_container 0.6s 1;
}
@keyframes ded_moroz_container {
0% {
transform: rotate(0turn);
}
25% {
transform: rotate(0.02turn) scale(1.1);
}
50% {
transform: rotate(-0.02turn) scale(1.1);
}
75% {
transform: rotate(0.02turn) scale(1.1);
}
100% {
transform: rotate(0turn) scale(1);
}
}
.ded_moroz {
position: absolute;
bottom: 20px;
animation: ded_moroz___head 4s linear infinite;
}
@keyframes ded_moroz___head {
0% {
bottom: 13px;
}
45% {
bottom: 13px;
}
50% {
bottom: 20px;
}
92% {
bottom: 20px;
}
98% {
bottom: 13px;
}
100% {
bottom: 13px;
}
}
.ded_moroz_body {
position: absolute;
left: -20px;
bottom: -50px;
width: 100px;
height: 120px;
background-color: #E30E0E;
border-radius: 100%;
animation: ded_moroz___body 4s linear infinite;
}
@keyframes ded_moroz___body {
0% {
bottom: -50px;
}
2% {
bottom: -53px;
}
4% {
bottom: -50px;
}
8% {
bottom: -53px;
}
10% {
bottom: -50px;
}
12% {
bottom: -53px;
}
14% {
bottom: -50px;
}
18% {
bottom: -53px;
}
20% {
bottom: -50px;
}
22% {
bottom: -53px;
}
24% {
bottom: -50px;
}
28% {
bottom: -53px;
}
30% {
bottom: -50px;
}
100% {
bottom: -50px;
}
}
.ded_moroz_body:before,
.ded_moroz_body:after {
content: "";
display: block;
position: absolute;
top: 53px;
left: 48px;
width: 4px;
height: 4px;
border-radius: 100%;
background-color: white;
}
.ded_moroz_body:after {
margin-top: 10px;
}
.ded_moroz_beard {
height: 60px;
width: 60px;
background-color: white;
border-radius: 0 50% 50% 50%;
transform: rotate(-135deg);
}
.ded_moroz_face {
position: relative;
bottom: 45px;
left: 6px;
height: 15px;
width: 48px;
border-radius: 15px;
background-color: #fcd9c3;
}
.ded_moroz_eye_one,
.ded_moroz_eye_two {
position: relative;
height: 1px;
width: 10px;
border-top: 3px solid #262626;
border-radius: 10px 10px 0 0;
animation: ded_moroz___eye 4s linear infinite;
}
.ded_moroz_eye_one {
top: 5px;
left: 6px;
}
.ded_moroz_eye_two {
top: 1px;
left: 32px;
animation: ded_moroz___eye_two 4s linear infinite;
}
@keyframes ded_moroz___eye {
30% {
border-top: 3px solid #262626;
}
55% {
border-top: 3px solid #262626;
}
55.1% {
border-top: 4px solid #262626;
}
100% {
border-top: 4px solid #262626;
}
}
@keyframes ded_moroz___eye_two {
30% {
top: 1px;
border-top: 3px solid #262626;
}
55% {
top: 1px;
border-top: 3px solid #262626;
}
55.1% {
top: 0px;
border-top: 4px solid #262626;
}
100% {
top: 0px;
border-top: 4px solid #262626;
}
}
.ded_moroz_nose {
position: relative;
top: 2px;
left: 19px;
height: 10px;
width: 10px;
border-radius: 50%;
background-color: #fbd1b6;
}
.ded_moroz_mouth {
position: relative;
top: 6px;
left: 18px;
height: 3px;
width: 13px;
border-radius: 0 0 13px 13px;
background-color: #262626;
opacity: 0.8;
animation: ded_moroz___mouth 4s linear infinite;
}
@keyframes ded_moroz___mouth {
0% {
height: 3px;
}
55% {
height: 3px;
}
55.1% {
height: 6px;
}
100% {
height: 6px;
}
}
.ded_moroz_cap {
position: absolute;
top: -45px;
left: 2px;
width: 54px;
height: 60px;
background: red;
border-radius: 100% 20% 0 0;
box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.2);
text-align: center;
line-height: 70px;
text-transform: uppercase;
font-size: 13px;
font-family: monospace;
color: darkred;
font-weight: bold;
}
.ded_moroz_cap:before {
content: "";
display: block;
position: absolute;
bottom: -10px;
left: -1px;
width: 57px;
height: 18px;
border-radius: 100% / 50%;
transform: rotate(-2deg);
box-shadow: inset 0 10px lightyellow;
}
.ded_moroz_cap:after {
content: "";
display: block;
position: absolute;
top: -10px;
right: -10px;
width: 20px;
height: 20px;
border-radius: 50%;
background: lightyellow;
box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.2);
}
/*/дед_мороз*/
/*снеговик*/
.snowman_container {
position: absolute;
bottom: -4px;
right: 120px;
width: 30px;
height: 62px;
animation-name: snowman;
animation-duration: 2s;
animation-iteration-count: infinite;
}
@keyframes snowman {
0% {
transform: rotate(6deg);
right: 110px;
}
50% {
transform: rotate(-6deg);
right: 130px;
}
100% {
transform: rotate(6deg);
right: 110px;
}
}
.snowman {
position: relative;
width: 30px;
height: 62px;
}
.snowman_shadow {
position: absolute;
bottom: 0;
left: 0;
width: 30px;
height: 12px;
background: radial-gradient(ellipse at center, rgba(68, 68, 68, 0.9) 0%, rgba(138, 174, 188, 0) 60%, rgba(206, 223, 235, 0) 100%);
}
.snowman_body {
position: absolute;
bottom: 5px;
left: 0;
width: 30px;
height: 29px;
border-radius: 50%;
background: linear-gradient(to bottom, white 0%, #dbe8fc 100%);
box-shadow: 7px -5px 0px rgba(0, 0, 0, 0.1) inset;
}
.snowman_head {
position: absolute;
bottom: 30px;
left: 4px;
width: 20px;
height: 20px;
border-radius: 50%;
background: linear-gradient(to bottom, white 0%, #dbe8fc 100%);
box-shadow: 7px -5px 0px rgba(0, 0, 0, 0.1) inset;
}
.snowman_coal {
position: absolute;
width: 2px;
height: 2px;
border-radius: 100%;
box-shadow: 14px 36px 0px 0px #222, 14px 40px 0px 0px #222, 14px 44px 0px 0px #222, 10px 18px 0px 0px #222, 16px 18px 0px 0px #222;
}
.snowman_carrot {
position: absolute;
left: 1px;
top: 22px;
width: 0px;
height: 0px;
border-right: 14px solid orangered;
border-top: 2px solid transparent;
border-bottom: 2px solid transparent;
}
.snowman_scarf {
position: absolute;
top: 20px;
left: 3px;
width: 24px;
height: 40px;
background: chocolate;
border-radius: 70% 70% 50% 50%;
-webkit-clip-path: polygon(1% 32%, 1% 21%, 98% 21%, 97% 35%, 98% 51%, 81% 35%, 95% 59%, 87% 66%, 71% 34%);
clip-path: polygon(1% 32%, 1% 21%, 98% 21%, 97% 35%, 98% 51%, 81% 35%, 95% 59%, 87% 66%, 71% 34%);
}
.snowman_hand_l {
position: absolute;
left: -7px;
top: 24px;
width: 10px;
height: 20px;
background: #9b441b;
transform: rotate(290deg);
-webkit-clip-path: polygon(18% 17%, 35% 30%, 38% 0, 41% 0, 41% 30%, 71% 16%, 79% 15%, 40% 38%, 39% 100%, 35% 100%, 34% 37%, 9% 16%);
clip-path: polygon(18% 17%, 35% 30%, 38% 0, 41% 0, 41% 30%, 71% 16%, 79% 15%, 40% 38%, 39% 100%, 35% 100%, 34% 37%, 9% 16%);
}
.snowman_hand_r {
position: absolute;
left: 26px;
top: 26px;
width: 10px;
height: 20px;
background: #9b441b;
transform: rotate(65deg);
-webkit-clip-path: polygon(18% 17%, 35% 30%, 38% 0, 41% 0, 41% 30%, 71% 16%, 79% 15%, 40% 38%, 39% 100%, 35% 100%, 34% 37%, 9% 16%);
clip-path: polygon(18% 17%, 35% 30%, 38% 0, 41% 0, 41% 30%, 71% 16%, 79% 15%, 40% 38%, 39% 100%, 35% 100%, 34% 37%, 9% 16%);
}
.snowman_bucket {
position: absolute;
top: 0px;
left: 8px;
height: 0;
width: 10px;
background-clip: padding-box;
border-top: 14px solid chocolate;
border-left: 2px solid transparent;
border-right: 2px solid transparent;
border-bottom-right-radius: 5px 50%;
border-bottom-left-radius: 5px 50%;
transform: rotate(185deg);
}
/*/снеговик*/
/*шар*/
.ball_container {
position: absolute;
top: 33px;
left: 103px;
width: 100px;
height: 100px;
margin: auto;
animation-name: ball_container;
animation-delay: 0s;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-direction: normal;
transform-origin: 50% 0%;
animation-timing-function: linear;
}
@-webkit-keyframes ball_container {
0% {
-webkit-transform: rotate(0deg);
left: 98px;
}
25% {
-webkit-transform: rotate(10deg);
left: 93px;
}
75% {
-webkit-transform: rotate(-10deg);
left: 103px;
}
100% {
-webkit-transform: rotate(0deg);
left: 98px;
}
}
.ball_hidden {
position: absolute;
top: 0;
left: 0;
overflow: hidden;
width: 100px;
height: 100px;
border-radius: 100%;
}
.ball {
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 100px;
border-radius: 100%;
background: radial-gradient(circle at 100px 100px, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.8));
}
.ball:after {
content: "";
position: absolute;
top: 80%;
left: 60%;
width: 85%;
height: 100%;
border-radius: 50%;
background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 1), rgba(255, 255, 255, 1) 15%, rgba(255, 255, 255, 0) 50%);
transform: translateX(-80px) translateY(-90px) skewX(-20deg);
filter: blur(10px);
}
.ball_snow {
position: absolute;
top: 1px;
left: 2px;
width: 97px;
height: 99px;
border-radius: 100%;
background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 68%, #f0f0f0 68%, #ebeff5 79%, #c5d3e8 100%);
box-shadow: -7px -5px 0px rgba(0, 0, 0, 0.1) inset;
}
.ball_snow_area {
position: relative;
top: 63px;
width: 87px;
height: 10px;
margin: auto;
border-radius: 100%;
background: #fff;
}
.ball_thread {
width: 1px;
position: absolute;
background-color: seagreen;
height: 100px;
top: -100px;
left: 50%;
}
.ball_thread:before {
content: "";
display: block;
position: absolute;
bottom: 4px;
left: -2px;
height: 8px;
width: 4px;
border: 1px solid seagreen;
border-radius: 50%;
background-color: yellowgreen;
}
.ball_thread:after {
content: "";
display: block;
position: absolute;
bottom: -2px;
left: -8px;
height: 10px;
width: 16px;
border-radius: 4px;
background-color: yellowgreen;
box-shadow: -7px 0px 0px rgba(0, 0, 0, 0.1) inset;
}
.ball_hidden .snow {
position: absolute;
font-size: 0.5em;
}
.stackoverflow {
position: absolute;
top: 45px;
left: 14px;
width: 100px;
height: 25px;
background-image: url(https://cdn.sstatic.net/Sites/ru/img/sprites.svg?v=f508971f422f);
background-position: 0 -510px;
background-size: 95px;
z-index: 1;
}
/*/шар*/
/*лопата*/
.shovel {
position: absolute;
bottom: 10px;
left: 210px;
width: 10px;
height: 50px;
transform: rotate(5deg);
}
.shovel_handle {
position: absolute;
top: 0;
left: 0;
width: 10px;
height: 4px;
border: 2px solid #999;
border-radius: 10px;
background: rgba(0, 0, 0, 0.2);
}
.shovel_stick {
position: absolute;
top: 8px;
left: 6px;
width: 2px;
height: 26px;
background: #999;
}
.shovel_blade {
position: absolute;
top: 34px;
left: 0;
width: 10px;
height: 12px;
border-radius: 4px 4px 0px 0px;
border-top: 2px solid #999;
border-left: 2px solid #999;
border-right: 2px solid #999;
background-color: silver;
}
/*/лопата*/
/*ведро*/
.bucket {
position: absolute;
left: 180px;
bottom: 8px;
}
.bucket_handle {
position: absolute;
bottom: 12px;
left: 3px;
width: 6px;
height: 8px;
border-top: 1px solid #555;
border-left: 1px solid #555;
border-right: 1px solid #555;
border-radius: 4px 4px 0px 0px;
background: rgba(255, 255, 255, 0.1);
}
.bucket_handle_front {
position: absolute;
bottom: 12px;
left: 10px;
width: 1px;
height: 3px;
background: #555;
z-index: 1;
}
.bucket_edge {
position: absolute;
bottom: 12px;
left: 0px;
width: 14px;
height: 2px;
background: #999;
}
.bucket_body {
position: absolute;
bottom: 0;
left: 0;
height: 0;
width: 10px;
border-bottom: 12px solid silver;
border-left: 2px solid transparent;
border-right: 2px solid transparent;
transform: rotate(180deg);
}
/*/ведро*/<!-горы->
<div class="mountains">
<div class="mountain_one mountain_1"></div>
<div class="mountain_one mountain_2"></div>
<div class="mountain_one mountain_3"></div>
<div class="mountain_two mountain_4"></div>
<div class="mountain_two mountain_5"></div>
<div class="mountain_two mountain_6"></div>
<div class="mountain_three mountain_7"></div>
<div class="mountain_three mountain_8"></div>
<div class="mountain_three mountain_9"></div>
<div class="mount_snow"></div>
</div>
<!-/горы->
<!-луна->
<div class="moon"></div>
<!-/луна->
<!-елка->
<div class="tree">
<div class="tree__trunk"></div>
<div class="tree__lights__one"></div>
<div class="tree__lights__two"></div>
<div class="tree__lights__three"></div>
<div class="star">★</div>
</div>
<!-/елка->
<!-падающий_снег->
<div class="snows" aria-hidden="true">
<div class="snow">❅</div>
<div class="snow">❆</div>
<div class="snow">❅</div>
<div class="snow">❄</div>
<div class="snow">❅</div>
<div class="snow">❆</div>
<div class="snow">❅</div>
<div class="snow">❄</div>
<div class="snow">❆</div>
<div class="snow">❅</div>
<div class="snow">❆</div>
</div>
<!-/падающий_снег->
<!-снежинка->
<div class="snowflake_container">
<div class="snowflake snow__one"></div>
<div class="snowflake snow__two"></div>
<div class="snowflake snow__three"></div>
<div class="snowflake snow__four"></div>
</div>
<!-/снежинка->
<!-дед_мороз->
<div class="ded_moroz_container">
<div class="ded_moroz_body"></div>
<div class="ded_moroz">
<div class="ded_moroz_beard"></div>
<div class="ded_moroz_face">
<div class="ded_moroz_eye_one"></div>
<div class="ded_moroz_eye_two"></div>
<div class="ded_moroz_nose"></div>
<div class="ded_moroz_mouth"></div>
</div>
<div class="ded_moroz_cap">дед</div>
</div>
</div>
<!-/дед_мороз->
<!-снеговик->
<div class="snowman_container">
<div class="snowman">
<div class="snowman_shadow"></div>
<div class="snowman_body"></div>
<div class="snowman_head"></div>
<div class="snowman_coal"></div>
<div class="snowman_carrot"></div>
<div class="snowman_hand_l"></div>
<div class="snowman_hand_r"></div>
<div class="snowman_scarf"></div>
<div class="snowman_bucket"></div>
</div>
</div>
<!-/снеговик->
<!-шар->
<div class="ball_container">
<div class="ball_hidden">
<div class="stackoverflow"></div>
<div class="snows" aria-hidden="true">
<div class="snow">❅</div>
<div class="snow">❆</div>
<div class="snow">❅</div>
<div class="snow">❄</div>
<div class="snow">❅</div>
<div class="snow">❆</div>
<div class="snow">❅</div>
<div class="snow">❄</div>
<div class="snow">❆</div>
<div class="snow">❅</div>
<div class="snow">❆</div>
</div>
</div>
<div class="ball">
</div>
<div class="ball_snow">
<div class="ball_snow_area"></div>
</div>
<div class="ball_thread"></div>
</div>
<!-/шар->
<!-лопата->
<div class="shovel">
<div class="shovel_handle"></div>
<div class="shovel_stick"></div>
<div class="shovel_blade"></div>
</div>
<!-/лопата->
<!-ведро->
<div class="bucket">
<div class="bucket_handle"></div>
<div class="bucket_handle_front"></div>
<div class="bucket_edge"></div>
<div class="bucket_body"></div>
</div>
<!-/ведро->
Автор решения: entithat
→ Ссылка
Минимальная анимация ползучей строки на Python. С прошедшим!
from os import system
from time import sleep
string = [
"░█| ░█ ░███ ░█_░█ ░█_░█ ░█| ░█ ░██ ░█ ░█_░█ ░█ ░█ ░█| ░█ ░█_░█ ░███ ░██_░█ ",
"░█|_░█ ░█|_░█ ░████ ░████ ░███ ░█|░█░█ ░████ ░█ ░█ ░█ ░███ ░████ ░█|_░█ ░████ ",
"░█████ ░█████ ░█ ░█ ░█ ░█| ░██ ░█ ░█ ░█░█ ░█ ░█ ░█ ░█████ ░█ ░█ ",
"░█| ░█ ░█| ░█ ░█ ░█ ░█.......░█| ░█ ░████ ░██ ░██ ........░█ ░████ ░█| ░█ ░█ ░██ "]
def rotate(l, n):
return l[n:] + l[:n]
while True:
system('cls')
for j in range(len(string)):
string[j] = rotate(string[j], 1)
print("\n".join(string))
sleep(0.01)
Автор решения: TigerTV.ru
→ Ссылка
C Новым Годом!!!
Цветная консоль на С++(256 цветов)
#include <iostream>
#include <string>
#include <vector>
#include <chrono>
#include <thread>
class Screen {
private:
int height = 30;
int width = 100;
std::vector<uint32_t> chars;
std::vector<uint32_t> backgroundScreen;
public:
Screen(int width, int height) : chars(height * width, (int)((1 << 8) | ' ') ) {}
int getWidth() { return width; }
int getHeight() { return height; }
void show() {
for (int i = 0; i < height; ++i) {
for(int j = 0; j < width; ++j) {
// unpack char
int backColor = (chars[i * width + j] >> 8) & 0xff;
int foreColor = (chars[i * width + j] >> 16) & 0xff;
int effect = (chars[i * width + j] >> 24) & 0xff;
char c = chars[i * width + j] & 0xff;
std::cout << "\x1b[38:5:" << foreColor << "m";
std::cout << "\x1b[48:5:"<< backColor << "m";
std::cout << "\x1b["<< effect << "m" << c;
std::cout << "\x1b[m" << "\x1b[m" << "\x1b[m";
}
std::cout << std::endl;
}
}
void setCharAtXY(int x, int y, char value, uint8_t backColor = 16, uint8_t foreColor = 0, uint8_t effect = 1) {
chars[x + y * width] = value | (backColor << 8) | (foreColor << 16) | (effect << 24);
}
void setCharAtXY(int x, int y, uint32_t packedChar) {
chars[x + y * width] = packedChar;
}
uint32_t getCharAtXY(int x, int y) {
return chars[x + y * width];
}
void clear() {
if (backgroundScreen.size()) {
chars = backgroundScreen;
} else {
for (int i = 0; i < height; ++i) {
for(int j = 0; j < width; ++j) {
setCharAtXY(j, i, 0x01006920U);
}
}
}
std::cout << "\x1b[2J\x1b[H";
}
void save() {
backgroundScreen = chars;
}
};
struct IScreenable {
virtual void draw(Screen& screen) = 0;
};
class Tree : public IScreenable {
private:
int x;
int y;
int height;
public:
Tree (int x, int y, int height) : x(x), y(y), height(height) {}
void setX(int x) { this->x = x; }
void setY(int y) { this->y = y; }
void draw(Screen& screen) override {
int stemWidth = 5;
int stemHeight = 4;
std::srand(std::time(nullptr));
// needles
int xx = x;
int i = 0;
for ( ; i < height - stemHeight; ++i, --xx) {
for(int j = 0; j < i * 2 + 1; ++j) {
screen.setCharAtXY(xx + j, y + i, '*', 2);
}
int k = std::rand() % (i * 2 + 1);
screen.setCharAtXY(xx + k, y + i, 0x05c4026fU);
}
// stem
for (xx = x; i < height; ++i) {
for(int j = 0; j < stemWidth; ++j) {
screen.setCharAtXY(xx - stemWidth / 2 + j, y + i, '|', 3);
}
}
}
};
class Ground : public IScreenable {
private:
int height = 5;
public:
void draw(Screen& screen) override {
int sHeight = screen.getHeight();
int sWidth = screen.getWidth();
for (int i = sHeight - height; i < sHeight; ++i) {
for(int j = 0; j < sWidth; ++j) {
screen.setCharAtXY(j, i, ' ', 15);
}
}
}
};
class BigText : public IScreenable {
private:
int x = 11;
int y = 3;
int color = 15;
public:
void draw(Screen& screen) override {
const int width = 15;
int points[][width] = {
{1, 1, 1, 0, 1, 1, 1, 0, 1, 1, 1, 0, 0, 1, 0},
{0, 0, 1, 0, 1, 0, 1, 0, 0, 0, 1, 0, 1, 1, 0},
{1, 1, 1, 0, 1, 0, 1, 0, 1, 1, 1, 0, 0, 1, 0},
{1, 0, 0, 0, 1, 0, 1, 0, 1, 0, 0, 0, 0, 1, 0},
{1, 1, 1, 0, 1, 1, 1, 0, 1, 1, 1, 0, 1, 1, 1},
};
int height = (int)(sizeof(points) / sizeof(points[0]));
for (int i = 0; i < height ; ++i) {
for (int j = 0; j < width; ++j) {
if (points[i][j]) {
screen.setCharAtXY(x + j, y + i, ' ', color);
}
}
}
}
};
class DedMoroz : public IScreenable {
private:
int x;
int y;
bool isSmiling = false;
public:
DedMoroz(int x, int y) : x(x), y(y) {}
void setX(int x) { this->x = x; }
void setY(int y) { this->y = y; }
int getX() { return x; }
int getY() { return y; }
void goLeft() { --x; }
void goRight() { ++x; (x & 1) ? --y : ++y;}
void smile() {
isSmiling = true;
}
void draw(Screen& screen) override {
const int width = 13;
uint32_t points[][width] = {
{0x00000000, 0x00000000, 0x0106a020, 0x0106a020, 0x0106a020, 0x00000000, 0, 0, 0, 0, 0, 0, 0,},
{0x00000000, 0x0106a020, 0x0106a020, 0x0106a020, 0x0106a020, 0x0106a020, 0, 0, 0, 0, 0, 0, 0,},
{0x00000000, 0x01060f20, 0x01060f20, 0x01060f20, 0x01060f20, 0x01060f20, 0, 0, 0, 0, 0, 0, 0,},
{0x0106df28, 0x0106df20, 0x0100df4f, 0x0106df20, 0x0100df4f, 0x0106df20, 0x0106df29, 0, 0, 0, 0, 0, 0,},
{0x00000000, 0x0106df20, 0x0106df20, 0x0106df22, 0x0106df20, 0x0106df20, 0, 0, 0, 0, 0, 0, 0,},
{0x00000000, 0x0106df20, 0x0106df20, 0x0106df7e, 0x0106df20, 0x0106df20, 0, 0, 0, 0, 0, 0, 0,},
{0x00000000, 0x01060f20, 0x01060f20, 0x01060f20, 0x01060f20, 0x01060f20, 0, 0, 0, 0, 0, 0, 0,},
{0x00000000, 0x0106a020, 0x0106a020, 0x01060f20, 0x0106a020, 0x0106a020, 0x0106a020, 0x0106df20, 0, 0, 0, 0, 0,},
{0x00000000, 0x0106a020, 0x0106a020, 0x01060f20, 0x0106a020, 0x0106a020, 0x00000000, 0x0106a020, 0x0106a020, 0x0106a020, 0x0106a020, 0x0106a020, 0, },
{0x00000000, 0x0106a020, 0x0106a020, 0x01060f20, 0x0106a020, 0x0106a020, 0x00000000, 0x0106a020, 0x0106a020, 0x0106a020, 0x0106a020, 0x0106a020, 0, },
{0x00000000, 0x01060f20, 0x01060f20, 0x01060f20, 0x01060f20, 0x01060f20, 0x00000000, 0x0106a020, 0x0106a020, 0x0106a020, 0x0106a020, 0x0106a020, 0, },
{0x00000000, 0x01000020, 0x01000020, 0x00000000, 0x01000020, 0x01000020, 0x00000000, 0x00000000, 0x00000000, 0x00000000, 0x00000000, 0x00000000, 0, },
};
int height = (int)(sizeof(points) / sizeof(points[0]));
for (int i = 0; i < height ; ++i) {
for (int j = 0; j < width; ++j) {
if (points[i][j]) {
screen.setCharAtXY(x + j, y + i, points[i][j]);
}
}
}
if (isSmiling) {
uint32_t points2[][5] = {
{0x0, 0x00000000, 0x00000000, 0x00000000, 0x0},
{0x0, 0x0106df5c, 0x0106df5f, 0x0106df2f, 0x0},
};
int xx = x + 1;
int yy = y + 4;
for (int i = 0; i < 2; ++i) {
for (int j = 0; j < 5; ++j) {
if (points2[i][j]) {
screen.setCharAtXY(xx + j, yy + i, points2[i][j]);
}
}
}
}
}
};
class SnowFall: public IScreenable {
private:
int y;
int x;
int snowInRow = 3;
const uint32_t packedSnowFlake = 0x010f002a;
std::vector<std::vector<int>> points;
void step() {
if (++y >= 30) y = 0;
if (++x >= 100) x = 0;
}
public:
SnowFall() {
y = 0;
x = 0;
int height = 14;
int sWidth = 100;
std::srand(std::time(nullptr));
for(int i = 0; i < height; ++i) {
std::vector<int> a;
for(int j = 0; j < snowInRow; ++j) {
a.push_back(std::rand() % sWidth);
}
points.push_back(a);
}
}
void setY(int y) { this->y = y; }
int getY() { return y; }
void draw(Screen& screen) override {
int height = points.size();
int sHeight = screen.getHeight();
int sWidth = screen.getWidth();
for (int i = 0; i < height ; ++i) {
for (int j = 0; j < snowInRow; ++j) {
int yy = y + i * 2;
int xx = x + points[i][j];
if (yy >= sHeight) yy -= sHeight;
if (xx >= sWidth) xx -= sWidth;
uint32_t c = screen.getCharAtXY(xx, yy);
c &= 0x0000ff00; // current background
c |= packedSnowFlake; // change background for a snowflake
screen.setCharAtXY(xx, yy, c);
}
}
step();
}
};
class Window: public IScreenable {
private:
int x = 60;
int y = 15;
int width = 35;
int height = 7;
int color = 195;
public:
void draw(Screen& screen) override {
// vertical borders
for (int i = 0; i < height ; ++i) {
screen.setCharAtXY(x, y + i, ' ', color);
screen.setCharAtXY(x + width - 1, y + i, ' ', color);
}
// horizontal borders
for (int i = 1; i < width - 1; ++i) {
screen.setCharAtXY(x + i, y, ' ', color);
screen.setCharAtXY(x + i, y + height - 1, ' ', color);
}
const std::string texts[] = {
" HO-HO-HO, HO-HO-HO ",
" MERRY CHRISTMAS !!! ",
" HAPPY NEW YEAR !!! ",
};
int xx = x + 2;
int yy = y + 2;
int size = sizeof(texts) / sizeof(texts[0]);
for (int i = 0; i < size; ++i) {
for (int j = 0; j < (int)texts[i].size(); ++j) {
screen.setCharAtXY(xx + j, yy + i, texts[i][j], color);
}
}
}
};
int main() {
Screen screen(100, 30);
std::vector<IScreenable*> objects;
screen.clear();
// static objects for background can be saved
Ground ground; ground.draw(screen);
Tree tree(50, 7, 20); tree.draw(screen);
screen.save();
DedMoroz santa(0, 16); objects.push_back(&santa);
SnowFall snow; objects.push_back(&snow);
BigText text;
Window window;
bool isPlaying = true;
while(isPlaying) {
screen.clear();
santa.goRight(); // go to the tree
if (santa.getX() == 50) {
isPlaying = false;
santa.smile();
objects.push_back(&text);
objects.push_back(&window);
}
for (IScreenable* const obj : objects) {
obj->draw(screen);
}
screen.show();
std::this_thread::sleep_for(std::chrono::milliseconds(700));
}
}
Автор решения: wololo
→ Ссылка
JavaScript + Canvas (довольно ресурсоёмкая "ёлочка"):
function pythagoras_tree()
{
function get_next_squares(square, coefs)
{
function coefs_to_triangle_len(coefs, len_c)
{
let {coef_a, coef_b} = coefs;
let len = {};
len.a = len_c * coef_a / Math.sqrt(coef_a * coef_a + coef_b * coef_b);
len.b = len.a * coef_b / coef_a;
len.c = len_c;
return len;
}
function get_C_point(A, B, G, tr_len)
{
function get_opposite_point(A, B, G, C1, C2)
{
let coef_a = A.y - B.y;
let coef_b = B.x - A.x;
let coef_d = A.x * B.y - B.x * A.y;
let f0 = coef_a * G.x + coef_b * G.y + coef_d;
let f1 = coef_a * C1.x + coef_b * C1.y + coef_d;
if (f0 * f1 < 0)
return C1;
return C2;
}
let p0 = A.x * A.x + A.y * A.y - tr_len.b * tr_len.b;
let p1 = p0 + tr_len.a * tr_len.a - (B.x * B.x + B.y * B.y);
let px = 2 * (A.x - B.x);
let py = 2 * (A.y - B.y);
let C1 = {}, C2 = {};
if (Math.abs(px) > Math.abs(py))
{
let t1 = p1 / px, t2 = py / px;
let w1 = 1 + t2 * t2;
let w2 = 2 * (A.x * t2 - t1 * t2 - A.y);
let w3 = p0 + t1 * t1 - 2 * A.x * t1;
let sqrt_d = Math.sqrt(w2 * w2 - 4 * w1 * w3);
C1.y = (-w2 + sqrt_d) / (2 * w1)
C1.x = t1 - t2 * C1.y;
C2.y = (-w2 - sqrt_d) / (2 * w1)
C2.x = t1 - t2 * C2.y;
}
else
{
let t1 = p1 / py, t2 = px / py;
let w1 = 1 + t2 * t2;
let w2 = 2 * (A.y * t2 - t1 * t2 - A.x);
let w3 = p0 + t1 * t1 - 2 * A.y * t1;
let sqrt_d = Math.sqrt(w2 * w2 - 4 * w1 * w3);
C1.x = (-w2 + sqrt_d) / (2 * w1);
C1.y = t1 - t2 * C1.x;
C2.x = (-w2 - sqrt_d) / (2 * w1);
C2.y = t1 - t2 * C2.x;
}
return get_opposite_point(A, B, G, C1, C2);
}
function rot(begin, end, dir)
{
let x = end.x - begin.x;
let y = end.y - begin.y;
[x, y] = [dir * y, -1 * dir * x];
x += begin.x;
y += begin.y;
return {x, y};
}
let tr_len = coefs_to_triangle_len(coefs, square.len);
let C = get_C_point(square.A, square.B, square.G1, tr_len);
const clock = 1, aclock = -1;
let left_square = {
A: rot(square.A, C, aclock), B: rot(C, square.A, clock),
G1: square.A, G2: C,
len: tr_len.b,
};
let right_square = {
A: rot(C, square.B, aclock), B: rot(square.B, C, clock),
G1: C, G2: square.B,
len: tr_len.a,
};
return [left_square, right_square];
}
function draw_square(context, square)
{
const canvas_width = context.canvas.width;
const canvas_height = context.canvas.height;
function is_valid_point(point)
{
return ( 0 <= point.x && point.x <= canvas_width &&
0 <= point.y && point.y <= canvas_height );
}
let {A, B, G1, G2} = square;
if (is_valid_point(A) && is_valid_point(B) &&
is_valid_point(G1) && is_valid_point(G2))
{
context.moveTo(A.x, canvas_height - A.y);
context.lineTo(G1.x, canvas_height - G1.y);
context.moveTo(B.x, canvas_height - B.y);
context.lineTo(G2.x, canvas_height - G2.y);
}
}
function create_first_square(G1, len)
{
let first_square = {};
first_square.A = {x: G1.x, y: G1.y + len};
first_square.B = {x: G1.x + len, y: G1.y + len};
first_square.G1 = G1;
first_square.G2 = {x: G1.x + len, y: G1.y };
first_square.len = len;
return first_square;
}
function draw_tree(square, param, rec_depth = 0)
{
if (rec_depth > param.max_rec_depth || square.len < param.min_square_len)
return;
draw_square(param.context, square);
let left_right_squares = get_next_squares(square, param.coefs[rec_depth]);
for (let next_square of left_right_squares)
draw_tree(next_square, param, rec_depth + 1);
}
function get_param(base_param)
{
let param = {};
Object.setPrototypeOf(param, base_param);
let coefs_arr = [];
for (let i = 0; i <= param.max_rec_depth; ++i)
{
let coefs = {};
if (i % 2 === 0)
{
coefs.coef_a = param.coefs.coef_a;
coefs.coef_b = param.coefs.coef_b;
}
else
{
coefs.coef_a = param.coefs.coef_b;
coefs.coef_b = param.coefs.coef_a;
}
coefs_arr.push(coefs);
}
param.coefs = coefs_arr;
return param;
}
function tree_main()
{
let context = document.getElementById("id_canvas").getContext("2d");
context.fillStyle = "rgba(0, 0, 0, 1.0)"
context.fillRect(0, 0, context.canvas.width, context.canvas.height);
context.fillStyle = "rgba(0, 0, 0, 0.25)"
context.strokeStyle = "rgb(50, 250, 50)";
let time_old = Date.now();
let dir_current = "left_up";
let step_current = 0;
let tick = function()
{
const coefs_min = 1;
const coefs_max = 1.75;
const step_max = 1000;
let coef_1 = 1;
let coef_2 = coefs_min + (coefs_max - coefs_min) * (step_current / step_max);
let coef_a, coef_b;
switch (dir_current)
{
case "left_up":
coef_a = coef_1;
coef_b = coef_2;
++step_current;
if (step_current > step_max)
{
step_current = step_max;
dir_current = "left_down";
}
break;
case "left_down":
coef_a = coef_1;
coef_b = coef_2;
--step_current;
if (step_current < 0)
{
step_current = 0;
dir_current = "right_up";
}
break;
case "right_up":
coef_a = coef_2;
coef_b = coef_1;
++step_current;
if (step_current > step_max)
{
step_current = step_max;
dir_current = "right_down";
}
break;
case "right_down":
coef_a = coef_2;
coef_b = coef_1;
--step_current;
if (step_current < 0)
{
step_current = 0;
dir_current = "left_up";
}
break;
}
let base_param = {
context: context,
min_square_len: 2,
max_rec_depth: 18,
coefs: {coef_a: coef_a, coef_b: coef_b},
};
let param = get_param(base_param);
const base_square_len_min = 5;
const base_square_len_max = 70;
let base_square_len = base_square_len_min +
(base_square_len_max - base_square_len_min) * (step_current / step_max);
let G1 = {x: context.canvas.width * 0.5 - base_square_len * 0.5, y: 1};
let square = create_first_square(G1, base_square_len);
context.fillRect(0, 0, context.canvas.width, context.canvas.height);
context.beginPath();
context.lineWidth = 1.0 + 2.0 * (step_current / step_max);
draw_tree(square, param);
context.stroke();
const time_dif_base = 50;
const time_dif_min = 10;
let time_current = Date.now();
let time_dif = time_current - time_old;
time_old = time_current;
let timeout = Math.min(Math.max(time_dif_base - time_dif, time_dif_min), time_dif_base);
setTimeout(tick, timeout);
}
tick();
}
tree_main();
}
pythagoras_tree();canvas {border: 1px solid black}<canvas id = "id_canvas" height = "500" width = "500"></canvas>
Автор решения: Stranger in the Q
→ Ссылка
В этом году минималистично, всех с праздником!
const ctx = c.getContext("2d");
requestAnimationFrame(function draw(t) {
c.width = innerWidth;
c.height = innerHeight;
ctx.fillStyle = 'white';
for (let i = 0; i < 200; i++) {
const a = t / 1e3 + i/3,
d = Math.sin(a)*i/2e3 + 1,
x = c.width/2 + Math.cos(a)*i/3/d,
y = c.height/2 + i/d;
ctx.beginPath();
ctx.arc(x, y - 100, 2/d, 0, 7);
ctx.fill();
}
requestAnimationFrame(draw);
});body {
margin: 0;
overflow: hidden;
background: black
}<canvas id=c></canvas>
Автор решения: ТарасПрограммер
→ Ссылка
Сделал новогоднюю ёлочку на С++ со светящимися гирляндами! Новогоднего настроения вам
#include <iostream>
#include <windows.h>
#include <string>
#include <io.h>
#include <fcntl.h>
#define miliseconds
using namespace std;
constexpr int delay = 2000 miliseconds;
int main()
{
srand(time(NULL));
_setmode(_fileno(stdout), _O_U16TEXT);
SetConsoleTitleW(L"Праздник ?");
wstring x_mas = L" ♣ \n"
L" **♥** \n "
L" **/////*, \n "
L" *//((♫((//* \n "
L" /☻(((###(((☻/ \n "
L" ,//(☻######☻(//* \n "
L" *//(((☻###☻####((//* \n "
L" **//((((((☻(((((((//(** \n "
L" /**///////☻#%☻#//////**##(( \n "
L" *****##%%%☻%%%%%%☻%///**%#####( \n "
L" ((######%☻%%%%%%%%%%%%☻%%%%%%####(( \n "
L" ((##♫###☻#################☻#######((( \n "
L" ((###☻####(#########♫########☻###(((( \n "
L" ▼ *☻//((######################((☻//*▼ \n "
L" (**//(☻(########################((//☻* \n "
L" ((####///(☻(((((((##############(((/☻#☼##(( \n "
L" %((######%%%*///#☻////%(((((((((((((((#☻//%###☼(( \n "
L" ▼ ((#####%%%%%%%%%☻%%%%%%%%#//////☻%%(((%%%%%%%%#####((( \n "
L" ((((#&######%%%%%%%%☻%%%%%%%%%%%%☻%%%%%%%%%%%%########((( \n"
L" *((((((#♥%############☻#%%%%%%☻%%%%%%%%#♫#####%#%//%((( ▼ \n "
L" ▼ *//(#(#############☻###☻##############(((###((//* \n "
L" *//((##################☻(((((#♫%##((((#########(((/** \n "
L" *//(((################☻#####☻####################(((/##**# \n "
L" (***(/(((#############☻###########☻###############((((//*#####( \n"
L" ▼**####*///(((((##☻#################☻#(((((#(((((((((/%/****%%%####((% \n"
L" ((####%%♫*****%%☻((((###############(((/☻//####*////**%%%%♫%%%%%%####(((( \n"
L" ((((####%%%%%%%☻%%%*////((((((((((((((//%%%%☻%%%%%%%%%%%%%%%%%%%%%######(((( \n"
L" (((((#####%%%☻%%%%%%%***%%%///////////**%%%%%%%%%☻%%%%%%%%%%#########(( ▼ \n "
L" ▼ ((###☻###########%%%%%%%%%%%%%%%%%%#############☻##########((((/ ▼ \n"
L" (((((((% ##########################(((( (((((((( \n"
L" ╔############╗ \n"
L" ║############║ \n"
L" ║############║ \n"
L" ║############║ \n"
L" ╚############╝ \n"
L"░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░\n";
HANDLE handle = GetStdHandle(STD_OUTPUT_HANDLE);
int sym[] = { 1,2,3,4,5,6,7,8,9,10,11,12,13,14 };
while (true)
{
wcout << endl << endl << endl << endl << endl << endl << endl << endl << endl << endl << endl << endl << endl;
for (int i = 0; i < size(x_mas); i++)
{
if (x_mas[i] == L'☻')
{
SetConsoleTextAttribute(handle, sym[rand() % size(sym)]);
wcout << x_mas[i];
SetConsoleTextAttribute(handle, 7);
}
else
{
wcout << x_mas[i];
}
}
Sleep(delay);
system("cls");
}
cin.get();
}
Автор решения: OPTIMUS PRIME
→ Ссылка
Uno, uno... Dos, dos... xD
(подстраивается под размер окна)
"use strict";
let canvas;
// canvas.ctx, canvas.size (квадрат)
let _c, santa, ANIMATE;
/*****/
(function _namespace() {
// canvas mini-lib
_c /* GLOBAL */ = function (ctx) {
return new ContextWrap(ctx);
};
_c.rotateMatrix = function (matrix, centerPoints, angle) {
if (angle === 0) return matrix;
var cx = centerPoints[0];
var cy = centerPoints[1];
var sin = Math.sin(angle * Math.PI / 180);
var cos = Math.cos(angle * Math.PI / 180);
for (var i = 0, len = matrix.length; i < len; i++) {
var px = matrix[i][0];
var py = matrix[i][1];
matrix[i][0] = cos * (px - cx) - sin * (py - cy) + cx;
matrix[i][1] = sin * (px - cx) + cos * (py - cy) + cy;
}
return matrix;
};
_c.rotatePoint = function (point, center, angle) {
if (angle === 0) return point;
var cx = center[0];
var cy = center[1];
var px = point[0];
var py = point[1];
var sin = Math.sin(angle * Math.PI / 180);
var cos = Math.cos(angle * Math.PI / 180);
return [
cos * (px - cx) - sin * (py - cy) + cx,
sin * (px - cx) + cos * (py - cy) + cy
];
};
function ContextWrap(ctx) {
ctx.lineWidth = 1;
this.ctx = ctx;
}
CreatePrototype.call(ContextWrap.prototype);
/***/
function CreatePrototype() {
this.clear = function () {
this.ctx.clearRect(0, 0, this.ctx.canvas.width, this.ctx.canvas.height);
return this;
};
this.fillStyle = function (color) {
this.ctx.fillStyle = color;
return this;
};
this.path = function (matrix) {
var ctx = this.ctx;
ctx.beginPath();
for (var i = 0; i < matrix.length; i++) {
ctx.lineTo(matrix[i][0], matrix[i][1]);
}
ctx.closePath();
ctx.fill();
return this;
};
this.arc = function (cx, cy, r, start, end) {
var ctx = this.ctx;
ctx.beginPath();
ctx.arc(cx, cy, r, start || 0, end || 2 * Math.PI);
ctx.fill();
return this;
};
this.ellipse = function (cx, cy, rx, ry, rotate, start, end) {
var ctx = this.ctx;
ctx.beginPath();
ctx.ellipse(cx, cy, rx, ry, rotate || 0, start || 0, end || 2 * Math.PI);
ctx.fill();
return this;
};
};
})();
/*****/
canvas /* GLOBAL */ = (function () {
let cnv = document.querySelector("#scene");
let ctx = cnv.getContext("2d");
let size = cnv.width = cnv.height = Math.min(innerWidth, innerHeight);
let _data_ = { ctx, size };
let timer = null;
addEventListener("resize", function () {
clearTimeout(timer);
timer = setTimeout(function () {
_data_.size = cnv.width = cnv.height = Math.min(innerWidth, innerHeight);
}, 500);
});
return _data_;
})();
/*****/
function DRAW() {
_c(canvas.ctx).clear();
let _tmp = [santa /* , snow_maiden */];
_tmp.forEach(char => {
char.init_skelet(canvas);
Object.values(char.render)
.sort((a, b) => a.z_index - b.z_index)
.forEach(function (obj) {
char[obj.call](canvas, obj);
});
});
};
/*****/
santa = {};
santa.position = {
// Относительные ключевые точки, домножаются на масштаб и рисуются.
head: {
dx: 0,
dy: 0,
r: 0.15,
},
body: {
bot_x: 0.5,
bot_y: 0.7,
rotate: 0,
},
leg1: {
dx: 1, // 0 → 1
},
leg2: {
dx: 1, // 0 → 1
},
};
santa.skelet = null;
santa.render = {
head: {
z_index: 100,
fill: "#ebba9a",
call: "head",
},
body: {
z_index: 40,
fill: "#c11",
call: "body",
},
hand: {
z_index: 50,
fill: "#c11",
call: "hand",
},
foot: {
z_index: 30,
fill: "#c11",
call: "foot",
},
};
santa.init_skelet = function (cnv) {
let size = cnv.size;
let pos = santa.position;
let skel = santa.skelet = {};
/*** BODY */
let b = pos.body;
let neck_x = b.bot_x * size;
let neck_y = b.bot_y * size - 0.2 * size;
skel.body = _c.rotateMatrix(
[
[b.bot_x * size - 0.1 * size, b.bot_y * size],
[neck_x - 0.1 * size, neck_y],
[neck_x + 0.1 * size, neck_y],
[b.bot_x * size + 0.1 * size, b.bot_y * size],
],
[b.bot_x * size, b.bot_y * size],
b.rotate
);
/*** HEAD */
let h = pos.head;
let head_center = _c.rotatePoint(
[neck_x, neck_y - h.r * size],
[b.bot_x * size, b.bot_y * size],
b.rotate
);
skel.head = {
cx: head_center[0],
cy: head_center[1],
r: h.r * size,
};
/*** EYES */
skel.eyes = {
"1": {
cx: skel.head.cx - 0.04 * size,
cy: skel.head.cy,
rx: size * h.r * 0.25,
ry: size * h.r * 0.35,
},
"2": {
cx: skel.head.cx + 0.04 * size,
cy: skel.head.cy,
rx: size * h.r * 0.25,
ry: size * h.r * 0.35,
}
};
/*** NOSE */
skel.nose = {
cx: skel.head.cx,
cy: skel.head.cy + 0.06 * size,
rx: size * h.r * 0.4,
ry: size * h.r * 0.25,
};
/*** BEARD */
let hx = skel.head.cx;
let hy = skel.head.cy;
skel.beard = [
[hx - size * h.r, hy - 0.06 * size],
[hx - size * h.r * 0.8, hy],
[hx, hy + 0.08 * size],
[hx + size * h.r * 0.8, hy],
[hx + size * h.r, hy - 0.06 * size],
[hx + size * h.r, hy + 0.05 * size],
[hx + size * h.r * 0.8, hy + 0.15 * size],
[hx, hy + 0.25 * size],
[hx - size * h.r * 0.8, hy + 0.15 * size],
[hx - size * h.r, hy + 0.05 * size],
];
/*** HAT_TOP */
skel.hat_top = {
cx: hx,
cy: hy - 0.2 * size,
r: size * h.r * 0.4
};
/*** HAT */
skel.hat = [
[hx - size * h.r, hy - 0.05 * size],
[hx - size * h.r, hy - 0.07 * size],
[hx - size * h.r * 0.6, hy - 0.15 * size],
[hx, hy - 0.2 * size],
[hx + size * h.r * 0.6, hy - 0.15 * size],
[hx + size * h.r, hy - 0.07 * size],
[hx + size * h.r, hy - 0.05 * size],
[hx + size * h.r * 0.6, hy - 0.06 * size],
[hx - size * h.r * 0.6, hy - 0.06 * size],
];
/***/
/*** HANDS */
// shoulder
let sh1_x = skel.body[1][0];
let sh1_y = skel.body[1][1];
skel.hand1 = [
[sh1_x - size * 0.042, sh1_y - size * 0.08],
[sh1_x, sh1_y],
[sh1_x - size * 0.03, sh1_y + size * 0.05],
[sh1_x, sh1_y + size * 0.12],
[sh1_x - size * 0.03, sh1_y + size * 0.18],
[sh1_x - size * 0.09, sh1_y + size * 0.05],
];
let sh2_x = skel.body[2][0];
let sh2_y = skel.body[2][1];
skel.hand2 = [
[sh2_x + size * 0.042, sh2_y - size * 0.08],
[sh2_x, sh2_y],
[sh2_x + size * 0.03, sh2_y + size * 0.05],
[sh2_x, sh2_y + size * 0.12],
[sh2_x + size * 0.03, sh2_y + size * 0.18],
[sh2_x + size * 0.09, sh2_y + size * 0.05],
];
/*** FEET */
let leg1_dx = pos.leg1.dx * 0.05;
let f1_x = skel.body[0][0];
let f1_y = skel.body[0][1];
skel.foot1 = [
[f1_x, f1_y],
[f1_x + size * 0.08, f1_y],
[f1_x + size * 0.09 - size * leg1_dx, f1_y + size * 0.1],
[f1_x + size * 0.1, f1_y + size * 0.24],
[f1_x - size * 0.05, f1_y + size * 0.24],
[f1_x - size * leg1_dx, f1_y + size * 0.1],
];
let leg2_dx = pos.leg2.dx * 0.05;
let f2_x = skel.body[3][0];
let f2_y = skel.body[3][1];
skel.foot2 = [
[f2_x, f2_y],
[f2_x - size * 0.08, f2_y],
[f2_x - size * 0.09 + size * leg2_dx, f2_y + size * 0.1],
[f2_x - size * 0.1, f2_y + size * 0.24],
[f2_x + size * 0.05, f2_y + size * 0.24],
[f2_x + size * leg2_dx, f2_y + size * 0.1],
];
};
/*****/
santa.body = function (cnv, obj) {
_c(cnv.ctx)
.fillStyle(obj.fill)
.path(santa.skelet.body);
};
santa.head = function (cnv, obj) {
let skel = santa.skelet;
let { cx, cy, r } = skel.head;
_c(cnv.ctx)
.fillStyle(obj.fill)
.arc(cx, cy, r);
santa.beard(cnv);
santa.eyes(cnv);
santa.nose(cnv);
santa.hat(cnv);
};
santa.beard = function (cnv) {
_c(cnv.ctx)
.fillStyle("#fff")
.path(santa.skelet.beard);
};
santa.eyes = function (cnv) {
let e = santa.skelet.eyes;
_c(cnv.ctx)
.fillStyle("#123")
.ellipse(e[1].cx, e[1].cy, e[1].rx, e[1].ry)
.ellipse(e[2].cx, e[2].cy, e[2].rx, e[2].ry);
};
santa.nose = function (cnv) {
let n = santa.skelet.nose;
_c(cnv.ctx)
.fillStyle("#a00")
.ellipse(n.cx, n.cy, n.rx, n.ry);
};
santa.hat = function (cnv) {
let t = santa.skelet.hat_top;
_c(cnv.ctx)
.fillStyle("#fff")
.arc(t.cx, t.cy, t.r)
.fillStyle("#c11")
.path(santa.skelet.hat);
};
//...
santa.hand = function (cnv) {
_c(cnv.ctx)
.fillStyle("#c11")
.path(santa.skelet.hand1)
.path(santa.skelet.hand2);
};
santa.foot = function (cnv) {
_c(cnv.ctx)
.fillStyle("#c11")
.path(santa.skelet.foot1)
.path(santa.skelet.foot2);
};
/*****/
ANIMATE /* GLOBAL */ = {
// 1. ANIMATE.add(obj) — заворачивает obj в функию,
// 2. Добавляет её в хранилище _fn_storage,
// 3. На каждом animationFrame оттуда циклом вызываются все функции
// 4. На основе данных из obj, каждая функция меняет анимируемые значения
// (сколько необходимо за один кадр)
_unique_key: 0,
_fn_storage: {},
add: function (obj) {
this._fn_storage[obj._self = this._unique_key++] = this._get_closure_fn(obj);
return this;
},
_get_closure_fn: function (obj) {
/* obj = {
root: santa.position.hand,
prop: "rotate",
chain: [
{to: -90, ms: 1000},
{sleep: 1000, callback: fn},
{to: 70, ms: 1000, callback: fn},
],
} */
/***/
let i = 0, curr = obj.chain[i];
let change_per_ms; // {Number} : изменение анимируемого значения за 1 мс.
let reached_end; // {Function → return Boolean}
_update_params();
return function _animate(dt) {
/*** dt {Number} : Время, прошедшее после предыдущего вызова animationFrame ***/
if (curr._sleeping) return;
/*** Будет прерываться, пока не пройдет curr.sleep миллисекунд ***/
if (curr.sleep) {
curr._sleeping = true;
setTimeout(
function () {
curr._sleeping = false;
next();
},
curr.sleep
);
return;
}
let newVal = obj.root[obj.prop] + change_per_ms * dt;
if (reached_end(newVal)) {
obj.root[obj.prop] = curr.to;
next();
return;
}
obj.root[obj.prop] = newVal;
/***/
function next() {
if (curr.callback) curr.callback(obj);
i = typeof curr.goto == "number" ? curr.goto : i + 1;
curr = obj.chain[i];
if (!curr) return ANIMATE.remove(obj);
_update_params();
}
}
/***/
function _update_params() {
if (curr.sleep) return;
let from = curr.from || obj.root[obj.prop];
change_per_ms = (curr.to - from) / curr.ms;
reached_end = (from > curr.to) ?
(newVal) => newVal <= curr.to :
(newVal) => newVal >= curr.to;
}
},
remove: function (obj) {
delete this._fn_storage[obj._self];
},
};
/*****/
ANIMATE.add({
root: santa.position.leg1,
prop: "dx",
chain: [
{ to: -0.2, ms: 138 },
{ to: 1, ms: 276, goto: 0 },
],
}).add({
root: santa.position.leg2,
prop: "dx",
chain: [
{ to: -0.2, ms: 138 },
{ to: 1, ms: 276, goto: 0 },
],
});
ANIMATE.start = function () {
let k = 0, last_call = null;
let loop = (time) => {
if (k++ % 2) return requestAnimationFrame(loop); // 30 fps
let dt = time - last_call;
for (let fn in this._fn_storage) {
this._fn_storage[fn](dt);
}
DRAW();
last_call = time;
requestAnimationFrame(loop);
};
requestAnimationFrame(function (init_time) {
last_call = init_time;
requestAnimationFrame(loop);
});
};
ANIMATE.start();* { margin: 0; padding: 0 } canvas { background-color: #ddd }<canvas id="scene"></canvas>
Автор решения: O K
→ Ссылка
var scene = new THREE.Scene();
var aspectRatio = window.innerWidth / window.innerHeight;
var camera = new THREE.PerspectiveCamera(60, aspectRatio, 50, 3000);
renderer = new THREE.WebGLRenderer({
alpha: true,
antialias: true
});
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMapEnabled = true;
document.body.appendChild(renderer.domElement);
var light = new THREE.AmbientLight(0x070);
scene.add(light);
var shadowLight = new THREE.DirectionalLight(0xffffff, 199);
shadowLight.position.set(1500, 1000, 750);
shadowLight.castShadow = true;
shadowLight.shadowMapWidth = 10024;
shadowLight.shadowMapHeight = 10024;
scene.add(shadowLight);
var point = new THREE.PointLight(0xff77ff, 0.5, 300, .25);
point.castShadow = true;
var spotLight = new THREE.SpotLight(0xffffff, 0, 300, .92);
spotLight.position.set(10, 25, 50);
spotLight.shadowMapWidth = 1;
spotLight.shadowMapHeight = 1;
spotLight.onlyShadow = true;
scene.add(spotLight);
camera.position.z = 180;
floor = new THREE.Mesh(new THREE.PlaneBufferGeometry(10000, 10000, 64, 64), new THREE.MeshLambertMaterial());
floor.rotation.x = -Math.PI / 2;
floor.receiveShadow = true;
scene.add(floor);
var Tree = function() {
var mat0 = new THREE.MeshLambertMaterial({
color: 0xffff00
});
var mat1 = new THREE.MeshLambertMaterial({
color: 0x00ff00
});
this.mesh = new THREE.Group();
var mesh0 = new THREE.Mesh(new THREE.CylinderGeometry(3, 3, 25, 30), mat0);
mesh0.position.y = 1;
mesh0.castShadow = true;
mesh0.receiveShadow = true;
this.mesh.add(mesh0);
var geo_igr = new THREE.SphereGeometry(2, 32, 32);
var mat_igr1 = new THREE.MeshBasicMaterial({
color: 0xffff00
});
var mat_igr2 = new THREE.MeshBasicMaterial({
color: 0xff33ff
});
var mat_igr3 = new THREE.MeshBasicMaterial({
color: 0x0066ff
});
var mat_igr4 = new THREE.MeshBasicMaterial({
color: 0x00ff00
});
var mat_igr5 = new THREE.MeshBasicMaterial({
color: 0xff0006
});
var igr1 = new THREE.Mesh(geo_igr, mat_igr1);
var igr2 = new THREE.Mesh(geo_igr, mat_igr2);
var igr3 = new THREE.Mesh(geo_igr, mat_igr3);
var igr4 = new THREE.Mesh(geo_igr, mat_igr4);
var igr5 = new THREE.Mesh(geo_igr, mat_igr5);
var igr6 = new THREE.Mesh(geo_igr, mat_igr1);
var igr7 = new THREE.Mesh(geo_igr, mat_igr2);
var igr8 = new THREE.Mesh(geo_igr, mat_igr3);
var igr9 = new THREE.Mesh(geo_igr, mat_igr4);
var igr10 = new THREE.Mesh(geo_igr, mat_igr5);
igr1.position.y = 79;
igr1.position.x = 4;
igr1.position.z = 8;
igr1.receiveShadow = true;
igr2.position.y = 65;
igr2.position.x = 4;
igr2.position.z = 10;
igr2.receiveShadow = true;
igr3.position.y = 55;
igr3.position.x = -4;
igr3.position.z = 12;
igr3.receiveShadow = true;
igr4.position.y = 17;
igr4.position.x = -11;
igr4.position.z = 20;
igr4.receiveShadow = true;
igr5.position.y = 33;
igr5.position.x = -4;
igr5.position.z = 20;
igr5.receiveShadow = true;
scene.add(igr1);
scene.add(igr2);
scene.add(igr3);
scene.add(igr4);
scene.add(igr5);
igr6.position.y = 24;
igr6.position.x = 5;
igr6.position.z = 20;
igr6.receiveShadow = true;
igr7.position.y = 39;
igr7.position.x = 13;
igr7.position.z = 11;
igr7.castShadow = true;
igr7.receiveShadow = true;
igr8.position.y = 22;
igr8.position.x = 20;
igr8.position.z = 10;
igr8.castShadow = true;
igr8.receiveShadow = true;
igr9.position.y = 42;
igr9.position.x = -7;
igr9.position.z = 15;
igr9.receiveShadow = true;
igr10.position.y = 56;
igr10.position.x = 12;
igr10.position.z = 5;
scene.add(igr6);
scene.add(igr7);
scene.add(igr8);
scene.add(igr9);
scene.add(igr10);
var mesh1 = new THREE.Mesh(new THREE.CylinderGeometry(0, 26, 60, 75), mat1);
mesh1.position.y = 40;
mesh1.castShadow = true;
mesh1.receiveShadow = true;
this.mesh.add(mesh1);
var mesh7 = new THREE.Mesh(new THREE.CylinderGeometry(0, 21, 60, 75), mat_igr1);
mesh7.position.y = 38;
mesh7.castShadow = true;
mesh7.receiveShadow = true;
this.mesh.add(mesh7);
var mesh2 = new THREE.Mesh(new THREE.CylinderGeometry(0, 20, 50, 70), mat1);
mesh2.position.y = 55;
mesh2.castShadow = true;
mesh2.receiveShadow = true;
this.mesh.add(mesh2);
var mesh22 = new THREE.Mesh(new THREE.CylinderGeometry(0, 19, 50, 70), mat_igr2);
mesh22.position.y = 54;
mesh22.castShadow = true;
mesh22.receiveShadow = true;
this.mesh.add(mesh22);
var mesh3 = new THREE.Mesh(new THREE.CylinderGeometry(0, 15, 40, 70), mat1);
mesh3.position.y = 67;
mesh3.castShadow = true;
mesh3.receiveShadow = true;
this.mesh.add(mesh3);
var mesh33 = new THREE.Mesh(new THREE.CylinderGeometry(0, 14, 40, 70), mat_igr3);
mesh33.position.y = 66;
mesh33.castShadow = true;
mesh33.receiveShadow = true;
this.mesh.add(mesh33);
var mesh4 = new THREE.Mesh(new THREE.CylinderGeometry(0, 12, 32, 70), mat1);
mesh4.position.y = 79;
mesh4.castShadow = true;
mesh4.receiveShadow = true;
this.mesh.add(mesh4);
var mesh44 = new THREE.Mesh(new THREE.CylinderGeometry(0, 11, 32, 70), mat_igr4);
mesh44.position.y = 78;
mesh44.castShadow = true;
mesh44.receiveShadow = true;
this.mesh.add(mesh44);
var mesh5 = new THREE.Mesh(new THREE.CylinderGeometry(0, 10, 18, 39), mat1);
mesh5.position.y = 86;
mesh5.castShadow = true;
mesh5.receiveShadow = true;
this.mesh.add(mesh5);
var mesh55 = new THREE.Mesh(new THREE.CylinderGeometry(0, 9, 18, 39), mat_igr5);
mesh55.position.y = 85;
mesh55.castShadow = true;
mesh55.receiveShadow = true;
this.mesh.add(mesh55);
var mesh55 = new THREE.Mesh(new THREE.CylinderGeometry(0, 9, 18, 39), mat_igr5);
mesh55.position.y = 85;
mesh55.castShadow = true;
mesh55.receiveShadow = true;
this.mesh.add(mesh55);
const BoxGeo = new THREE.BoxGeometry(10, 10, 10);
const material = new THREE.MeshBasicMaterial({
color: 0xff0006
});
const cube = new THREE.Mesh(BoxGeo, material);
cube.position.y = 1;
cube.castShadow = true;
cube.receiveShadow = true;
cube.position.y = 3;
cube.position.x = -4;
cube.position.z = 20;
cube.receiveShadow = true;
this.mesh.add(cube);
const BoxGeo1 = new THREE.BoxGeometry(3, 3, 3);
const material1 = new THREE.MeshBasicMaterial({
color: 0xff33ff
});
const cube1 = new THREE.Mesh(BoxGeo1, material1);
cube1.position.y = 1;
cube1.castShadow = true;
cube1.receiveShadow = true;
cube1.position.y = 1;
cube1.position.x = -4;
cube1.position.z = 28;
cube1.receiveShadow = true;
this.mesh.add(cube1);
const BoxGeo2 = new THREE.BoxGeometry(3, 5, 5);
const material2 = new THREE.MeshBasicMaterial({
color: 0x0066ff
});
const cube2 = new THREE.Mesh(BoxGeo2, material2);
cube2.position.y = 1;
cube2.castShadow = true;
cube2.receiveShadow = true;
cube2.position.y = 1;
cube2.position.x = 14;
cube2.position.z = 3;
cube2.receiveShadow = true;
this.mesh.add(cube2);
const BoxGeo3 = new THREE.BoxGeometry(11, 5, 5);
const material3 = new THREE.MeshBasicMaterial({
color: 0xc700e5
});
const cube3 = new THREE.Mesh(BoxGeo3, material3);
cube3.position.y = 1;
cube3.castShadow = true;
cube3.receiveShadow = true;
cube3.position.y = 1;
cube3.position.x = 14;
cube3.position.z = -8;
cube3.receiveShadow = true;
this.mesh.add(cube3);
const BoxGeo4 = new THREE.BoxGeometry(11, 12, 23);
const material4 = new THREE.MeshBasicMaterial({
color: 0xfbff00
});
const cube4 = new THREE.Mesh(BoxGeo4, material4);
cube4.position.y = 1;
cube4.castShadow = true;
cube4.receiveShadow = true;
cube4.position.y = 1;
cube4.position.x = -14;
cube4.position.z = -2;
cube4.receiveShadow = true;
this.mesh.add(cube4);
const BoxGeo5 = new THREE.BoxGeometry(3, 3, 12);
const material5 = new THREE.MeshBasicMaterial({
color: 0x0221bf
});
const cube5 = new THREE.Mesh(BoxGeo5, material5);
cube5.position.y = 1;
cube5.castShadow = true;
cube5.receiveShadow = true;
cube5.position.y = 1;
cube5.position.x = -12;
cube5.position.z = 15;
cube5.receiveShadow = true;
this.mesh.add(cube5);
const BoxGeo6 = new THREE.BoxGeometry(20, 14, 20);
const material6 = new THREE.MeshBasicMaterial({
color: 0x4f038a
});
const cube6 = new THREE.Mesh(BoxGeo6, material6);
cube6.position.y = 1;
cube6.castShadow = true;
cube6.receiveShadow = true;
cube6.position.y = 1;
cube6.position.x = -12;
cube6.position.z = -5;
cube6.receiveShadow = true;
this.mesh.add(cube6);
};
var trees = [];
var tree = new Tree();
scene.add(tree.mesh);
var snowflakeCount = 40000;
var pMaterial = new THREE.PointCloudMaterial({
color: 0xFFFFFF,
size: 1.1,
blending: THREE.AdditiveBlending,
depthTest: false,
transparent: true
});
var snowflake = new THREE.Geometry;
for (var i = 0; i < snowflakeCount; i++) {
var pX = Math.random() * 11000 - (Math.random() * 1677),
pY = Math.random() * 11000 - (Math.random() * 1677),
pZ = Math.random() * 11000 - (Math.random() * 1677),
particle = new THREE.Vector3(pX, pY, pZ);
particle.velocity = {};
particle.velocity.y = -3;
snowflake.vertices.push(particle);
}
var snowflakeystem = new THREE.PointCloud(snowflake, pMaterial);
snowflakeystem.position.y = 20;
scene.add(snowflakeystem);
var snow = function() {
var pCount = snowflakeCount;
while (pCount--) {
var particle = snowflake.vertices[pCount];
if (particle.y < -200) {
particle.y = 200;
particle.velocity.y = -0.2;
}
particle.velocity.y -= Math.random() * .003;
particle.y += particle.velocity.y;
}
snowflake.verticesNeedUpdate = true;
};
var step = 0;
function render() {
requestAnimationFrame(render);
renderer.render(scene, camera);
camera.position.y = 70 + Math.sin((step / 1000) * Math.PI * 2) * -10;
camera.position.x = Math.sin((step / 400) * Math.PI * 2) * 177;
camera.lookAt(new THREE.Vector3(0, 8, -30));
camera.rotation.z = Math.sin((step / 400) * Math.PI * 2) * Math.PI / 80;
point.intensity = 5 + Math.sin((step / 400) * Math.PI * 2) / 87;
shadowLight.intensity = 1;
shadowLight.shadowDarkness = 0.5;
snow();
step++;
step = step % 1200;
}
render();body {
margin: 0;
background-color: #000;
}
canvas {
width: 100%;
height: 100%
}<script src='https://cdnjs.cloudflare.com/ajax/libs/three.js/r70/three.min.js'></script>
Автор решения: Sparklingman
→ Ссылка
var ny, cloud, land, spruce, branches, snow, smile, garland;
ny = document.querySelector("#ny");
cloud = document.createElement("div");
land = document.createElement("div");
spruce = document.createElement("div");
branches = document.createElement("div");
mountain = document.createElement("div");
garland = document.createElement("div");
cloud.setAttribute("id", "cloud");
ny.appendChild(cloud);
smile = document.createElement("span");
smile.setAttribute("class", "smile");
smile.innerHTML = "︶";
ny.append(smile);
snow = document.createElement("div");
cloud.appendChild(snow);
spruce.setAttribute("id", "spruce");
ny.appendChild(spruce);
branches.setAttribute("id", "branches");
spruce.appendChild(branches);
garland.setAttribute("id", "garland");
branches.appendChild(garland);
land.setAttribute("id", "land");
document.body.appendChild(land);
function snowList() {
var fr = new DocumentFragment();
for (let i = 1; i <= 14; i++) {
var span = document.createElement("span");
span.innerHTML = "❄";
fr.append(span);
}
return fr;
}
snow.append(snowList());*,
html,
body {
margin: 0;
padding: 0;
}
body {
align-items: end;
background: linear-gradient(MediumBlue, dodgerblue, aliceBlue);
display: flex;
font-size: 3vmin;
height: 100vh;
min-height: 100vh;
justify-content: center;
}
#ny {
bottom: 2vmin;
display: flex;
height: 70vmin;
position: relative;
justify-content: center;
width: 40vmin;
z-index: 10;
}
#cloud {
background: AliceBlue;
border-radius: 6vmin;
height: 12vmin;
position: relative;
top: 0;
width: 34vmin;
z-index: 10;
}
#cloud::after {
animation: cloudCircle 1.3s ease-in-out infinite;
background: AliceBlue;
border-radius: 100%;
content: "";
display: block;
height: 10vmin;
position: absolute;
top: -6vmin;
left: 5vmin;
width: 10vmin;
}
#cloud::before {
animation: cloudCircle 1.3s 0.3s ease-in infinite;
background: AliceBlue;
border-radius: 100%;
content: "";
display: block;
height: 17vmin;
position: absolute;
top: -9vmin;
left: 12vmin;
width: 17vmin;
}
.smile {
left: 50%;
line-height: 1;
margin: 0 0 0 -4.5vmin;
position: absolute;
text-align: center;
top: 9vmin;
width: 10vmin;
z-index: 10;
}
.smile::after {
content: "\FE35";
left: 0;
line-height: 1;
position: absolute;
top: -6vmin;
}
.smile::before {
content: "\FE35";
line-height: 1;
position: absolute;
right: 0;
top: -6vmin;
}
#land {
background: white;
bottom: 0;
display: block;
height: 8vmin;
left: 0;
position: fixed;
right: 0;
z-index: -1;
}
#spruce {
border-color: brown transparent;
border-style: solid;
border-width: 0 2.5vmin 45vmin;
bottom: 2vmin;
left: 50%;
height: 0px;
margin: 0 0 0 -2.5vmin;
position: absolute;
width: 0;
border-radius: 5vmin;
}
#spruce::after {
background: white;
border-radius: 5vmin;
bottom: -46vmin;
display: block;
content: "";
height: 5vmin;
position: absolute;
right: -4vmin;
width: 5vmin;
}
#spruce::before {
background: white;
border-radius: 50%;
bottom: -45vmin;
display: block;
content: "";
height: 3vmin;
left: -3vmin;
position: absolute;
width: 3vmin;
}
#branches {
border-bottom-left-radius: 50% 15vmin;
border-bottom-right-radius: 50% 15vmin;
border-color: green transparent;
border-style: solid;
border-width: 0 20vmin 20vmin;
bottom: -38vmin;
height: 0;
left: -20vmin;
position: absolute;
width: 0;
}
#branches::after {
border-bottom-left-radius: 50% 10vmin;
border-bottom-right-radius: 50% 10vmin;
border-color: green transparent;
border-style: solid;
border-width: 0 14vmin 14vmin;
bottom: -6vmin;
content: "";
height: 0px;
left: -14vmin;
position: absolute;
width: 0;
}
#branches::before {
border-bottom-left-radius: 50% 10vmin;
border-bottom-right-radius: 50% 10vmin;
border-color: green transparent;
border-style: solid;
border-width: 0 10vmin 14vmin;
bottom: 4vmin;
content: "";
height: 0px;
left: -10vmin;
position: absolute;
width: 0;
}
#garland {
border-bottom-left-radius: 10vmin 10vmin;
border-bottom-right-radius: 10vmin 10vmin;
border-color: transparent transparent khaki transparent;
border-style: dotted;
border-width: 0.7vmin;
height: 15vmin;
left: 50%;
margin: 0 0 0 -9vmin;
position: absolute;
top: -14vmin;
width: 17vmin;
z-index: 10;
}
#garland::after {
border-bottom-left-radius: 10vmin 10vmin;
border-bottom-right-radius: 10vmin 10vmin;
border-color: transparent transparent lightblue transparent;
border-style: dotted;
border-width: 0.7vmin;
content: "";
height: 10vmin;
left: 50%;
margin: 0 0 0 -6vmin;
position: absolute;
top: -8vmin;
width: 10vmin;
z-index: 10;
}
#garland::before {
border-bottom-left-radius: 30vmin 30vmin;
border-bottom-right-radius: 30vmin 30vmin;
border-color: transparent transparent orange transparent;
border-style: dotted;
border-width: 0.7vmin;
content: "";
height: 14vmin;
left: 50%;
margin: 0 0 0 -15vmin;
position: absolute;
top: 14vmin;
width: 28vmin;
z-index: 10;
}
#cloud span {
animation: fall 6s 0s linear infinite;
color: AliceBlue;
position: absolute;
left: 14vmin;
top: 0;
}
#cloud span:nth-child(1) {
animation-delay: 0;
left: 10vmin;
top: 10vmin;
}
#cloud span:nth-child(2) {
animation-delay: 2s;
left: 10vmin;
top: 0;
}
#cloud span:nth-child(3) {
animation-delay: 1.5s;
left: 8vmin;
top: 0;
}
#cloud span:nth-child(4) {
animation-delay: 1s;
font-size: 60%;
left: 25vmin;
top: 8vmin;
}
#cloud span:nth-child(5) {
animation-delay: 5.5s;
font-size: 60%;
left: 8vmin;
top: 3vmin;
}
#cloud span:nth-child(6) {
animation-delay: 0.5s;
left: 2vmin;
top: 2vmin;
}
#cloud span:nth-child(7) {
animation-delay: 2.8s;
left: 25vmin;
top: -5vmin;
}
#cloud span:nth-child(8) {
animation-delay: 4.5s;
font-size: 60%;
left: 14vmin;
top: 0;
}
#cloud span:nth-child(9) {
animation-delay: 2.5s;
left: 8vmin;
top: 8vmin;
}
#cloud span:nth-child(10) {
animation-delay: 3.5s;
font-size: 60%;
left: 22vmin;
top: 10vmin;
}
#cloud span:nth-child(11) {
animation-delay: 2.2s;
left: 20vmin;
top: -3vmin;
}
#cloud span:nth-child(12) {
animation-delay: 1.2s;
font-size: 50%;
left: 5vmin;
top: 8vmin;
}
#cloud span:nth-child(13) {
animation-delay: 1.2s;
left: 20vmin;
top: 2vmin;
}
#cloud span:nth-child(14) {
animation-delay: 2.9s;
font-size: 60%;
left: 15vmin;
top: 6vmin;
}
@keyframes fall {
0% {
transform: translate(0, 0) rotate(0deg);
}
50% {
transform: translate(10vmin, 30vmin) rotate(90deg);
}
95% {
opacity: 0.8;
}
100% {
transform: translate(0, 60vmin) rotate(360deg);
opacity: 0;
}
}
@keyframes cloudCircle {
0%,
100% {
transform: scale(1);
}
60% {
transform: scale(1.1);
}
}<div id="ny"></div>
Автор решения: FotonPC
→ Ссылка
Классная елочка на C++
#include <iostream>
#include <string>
using namespace std;
string multiStr(string str, int num)
{
string res;
int i;
for (i=0;i<num;i++) {
res = res + str;
}
return res;
}
int main(int argc, char** argv)
{
cout << "It is a C++ program! Copyrigth (c) Foton-PC 2021.\n\nHappy Hew Year!\n\n" << endl;
int i;
int i2;
int lines;
cout << "Please, entry number _";
cin >> lines;
for (i2=1;i2<lines+1;i2++)
{
for (i=1;i<i2+1;i++)
{
cout << multiStr("L",i) << endl;
}
}
return 0;
}