Processing - drawing interface good for kids

Drawing interface using processing 3

Description

This sketch allows to draw shapes simply. Click once to activate the pen. An initial color is selected. Press an arrow button to select color and mix cyan, magenta, yellow, black using arrows. Press SPACE to get back to drawing.

Draw as long as the pen is activated moving the mouse. Then click again to deactivate the pen.

Each line can be erased by pressing SPACE. Erasing takes place in the reverse order of it being drawn.

code Processing:

	/*
	Drawing continuous shapes using mouse movement
	Drawing a new line starts when the mouse is clicked / lines stops when mouse is clicked
	*/
	ArrayList <Line> lines;
	color col;
	boolean d=false;
	boolean colpick=false;
	int primcolor = 0;
	int[] rgb = new int[3];
	int[] cmyk = {50,50,100,20};
	/////////////////////////////////////////////////
	void setup(){
	background(0);
	fullScreen();
	//size(1000,800);
	lines = new ArrayList<Line>();
	}
	/////////////////////////////////////////////////
	void draw(){
	//background(0);
	if(d){
	//ellipse(mouseX,mouseY,5,5);
	cursor(CROSS);
	} else {
	cursor(ARROW);
	}
	/*
	for (int i = 0; i < lines.size();i++){
	lines.get(i).display();
	}
	*/
	}
	/////////////////////////////////////////////////
	void mousePressed(){
	// col = color(int(random(100,255)),int(random(100,255)),int(random(100,255)));
	colorconvert(cmyk[0],cmyk[1],cmyk[2],cmyk[3]);
	if(!d){
	lines.add(new Line(col));
	d=true;
	} else
	{
	d=false;
	}
	}
	void mouseMoved(){
	if(lines.size()>0 && d){
	Line l = lines.get(lines.size()-1);
	l.addpoint(mouseX,mouseY,5);
	l.display();
	}
	}
	//remove
	void keyPressed() {
	if(key==32) {
	if(!colpick){
	int i = lines.size();
	if(i>0){
	lines.remove(i-1);}
	}
	redisplay();
	d=false;
	colpick=false;
	}
	if(key==CODED) {
	if(keyCode==RIGHT){
	d=false;
	colpick=true;
	primcolor +=1;
	primcolor = primcolor % 4;
	colpickerdisplay();
	}
	if(keyCode==LEFT){
	d=false;
	colpick=true;
	primcolor -=1;
	if(primcolor<0){primcolor=3;};
	primcolor = primcolor % 4;
	colpickerdisplay();
	}
	if(keyCode==UP){
	d=false;
	colpick=true;
	cmyk[primcolor]+=5;
	cmyk[primcolor]=min(cmyk[primcolor],100);
	colpickerdisplay();
	}
	if(keyCode==DOWN){
	d=false;
	colpick=true;
	cmyk[primcolor]-=5;
	cmyk[primcolor]=max(cmyk[primcolor],0);
	colpickerdisplay();
	}
	}
	}
	void redisplay(){
	background(0);
	for (int i = 0; i < lines.size();i++){
	lines.get(i).display();
	}
	}
	void colorconvert(float c, float m,float y, float k) {
	float r = (255*(1-(c/100))*(1-(k/100)));
	float g = (255*(1-(m/100))*(1-(k/100)));
	float b = (255*(1-(y/100))*(1-(k/100)));
	col = color(int(r),int(g),int(b));
	}
	//////////////////////////////////////////
	class Line{
	ArrayList<PVector> pp;
	color c;
	Line(color cc) {
	c = cc;
	pp = new ArrayList<PVector>();
	}
	void addpoint(int px, int py, int pw){
	pp.add(new PVector(px,py,pw));
	//display();
	}
	//////////////////////////////////////////
	void display(){
	stroke(c);
	fill(c);
	for (int i=0;i<pp.size();i++){
	if(i==0){
	PVector p = pp.get(i);
	} else
	{
	PVector p = pp.get(i);
	PVector p1 = pp.get(i-1);
	strokeWeight(p.z);
	line(p1.x,p1.y,p.x,p.y);
	}
	}
	}
	}
	void colpickerdisplay(){
	float x = width / 2;
	float y = height / 2;
	background(150);
	for (int i=0;i<4;i++) {
	if (i==0){colorconvert(100,0,0,0);}
	if (i==1){colorconvert(0,100,0,0);}
	if (i==2){colorconvert(0,0,100,0);}
	if (i==3){colorconvert(0,0,0,100);}
	noStroke();
	fill(col);
	circle(x+200*cos(2*i*PI/5) ,y+200*sin(2*i*PI/5),cmyk[i]);
	}
	stroke(255);
	strokeWeight(5);
	noFill();
	circle(x+200*cos(2*primcolor*PI/5) ,y+200*sin(2*primcolor*PI/5),max(cmyk[primcolor],5));
	colorconvert(cmyk[0],cmyk[1],cmyk[2],cmyk[3]);
	noStroke();
	fill(col);
	circle(x,y,100);
	}

view raw gistfile1.txt hosted with ❤ by GitHub