Новые рисунки по клеточкам в тетради: 295 рисунков по клеточкам в тетради. Легкие картинки

23.04.2023 Facebook Twitter LinkedIn Google+ Разное

Notebook 04: Функции

Обзор

Цель этого задания — дать вам возможность попрактиковаться в определении и используя функций языка программирования Python. Записать ваши решения и ответы, создайте новый блокнот Jupyter под названием Notebook04.ipynb и используйте этот блокнот для выполнения следующих действий. задания и ответить на соответствующие вопросы.

Убедитесь, что вы правильно обозначили свои действия. Это для Activity 1 , есть ячейка заголовка с названием Activity 1 . Аналогичным образом используйте Ячейки Markdown для ответов на вопросы (включая вопросы над отвечать).

Это задание Notebook должно быть выполнено Полночь в четверг, 1 октября 2015 г. и предстоит сделать индивидуально.

Упражнение 1. Рисование фигур

В этом упражнении вы создадите две функции для создания SVG (масштабируемого Векторная графика) код для рисования круга и квадрата. Затем вы будете использовать эти функции внутри третьей функции, которая будет рисовать одну из фигур на основе интерактивных пользовательских данных, предоставленных взаимодействием Jupyter модуль.

SVG

Чтобы рисовать фигуры в блокноте Jupyter, нам нужно сгенерировать HTML (язык гипертекстовой разметки), который веб-браузеры используют для определить, что отображать на веб-сайте. Например, если щелкнуть правой кнопкой мыши на этой странице и выберите View Page Source , вам будет показан HTML исходный код этой страницы:

 

    <голова>
      <мета-кодировка="utf-8">
      
      
      <мета-имя="описание" содержание="">
      <мета имя="автор" содержание="">
      Notebook 04: Функции 
      ...

Как видите, в HTML используется тегов, заключенных под углом скобки <>

для обозначения команд. Эти тегов аналогичны ключевых слов в Python. Поскольку HTML — это просто последовательность текста, мы можем на самом деле использовать другой язык программирования, такой как Python, для создания строки текста, содержащие HTML!

Для рисования фигур мы будем использовать язык, похожий на HTML, который называется SVG. (Scalable Vector Graphics), который предназначен для рисования графики. Большинство современные веб-браузеры, такие как Chrome или Firefox поддерживают SVG вместе боковой HTML, поэтому попробуйте использовать эти браузеры, если графика, созданная в этой лабораторной работе, не работает в обычном веб-браузере.

Чтобы создать холст для наших рисунков SVG, нам нужно заключить нашу фигуру команды в теге

:

Чтобы нарисовать круг, мы можем использовать следующий код SVG внутри тега SVG:

Приведенный выше код дает следующее:

Чтобы нарисовать квадрат, мы можем использовать следующий код SVG внутри тега SVG:

Приведенный выше код дает следующее:

В блокноте Jupyter вы можете отобразить HTML-код с помощью HTML функционировать вместе с отображать функция:

 html = ''
отображение (HTML (html))

Это действие потребует от вас программирования двух функций, которые генерируют Код SVG, соответствующий каждой форме на основе различных переданных параметров к функциям.

Скелет кода

Ниже приведен скелет кода, который необходимо реализовать для завершения этого активность.

 # Импорт
из IPython.display импортировать HTML, отображать
из IPython.html.widgets.interaction импортировать взаимодействие
# константы
ГРАФИЧЕСКАЯ_ШИРИНА = 400
GRAPHIC_HEIGHT = 300
STROKE_COLOR = "черный"
ШТРОК_ШИРИНА = 0
FILL_COLOR = "синий"
ЦВЕТА = («красный», «оранжевый», «желтый», «зеленый», «фиолетовый», «синий», «черный», «белый»)
# Функции
def draw_circle (x, y, радиус, stroke_color = SROKE_COLOR, stroke_width = SROKE_WIDTH, fill_color = FILL_COLOR):
    """ Возвращает строку SVG, соответствующую кругу с указанными параметрами """
    # ДЕЛАТЬ
def draw_square (x, y, длина, stroke_color = SROKE_COLOR, stroke_width = SROKE_WIDTH, fill_color = FILL_COLOR):
    """ Возвращает строку SVG, соответствующую квадрату с указанными параметрами """
    # ДЕЛАТЬ
def draw_shape (форма, размер_графики, размер_формы, цвет_штриха, ширина_штриха, цвет_заполнения):
    """ Показать код HTML, содержащий указанную форму и параметры """
    # ДЕЛАТЬ
# Запустить интерактивный цикл
взаимодействовать (draw_shape, shape = («круг», «квадрат»), graphic_size = (100, 400), shape_size = (1, 100),
        stroke_color=ЦВЕТА, stroke_width=(1, 10), fill_color=ЦВЕТА)
Interact Module

Некоторым учащимся потребуется использовать следующее для импорта функции взаимодействия :

 из ipywidgets импортировать взаимодействие

