The Design of Everyday Things @bilwajoglekar - Tumblr Blog

#Working of a Kids Learning Toy.

This is my final Arduino + Processing Project. My Goal was to create a tool which helps kids learn the Name of the colors as well as learn rhymes.

View my Processing code:

import controlP5.*; import controlP5.*; //import ControlP5 library import processing.serial.*; import processing.sound.*;

Serial port; SoundFile redsound; SoundFile greensound; SoundFile bluesound; //SoundFile yellowsound; //SoundFile whitesound;

ControlP5 cp5; //create ControlP5 object PFont font; void setup(){ //same as arduino program size(550, 750); //window size, (width, height) printArray(Serial.list()); //prints all available serial ports

port = new Serial(this, "/dev/cu.usbmodem14101", 9600); //i have connected arduino to com3, it would be different in linux and mac os //lets add buton to empty window

cp5 = new ControlP5(this); font = createFont("calibri light bold", 20); // custom fonts for buttons and title

cp5.addButton("red") .setPosition(100, 50) .setSize(120, 70) .setFont(font);

cp5.addButton("green") .setPosition(100, 150) .setSize(120, 70) .setFont(font);

cp5.addButton("blue") .setPosition(100, 250) .setSize(120, 70) .setFont(font);

//cp5.addButton("yellow") //.setPosition(100, 350) //.setSize(120, 70) //.setFont(font);

//cp5.addButton("white") //.setPosition(100, 450) //.setSize(120, 70) //.setFont(font);

cp5.addButton("off") .setPosition(100, 550) .setSize(120, 70) .setFont(font);

//path = sketchPath(audioName); redsound = new SoundFile(this,"Jingle.wav"); greensound = new SoundFile(this,"Baby.wav"); bluesound = new SoundFile(this,"Looney.wav"); //yellowsound = new SoundFile(this,"Looney.wav"); //whitesound = new SoundFile(this,"Looney.wav"); } void draw(){ //same as loop in arduino background(0, 0, 0); // background color of window (r, g, b) or (0 to 255)

//lets give title to our window fill(0, 255, 0); //text color (r, g, b) textFont(font); text("Your Portable Christmas Remote Controller", 80, 30); // ("text", x coordinate, y coordinat) } //lets add some functions to our buttons //so whe you press any button, it sends perticular char over serial port void red(){ port.write('r'); redsound.play(); greensound.stop(); bluesound.stop(); } void green(){ port.write('g'); redsound.stop(); greensound.play(); bluesound.stop(); } void blue(){ port.write('b'); redsound.stop(); greensound.stop(); bluesound.play(); } void yellow(){ port.write('y'); //yellowsound.play(); redsound.stop(); greensound.stop(); bluesound.stop(); //whitesound.stop(); } void white(){ port.write('w'); //whitesound.play(); //yellowsound.stop(); redsound.stop(); greensound.stop(); bluesound.stop(); } void off(){ port.write('f'); //whitesound.stop(); //yellowsound.stop(); redsound.stop(); greensound.stop(); bluesound.stop(); }

View my Arduino code:

void setup() { pinMode(9, OUTPUT); //set pin as output , yellow led pinMode(10, OUTPUT); //set pin as output , blue led pinMode(11, OUTPUT); //set pin as output , red led pinMode(12, OUTPUT); //set pin as output , yellow led pinMode(13, OUTPUT); //set pin as output , yellow led Serial.begin(9600); //start serial communication @9600 bps } void loop(){

if(Serial.available()){ //id data is available to read char val = Serial.read(); if(val == 'r') { digitalWrite(11, HIGH); } if(val == 'b') { digitalWrite(10, HIGH); } if(val == 'g') { digitalWrite(12, HIGH); } if(val == 'y') { digitalWrite(13, HIGH); } if(val == 'w') { digitalWrite(9, HIGH); }

if(val == 'f'){ digitalWrite(11, LOW); digitalWrite(12, LOW); digitalWrite(10, LOW); digitalWrite(13, LOW); digitalWrite(9, LOW); } } }

Color palette 2!

This is the working of Arduino + Processing using a photoresistor sensor on the Arduino breadboard. The idea was when there is less light on the sensor it will change the background color in its different tints.

