Date post: | 15-Apr-2017 |
Category: |
Education |
Upload: | koderunners |
View: | 108 times |
Download: | 1 times |
The KODERUNNERS Community
Creative Coding 101 - Abhik Biswas
The KODERUNNERS Community
• Creative Coding 101Introduction to Processing
By : Abhik Biswas & Soumik Rakshit, CSE
The KODERUNNERS Community
What is Creative coding
Creative coding is a type of computer programming in which the goal is to create something expressive instead of something functional.
Creative Coding 101 - Abhik Biswas ; Soumik Rakshit
The KODERUNNERS Community
The Myth behind Programmers and Designers.
Logic + Algorithms + Procedure= Code= Mechanical
● Fantasy + Imagination + Impulse= Creativity= Art
Therefore Code can not be Creative
Creative Coding 101 - Abhik Biswas ; Soumik Rakshit
The KODERUNNERS Community
“Computers are useless. They can only give you answers.”- Pablo Picasso
Creative Coding 101 - Abhik Biswas ; Soumik Rakshit
The KODERUNNERS Community
Creative Coding 101 - Abhik Biswas ; Soumik Rakshit
The KODERUNNERS Community
Turning a code into creative code. How?
Code is more than a tool Code is mathematical --> Beauty, Complexity Code can be surprising --> Emergence Code can be interactive --> Playfulness Code can be Creative
Creative Coding 101 - Abhik Biswas ; Soumik Rakshit
The KODERUNNERS Community
Creative Coding+
Sensors=
Creative Technology
Creative Coding 101 - Abhik Biswas ; Soumik Rakshit
The KODERUNNERS Community
Possibilities of Creative Coding
Data VisualizationGenerative ArtAudio-Visual installationProjection MappingInteractive environments
Creative Coding 101 - Abhik Biswas ; Soumik Rakshit
The KODERUNNERS Community
Processing
Creative Coding 101 - Abhik Biswas ; Soumik Rakshit
The KODERUNNERS Community
Introduction to Processing
Processing is a Java dialect specifically designed for generating visual art, animation and any kind of graphic application
Developed by artists to artistsDeveloped from 2001 at the MIT by Casey Reas and
Ben Fry. Inspired in John Maeda’s DBN (Design By Numbers)
Creative Coding 101 - Abhik Biswas ; Soumik Rakshit
The KODERUNNERS Community
Creative Coding 101 - Abhik Biswas
The KODERUNNERS Community
Why Processing?
Prototyping is done in the form of a sketch Visual feedback feeds the curiosity that is inherent in new programmers It has its own IDE (very easy) Faster learning than OpenGL + GLUT or other alternatives Powerful, very powerful. It allows to develop from very simple to very
complex applications Scalable. It is possible to combine processing with pure Java and with
Java libraries. A pure Java application can use processing libraries as well..
Creative Coding 101 - Abhik Biswas ; Soumik Rakshit
The KODERUNNERS Community
Creative Coding 101 - Abhik Biswas
Processing
Basic Procedural/ Structured
Object Oriented
; Soumik Rakshit
The KODERUNNERS Community
Cartesian Plotting in Processing
Think about graph paperHow would you draw a line between (0, 0)
and (5,5)?
Creative Coding 101 - Abhik Biswas ; Soumik Rakshit
The KODERUNNERS Community
EX : 01 Draw a Line in Processing
line(10, 10, 90, 90);This is your first programType it in and click on the Triangle (Play
button) in the top menu or select Sketch -> Run
Creative Coding 101 - Abhik Biswas ; Soumik Rakshit
The KODERUNNERS Community
line(10, 10, 90, 90);
X and Y coordinates of the first point
X and Y coordinates of the second point
Creative Coding 101 - Abhik Biswas ; Soumik Rakshit
The KODERUNNERS Community
Why such an output?
Creative Coding 101 - Abhik Biswas ; Soumik Rakshit
The KODERUNNERS Community
EX : 01 Cartesian Map in Processing
On a computer screen, the origin (0, 0) is always at the top left location of the screen
Creative Coding 101 - Abhik Biswas ; Soumik Rakshit
The KODERUNNERS Community
Basic Shapes
Points, Rectangles, Triangles, Quadrilaterals etc.Eg: point (10,10) represents a point at (10,10)
Creative Coding 101 - Abhik Biswas ; Soumik Rakshit
The KODERUNNERS Community
rectangle(20, 20, 50, 50);
X and Y coordinates of the first point
Length and Width of the rectangle
Creative Coding 101 - Abhik Biswas ; Soumik Rakshit
The KODERUNNERS Community
quad(38,31,86,20,69,63,30,76);
X and Y coordinates
of the 1st point
X and Y coordinates
of the 2nd point
X and Y coordinates
of the 3rd point
X and Y coordinates
of the 4th point
Creative Coding 101 - Abhik Biswas ; Soumik Rakshit
The KODERUNNERS Community
triangle(13,75,28,20,26,75);
X and Y coordinates
of the 1st point
X and Y coordinates
of the 2nd point
X and Y coordinates
of the 3rd point
Creative Coding 101 - Abhik Biswas ; Soumik Rakshit
The KODERUNNERS Community
Ellipses and Circles
Ellipse can be represented by specifying the1. The coordinates of the center of the ellipse2. The radius of the ellipse in the X-direction3. The radius of the ellipse in the Y-direction
ellipse(xc, yc, xrad, yrad); A circle is an ellipse with the same value for the x-radius and y-
radius
Creative Coding 101 - Abhik Biswas ; Soumik Rakshit
The KODERUNNERS Community
Representing Colors
Colors in Processing are represented as a combination of Red, Green and Blue values
0 = no contribution of a particular color255 = maximum contribution of a particular colorPure Red = 255, 0, 0Pure Green = 0, 255, 0
Creative Coding 101 - Abhik Biswas ; Soumik Rakshit
The KODERUNNERS Community
Experiment with Colors
// Set fill color to Redfill(255, 0, 0);
rect(5, 5, 70, 30); // Set fill color to Green
fill(0, 255, 0);
ellipse(20, 60, 25, 35); // Set fill color to a shade of Green
fill(0, 127, 0);
triangle(50, 50, 70, 70, 90, 30);
Red, Green, Blue combinationsBlack = 0, 0, 0Yellow = 255, 255, 0Orange = 255, 102, 0Brown = 165, 42, 42Fuchsia = 255, 0, 255Olive = 128, 128, 0White = 255, 255, 255
Creative Coding 101 - Abhik Biswas ; Soumik Rakshit
The KODERUNNERS Community
Opacity / Transparency
Opacity/Transparency also defined separately in the fill function
0 = completely transparent255 = completely opaque
Creative Coding 101 - Abhik Biswas ; Soumik Rakshit
The KODERUNNERS Community
fill(255, 0, 0);rect(5, 5, 70, 30);
fill(0, 255, 0);rect(25, 25, 40, 60);
Creative Coding 101 - Abhik Biswas ; Soumik Rakshit
The KODERUNNERS Community
fill(255, 0, 0);rect(5, 5, 70, 30);
fill(0, 255, 0, 127);rect(25, 25, 40, 60);
Transparency
Creative Coding 101 - Abhik Biswas ; Soumik Rakshit
The KODERUNNERS Community
Stroke Weight
strokeWeight(value);size(480, 120);smooth();ellipse(75, 60, 90, 90);strokeWeight(8); // weight = 8 pixellipse(175, 60, 90, 90);ellipse(279, 60, 90, 90);strokeWeight(20); // weight = 20
pixellipse(389, 60, 90, 90);
Creative Coding 101 - Abhik Biswas ; Soumik Rakshit
The KODERUNNERS Community
Stroke Color
stroke(color);*Could be a single value
(to specify gray scale)*Could be 3 values for RGB
Creative Coding 101 - Abhik Biswas ; Soumik Rakshit
The KODERUNNERS Community
Hands on Demo - 1CREATE AN ALIEN FIGURE
Creative Coding 101 - Abhik Biswas ; Soumik Rakshit
The KODERUNNERS Community
Practice Problem:CREATE A SNOWMAN
Creative Coding 101 - Abhik Biswas ; Soumik Rakshit
The KODERUNNERS Community
THANK YOU
Creative Coding 101 - Abhik Biswas ; Soumik Rakshit
The KODERUNNERS Community
Creative Coding 101 - Abhik Biswas ; Soumik Rakshit
The KODERUNNERS Community
Back Creative Coding 101 - Abhik Biswas ; Soumik Rakshit