Если функция взаимодействия не загружается, обратитесь к инструктору немедленно решить вопрос.

Импорт и константы предоставлены вам, но вы можете свободно изменять те, что по душе.

Как вы можете видеть ниже, вам нужно выполнить три функции:

  1. draw_circle

    : Эта функция принимает координаты центра x и y , радиус , stroke_color , stroke_width и fill_color круга и генерирует правильно отформатированную строку, представляющую код SVG соответствующий указанному кругу.

  2. draw_square : Эта функция принимает верхний левый угол размером x и y . координаты, длина , stroke_color , stroke_width и fill_color квадрата и генерирует правильно отформатированную строку, представляющую Код SVG, соответствующий указанному квадрату.

  3. draw_shape : Эта функция получает строку shape , graphic_size , shape_size , stroke_color , stroke_width и fill_color из пользователя и генерирует соответствующий код SVG для указанной формы и параметры.

Ваша завершенная программа должна выглядеть следующим образом:

Подсказки

  1. Вы можете использовать форматирование строки для реализации draw_circle и draw_square .

  2. Для draw_shape не забудьте заключить свою форму в тег SVG:

    Ширина и высота SVG соответствует Параметр graphic_size передан функции draw_shape .

  3. Для draw_shape вы должны создать переменную html , содержащую все HTML-код, который вы хотите отобразить. После того, как весь код HTML был сгенерирован, вы можете отобразить его с помощью

    display и HTML функции:

     display(HTML(html)) # Преобразование строки html в объект HTML и последующее отображение в блокноте

  4. Для draw_shape вы можете использовать следующие уравнения для рисования круга:

     х = ширина / 2
у = высота / 2
радиус = размер_формы * размер_графика/100/2

  5. Для draw_shape вы можете использовать следующие уравнения для рисования квадрата:

     длина = shape_size * graphic_size / 100
х = ширина / 2 - длина / 2
у = высота / 2 - длина / 2

Вопросы

Выполнив указанные выше действия, ответьте на следующие вопросы:

  1. Учитывая приведенные выше функции draw_circle и draw_square , как бы вы нарисуйте следующие фигуры:

    а.

    Зеленый круг с красной каймой

    б. Желтый квадрат с фиолетовой рамкой

    с. Белый круг с черной рамкой шириной 5

    д. Оранжевый квадрат без рамки

    Ответьте на вопрос, показав, какой вызов функции вы бы сделали и какие параметры вы бы передавали при каждом вызове функции.

  2. Поэкспериментируйте с интерактивным ящиком формы, а затем объясните, что делает функция взаимодействия и каковы аргументы для взаимодействия. Когда вы настраиваете ползунки или выбираете элемент, что происходит?

Упражнение 2: Визуализация моделирования пи

В этом упражнении вы измените свой Оценка Пи с помощью Монте-Карло код из Notebook03, выполнив следующие действия:

  1. Создайте функцию Simulation_pi , которая принимает число дартс , радиус каждого дротика, circle_color для каждого дротика внутри круга, и square_color для каждого дротика внутри квадрата, но не внутри круг как параметры.

  2. Эта функция должна генерировать изображение SVG, выполняя метод Монте-Карло. симуляция Пи с заданным количеством дротиков .

  3. Для визуализации симуляции необходимо нарисовать круг с указанным радиус с использованием функции draw_circle , определенной в Activity 1 для каждый бросок дротика.

  4. Дротики внутри круга должны использовать параметр circle_color в качестве fill_color , в то время как дротики вне круга должны использовать square_color как fill_color .

Скелет кода

Ниже приведен скелет кода, который необходимо реализовать для завершения этого активность.

 # Импорт
из IPython.display импортировать HTML, отображать
из IPython.html.widgets.interaction импортировать взаимодействие
импортировать математику
импортировать случайный
# константы
WIDTH = 400 # Ширина SVG
HEIGHT = 400 # Высота SVG
# Функции
def simulator_pi ​​(дротики, радиус, цвет_круга, цвет_квадрата):
    """ Отображение SVG, представляющего симуляцию числа Пи методом Монте-Карло """
    # ДЕЛАТЬ
# Запустить интерактивный цикл
взаимодействие (simulate_pi, дартс = (1, 1000), радиус = (1, 5), круг_цвет = ЦВЕТА, квадрат_цвет = ЦВЕТА)

Ваша завершенная программа должна выглядеть следующим образом:

Вопросы

Выполнив указанные выше действия, ответьте на следующие вопросы:

  1. Как вы сопоставили координаты дротиков с холстом SVG. То есть, учитывая координаты x и y для броска дротика, как вы перевели эти координаты в круг на изображении SVG.

  2. Поиграйте с интерактивным симулятором Пи. Что происходит, когда вы двигаетесь слайдер дартс ? Если вы переместите дротики ползунок с 500 на 501 и затем вернитесь к 500 , вы получите те же результаты? Объяснять.