bilwajoglekar

Arduino + Processing Arduino Code:

long sunTime = 0; void setup() { Serial.begin(9600); pinMode(13, OUTPUT); } void loop() { int sensor = analogRead(A0); Serial.println(sensor); if(sensor < 500 ) { digitalWrite( 13, HIGH ); } else { digitalWrite( 13, LOW ); } }

Processing Code:

import processing.serial.*; Serial myPort; // Create object from Serial class String val; // Data received from the serial portfloat box; float circleX; float car; float cloud1X = 50; float cloud2X = 150; float cloud3X = 250;void setup() { //dont touch it size(1040, 600); noStroke(); circleX = 0; String portName = “/dev/cu.usbmodem14101”; myPort = new Serial(this, portName, 9600); //println(portName); }void draw() { //println(val); //print it out in the console //background(0, 100, 150); circleX = circleX + 1; car = car + 2; if (circleX >= width) { circleX = 0; } box = map(mouseX, 0, height, 255, 0); background(box, 54, 80, 121); background(box, 135, 135, 135); if (car >= width+100) { car = 0; } println(val); while ( myPort.available() > 0) { //if ( myPort.available() > 0) // If data is available, val = myPort.readStringUntil(’\n’); // read it and store it in val if (val != null) { float fval = float(val); if (fval > 70) { background(box, 54, 80, 121); //} else { // background(box, 135, 135, 135); } } } //Cloud#1 line(cloud1X+1, 100, cloud1X+124, 100); strokeWeight(2); arc(cloud1X+25, 100, 50, 25, PI, TWO_PI); arc(cloud1X+50, 100, 50, 50, PI, TWO_PI); arc(cloud1X+75, 100, 50, 75, PI, TWO_PI); arc(cloud1X+100, 100, 50, 50, PI, TWO_PI); //Cloud#2 strokeWeight(3); line(cloud2X+1, 50, cloud2X+124, 50); strokeWeight(2); arc(cloud2X+25, 50, 50, 50, PI, TWO_PI); arc(cloud2X+65, 50, 75, 75, PI, TWO_PI); arc(cloud2X+95, 50, 60, 25, PI, TWO_PI); //Cloud#3 strokeWeight(3); line(cloud3X+1, 175, cloud3X+149, 175); strokeWeight(2); arc(cloud3X+25, 175, 50, 40, PI, TWO_PI); arc(cloud3X+50, 175, 50, 60, PI, TWO_PI); arc(cloud3X+75, 175, 50, 75, PI, TWO_PI); arc(cloud3X+100, 175, 50, 60, PI, TWO_PI); arc(cloud3X+125, 175, 50, 40, PI, TWO_PI); //SUN fill(255, 180); ellipse(850, 100, 100, 100); fill(255, 100); ellipse(850, 100, 120, 120); ellipse(850, 100, 140, 140); ellipse(850, 100, 160, 160); fill(box, 73, 100); //ellipse(mouseX, 100, 95, 95); //BUILDINGS fill(0, 80); rect(410, 350, 200, 300); rect(520, 300, 100, 50); rect(160, 150, 3, 50); rect(0, 290, 100, 200); rect(120, 200, 100, 300); //new one that I added rect(810, 200, 150, 300); rect(940, 150, 3, 50); //WINDOWS BUILDING 2 rect(150, 220, 10, 10); rect(190, 220, 10, 10); rect(210, 220, 10, 10); rect(190, 240, 10, 10); rect(190, 260, 10, 10); rect(170, 260, 10, 10); rect(130, 260, 10, 10); rect(170, 280, 10, 10); rect(150, 280, 10, 10); rect(190, 300, 10, 10); rect(150, 340, 10, 10); rect(130, 340, 10, 10); rect(130, 360, 10, 10); rect(170, 360, 10, 10); rect(190, 420, 10, 10); rect(150, 420, 10, 10); rect(190, 400, 10, 10); rect(170, 440, 10, 10); rect(130, 470, 10, 10); rect(150, 470, 10, 10); rect(190, 470, 10, 10); fill(#FFF4D1, 70); rect(10, 310, 10, 10); rect(30, 330, 10, 10); rect(10, 330, 10, 10); rect(70, 330, 10, 10); rect(70, 350, 10, 10); rect(10, 410, 10, 10); rect(10, 390, 10, 10); rect(50, 390, 10, 10); //WINDOWS BUILDING 3 fill(#FFF4D1, 70); rect(420, 370, 10, 10); rect(440, 370, 10, 10); rect(480, 370, 10, 10); rect(500, 370, 10, 10); rect(500, 390, 10, 10); rect(460, 390, 10, 10); rect(460, 410, 10, 10); rect(480, 410, 10, 10); rect(420, 410, 10, 10); rect(500, 430, 10, 10); rect(480, 430, 10, 10); rect(420, 430, 10, 10); rect(440, 470, 10, 10); rect(420, 470, 10, 10); //WINDOWS BUILDING 4 rect(530, 360, 10, 10); rect(550, 340, 10, 10); rect(530, 320, 10, 10); rect(570, 320, 10, 10); rect(550, 320, 10, 10); rect(590, 380, 10, 10); rect(590, 400, 10, 10); rect(550, 380, 10, 10); rect(530, 380, 10, 10); rect(530, 420, 10, 10); rect(550, 420, 10, 10); //WINDOWS BUILDING 4 change the color of the window fill(#fff7ab, 70); rect(840, 220, 10, 10); rect(880, 220, 10, 10); rect(900, 220, 10, 10); rect(920, 240, 10, 10); rect(880, 260, 10, 10); rect(860, 260, 10, 10); rect(820, 260, 10, 10); rect(860, 280, 10, 10); rect(840, 280, 10, 10); rect(880, 300, 10, 10); rect(840, 340, 10, 10); rect(820, 340, 10, 10); rect(820, 360, 10, 10); rect(860, 360, 10, 10); rect(880, 420, 10, 10); rect(840, 420, 10, 10); //FILL GROUND fill(255); fill(200, 250, 250); rect(0, 500, 1040, 200); //GROUND fill(0); ellipse(0, 500, 200, 100); ellipse(100, 500, 300, 50); ellipse(300, 500, 70, 20); ellipse(800, 500, 100, 40); ellipse(1000, 600, 100, 40); ellipse(450, 500, 100, 20); ellipse(300, 500, 70, 20); ellipse(580, 490, 170, 100); //CAR fill(0, 150); rect(car, 440, 30, 10); rect(car-100, 440, 30, 10); rect(car-200, 440, 30, 10); //BRIDGE fill(255, 150); rect(0, 428, 1200, 2); fill(0); quad(width/2+500, height/2+150, width/2+576, height/2+170, width/2-586, height/2+170, width/2-560, height/2+150); rect(0, 430, 1200, 5); rect(20, 430, 5, 20); rect(40, 430, 5, 20); rect(60, 430, 5, 20); rect(80, 430, 5, 20); rect(100, 430, 5, 20); rect(120, 430, 5, 20); rect(140, 430, 5, 20); rect(160, 430, 5, 20); rect(180, 430, 5, 20); rect(200, 430, 5, 20); rect(220, 430, 5, 20); rect(240, 430, 5, 20); rect(260, 430, 5, 20); rect(280, 430, 5, 20); rect(300, 430, 5, 20); rect(320, 430, 5, 20); rect(340, 430, 5, 20); rect(360, 430, 5, 20); rect(380, 430, 5, 20); rect(400, 430, 5, 20); rect(420, 430, 5, 20); rect(440, 430, 5, 20); rect(460, 430, 5, 20); rect(480, 430, 5, 20); rect(500, 430, 5, 20); rect(520, 430, 5, 20); rect(540, 430, 5, 20); rect(560, 430, 5, 20); rect(580, 430, 5, 20); rect(600, 430, 5, 20); rect(620, 430, 5, 20); rect(640, 430, 5, 20); rect(660, 430, 5, 20); rect(680, 430, 5, 20); rect(700, 430, 5, 20); rect(720, 430, 5, 20); rect(740, 430, 5, 20); rect(760, 430, 5, 20); rect(780, 430, 5, 20); rect(800, 430, 5, 20); rect(820, 430, 5, 20); rect(840, 430, 5, 20); rect(860, 430, 5, 20); rect(880, 430, 5, 20); rect(900, 430, 5, 20); rect(920, 430, 5, 20); rect(940, 430, 5, 20); rect(960, 430, 5, 20); rect(980, 430, 5, 20); rect(1000, 430, 5, 20); rect(1020, 430, 5, 20); rect(1040, 430, 5, 20); rect(1060, 430, 5, 20); //BRIDGE SHADOW fill(0, 50); rect(0, 600, 1040, 10); //REFLECTION fill(10, 150); rect(0, 500, 1040, 600); //SNOW make it function on click fill(255, 255, 255); ellipse(10, circleX, 10, 10); ellipse(50, circleX+20, 10, 10); ellipse(80, circleX, 5, 5); ellipse(110, circleX+100, 5, 5); ellipse(140, circleX+150, 10, 10); ellipse(180, circleX-200, 10, 10); ellipse(200, circleX-150, 5, 5); ellipse(240, circleX-50, 5, 5); ellipse(240, circleX, 10, 10); ellipse(300, circleX+20, 5, 5); ellipse(440, circleX, 10, 10); ellipse(440, circleX, 10, 10); ellipse(550, circleX+100, 10, 10); ellipse(530, circleX-250, 10, 10); ellipse(530, circleX-200, 5, 5); ellipse(580, circleX-300, 5, 5); ellipse(300, circleX-400, 5, 5); ellipse(140, circleX-350, 5, 5); ellipse(400, circleX-300, 5, 5); ellipse(550, circleX, 5, 5); fill(255); ellipse(100, 630, 400, 100); ellipse(0, 600, 350, 100); fill(255, 150); ellipse(370, 500, 100, 1); ellipse(570, 510, 100, 1); ellipse(140, 500, 100, 1); ellipse(360, 550, 100, 3); ellipse(400, 560, 50, 1); ellipse(150, 530, 50, 1); //add new snow fill(255, 255, 255); ellipse(650, circleX, 10, 10); ellipse(680, circleX+20, 5, 5); ellipse(710, circleX-150, 5, 5); ellipse(740, circleX-50, 10, 10); ellipse(800, circleX+50, 5, 5); ellipse(820, circleX, 5, 5); ellipse(870, circleX+20, 5, 5); ellipse(920, circleX-150, 10, 10); ellipse(950, circleX-50, 5, 5); ellipse(1000, circleX+50, 10, 10);}

