Mal med kodning - Intro til P5.js

Præsentation

Indsæt link til din aflevering her senest 14:40. Find linket ved at trykke på file -> share -> editor.

P5.js links

Editor: P5.js online editor - please make an account

Offical ressources: P5.js website / P5.js reference / P5.js examples

Artistic ressources: Generative Design P5.js / OpenProcessing

Tutorials: Coordinate System and Shapes & Interactivity / P5.js cheat sheet pdf

Basics

1_1_Basic_Shapes

Exercise: Draw a face using the simple shapes you learned in 1_1_Basic_Shapes. Remember to save it!

Draw A Face

2_1_Draw_A_Face

2_2_Draw_A_Face_Colors

Interactivity

3_1_Interactivity_Mouse (press mouse to draw)

3_2_Interactivity_Keys (press 'r', 'g' or 'b')

Math

4_1_Math_Random

4_4_Math_Map (controlled by mouse position)

4_5_Non_Static_Face

Exercise: Control some aspect of your face from the first exercise with mouse, keyboard, noise, random, sin and/or map

Loops

5_1_Loops_No_Loop

5_2_Loops_Single

5_3_Loops_Nested

5_4_Loops_Nested_Advanced

Shapes

6_1_Shapes_Vertex

6_2_Shapes_Rotation

6_3_Shapes_Noisewave

Advanced

7_1_Advanced_Palette (click mouse to change colors)

7_2_Advanced_Zachs_Circles

7_3_Advanced_SquareFlower (controlled by mouse position)

7_4_Advanced_NoiseBezier

Andreas Refsgaard links

andreasrefsgaard.dk