در ردپای پول گرنس – ساخت پوستر هنری تعاملی

ek3nk4r 2023-07-11

0 31 خواندن این مطلب 3 دقیقه زمان میبرد

در ردپای پول گرنس – ساخت پوستر هنری تعاملی

پیشنهاد ویژه

خرید فالوور واقعی خرید لایک اینستاگرام خرید ویو اینستاگرام خرید فالوور اینستاگرام

پول گرنس یک هنرمند دانمارکی رنگارنگ، طراح مبلمان و بنیانگذار یک مدرسه هنری بود. او در سال 1989 سر و صدای زیادی به پا کرد، جایی که او یک سینمای معروف و سفید رنگ در کپنهاگ، کاخ را به چیزی تبدیل کرد. بسیار رنگارنگ:

سینما قصر

این به مذاق همه نبود – اما اکنون، بیش از 30 سال پس از آن، این یک گنج ملی است. و در حالی که مالک می خواهد آن را تجدید کند، بسیاری از مردم فکر می کنند که ساختمان باید محافظت شود.

در سال 2016، 20 سال پس از درگذشت گرنس، یک نمایشگاه گذشته نگر در موزه هنر دانمارکی معروف لوئیزیانا برگزار شد:

پوستر گرنس، نمایشگاه لوئیزیانا

من “نقاشی های نقطه ای” گرنس را کاملاً فراموش کرده بودم – بنابراین وقتی روز پیش این پوستر را دیدم، فقط داشته است برای ایجاد دوباره آن! خیلی ساده و در عین حال هیپنوتیزم کننده و زیباست.

بیایید یک نسخه تعاملی آن را کدنویسی کنیم!

فهرست مطالب

کد نویسی Gernes

پوستر 6 ستونی ساده است grid در یک container، استفاده كردن cqi-ارزش، بنابراین پاسخگو است.

اندازه نقاط نیاز به کمی ریاضی دارد:

قاب مشکی دور پوستر است 1.25cqi، بالشتک در داخل است 1cqiو فاصله بین 6 سلول نیز وجود دارد 1 cqi. یعنی 2 × 1.25 + 2 × 1 + 5 × 1 – در مجموع 9.5cqi.

از آنجایی که ظرف است 100cqi، که ترک می کند 90.5cqi برای نقاط – بنابراین هر نقطه است:

 --sz: calc(90.5cqi / 6);

تعاملی کردن آن

اگه بتونی عالی نمیشه کلیک روی هر رنگ، و آن را تغییر دهید؟

ما می توانیم این کار را با <input type="color"> – البته کمی سبک شده:

input {
  --sz: calc(90.5cqi / 6);
  background: transparent;
  border: 0;
  border-radius: 50%;
  height: var(--sz);
  padding: 0;
  width: var(--sz);
  &::-webkit-color-swatch,
  &::-webkit-color-swatch-wrapper {
    border: 0;
    border-radius: inherit;
    padding: 0;
  }
}

بعد، خطوط خاکستری که از وسط نقاشی عبور می کنند. برای اینها از دو مورد استفاده می کنیم linear-gradients:

fieldset {
background-image: 
  linear-gradient(90deg, transparent 50%,
  var(--line, #DFDFD1) calc(50% - 2px),
  transparent calc(50% + 2px)),
  linear-gradient(180deg, transparent 50%,
  var(--line, #DFDFD1) calc(50% - 2px),
  transparent calc(50% + 2px));
}

فکر می کنم فونت اصلی روی پوستر باشد گاتهام توسط Hoefler & Co. گاتهام شبیه پل رنر است فوتورا، بنابراین من برای فونت رایگان مشابه جستجو کردم فوتورا، و با Jost به پایان رسید.

را font-size نیز مشخص شد با cqi-واحدها، و – voilà – ما یک پوستر تعاملی Gernes داریم:

نسخه نور

وقتی روی یک نقطه کلیک می کنید، انتخابگر رنگ داخلی مرورگر خود را خواهید دید:

ترجیحا Color Picker

در حین آماده شدن برای این مقاله، Gernes را در گوگل جستجو کردم و پیدا کردم یکی دیگر گونه ای از نقاشی نقطه ای بالا:

نقاط پس زمینه آبی

با یک قطعه جاوا اسکریپت کوچک، می‌توانیم به راحتی پوستر موجود را با تکرار همه آن‌ها به‌روزرسانی کنیم <input type="color"> و جدید تنظیم کنید value از مجموعه ای از رنگ ها:

const dots = [
'#006951', '#005F64', '#005192', '#D5D111', '#59AF49', '#008956',
'#A43251', '#B32A39', '#DB2832', '#2F5295', '#52589B', '#7B547D',
'#FD9026', '#FFC11C', '#F7CF00', '#D9352C', '#E64B2D', '#F4682B',
'#35714D', '#B84F59', '#0D0D0D', '#00A6A2', '#58221A', '#E4DFD4',
'#213D1E', '#635B9F', '#2F2D33', '#376470', '#2C1911', '#BE321E',
'#984618', '#003548', '#737373', '#AC4E76', '#0089C0', '#666224'
]

و سپس به سادگی:

dots.forEach((dot, index) => 
  app.elements[index].value = dot
)

بیایید پس زمینه و خطوط را نیز به روز کنیم:

app.style.cssText = '--bg: #1F375E; --line: #596376;'

… و دریافت می کنیم:

ترجیحاً نقطه های پس زمینه آبی

اینجا یک کدپن است. برای جابجایی بین دو نسخه ای که در این آموزش ایجاد کرده ایم، می توانید بر روی ضامن کننده زیر پوستر کلیک کنید. و می توانید روی هر نقطه کلیک کنید تا رنگ آن را تغییر دهید. امیدوارم از ایجاد برداشت خود از پوستر نقطه‌ای Gernes لذت ببرید!

<br />