bilwajoglekar

Here are some images that depict the change in the background on touching the sensor. Check out the next video for actual working.

Playing with sensors

/* sensors */

void setup() {

Serial.begin(9600); pinMode(13, OUTPUT); }

void loop() { int sensor = analogRead(A0); Serial.println(sensor); if(sensor < 500 ) { digitalWrite( 13, HIGH ); } else { digitalWrite( 13, LOW ); }

}

My first Arduino

I tried to replicate the Traffic signal in an Arduino

I used: 3 Ohms Resistors of 220 each

Three led’s - Red, green and Yellow (White)

Three wires to complete the circuit.

Here is the image of the breadboard:

And this is the code:

Traffic Light Signal:

int red = 13; int yellow = 12; int green = 11;

// sets the pins 11-13 as outputs // void setup(){ pinMode(red, OUTPUT); pinMode(yellow, OUTPUT); pinMode(green, OUTPUT); }

// creates the loop that your Arduino will repeat over & over // void loop(){ changeLights(); delay(3000); }

// the commands that make the leds light up in a specific order //

void changeLights(){

// turn off green, then turn yellow on for 2 seconds digitalWrite(green, LOW); digitalWrite(yellow, HIGH); delay(2000);

// turn off yellow, then turn red on for 5 seconds digitalWrite(yellow, LOW); digitalWrite(red, HIGH); delay(5000);

// red & yellow on for 2 seconds (red already on) digitalWrite(yellow, HIGH); delay(7000);

// green on for 5 seconds, turns off red & yellow digitalWrite(yellow, LOW); digitalWrite(green, HIGH); digitalWrite(red, LOW); delay(5000);

// turn on yellow (green already on) digitalWrite(yellow, HIGH); delay(100); }

Campaign Poster:

PImage barack= null;

void setup() { barack = loadImage ("barack.jpg"); size (1000, 833); image( barack, 0, 0);

loadPixels(); noStroke(); int pix=1; for (int x=0; x<width; x+=pix) { for ( int y=0; y<height; y+=pix) { int i = y* width+x; color c = pixels[i]; float g = .21*red(c)+ .72*green(c)+0.7*blue(c); if (g<100) { pixels[i] = color(3, 23, 155); } else if (g<128 && g >100) { pixels[i] = color(299, 18, 18); //red } else if ( g>128 && g<192) { pixels[i]= color(0, 34, 610); //light blue } else if (g>192 && g<=255) { pixels[i] = color(250, 236,191); //white } } } updatePixels(); } void draw() { }

My interpretation of Fall

Image Editing

Code:

PImage img;

void setup () { size(640, 640);

img = loadImage("image1.jpeg");

//for (int x = 0; x < img.width; x++) { // for (int y = 0; y < img.height; y++ ) { // // Calculate the 1D pixel location // int loc = x + y*img.width; // // Get the R,G,B values from image // float r = red (img.pixels[loc]); // float g = green (img.pixels[loc]); // float b = blue (img.pixels[loc]); // // Calculate an amount to change brightness // // based on proximity to the mouse // float distance = dist(x, y, mouseX, mouseY); // float adjustBrightness = (50-distance)/50; // r *= adjustBrightness; // g *= adjustBrightness; // b *= adjustBrightness; // // Constrain RGB to between 0-255 // r = constrain(r, 0, 255); // g = constrain(g, 0, 255); // b = constrain(b, 0, 255); // // Make a new color and set pixel in the window // color c = color(r, g, b); // //System.out.print(c); // pixels[loc] = c; // } //} }

void draw () { background(0); tint(0, 200, 255); // Draw the image to the screen at coordinate (0,0) //image(img, 0, 0); image (img,0,0, mouseX, mouseY); }

My interpretation of Fall

It’s officially October, which means that fall is in full swing. This also means that it is, hands down, the greatest season of the year.

Fall season brings out the best in me and it also takes me back to the memory when it snowed the first time in Fall 2018.

So, In this coding assignment I tried to create both the scenes in an urban fitting with few buildings, a bridge and cars continuously passing by.

To make it more interesting I added other features like Sun and clouds and falling snow. I also tried to replicate “Fall Skies” which has nice gradients of usually cotton candy skies, tints of blue and purple.

I tried to create a slider effect which changes colors as you slide your finger on the keypad to show different colors of fall and few dark shades, however it did not turn out to be the way I wanted.

The message that I want to convey which also reflects my personality is that no matter through which phase you are going in, every day can be different and hence it is very important to rise and shine every day and this was what I learnt from Fall season.

Code:

float box; float circleX; float car; float cloud1X = 50; float cloud2X = 150; float cloud3X = 250;

void setup() { size(1040, 600); noStroke(); circleX = 0; }

void draw() { //background(0, 100, 150); circleX = circleX + 1; car = car + 2;

if (circleX >= width) { circleX = 0; }

box = map(mouseX, 0, height, 255, 0); //background(box, 56, 80, 121); background(box, 135, 135, 135);

if (car >= width+100) { car = 0; }

//Cloud#1 line(cloud1X+1, 100, cloud1X+124, 100); strokeWeight(2); arc(cloud1X+25, 100, 50, 25, PI, TWO_PI); arc(cloud1X+50, 100, 50, 50, PI, TWO_PI); arc(cloud1X+75, 100, 50, 75, PI, TWO_PI); arc(cloud1X+100, 100, 50, 50, PI, TWO_PI);

//Cloud#2 strokeWeight(3); line(cloud2X+1, 50, cloud2X+124, 50); strokeWeight(2); arc(cloud2X+25, 50, 50, 50, PI, TWO_PI); arc(cloud2X+65, 50, 75, 75, PI, TWO_PI); arc(cloud2X+95, 50, 60, 25, PI, TWO_PI);

//Cloud#3 strokeWeight(3); line(cloud3X+1, 175, cloud3X+149, 175); strokeWeight(2); arc(cloud3X+25, 175, 50, 40, PI, TWO_PI); arc(cloud3X+50, 175, 50, 60, PI, TWO_PI); arc(cloud3X+75, 175, 50, 75, PI, TWO_PI); arc(cloud3X+100, 175, 50, 60, PI, TWO_PI); arc(cloud3X+125, 175, 50, 40, PI, TWO_PI);

//SUN fill(255, 180); ellipse(850, 100, 100, 100);

fill(255, 100); ellipse(850, 100, 120, 120); ellipse(850, 100, 140, 140); ellipse(850, 100, 160, 160);

fill(box, 73, 100); ellipse(mouseX, 100, 95, 95);

//BUILDINGS fill(0, 80); rect(410, 350, 200, 300); rect(520, 300, 100, 50); rect(160, 150, 3, 50); rect(0, 290, 100, 200); rect(120, 200, 100, 300); //new one that I added rect(810, 350, 200, 300);

//WINDOWS BUILDING 2 rect(150, 220, 10, 10); rect(190, 220, 10, 10); rect(210, 220, 10, 10); rect(190, 240, 10, 10); rect(190, 260, 10, 10); rect(170, 260, 10, 10); rect(130, 260, 10, 10); rect(170, 280, 10, 10); rect(150, 280, 10, 10); rect(190, 300, 10, 10); rect(150, 340, 10, 10); rect(130, 340, 10, 10); rect(130, 360, 10, 10); rect(170, 360, 10, 10); rect(190, 420, 10, 10); rect(150, 420, 10, 10); rect(190, 400, 10, 10); rect(170, 440, 10, 10); rect(130, 470, 10, 10); rect(150, 470, 10, 10); rect(190, 470, 10, 10);

fill(#FFF4D1, 70); rect(10, 310, 10, 10); rect(30, 330, 10, 10); rect(10, 330, 10, 10); rect(70, 330, 10, 10); rect(70, 350, 10, 10); rect(10, 410, 10, 10); rect(10, 390, 10, 10); rect(50, 390, 10, 10);

//WINDOWS BUILDING 3 fill(#FFF4D1, 70); rect(420, 370, 10, 10); rect(440, 370, 10, 10); rect(480, 370, 10, 10); rect(500, 370, 10, 10); rect(500, 390, 10, 10); rect(460, 390, 10, 10); rect(460, 410, 10, 10); rect(480, 410, 10, 10); rect(420, 410, 10, 10); rect(500, 430, 10, 10); rect(480, 430, 10, 10); rect(420, 430, 10, 10); rect(440, 470, 10, 10); rect(420, 470, 10, 10);

//WINDOWS BUILDING 4 rect(530, 360, 10, 10); rect(550, 340, 10, 10); rect(530, 320, 10, 10); rect(570, 320, 10, 10); rect(550, 320, 10, 10); rect(590, 380, 10, 10); rect(590, 400, 10, 10); rect(550, 380, 10, 10); rect(530, 380, 10, 10); rect(530, 420, 10, 10); rect(550, 420, 10, 10);

//FILL GROUND fill(255); fill(200, 250, 250); rect(0, 500, 1040, 200);

//GROUND fill(0); ellipse(0, 500, 200, 100); ellipse(100, 500, 300, 50); ellipse(300, 500, 70, 20);

ellipse(800, 500, 100, 40); ellipse(1000, 600, 100, 40); ellipse(450, 500, 100, 20); ellipse(300, 500, 70, 20); ellipse(580, 490, 170, 100);

//CAR fill(0, 150); rect(car, 440, 30, 10); rect(car-100, 440, 30, 10); rect(car-200, 440, 30, 10); rect(car-500, 440, 30, 10);

//BRIDGE fill(255, 150); rect(0, 428, 1200, 2); fill(0); quad(width/2+500, height/2+150, width/2+576, height/2+170, width/2-586, height/2+170, width/2-560, height/2+150); rect(0, 430, 1200, 5); rect(20, 430, 5, 20); rect(40, 430, 5, 20); rect(60, 430, 5, 20); rect(80, 430, 5, 20); rect(100, 430, 5, 20); rect(120, 430, 5, 20); rect(140, 430, 5, 20); rect(160, 430, 5, 20); rect(180, 430, 5, 20); rect(200, 430, 5, 20); rect(220, 430, 5, 20); rect(240, 430, 5, 20); rect(260, 430, 5, 20); rect(280, 430, 5, 20); rect(300, 430, 5, 20); rect(320, 430, 5, 20); rect(340, 430, 5, 20); rect(360, 430, 5, 20); rect(380, 430, 5, 20); rect(400, 430, 5, 20); rect(420, 430, 5, 20); rect(440, 430, 5, 20); rect(460, 430, 5, 20); rect(480, 430, 5, 20); rect(500, 430, 5, 20); rect(520, 430, 5, 20); rect(540, 430, 5, 20); rect(560, 430, 5, 20); rect(580, 430, 5, 20); rect(600, 430, 5, 20); rect(620, 430, 5, 20); rect(640, 430, 5, 20); rect(660, 430, 5, 20); rect(680, 430, 5, 20); rect(700, 430, 5, 20); rect(720, 430, 5, 20); rect(740, 430, 5, 20); rect(760, 430, 5, 20); rect(780, 430, 5, 20); rect(800, 430, 5, 20); rect(820, 430, 5, 20); rect(840, 430, 5, 20); rect(860, 430, 5, 20); rect(880, 430, 5, 20); rect(900, 430, 5, 20); rect(920, 430, 5, 20); rect(940, 430, 5, 20); rect(960, 430, 5, 20); rect(980, 430, 5, 20); rect(1000, 430, 5, 20); rect(1020, 430, 5, 20); rect(1040, 430, 5, 20); rect(1060, 430, 5, 20);

//BRIDGE SHADOW fill(0, 50); rect(0, 600, 1040, 10);

//REFLECTION fill(10, 150); rect(0, 500, 1040, 600);

//SNOW make it function on click fill(255, 255, 255); ellipse(10, circleX, 10, 10); ellipse(50, circleX+20, 10, 10); ellipse(80, circleX, 5, 5); ellipse(110, circleX+100, 5, 5); ellipse(140, circleX+150, 10, 10); ellipse(180, circleX-200, 10, 10); ellipse(200, circleX-150, 5, 5); ellipse(240, circleX-50, 5, 5); ellipse(240, circleX, 10, 10); ellipse(300, circleX+20, 5, 5); ellipse(440, circleX, 10, 10); ellipse(440, circleX, 10, 10); ellipse(550, circleX+100, 10, 10); ellipse(530, circleX-250, 10, 10); ellipse(530, circleX-200, 5, 5); ellipse(580, circleX-300, 5, 5); ellipse(300, circleX-400, 5, 5); ellipse(140, circleX-350, 5, 5); ellipse(400, circleX-300, 5, 5); ellipse(550, circleX, 5, 5);

fill(255); ellipse(100, 630, 400, 100); ellipse(0, 600, 350, 100); fill(255, 150); ellipse(370, 500, 100, 1); ellipse(570, 510, 100, 1); ellipse(140, 500, 100, 1); ellipse(360, 550, 100, 3); ellipse(400, 560, 50, 1); ellipse(150, 530, 50, 1);

}

Code for Chemical Particles Bouncing off:

Assignment 3

float particle1X = 600;

float particle1Y = 600;

float particle2X = 200;

float particle2Y = 200;

boolean hopeDown = false;

int particle1Size = 50;

int particle2Size = 50;

boolean polarity = false;

void setup() {

size(800, 800);

noStroke();

}

void draw() {

background(0, 0, 0);

float proximity = dist(particle1X, particle1Y, particle2X, particle2Y);

if ( proximity < (particle1Size+particle2Size)/2 ) {

//println("Collision detected");

} else {

//println( "No collusion! Fake news!" );

}

// move particle1 based in particle 2 using inverse square law?

float accel = 0.0001*sq(proximity);

if ( Double.isInfinite(accel) || accel > 10 ) {

accel = 10;

}

float xsign = Math.signum(particle2X-particle1X);

float ysign = Math.signum(particle2Y-particle1Y);

if( polarity == true ) {

xsign *= -1.0;

ysign *= -1.0;

}

particle1X += xsign * 1.0/accel;

particle1Y += ysign * 1.0/accel;

println(particle1X + " " + particle1Y + " " + accel );

particle1X = constrain(particle1X, 0, width);

particle1Y = constrain(particle1Y, 0, height);

particle2X = constrain(particle2X, 0, width);

particle2Y = constrain(particle2Y, 0, height);

ellipse( particle1X, particle1Y, particle1Size, particle1Size );

ellipse( particle2X, particle2Y, particle2Size, particle2Size );

}

void mouseDragged() {

if ( hopeDown == true ) {

particle2X = mouseX;

particle2Y = mouseY;

}

void mousePressed() {

if ( hopeDown == true ) {

particle2X = mouseX;

particle2Y = mouseY;

} else {

particle1X = mouseX-100;

particle1Y = mouseY-100;

hopeDown = true;

}

void keyPressed() {

if( key == 'r' ) {

polarity = !polarity;

}

Code 2

The goal was to replicate the painting Farbkomposition by Piet Mondrian. Here is my code:

int[] fillColor = { 79,48,123, 201,106,0, 197,69,57 };boolean mouseClick = true;void setup() { size(800, 900); }void draw() { if(mouseClick == true){ background(237,227,218); noStroke(); drawColorRect(25); drawBlackRect(25); filter(BLUR, 1) ; mouseClick = false; } }void drawColorRect(int num){ for (int i=0; i<num; i++) { float h = random(60, 120); float w = random(60, 120); float x = random(0, width-120); float y = random(0, height-120); int fl = (int)random(0, 3); fl = fl*3; fill(fillColor[fl], fillColor[fl+1], fillColor[fl+2]); rect(x, y, w, h); } }void drawBlackRect(int num) { for (int i=0; i<num; i++){ float h = random(15, 18); float w = random(35, 40); float x = random(12, width-120); float y = random(15, height-110); fill(28,15,3); if(random(2)>1){ rect(x, y, w, h); } else { rect(x, y, h, w); } } }void mouseClicked() { mouseClick = true; }

Here is the output.

#arduino #modernpainting #colorcomposition

I was still exploring other commands in this language and decided to go old-school and decided to draw a simple house with easy shapes..which turns out was’nt that easy and I had to really brush my mathematical skills a little but that was just the beginning of it :P

The first image above shows the final output and I will now share some progress images and some of my experiences while doing it. I started off with a base line which I decided to place at 3/4th point on the canvas and began to draw a rectangle defining the coordinates of the same.

I then studied function of triangle and quads and worked on some math to place them correctly... after a few of trial and errors I came up with the triangle in the second picture (struggled a little bit to set the angles of triangles and Quad right)

The thing that really helped me in staying focused is that I knew what my end product was.. it was then just a matter of understanding the math and logic behind it.

I began to first understand the concept of how functions like triangle, Quad, Line works and then figuring out the coordinates and that saved a lot of time of trial and errors. As much as fun it is to review the trial and error stages I feel like if the concept is clear it is easier to navigate and try more options.

Also i felt that understanding the canvas size and then coding in relative to the size of canvas was helpful.

I thought drawing a line must not be that hard, but turns out it actually is a little hard to get it right in the first go!

So.. here it is my First house in the Java.! Hope you guys like my experience! :)

Here is the code for those who are interested:

void setup() { size(800, 600); }

void draw() { fill(#8D5725); //firstdoor rect(width/3, height/2, 80, 120); fill(#FFE745); rect((width/2)-120, (height/3)+160, 40, 60); fill(#8D5725); //roof triangle(width/3, height/2, (width/3)+40, height/3, (width/3)+80, height/2); fill(#8D5725); rect((width/3) + 80, height/2, 250, 120); fill(#CD6A0F); quad((width/3)+40, height/3, (width/3)+290, height/3, (width/3)+330, height/2, (width/3)+80, (height/2)); fill(#000000); textAlign(CENTER); textSize(50); text("The House", width/2, 500); fill(#FFE745); ellipse(width/4, height/6, 100, 100); line(0, 420, width, 420); }

#java #prototype #interaction #firstcode

Trending Blogs

Recently Viewed Blogs

The Design of Everyday Things