Рубрика «canvas» - 19

Защита фотографий от скриншотов с помощью временного дизеринга

Пару дней назад Facebook запустил свою альтернативу SnapChat — сервис для передачи картинок, которые самоуничтожаются через 1, 3, 5 или 10 секунд. Это довольно глупая программа, которую молодёжь использует для непотребных целей. Многие догадались, что можно успеть заснять скриншот, прежде чем фотография исчезнет с экрана. Отправитель получает уведомление, что получатель сделал скриншот, но уже беспомощен в такой ситуации.

Можно ли защитить фотографию от снятия скриншотов? Разработчик по имени Михай Парпарита (Mihai Parparita) предлагает использовать временный дизеринг (temporal dithering). Суть в том, что оригинал фотографии передаётся двумя кадрами: положительный и отрицательный. В «положительном» кадре к каждому пикселу добавляются случайные значения RGB. В «отрицательном» кадре они же отнимаются. За счёт быстрой смены кадров положительные и отрицательные значения должны сократиться, воссоздавая в глазу зрителя оригинальную фотографию.
Читать полностью »

Доброе утро.
на досуге посетило меня вдохновение о разработке нового 2d движка для игр. Однако с одной уникальной особенностью. Хочется сделать его реально удобным для разработчиков разного уровня.
Как этого добиться?
Сначала мы придумаем и напишем 2-3 типовых игры на «идеальном» движке, т.е. сначала будет создано само приложение, а уже потом под его код будет писаться движок.

Читать полностью »

Это моя первая статья и я хотел бы рассказать о том как написать простейшую программу по рисованию графиков функций.
Статья ориентированна на новичков!
Начнем с того, что наша функция будет иметь вид:
y = c(x)
Где c(x) это выражение от одной переменной «x».
Сразу считаем её.

f = input('f(x):')

Считать значение функции мы будем функцией eval()
Подключим нужные нам библиотеки.

from math import *
from tkinter import *
f = input('f(x):')

Теперь надо нарисовать оси координат.

from math import *
from tkinter import *

f = input('f(x):')

root = Tk()

canv = Canvas(root, width = 1000, height = 1000, bg = "lightblue", cursor = "pencil")
canv.create_line(500,1000,500,0,width=2,arrow=LAST) 
canv.create_line(0,500,1000,500,width=2,arrow=LAST) 

canv.pack()	
root.mainloop()

Читать полностью »

imageНе так давно мне стало любопытно, насколько сносно современные браузеры поддерживают HTML5 и я не нашел лучшего
способа, чем написать простейший 2D платформер. Помимо удовольствия от разработки игрушки и улучшения навыков в использовании JavaScript, в ходе развлечения кропотливой работы был накоплен определенный опыт и эмпирическим путем были найдены основные грабли, на многие из которых мне пришлось наступить. В этой статье я попробую кратко и с примерами резюмировать то, что вынес для себя из проделанной работы. Желающих создать свое высокопроизводительное JavaScript приложение, эффективно работающее с графикой, прошу под кат.
Читать полностью »

Доброго времени суток, читатели!
Мне очень нравятся барочные элементы. В очередной раз встретив подобный узор на одном из сайтов, представил, как бы он чудесно смотрелся в анимации, картинка бы ожила. Тем более с приходом html5 оживление должно стать гораздо проще в реализации. Но как по точкам нарисовать кривую? Тут как раз кстати вспомнилась кривая Безье!

На уроках векторной графики я люто ненавидел кривые Безье. Принцип ее работы казался магическим, непостижимым и, как бы не сказать грубее, нелогичным. Складывалось ощущение, что сама кривая не знает как извернуться, и как наглый котяра растягивалась как ей удобнее, а не как мне надо.

На самом деле, как всегда, надо было лишь уделить немного времени теории. Все оказалось просто и довольно интересно. В итоге получилась реализация кривых на яваскрипте с использованием canvas.
Кому интересно как строится эта извилистая бестия добро пожаловать под кат!
Читать полностью »

W3C объявили о завершении работы над спецификациями HTML 5 и Сanvas 2D, а также о начале работы над HTML 5.1

Сегодня World Wide Web Consortium (W3C) объявили о том, что спецификации HTML5 и Canvas 2D наконец завершены. Это означает, что разработчики теперь имеют “стабильный фундамент для разработки”, отмечает W3C.

Тем не менее, для того чтобы HTML5 стал полноправным стандартом W3C, необходимо осуществить ещё несколько шагов, но это, по большей части, просто формальность. Консорциум предполагает, что процесс стандартизации будет завершен к середине 2014 года. Сегодня, однако, наиболее важно то, что функции HTML5 в настоящее время обеспечивают стабильные спецификации, на которые разработчики могут ориентироваться.

Читать полностью »

Знакомимся с Fabric.js. Часть 1 я

Читать полностью »

За кадром — Media Query Mario
В этом хабратопике пойдет речь о создании демки Media Query Mario, о которой упоминалось в дайджесте Zfort #30.

Я обожаю каждое новое техническое демо, которое добирается до моего браузера. То, что люди порой в них совмещают, может взорвать мозг своей сложностью и креативностью.

После посещения WebDevConf 2012 в середине октября, я чувствовал то самое, возвышенное вдохновение, которое преподносит хорошая конференция. Возвращаясь с конференции в Лондон, я заметил твит о Mozilla Dev Derby, и, все еще вдохновленный, решил внести свой вклад. Результатом стало техническое демо Media Query Mario, которое представляет собой смесь из медиа запросов, CSS3 анимаций и HTML5 audio.
Читать полностью »

Поздравить всех хабравчан с неофициальным днем компьютерной графики! В этот день я хочу рассказать вам о том как я сделал онлайновскую версию старой игры.

Возможно многим знакома игра DX-Ball, Я играл в нее еще в дошкольном возрасте, а уже в школе коротал за ней уроки информатики. Поэтому мне было интересно сделать ее на HTML5.

Новая жизнь старой игры
Читать полностью »

yandex browserПрошло уже почти два месяца как Yandex порадовал некоторых пользователей новым продуктом — Yandex Браузером. Несмотря на невероятную динамику развития продуктов в этой области (Chrome и Firefox), Яндексу удалось привнести в свой браузер ряд новых идей.

Из всех особенностей этого браузера больше всего меня зацепило их дизайнерское решение относительно изображений сайтов в «быстрых закладках» (Speed dial). Люди любят глазами и поэтому приятно видеть у себя в новом табе не пустую белую страницу, а красочные картинки. Беда только в том, что лично я, чаще всего, смотрю на подпись под этой картинкой или же на favicon, так как по скриншоту сайта бывает очень сложно его узнать. Эту проблему дизайнеры яндекса, на мой взгляд, решили очень элегантно. В данном посте мы посмотрим, как реализовать эту идею на клиентской стороне.

Читать полностью »


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js