Authorship & Interaction
Samina Parvin
rect(250,200,150,100);
ellipse(250,200,200,200);
ellipse(250,200,300,300);
rect(450,40,10,240);
ellipse(190,200,70,70);
Intro:
Shapes:
Colour:
stroke(0);
fill(128);
rect(250,200,100,75);
background(216,225,149);
stroke(255,0,0);
fill(0,0,255);
rect(250,200,100,75);
background(10,80,100);
stroke(255,255,255);
fill(160,220,90);
ellipse(250,200,300,300);
fill(160,210,230);
rect(450,40,10,240);
fill(255,255,255);
ellipse(190,200,70,70);
Interact:
void setup() {
}
void draw() {
}
void setup() {
size(500,400);
}
void draw() {
background(0);
stroke(255,255,255);
fill(160,220,90);
ellipse(250,200,300,300);
}
void setup() {
size(500,400);
}
void draw() {
background(0);
stroke(255);
fill(128);
ellipse(MouseX,MouseY,100,100);
}
void setup() {
size(500,400);
background(0);
}
void draw() {
stroke(255);
fill(128);
ellipse(MouseX,MouseY,100,100);
}
void setup() {
size(500,400);
background(10,80,100);
}
void draw() {
stroke(255,255,255);
fill(160,220,90);
ellipse(MouseX,200,300,300);
fill(160,210,230);
rect(450,MouseY,10,240);
fill(255,255,255);
ellipse(MouseX,MouseY,70,70);
}
Question:
void setup() {
size(500,400);
}
void draw() {
background(0);
stroke(255);
fill(128);
ellipse(250,200,100,100);
if(mousePressed){
rect(250,200,100,100);
}
}
void setup() {
size(500,400);
}
void draw() {
background(0);
stroke(255);
fill(128);
if(mousePressed){
rect(250,200,100,100);
} else{
ellipse(250,200,100,100);
}
}
void setup() {
size(500,400);
}
void draw() {
if(mousePressed){
background(0);
}
stroke(255);
fill(128);
ellipse(250,200,100,100);
}
void setup() {
size(500,400);
}
void draw() {
if (mousePressed){ background(10,80,100);
}
stroke(255,255,255);
fill(160,220,90);
ellipse(MouseX,200,300,300);
fill(160,210,230);
rect(450,MouseY,10,240);
fill(255,255,255);
ellipse(MouseX,MouseY,70,70);
}
Summary:
Excercises:
void setup()
{
size(400, 400);
background(255,0,0);
}
void draw()
{
stroke(0, 255, 0);
fill(0);
triangle(20, 20, 150, 20, 20, 150);
stroke(0, 0, 255);
fill(0);
triangle(20, 380, 20, 250, 150, 380);
stroke(0, 0, 255);
fill(0);
triangle(380, 20, 250, 20, 380, 150);
stroke(0, 255, 0);
fill(0);
triangle(380, 380, 380, 250, 250, 380);
stroke(255, 0, 0);
fill(0, 255, 0);
ellipse(200, 200, 150, 150);
}
//println(calories.length);
String Wool [] = {"Hemp","Cotton","Unwashed","Acrylic","Silk","Milk Fibre","Jute Fibre","Merino","Banana Fibre","Conductive"};
int Month [] = {10, 12, 2, 3, 1, 6, 8, 4, 7, 12};
int Remaining [] = {128,20,90,74,80,143,20,132,40,197};
//println(Boroughs.length);
void setup() {
size(1400,1800);
background(33,190,216);
smooth();
stroke(43,70,900);
strokeWeight(2);
}
void draw() {
rotate(radians(-25));
text("Month used and amount of wool remaining in grams",40,500,500);
smooth();
for (int i=0; i< Remaining.length; i++){
pushMatrix();
translate(Month[i]*55, height/2 - Remaining[i]/2);
rotate(radians(-120));
text(Wool[i],50,100);
text(Month[i], 20,50);
popMatrix();
fill(250, 30, 80, 50);
triangle(Month[i]*100, height/2, 200, Remaining[i], 80, 100);
fill(250);
}
}
//println(calories.length);
String Wool [] = {"Hemp","Cotton","Unwashed","Acrylic","Silk","Milk Fibre","Jute Fibre","Merino","Banana Fibre","Conductive"};
int Month [] = {10, 12, 2, 3, 1, 6, 8, 4, 7, 12};
int Remaining [] = {128,20,90,74,80,143,20,132,40,197};
//println(Boroughs.length);
void setup() {
size(800,600);
background(0);
smooth();
stroke(43,70,900);
strokeWeight(2);
}
void draw() {
background(0);
line(0, height/2, width, height/2);
text("Month used and amount of wool remaining in grams",40,50,500);
for (int i=0; i< Remaining.length; i++){
fill(250, 30, 80, 50);
ellipse(Month[i]*55, height/2, Remaining[i], Remaining[i]);
fill(250);
pushMatrix();
translate(Month[i]*55, height/2 - Remaining[i]/2);
rotate(radians(-45));
text(Wool[i],0,0);
text(Month[i], 0,20);
popMatrix();
}
}
void setup()
{
size(400, 400);
}
void draw()
{
stroke(0, 0, 255);
line(20, 200, 120, 250);
stroke(0, 255, 0);
fill(255, 0, 0);
rect(20, 20, 100, 100);
stroke(255, 0, 0);
fill(0, 255, 0);
ellipse(200, 200, 100, 100);
}
Hello Processing Videos:
Processing
Data Gathering and Display
Data is all around us and is becoming more open. Through open datastores enabling it to be more widely available, there is the opportunity for people to look at these datasets and explore them. But who is the author of a data-visualisation; the one who collected the data or the one who made visualisation? This is a challenge for designers working within data visualisation.
Processing
Processing was created to give designers and artists a better way to learn how to code and create visual art in a programming environment. It was developed by Casey Reas and Ben Fry. Processing gives the instant gratification through visual feedback and is a great tool for data visualisation.
Homework:
size(500,400);
background(63,255,0);
stroke(0,4,255);
fill(0,255,238);
rect(80,100,10,200);
stroke(52,0,255);
fill(99,4,255);
rect(130,200,10,20);
rect(130,220,10,20);
rect(130,240,10,20);
rect(130,250,10,20);
rect(130,260,10,20);
rect(130,280,10,20);
rect(140,280,10,20);
rect(150,280,10,20);
rect(160,280,10,20);
rect(170,280,10,20);
rect(180,280,10,20);
rect(190,280,10,20);
rect(200,280,10,20);
rect(200,260,10,20);
rect(200,240,10,20);
rect(200,220,10,20);
rect(200,200,10,20);
rect(140,200,10,20);
rect(150,200,10,20);
rect(160,200,10,20);
rect(170,200,10,20);
rect(180,200,10,20);
rect(190,200,10,20);
rect(200,200,10,20);
stroke(0,26,255);
fill(16,247,101);
rect(250,200,10,20);
rect(250,220,10,20);
rect(250,240,10,20);
rect(250,260,10,20);
rect(250,280,10,20);
rect(260,300,10,20);
rect(270,320,10,20);
rect(280,320,10,20);
rect(290,300,10,20);
rect(300,280,10,20);
rect(300,260,10,20);
rect(300,240,10,20);
rect(300,220,10,20);
rect(300,220,10,20);
rect(300,200,10,20);
stroke(0,43,227);
fill(18,31,244);
rect(350,280,10,20);
rect(350,260,10,20);
rect(350,240,10,20);
rect(350,220,10,20);
rect(350,200,10,20);
rect(360,200,10,20);
rect(370,200,10,20);
rect(380,200,10,20);
rect(390,200,10,20);
rect(400,200,10,20);
rect(410,200,10,20);
rect(420,200,10,20);
rect(420,220,10,20);
rect(420,240,10,20);
rect(420,250,10,10);
rect(410,250,10,10);
rect(400,250,10,10);
rect(390,250,10,10);
rect(380,250,10,10);
rect(370,250,10,10);
rect(360,250,10,10);
rect(350,250,10,10);
rect(360,280,10,20);
rect(370,280,10,20);
rect(380,280,10,20);
rect(390,280,10,20);
rect(400,280,10,20);
rect(410,280,10,20);
rect(420,280,10,20);
void setup(){
size(500,400);
stroke(248,127,104);
fill(248,127,104);
rect(0,0,500,25);
stroke(248,134,106);
fill(248,134,106);
rect(0,25,500,25);
stroke(248,147,106);
fill(248,147,106);
rect(0,50,500,25);
stroke(248,159,106);
fill(248,159,106);
rect(0,75,500,25);
stroke(248,165,106);
fill(248,165,106);
rect(0,100,500,25);
stroke(248,171,106);
fill(248,171,106);
rect(0,125,500,25);
stroke(248,178,106);
fill(248,178,106);
rect(0,150,500,25);
stroke(248,185,106);
fill(248,185,106);
rect(0,175,500,25);
stroke(248,194,106);
fill(248,194,106);
rect(0,200,500,25);
stroke(248,200,106);
fill(248,200,106);
rect(0,225,500,25);
stroke(248,208,106);
fill(248,208,106);
rect(0,225,500,25);
stroke(248,217,106);
fill(248,217,106);
rect(0,250,500,25);
stroke(248,225,106);
fill(248,225,106);
rect(0,275,500,25);
stroke(248,225,106);
fill(248,245,106);
ellipse(250,300,200,100);
stroke(166,231,243);
fill(166,231,243);
rect(0,275,500,25);
stroke(166,204,243);
fill(166,204,243);
rect(0,300,500,25);
stroke(166,187,243);
fill(166,187,243);
rect(0,325,500,25);
stroke(166,167,243);
fill(166,167,243);
rect(0,350,500,25);
stroke(158,156,246);
fill(158,156,246);
rect(0,375,500,25);
}
void draw() {
if (mousePressed) {
stroke(248,171,106);
fill(248,171,106);
ellipse(mouseX, mouseY, 11, 11);
stroke(248,225,106);
fill(248,245,106);
ellipse(250,300,200,100);
stroke(166,231,243);
fill(166,231,243);
rect(0,275,500,25);
stroke(166,204,243);
fill(166,204,243);
rect(0,300,500,25);
stroke(166,187,243);
fill(166,187,243);
rect(0,325,500,25);
stroke(166,167,243);
fill(166,167,243);
rect(0,350,500,25);
stroke(158,156,246);
fill(158,156,246);
rect(0,375,500,25);
}}
size(500,400);
background(67,165,217);
fill(195,46,46);
stroke(48,48,219);
rect (50, 50, 400, 200);
fill(231,149,22);
stroke(73,39,236);
rect (75, 75, 350, 175);
fill(194,223,1);
stroke(40,70,137);
rect(100, 100, 300, 150);
fill(8,238,18);
stroke(69,223,89);
rect(125, 125, 250, 125);
fill(10,10,255);
stroke(24,24,24);
rect(150, 150, 200, 100);
fill(162,24,210);
stroke(6,2,2);
rect(175, 175, 150, 75);
fill(67,165,217);
rect(200, 200, 100, 50);
void setup() {
size(400, 400);
background(248,245,244);
}
void draw() {
if (mousePressed) {
line(mouseX, mouseY, mouseY, mouseX);
}
}
//import processing.sound.*;
//SoundFile file1;
//SoundFile file2;
//set the speed of transform
float speed_cloud = 0.5;
float speed_wave = 0.2;
float x_cloud1 = 135;
float x_cloud2 = 170;
float x_cloud3 = 227;
float x_cloud4 = 305;
float x_cloud5 = 329;
float x_wave1 = 124;
float x_wave2 = 353;
float x_wave3 = 180;
float x_wave4 = 307;
float x_wave5 = 181;
int direction1 = 1;
int direction2 = 1;
int direction3 = 1;
int direction4 = 1;
int direction5 = 1;
float speed_sun = 0.02;
float d_sun=24.04;
float angle_sun = 0.0;
int num = 20;
int count = 0;
float speed_rain=1.1;
int r = 6; //r of rain
void setup(){
size(500,500);
smooth();
noStroke();
//file1 = new SoundFile(this,"/Users/emilily/Emilily/北科大/互動程式設計/hw2_interaction/rain.mp3");
//file2 = new SoundFile(this,"/Users/emilily/Emilily/北科大/互動程式設計/hw2_interaction/rain.mp3");
//file1.play();
}
void draw(){
//bg
background(255,255,255);
//big triangle
fill(248,244,210);
triangle(250.34,107,63.5,293,438.5,293);
//green triangle
fill(168,221,0);
triangle(192.52,223.48,123.5,292.5,192.52,292.5);
fill(0,144,123);
triangle(192.52,223.48,192.52,292.5,261.53,292.5);
fill(168,221,0);
triangle(250.73,189.97,148.2,292.5,250.73,292.5);
fill(0,144,123);
triangle(250.73,189.97,250.73,292.5,353.26,292.5);
fill(168,221,0);
triangle(353,247,307.5,292.5,353,292.5);
fill(0,144,123);
triangle(353,247,353,292.5,389.5,292.5);
//blue triangle
fill(201,255,237);
triangle(123.5,292.5,249.36,418.36,375.23,292.5);
//bbrown triangle
fill(130,108,79);
triangle(227.70,397.06,249.18,418.54,270.67,397.06);
//sbrow triangle
fill(94,72,58);
triangle(238.5,407.56,249,397.06,259.5,407.56);
//transform animation
//white cloud
fill(255,255,255);
x_cloud1 += speed_cloud;
x_cloud2 += speed_cloud;
x_cloud3 -= speed_cloud;
x_cloud4 += speed_cloud;
x_cloud5 -= speed_cloud;
if(x_cloud1 > 22+344.42){
x_cloud1 = 156.92-22;
}
if(x_cloud2 > 22*2+344.42){
x_cloud2 = 156.92-22*2;
}
if(x_cloud3 < 156.92-22*2){
x_cloud3 = 22*2+344.42;
}
if(x_cloud4 > 22+344.42){
x_cloud4 = 156.92-22;
}
if(x_cloud5 < 156.92-22*2){
x_cloud5 = 22*2+344.42;
}
arc(x_cloud1,253,22,22,PI,TWO_PI);
arc(x_cloud2,196,22,22,PI,TWO_PI);arc(x_cloud2+22,196,22,22,PI,TWO_PI);
arc(x_cloud3,159,22,22,PI,TWO_PI);arc(x_cloud3+22,159,22,22,PI,TWO_PI);
arc(x_cloud4,171,22,22,PI,TWO_PI);
arc(x_cloud5,217,22,22,PI,TWO_PI);arc(x_cloud5+22,217,22,22,PI,TWO_PI);
//brown arc
fill(130,108,79);
arc(134,292,22,22,PI,TWO_PI);
arc(178,292,22,22,PI,TWO_PI);
arc(222,292,22,22,PI,TWO_PI);
arc(318,292,22,22,PI,TWO_PI);
//blue1 arc
fill(0,84,94);
arc(156,292,22,22,PI,TWO_PI);
arc(200,292,22,22,PI,TWO_PI);
arc(340,292,22,22,PI,TWO_PI);
//start transform animation
//blue2 arc
x_wave1 -= speed_wave * direction1;
x_wave2 -= speed_wave * direction2;
x_wave3 += speed_wave * direction3;
x_wave4 -= speed_wave * direction4;
x_wave5 += speed_wave * direction5;
if((x_wave1 < 186.43-5*22)||(x_wave1>312.30+22)){
direction1 = -direction1;
}
if((x_wave2 < 186.43-3*22)||(x_wave2>312.30+22*2)){
direction2 = -direction2;
}
if((x_wave3 < 186.43-3*22)||(x_wave3>312.30+22)){
direction3 = -direction3;
}
if((x_wave4 < 186.43-2*22)||(x_wave4>312.30+22)){
direction4 = -direction4;
}
if((x_wave5 < 186.43-22)||(x_wave5>300)){
direction5 = -direction5;
}
fill(0,205,204);
arc(x_wave1,312,22,22,PI,TWO_PI);
arc(x_wave1+2*22,312,22,22,PI,TWO_PI);
arc(x_wave1+4*22,312,22,22,PI,TWO_PI);
arc(x_wave2,312,22,22,PI,TWO_PI);
arc(x_wave2+2*22,312,22,22,PI,TWO_PI);
arc(x_wave3+22,338,22,22,PI,TWO_PI);
arc(x_wave4,349,22,22,PI,TWO_PI);
arc(x_wave5,360,22,22,PI,TWO_PI);
//blue3 arc
fill(0,124,161);
arc(x_wave1+22,312,22,22,PI,TWO_PI);
arc(x_wave1+3*22,312,22,22,PI,TWO_PI);
arc(x_wave1+5*22,312,22,22,PI,TWO_PI);
arc(x_wave2+22,312,22,22,PI,TWO_PI);
arc(x_wave3,338,22,22,PI,TWO_PI);
arc(x_wave3+2*22,338,22,22,PI,TWO_PI);
arc(x_wave4+22,349,22,22,PI,TWO_PI);
//rotation animation
//orange sun
translate(146.5,207.5);
angle_sun += speed_sun;
rotate(angle_sun);
if (mouseX >= 122.46 && mouseX <= 170.54 &&
mouseY >= 183.46 && mouseY <= 231.54 && mousePressed)
{
//println(1);
//file1.stop();
//file2.play();
rotate(-angle_sun);
translate(-146.5,-207.5);
//draw rain
fill(201,255,237);
count++;
if(count<num){ellipse(x_cloud1,253+6+speed_rain*count,r,r); }
else{count=0;}
if(count<num){ellipse(x_cloud2,196+6+speed_rain*count,r,r); }
if(count<num){ellipse(x_cloud2+22,196+6+speed_rain*count,r,r); }
if(count<num){ellipse(x_cloud3,159+6+speed_rain*count,r,r); }
if(count<num){ellipse(x_cloud3+22,159+6+speed_rain*count,r,r); }
if(count<num){ellipse(x_cloud4,171+6+speed_rain*count,r,r); }
if(count<num){ellipse(x_cloud5,217+6+speed_rain*count,r,r); }
if(count<num){ellipse(x_cloud5+22,217+6+speed_rain*count,r,r); }
}
else{
//file2.stop();
//file1.play();
fill(255,166,0);
triangle(0,d_sun,-d_sun,0,0,-d_sun);
//triangle(146.5,183.46,122.46,207.5,146.5,231.54);
fill(255,214,0);
triangle(0,d_sun,d_sun,0,0,-d_sun);
//triangle(146.5,183.46,146.5,231.54,170.54,207.5);
}
}
void setup() {
size(500,400);
}
void draw() {
background(255);
stroke(50,135,200);
fill(50,135,200);
ellipse(mouseX, mouseY, 300, 300);
fill(0);
ellipse(mouseX,mouseY, 150, 150);
}
Home