Презентация. ГИМ

Нейросети и создание
визуальных коммуникаций:

Ссылки:

миджорни/искать рефы/создавать
https://www.midjourney.com/explore?tab=top_week

миджорни/инструкция к промтам
https://docs.midjourney.com/docs/web-quick-start

дизайнер/рассказывает про промты и генерацию
https://x.com/hc_dsn

автор сгенерованного ролика для Weekend
https://www.yzavoku.com/works/film

художник
https://stephanvasement.com/about

стримы от BBE с ЦЕХ про использование нейросетей
https://www.youtube.com/live/nWLCaAMkHKo?si=5nQqMWmK8wljItPz

https://www.youtube.com/live/0KKSIgVSKtw?si=gToOP3DJiWm5uk95

ролик Редакци. Наука про Секты с картинками генерированными нейросетями
https://youtu.be/wiZ2KiKNyqA?si=Z2DpWNlglG8-rNw8

ссылка на кейс с интерактивный зоной от СБЕРА
https://g8.art/ru/works/4639

ссылка на кейс с возрождением выставки от СБЕРА
https://g8.art/ru/works/4452

Картинки из презентации

Интерактив в элементах айдентики с помощью ChatGPT

Результат:

наведите мышь или тапните пальцем

<div class="grid-container"></div>

<style>
.grid-container {
display: grid;
grid-template-columns: repeat(15, 50px); /* 15 столбцов */
grid-template-rows: repeat(8, 50px); /* 8 строк */
gap: 50px; /* Расстояние между элементами = диаметру круга */
padding: 20px; /* Отступы сверху и по бокам */
width: calc(15 * 50px + 14 * 50px + 40px); /* Рассчитанная ширина сетки */
height: calc(8 * 50px + 7 * 50px + 40px); /* Рассчитанная высота сетки */
margin: 0 auto; /* Центровка по горизонтали */
}

.circle {
width: 50px;
height: 50px;
background-color: white;
border-radius: 50%;
transition: background-color 0.3s ease;
}

.triangle {
position: relative;
width: 0;
height: 0;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
border-bottom: 25px solid white;
transform-origin: 50% 100%; /* Вращение вокруг центра основания */
transition: transform 0.6s ease 0s, border-bottom-color 0.3s ease; /* Медленный поворот (0.6с), без задержки */
}

/* Адаптивные стили для планшетов и мобильных телефонов */
@media (max-width: 768px) {
.grid-container {
grid-template-columns: repeat(15, 30px);
grid-template-rows: repeat(8, 30px);
gap: 30px;
padding: 15px;
width: calc(15 * 30px + 14 * 30px + 30px);
height: calc(8 * 30px + 7 * 30px + 30px);
}

.circle {
width: 30px;
height: 30px;
}

.triangle {
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-bottom: 15px solid white;
}
}

@media (max-width: 480px) {
.grid-container {
grid-template-columns: repeat(15, 20px);
grid-template-rows: repeat(8, 20px);
gap: 20px;
padding: 10px;
width: calc(15 * 20px + 14 * 20px + 20px);
height: calc(8 * 20px + 7 * 20px + 20px);
}

.circle {
width: 20px;
height: 20px;
}

.triangle {
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid white;
}
}
</style>

<script>
const gridContainer = document.querySelector('.grid-container');
const rows = 8;
const cols = 15;
const totalElements = rows * cols;
let proximityThreshold = 150; // Увеличенный радиус в 1.5 раза для больших экранов

// Создаем круги и треугольники
for (let i = 0; i < totalElements; i++) {
const element = document.createElement('div');
if (i % 2 === 0) {
element.classList.add('circle');
} else {
element.classList.add('triangle');
}
gridContainer.appendChild(element);
}

// Обрабатываем вращение треугольников к мышке и изменение цвета
document.addEventListener('mousemove', (event) => {
const { clientX: mouseX, clientY: mouseY } = event;
const triangles = document.querySelectorAll('.triangle');
const circles = document.querySelectorAll('.circle');

// Проверяем ширину экрана и адаптируем радиус
if (window.innerWidth <= 768) {
proximityThreshold = 60; // Радиус увеличен в 1.5 раза для мобильных экранов
} else {
proximityThreshold = 150; // Радиус увеличен в 1.5 раза для больших экранов
}

triangles.forEach(triangle => {
const rect = triangle.getBoundingClientRect();
const triangleCenterX = rect.left + rect.width / 2;
const triangleCenterY = rect.top + rect.height / 2;

// Вращение треугольника в сторону мышки
const angle = Math.atan2(mouseY - triangleCenterY, mouseX - triangleCenterX) * (180 / Math.PI) + 90;
triangle.style.transform = `rotate(${angle}deg)`;

// Изменение цвета при приближении мышки
const distance = Math.sqrt(Math.pow(mouseX - triangleCenterX, 2) + Math.pow(mouseY - triangleCenterY, 2));
if (distance < proximityThreshold) {
triangle.style.borderBottomColor = '#EE4036'; // Меняем цвет на красный
} else {
triangle.style.borderBottomColor = 'white'; // Возвращаем цвет на белый
}
});

circles.forEach(circle => {
const rect = circle.getBoundingClientRect();
const circleCenterX = rect.left + rect.width / 2;
const circleCenterY = rect.top + rect.height / 2;

// Изменение цвета при приближении мышки
const distance = Math.sqrt(Math.pow(mouseX - circleCenterX, 2) + Math.pow(mouseY - circleCenterY, 2));
if (distance < proximityThreshold) {
circle.style.backgroundColor = '#EE4036'; // Меняем цвет на красный
} else {
circle.style.backgroundColor = 'white'; // Возвращаем цвет на белый
}
});
});
</script>

код написаный ChatGPT для реализации интерактивный графики, с пояснением какая строчка за что отвечает: