Презентація "Інтерактивне кодування (ч.1)"

Інтерактивне кодування. Креативне програмування

Розглянемо малювання мишкою на екрані монітора різних фігур з використанням графічних примітивів.

function setup() { create. Canvas(window. Width, window. Height); background(100);}function draw() { ellipse(mouse. X, mouse. Y, 20, 20);}Координати мишки

Один з результатів виконання програми

Зміна розмірів еліпса:ellipse(mouse. X, mouse. Y, random(50), random(50));function setup() { create. Canvas(window. Width, window. Height); background(100);}function draw() { ellipse(mouse. X, mouse. Y, random(50), random(20));}Координати мишки. Генерування розмірів

Один з результатів виконання програми

Зміна фону малюнкаbackground(0);function setup() { create. Canvas(window. Width, window. Height); background(0);}function draw() { ellipse(mouse. X, mouse. Y, random(20), random(50));}Чорний колір тла

Один з результатів виконання програми

Керування кольором:fill(red, green, blue)Встановлюється ТРИ значення для RGB від 0 дo 255:

Малювання сліду руху мишки прямокутниками червоного кольору:function setup() { create. Canvas(window. Width, window. Height); background(0);}function draw() { fill(255, 0, 0); rect(mouse. X, mouse. Y, random(50),random(50));}

Один з результатів виконання програми

random(min, max)function setup() { create. Canvas(window. Width, window. Height); background(0);}function draw() { fill(random(100, 255), random(0, 100), random(0, 100)); ellipse(mouse. X, mouse. Y, random(30, 100));}fill(random(0,255), random(0,255), random(0,255))- генерування випадкових значень кольорів ( числа від 0 до 255)

Один з результатів виконання програми

Вибір кольору з використанням Нех (шістнадцяткового) коду. Вибір кольору

function setup() { create. Canvas(window. Width, window. Height); background(0);}function draw() { fill(random(["#ffffff","#000000"])); circle(mouse. X, mouse. Y, random(30, 100));}Білий. Чорний

Один з результатів виконання програми

function setup() { create. Canvas(window. Width, window. Height); background(0);}function draw() { fill(random(["#264653","#2a9d8f","#e9c46a","#f4a261","#e76f51"])); circle(mouse. X, mouse. Y, random(30, 100));}Вибір кольору з набору. Набір кольорів

Один з результатів виконання програми

function setup() { create. Canvas(window. Width, window. Height); background(200); no. Stroke();}function draw() { fill(random(["#264653","#2a9d8f","#e9c46a","#f4a261","#e76f51"])); triangle(mouse. X, mouse. Y, 58, 20, 86, 75);}no. Stroke()Малювання фігури без канви. Малювати фігуру без канви

Один з результатів виконання програми

function setup() { create. Canvas(window. Width, window. Height); background(0); no. Stroke();}function draw() { fill(random(["#264653","#2a9d8f","#e9c46a","#f4a261","#e76f51"])); circle(random(width), random(height), random(30, 100));}Автоматичне малювання кіл

Один з результатів виконання програми

Додавання текстуfunction setup() { create. Canvas(window. Width, window. Height); background(0); no. Stroke(); text. Size(200); text. Font(load. Font("Ubuntu-Bold.ttf"));}function draw() { fill(random(["#264653","#2a9d8f","#e9c46a","#f4a261","#e76f51"])); circle(random(width), random(height), random(30, 100)); fill(255); text(“Escuela", mouse. X, mouse. Y);}

Один з результатів виконання програми

function setup() { create. Canvas(window. Width, window. Height); background(0); no. Stroke(); text. Size(200);}function draw() { fill(random(["#264653","#2a9d8f","#e9c46a","#f4a261","#e76f51"])); arc(random(width), random(height), 80, 80, 0, PI + QUARTER_PI); circle(random(width), random(height), random(30, 100)); triangle(mouse. X, mouse. Y, random(width), random(height), 86, 75); fill(255,50,100); text("Escuela",mouse. X,mouse. Y);}Художня виставка

Кінець