Упражнение 3: Генерация шахматной доски

В этом упражнении вы должны написать функцию, которая генерирует шахматную доску исходя из количества квадратов заданных пользователем. Рисуя доску, функция должна чередоваться между first_color и second_color указанный пользователем.

Скелет кода

Ниже приведен скелет кода, который необходимо реализовать для завершения этого активность.

 # Импорт
из IPython.display импортировать HTML, отображать
из IPython. html.widgets.interaction импортировать взаимодействие
импортировать математику
# константы
ШИРИНА = 400
ВЫСОТА = 400
# Функции
def generate_chessboard (квадраты = 1, first_color = "белый", second_color = "черный"):
    """ Показать SVG, представляющий шахматную доску """
    # ДЕЛАТЬ
# Запустить интерактивный цикл
взаимодействовать (генерировать_chessboard, квадраты = {'1': 1, '4': 4, '9':9, '16':16, '25': 25, '36': 36, '49': 49, '64': 64},
        first_color=ЦВЕТА, second_color=ЦВЕТА)

Ваша завершенная программа должна выглядеть следующим образом:

Подсказки

  1. Вам нужно будет определить количество строк и столбцов из количество квадратов задается пользователем.

  2. Вам также нужно будет определить ширину и высоту каждого квадрата на доске на базе WIDTH и HEIGHT SVG и количество из строк и столбцов .

  3. Используйте логику, аналогичную той, которую мы разработали в упражнении на шахматной доске. пару недель назад, чтобы чередовать цвета ( % будет полезно).

Вопросы

Выполнив указанные выше действия, ответьте на следующие вопросы:

  1. Объясните, как ваша программа рисует чередующиеся квадраты разных цветов. Какова была ваша логика?

  2. Поэкспериментируйте с интерактивным генератором шахматной доски. Обратите внимание, что параметр взаимодействия для квадратов — это словарь, содержащий совершенные квадраты. Измените это на простой целочисленный ползунок, как мы сделали для дротиков в Действие 2 . Как это изменение повлияет на ваш генератор шахматной доски?

Дополнительный кредит

Для получения дополнительного кредита измените свой код Расчет ипотечных платежей с Notebook03 и сделать его интерактивным с помощью модуля взаимодействия. Позволять пользователям указать процентную ставку, платеж и основную сумму. Вместо графику, сгенерируйте HTML-таблицу со сводным сообщением об общей сумме оплачивается и продолжительность пребывания под столом.

Отправка

Чтобы отправить блокнот, следуйте тем же инструкциям для Notebook00, за исключением сохранения этого ноутбука в папке Note04 .

Инструмент для программирования превращает рукописный текст в компьютерный код

Команда из Корнелла создала интерфейс, который позволяет пользователям писать от руки и делать наброски в компьютерном коде, что является проблемой для обычного кодирования, которое обычно основано на наборе текста.

Интерфейс на основе пера, называемый Notate, позволяет пользователям вычислительных цифровых блокнотов, таких как блокноты Jupyter, которые являются интерактивными через Интернет, открывать холсты для рисования и писать диаграммы от руки в строках традиционного оцифрованного компьютерного кода.

Основанный на модели глубокого обучения интерфейс объединяет контексты рукописного и текстового программирования: обозначения на рукописной диаграмме могут ссылаться на текстовый код и наоборот. Например, Notate распознает написанные от руки символы программирования, такие как «n», а затем связывает их с их машинописными эквивалентами. В ходе тематического исследования пользователи рисовали схемы квантовых цепей внутри ячеек кода ноутбука Jupyter.

Инструмент был описан в документе «Нотационное программирование для сред ноутбуков: пример использования квантовых схем», представленном на симпозиуме ACM по программному обеспечению и технологиям пользовательского интерфейса, состоявшемся 29 октября.до 2 ноября в Бенде, штат Орегон. Статья, ведущим автором которой является Ян Аравжо, докторант в области информатики, получила почетное упоминание на конференции.

«Подобная система была бы отличной для науки о данных, особенно для построения графиков и диаграмм, которые затем взаимодействуют с текстовым кодом», — сказал Аравджо. «Наша работа показывает, что текущая инфраструктура программирования на самом деле сдерживает нас. Люди готовы к такому типу функций, но разработчики интерфейсов для ввода кода должны принять это к сведению и поддерживать изображения и графические интерфейсы внутри кода».

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

«Такие инструменты, как Notate, важны, потому что они открывают нам новые способы осмысления того, что такое программирование, и как различные инструменты и репрезентативные практики могут изменить эту точку зрения», — сказал Тапан Парих, доцент кафедры информатики в Cornell Tech и соавтор статьи.

Другие соавторы: Anthony DeArmas ’22; Майкл Робертс, докторант в области компьютерных наук; и Шрутарши Басу, доктор философии. 18 лет, в настоящее время приглашенный доцент компьютерных наук в колледже Миддлбери.

Comments
Leave Comment