session 1 (creative coding and processing basics)

The KODERUNNERS Community

Creative Coding 101 - Abhik Biswas


• Creative Coding 101Introduction to Processing

By : Abhik Biswas & Soumik Rakshit, CSE


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

https://www.google.co.in/imgres?imgurl=https://upload.wikimedia.org/wikipedia/commons/thumb/8/8d/Creative_coding_breakout_modification.png/220px-Creative_coding_breakout_modification.png&imgrefurl=https://en.wikipedia.org/wiki/Creative_coding&h=300&w=220&tbnid=KLue_Sharx4wAM:&vet=1&tbnh=160&tbnw=117&docid=4fVnz6o1Hf4w8M&usg=__rhKWPlS9Sp9vt_U_9cH3-2X6a80=&sa=X&ved=0ahUKEwii89z9g8bSAhVLpY8KHR42BUEQ9QEIHTAA


The Myth behind Programmers and Designers.

Logic + Algorithms + Procedure= Code= Mechanical

● Fantasy + Imagination + Impulse= Creativity= Art

Therefore Code can not be Creative



“Computers are useless. They can only give you answers.”- Pablo Picasso



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+

Sensors=

Creative Technology



Possibilities of Creative Coding

Data VisualizationGenerative ArtAudio-Visual installationProjection MappingInteractive environments



Processing



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)



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..




Processing

Basic Procedural/ Structured

Object Oriented

; Soumik Rakshit


Cartesian Plotting in Processing

Think about graph paperHow would you draw a line between (0, 0)

and (5,5)?



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



line(10, 10, 90, 90);

X and Y coordinates of the first point

X and Y coordinates of the second point



Why such an output?



EX : 01 Cartesian Map in Processing

On a computer screen, the origin (0, 0) is always at the top left location of the screen



Basic Shapes

Points, Rectangles, Triangles, Quadrilaterals etc.Eg: point (10,10) represents a point at (10,10)



rectangle(20, 20, 50, 50);

X and Y coordinates of the first point

Length and Width of the rectangle



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



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



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



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



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



Opacity / Transparency

Opacity/Transparency also defined separately in the fill function

0 = completely transparent255 = completely opaque



fill(255, 0, 0);rect(5, 5, 70, 30);

fill(0, 255, 0);rect(25, 25, 40, 60);



fill(255, 0, 0);rect(5, 5, 70, 30);

fill(0, 255, 0, 127);rect(25, 25, 40, 60);

Transparency



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);



Stroke Color

stroke(color);*Could be a single value

(to specify gray scale)*Could be 3 values for RGB



Hands on Demo - 1CREATE AN ALIEN FIGURE



Practice Problem:CREATE A SNOWMAN



THANK YOU



Back Creative Coding 101 - Abhik Biswas ; Soumik Rakshit

session 1 (creative coding and processing basics)

Education