Commit e51777f3 authored by Bruno Coudoin's avatar Bruno Coudoin
Browse files

color_mix, many grahical improvements

- better sizing and centering of the tubes
- new backgrounds from opencliparts
- added a brush at the tubes end to show the current color
  instead of the rectangles
parent 310a37ad
......@@ -14,5 +14,5 @@ ActivityInfo {
The activity deals with mixing primary colors of paint (subtractive mixing).
In case of paints the inks absorb different colors of light falling on it, subtracting it from what you see. The more ink you add, the more light is absorbed, and the darker the combined color gets. We can mix just three primary colors to make many new colors. The primary colors for paint/ink are Cyan (a special shade of blue), Magenta (a special shade of pink), and Yellow.")
credit: qsTr("penclipart.org")
credit: qsTr("Images from http://openclipart.org")
}
......@@ -28,9 +28,9 @@ import "colormix.js" as Activity
Image {
id: chooser
source: Activity.url + (activity.modeRGB ? "flashlight.svgz" : "tube.svg")
source: Activity.url + (activity.modeRGB ? "flashlight.svgz" : "tube.svgz")
sourceSize.height: 100 * ApplicationInfo.ratio
z:1
z: 1
property int maxSteps: 10
property int currentStep: 0
......@@ -38,31 +38,21 @@ Image {
Image {
id: intensity
source: Activity.url + "flashlight2.svgz"
source: Activity.url + (activity.modeRGB ? "flashlight2.svgz" : "brush.svgz")
sourceSize.height: parent.sourceSize.height
visible: activity.modeRGB
anchors.fill: parent
z:2
z: 2
Colorize {
anchors.fill: parent
source: parent
hue: chooser.hue
lightness: -(maxSteps - currentStep) / maxSteps
lightness: activity.modeRGB ?
-(maxSteps - currentStep) / maxSteps :
(maxSteps - currentStep) / maxSteps
saturation: 1
}
}
Rectangle {
anchors {
left: parent.right
verticalCenter: parent.verticalCenter
}
height: parent.sourceSize.height / 4* currentStep/maxSteps
width: parent.sourceSize.height / 2
visible: !activity.modeRGB
color: Activity.getColorFromHsl(chooser.hue, 1, 0.5)
}
Colorize {
id: color
anchors.fill: parent
......@@ -75,7 +65,7 @@ Image {
id: up
height: parent.height / 4
width: height
z:3
z: 3
radius: width / 2
border.color: "black"
anchors {
......@@ -105,7 +95,7 @@ Image {
id: down
height: up.height
width: height
z:3
z: 3
radius: width / 2
border.color: "black"
anchors {
......
......@@ -37,7 +37,7 @@ ActivityBase {
pageComponent: Image {
id: background
source: Activity.url + "background.jpg"
source: Activity.url + (modeRGB ? "background.svgz" : "background2.svgz")
anchors.fill: parent
fillMode: Image.PreserveAspectCrop
......@@ -64,6 +64,8 @@ ActivityBase {
property alias currentColor2: color2.currentStep
property alias currentColor3: color3.currentStep
property int margins: 20
property int chooserHeight: Math.min(activity.height * 0.2,
activity.width * 0.2)
}
onStart: {
......@@ -84,6 +86,7 @@ ActivityBase {
horizontalCenter: parent.horizontalCenter
}
border.color: "black"
border.width: 2
color: Activity.getColor(items.targetColor1, items.targetColor2,
items.targetColor3)
}
......@@ -108,7 +111,7 @@ ActivityBase {
horizontalAlignment: Text.AlignLeft
wrapMode: Text.WordWrap
anchors {
verticalCenter: target.verticalCenter
top: target.top
left: target.right
right: parent.right
leftMargin: items.margins
......@@ -116,15 +119,16 @@ ActivityBase {
}
Rectangle {
id: result
height: target.height
width: height
height: width
width: target.width * 0.75
radius: height / 2
anchors {
horizontalCenter: parent.horizontalCenter
top: target.bottom
topMargin: items.margins
topMargin: (activity.height - items.chooserHeight * 4) / 2
}
border.color: "black"
border.width: 2
color: Activity.getColor(items.currentColor1, items.currentColor2,
items.currentColor3)
}
......@@ -132,7 +136,7 @@ ActivityBase {
ColorChooser {
id: color1
hue: activity.modeRGB ? 0 : 300 / 360 /* red / magenta */
sourceSize.height: result.height
sourceSize.height: items.chooserHeight
maxSteps: items.maxSteps
anchors {
right: result.left
......@@ -144,7 +148,7 @@ ActivityBase {
ColorChooser {
id: color2
hue: activity.modeRGB ? 120 / 360 : 60 / 360 /* green / yellow */
sourceSize.height: result.height
sourceSize.height: items.chooserHeight
maxSteps: items.maxSteps
anchors {
horizontalCenter: result.horizontalCenter
......@@ -157,7 +161,7 @@ ActivityBase {
ColorChooser {
id: color3
hue: activity.modeRGB ? 240 / 360 : 180 / 360 /* blue / cyan */
sourceSize.height: result.height
sourceSize.height: items.chooserHeight
maxSteps: items.maxSteps
anchors {
left: result.right
......@@ -173,8 +177,8 @@ ActivityBase {
sourceSize.width: 66 * bar.barZoom
visible: true
anchors {
left: color2.right
leftMargin: items.margins
right: parent.right
rightMargin: items.margins
top: color3.bottom
topMargin: items.margins
}
......
......@@ -3,9 +3,11 @@ APP_FILES += \
$$PWD/ActivityInfo.qml \
$$PWD/ColorMix.qml \
$$PWD/ColorChooser.qml \
$$PWD/colormix.js \
$$PWD/colormix.svg \
$$PWD/resource/background.jpg \
$$PWD/resource/flashlight.svgz \
$$PWD/colormix.js \
$$PWD/colormix.svg \
$$PWD/resource/brush.svgz \
$$PWD/resource/background.svgz \
$$PWD/resource/background2.svgz \
$$PWD/resource/flashlight.svgz \
$$PWD/resource/flashlight2.svgz \
$$PWD/resource/tube.svg
$$PWD/resource/tube.svgz
......@@ -46,7 +46,7 @@ function initLevel() {
items.targetColor2 = Math.floor(Math.random() * maxSteps)
items.targetColor3 = Math.floor(Math.random() * maxSteps)
/* Reset current comor */
/* Reset current color */
items.currentColor1 = 0
items.currentColor2 = 0
items.currentColor3 = 0
......@@ -60,35 +60,6 @@ function getColor(i1, i2, i3) {
1 - i2 / maxSteps, 1)
}
function getColorFromHsl(h, s, l) {
var r, g, b
if (s === 0) {
r = g = b = l // achromatic
} else {
function hue2rgb(p, q, t) {
if (t < 0)
t += 1
if (t > 1)
t -= 1
if (t < 1 / 6)
return p + (q - p) * 6 * t
if (t < 1 / 2)
return q
if (t < 2 / 3)
return p + (q - p) * (2 / 3 - t) * 6
return p
}
var q = l < 0.5 ? l * (1 + s) : l + s - l * s
var p = 2 * l - q
r = hue2rgb(p, q, h + 1 / 3)
g = hue2rgb(p, q, h)
b = hue2rgb(p, q, h - 1 / 3)
}
return Qt.rgba(r, g, b, 1)
}
function nextLevel() {
if (numberOfLevel <= ++currentLevel) {
currentLevel = 0
......
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
id="svg6431"
viewBox="0 0 207.99 76.2"
version="1.0"
inkscape:version="0.48.4 r9939"
width="100%"
height="100%"
sodipodi:docname="tube.svg">
<sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1680"
inkscape:window-height="997"
id="namedview36"
showgrid="false"
inkscape:zoom="5.9155046"
inkscape:cx="147.50504"
inkscape:cy="35.107083"
inkscape:window-x="-4"
inkscape:window-y="-6"
inkscape:window-maximized="1"
inkscape:current-layer="svg6431" />
<defs
id="defs3">
<linearGradient
id="linearGradient12398">
<stop
id="stop12400"
stop-color="#f0f0f0"
offset="0" />
<stop
id="stop12402"
stop-color="#c8c8c8"
offset="1" />
</linearGradient>
<linearGradient
id="linearGradient8414">
<stop
id="stop8416"
stop-color="#fff"
offset="0" />
<stop
id="stop8418"
stop-color="#fff"
stop-opacity="0"
offset="1" />
</linearGradient>
<linearGradient
id="linearGradient4190"
y2="38.906"
xlink:href="#linearGradient12398"
gradientUnits="userSpaceOnUse"
x2="143.65"
y1="73.656"
x1="141.6" />
<linearGradient
id="linearGradient4205"
y2="356.22"
gradientUnits="userSpaceOnUse"
x2="142.08"
gradientTransform="translate(133.53,-137.52)"
y1="378.75"
x1="130.14">
<stop
id="stop8446"
stop-color="#e5e5e5"
stop-opacity="0"
offset="0" />
<stop
id="stop8448"
stop-color="#4a4a4a"
stop-opacity=".56842"
offset=".5" />
<stop
id="stop8450"
stop-color="#b8b8b8"
stop-opacity="0"
offset="1" />
</linearGradient>
<linearGradient
id="linearGradient4208"
y2="39.81"
xlink:href="#linearGradient8414"
gradientUnits="userSpaceOnUse"
x2="-106.25"
gradientTransform="matrix(0.82457,0,0,0.95225,-18.827,169.57)"
y1="38.985"
x1="-96.9" />
<linearGradient
id="linearGradient4211"
y2="284.64"
xlink:href="#linearGradient12398"
spreadMethod="repeat"
gradientUnits="userSpaceOnUse"
x2="353.17"
gradientTransform="matrix(0.80037,0,0,0.82926,3.1209,-4.34)"
y1="287.55"
x1="353.17" />
<linearGradient
id="linearGradient4214"
y2="371.23"
xlink:href="#linearGradient12398"
gradientUnits="userSpaceOnUse"
x2="99.469"
gradientTransform="matrix(1.7486,0,0,1.1547,-282.46,-195.94)"
y1="370.93"
x1="104.03" />
<linearGradient
id="linearGradient4217"
y2="92.378"
xlink:href="#linearGradient8414"
gradientUnits="userSpaceOnUse"
x2="149.1"
gradientTransform="matrix(0.99685,0,0,1,0.31499,167.58)"
y1="39.281"
x1="150.81" />
<linearGradient
id="linearGradient4220"
y2="393.82"
gradientUnits="userSpaceOnUse"
x2="147"
gradientTransform="translate(133.53,-137.52)"
y1="375.93"
x1="138.4">
<stop
id="stop3406"
stop-color="#e5e5e5"
offset="0" />
<stop
id="stop8432"
stop-color="#4a4a4a"
offset=".5" />
<stop
id="stop3408"
stop-color="#b8b8b8"
offset="1" />
</linearGradient>
<linearGradient
id="linearGradient4224"
y2="323.45"
xlink:href="#linearGradient12398"
spreadMethod="reflect"
gradientUnits="userSpaceOnUse"
x2="126.66"
gradientTransform="matrix(0.67577,0,0,1.0025,38.717,-56.067)"
y1="294.99"
x1="125.67" />
<linearGradient
inkscape:collect="always"
xlink:href="#linearGradient4205"
id="linearGradient3039"
gradientUnits="userSpaceOnUse"
gradientTransform="translate(36.739,-340.31)"
x1="130.14"
y1="378.75"
x2="142.08"
y2="356.22" />
<linearGradient
inkscape:collect="always"
xlink:href="#linearGradient8414"
id="linearGradient3042"
gradientUnits="userSpaceOnUse"
gradientTransform="matrix(0.82457,0,0,0.95225,77.964,-33.22)"
x1="-96.9"
y1="38.985"
x2="-106.25"
y2="39.81" />
<linearGradient
inkscape:collect="always"
xlink:href="#linearGradient12398"
id="linearGradient3048"
gradientUnits="userSpaceOnUse"
gradientTransform="matrix(1.7486,0,0,1.1547,-185.669,-398.73)"
x1="104.03"
y1="370.93"
x2="99.469"
y2="371.23" />
<linearGradient
inkscape:collect="always"
xlink:href="#linearGradient8414"
id="linearGradient3051"
gradientUnits="userSpaceOnUse"
gradientTransform="matrix(0.99685,0,0,1,-96.47601,-35.21)"
x1="150.81"
y1="39.281"
x2="149.1"
y2="92.378" />
<linearGradient
inkscape:collect="always"
xlink:href="#linearGradient4220"
id="linearGradient3054"
gradientUnits="userSpaceOnUse"
gradientTransform="translate(36.739,-340.31)"
x1="138.4"
y1="375.93"
x2="147"
y2="393.82" />
<linearGradient
inkscape:collect="always"
xlink:href="#linearGradient12398"
id="linearGradient3057"
gradientUnits="userSpaceOnUse"
x1="141.6"
y1="73.656"
x2="143.65"
y2="38.906"
gradientTransform="matrix(0.99685,0,0,1,-96.16015,-36.38)" />
<linearGradient
inkscape:collect="always"
xlink:href="#linearGradient12398"
id="linearGradient3060"
gradientUnits="userSpaceOnUse"
gradientTransform="matrix(0.67577,0,0,1.0025,-58.074,-258.857)"
spreadMethod="reflect"
x1="125.67"
y1="294.99"
x2="126.66"
y2="323.45" />
</defs>
<path
id="path6381"
style="color:#000000;fill:url(#linearGradient3060);stroke:#6c6c6c;stroke-width:0.74076003;stroke-linejoin:bevel"
d="m 10.029,1.87 151.48,9.02 V 65.95 L 10.029,74.96 V 1.87 z"
inkscape:connector-curvature="0" />
<path
id="path8406"
d="M 10.064186,2.058 V 37.276 H 160.99724 V 11.058 l -150.933054,-9 z"
style="color:#000000;fill:url(#linearGradient3057)"
inkscape:connector-curvature="0" />
<path
id="path6385"
d="m 183.279,28.95 -22,-17.99 0.15,54.96 21.85,-18.04 V 28.95 z"
style="color:#000000;fill:url(#linearGradient3054)"
inkscape:connector-curvature="0" />
<path
id="path8410"
d="m 14.309,4.46 v 27.56 c 52.56,14.21 100.57,10.85 145.56,5.61 0.33,-18.99 0.37,-5.02 0.24,-22.71 -0.2,-1.4 -1.09,-2.67 -2.87,-2.78 L 14.309,4.46 z"
style="opacity:0.87879004;color:#000000;fill:url(#linearGradient3051)"
inkscape:connector-curvature="0" />
<rect
id="rect6383"
style="color:#000000;fill:url(#linearGradient3048);stroke:#6c6c6c;stroke-width:0.88362998;stroke-linejoin:bevel"
transform="scale(-1,1)"
height="75.316002"
width="11.302"
y="0.43999574"
x="-11.738998" />
<rect
id="rect6387"
style="color:#000000;fill:#e6e6e6;stroke:#6c6c6c;stroke-width:0.73321998;stroke-linejoin:bevel"
height="19.295"
width="24.275999"
y="28.854956"
x="183.34901" />
<rect
id="rect8434"
style="color:#000000;fill:url(#linearGradient3042)"
transform="scale(-1,1)"
height="71.794998"
width="7.7135"
y="1.9500055"
x="-9.6490021" />
<path
id="path8440"
style="color:#000000;fill:url(#linearGradient3039);stroke:#6c6c6c;stroke-width:0.89999998;stroke-linejoin:bevel"
d="m 183.279,28.95 -22,-17.99 0.15,54.96 21.85,-18.04 V 28.95 z"
inkscape:connector-curvature="0" />
<metadata
id="metadata34">
<rdf:RDF>
<cc:Work>
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<cc:license
rdf:resource="http://creativecommons.org/licenses/publicdomain/" />
<dc:publisher>
<cc:Agent
rdf:about="http://openclipart.org/">
<dc:title>Openclipart</dc:title>
</cc:Agent>
</dc:publisher>
<dc:title>Color tube White</dc:title>
<dc:date>2010-07-14T11:43:29</dc:date>
<dc:description>Colored tube of paint</dc:description>
<dc:source>http://openclipart.org/detail/72877/color-tube-white-by-trnsltlife</dc:source>
<dc:creator>
<cc:Agent>
<dc:title>TrnsltLife</dc:title>
</cc:Agent>
</dc:creator>
<dc:subject>
<rdf:Bag>
<rdf:li>Blanc</rdf:li>
<rdf:li>Colors of the spectrum</rdf:li>
<rdf:li>Couleurs du spectre</rdf:li>
<rdf:li>Quality</rdf:li>
<rdf:li>Qualité</rdf:li>
<rdf:li>White</rdf:li>
<rdf:li>clip art</rdf:li>
<rdf:li>clipart</rdf:li>
</rdf:Bag>
</dc:subject>
</cc:Work>
<cc:License
rdf:about="http://creativecommons.org/licenses/publicdomain/">
<cc:permits
rdf:resource="http://creativecommons.org/ns#Reproduction" />
<cc:permits
rdf:resource="http://creativecommons.org/ns#Distribution" />
<cc:permits
rdf:resource="http://creativecommons.org/ns#DerivativeWorks" />
</cc:License>
</rdf:RDF>
</metadata>
<path
style="fill:none;stroke:#858585;stroke-width:1.02495897px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 184.27401,29.132811 5.04646,18.73929"
id="path3062"
inkscape:connector-curvature="0" />
<path
style="fill:none;stroke:#858585;stroke-width:1.02495897px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 192.21925,29.132811 5.04646,18.73929"
id="path3062-7"
inkscape:connector-curvature="0" />
<path
style="fill:none;stroke:#858585;stroke-width:1.02495897px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 200.33352,29.132811 5.04646,18.739291"
id="path3062-7-0"
inkscape:connector-curvature="0" />
</svg>
......@@ -13,5 +13,5 @@ ActivityInfo {
manual: qsTr("The activity deals with mixing primary colors of light (additive mixing).
In case of light it is just the opposite of mixing color with paints! The more light you add the lighter the resultant color will get. Primary colors of light are red, green and blue.")
credit: qsTr("Openclipart.org")
credit: qsTr("Images from http://openclipart.org")
}
......@@ -13,9 +13,9 @@
id="svg2"
version="1.1"
inkscape:version="0.48.3.1 r9886"
width="104.93636"
height="92.312706"
sodipodi:docname="color_mix_light.svg">
width="100"
height="100"
sodipodi:docname="colormixlight.svg">
<metadata
id="metadata8">
<rdf:RDF>
......@@ -174,15 +174,15 @@
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1680"
inkscape:window-height="1026"
inkscape:window-width="1366"
inkscape:window-height="713"
id="namedview4"
showgrid="false"
inkscape:zoom="2.56"
inkscape:cx="18.814495"
inkscape:cy="45.751898"
inkscape:window-x="0"